Tijdlijn

V000-05

Tijdlijn met afbeedling en teksten. De beheerder kan zoveel items toevoegen aan de tijdlijk als ze willen.

Is te zien op:

• https://www.makedoniawinschoten.nl/historie/

Voorvertoning

Hoe te gebruiken?

HTML
Kopiëren<div class="timeline">
	<nc-preset-list name="timeline">
		<div class="timeline-item">
			<div class="timeline-badge"></div>

			<div class="timeline-panel">
				<nc-image width="640" name="{%name%}-image" attributes="class=timeline-image"></nc-image>

				<div class="timeline-content">
					<nc-element name="{%name%}-title" attributes="class=h2 timeline-title" type="p"></nc-element>
					<nc-text name="{%name%}-content" attributes="class=timeline-description"></nc-text>
				</div>
			</div>
		</div>
	</nc-preset-list>
</div>

CSS
Kopiëren /* Timeline */

.timeline {
	position: relative;
	--line-width: 4px;
	--scale-size: 4rem;
	--offset-size: 4rem;

	background-color: transparent !important;
}
.timeline .timeline-item {
	display: flex;
	position: relative;
	min-height: calc(var(--offset-size) * 2 + 0.5rem);
}
/* Create a panel for the timeline item. */
.timeline .timeline-item .timeline-panel {
	z-index: 2;
	position: relative;
	margin-bottom: 1rem;
	margin-left: calc(var(--scale-size) * 1.5);
	border-radius: var(--panel-radius);
	overflow: hidden;
}
.timeline .timeline-item .timeline-panel .timeline-content {
	padding: var(--panel-padding);
}
.timeline
	.timeline-item
	.timeline-panel
	.timeline-content
	[data-partial="text"]
	p:last-of-type {
	margin-bottom: 0;
}

/* Create a line running along side the item. */
.timeline .timeline-item::before {
	content: "";
	position: absolute;
	width: var(--line-width);
	top: 0;
	bottom: 0;
	left: calc(calc(var(--scale-size) / 2) - calc(var(--line-width) / 2));
}
/* Start the line from the first badge. */
.timeline .timeline-item:first-child::before {
	top: var(--scale-size);
}
/* Stop the line at the last badge. */
.timeline .timeline-item:last-child::before {
	bottom: calc(100% - var(--scale-size));
}

/* Create a badge. */
.timeline .timeline-item .timeline-badge {
	position: absolute;
	display: block;
	width: var(--scale-size);
	height: var(--scale-size);
	left: 0;
	top: 0;
	margin-top: calc(var(--scale-size) / 2);

	border-radius: 999px;
	z-index: 1;
}
/* Allow for a badge icon. */
.timeline .timeline-item .timeline-badge::after {
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	line-height: 1;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/* Create an indicator pointing to the badge. */
.timeline .timeline-item .timeline-badge::before {
	position: absolute;
	display: inline-block;
	content: "";
	z-index: -1;
	width: calc(var(--scale-size) / 1.5);
	height: calc(var(--scale-size) / 1.5);
	transform: rotate(45deg);
	right: calc(0px - var(--scale-size));
	top: calc(var(--scale-size) / 6.25);
}

@media screen and (min-width: 992px) {
	.timeline .timeline-item:nth-child(2n) {
		justify-content: end;
	}
	/* Move items up so they "overlap". */
	body:not([data-editor-mode="content"]):not([data-editor-mode="layout"]) .timeline .timeline-item:not(:first-child) {
		margin-top: calc(0px - var(--offset-size));
	}
	/* Adjust bottom bar because of the "overlap". */
	.timeline .timeline-item:not(:last-child)::before {
		bottom: var(--offset-size);
	}
	/* Move line to the center. */
	.timeline .timeline-item::before {
		left: calc(50% - calc(var(--line-width) / 2));
	}

	/* Half the width of the panel. */
	.timeline .timeline-item .timeline-panel {
		width: 42.5%;
		margin-left: 0;
	}

	/* Move the badge to the center. */
	.timeline .timeline-item .timeline-badge {
		left: calc(50% - calc(var(--scale-size) / 2));
	}
	/* Move the indicator pointing to the badge. */
	.timeline .timeline-item:nth-child(2n + 1) .timeline-badge::before {
		left: calc(0px - var(--scale-size));
		right: unset;
	}
}
/* Adjust the position of the badge on wider screens. */
@media screen and (min-width: 1200px) {
	.timeline .timeline-item:nth-child(2n) .timeline-badge::before {
		right: calc(0px - calc(var(--scale-size) * 1.25));
	}
	.timeline .timeline-item:nth-child(2n + 1) .timeline-badge::before {
		left: calc(0px - calc(var(--scale-size) * 1.25));
	}
}

/* Add hover animation to the panel */
.timeline .timeline-item .timeline-panel {
	transition-property: box-shadow, transform;
	transition-duration: 500ms;
	transition-timing-function: ease-in-out;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
.timeline .timeline-item .timeline-panel:hover {
	/* transform: scale(1.05); */
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Define the colors to use. */
.timeline .timeline-item::before,
.timeline .timeline-item .timeline-badge,
.timeline .timeline-item .timeline-badge::before,
.timeline .timeline-item .timeline-panel {
	color: white;
	background-color: var(--primary);
}

/* Give timeline badge an icon. */
.timeline .timeline-item .timeline-badge::after {
	font: var(--fa-font);
	font-size: calc(var(--scale-size) / 2);
	content: "\f073";
}