Timeline
Inspired by the timeline component in Timber, timelines can prove to be an interesting way of presenting a list of events in chronological order. This example is responsive; in allowing the layout to adapt for both small and wide screen widths. A website author is able to login, to add new entries to the timeline, using a loop element. The dates, event titles and descriptions are all editable using a combination of short text and long text elements.
Example
-
2007 - 2008
Massachusetts Institute of Technology
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta repudiandae rem ex eos reiciendis libero laudantium reprehenderit temporibus odio, incidunt quisquam maiores. Possimus nesciunt eveniet error voluptatum recusandae odio ex.
-
2004 - 2006
Parsons School of Design
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci, voluptatum eaque, nulla ab minus esse animi eos quis assumenda repellat voluptas. Est, magnam libero placeat neque autem tempore.
-
2002 - 2004
Berkley College
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut necessitatibus blanditiis tenetur amet, omnis consequuntur quis. Deserunt reiciendis cumque atque non dolor porro, ullam, placeat a magnam debitis ea laboriosam.
HTML & PHP
<ul class="timeline">
<?php foreach ((new WYLoopElement())->aLoopIDs("Timeline Item") as $webyep_oCurrentLoop->iLoopID) { $loopid=$webyep_oCurrentLoop->iLoopID; $_SESSION["loopid"]=$loopid; $webyep_oCurrentLoop->loopStart(true,$webyep_oCurrentLoop->iLoopID); // WebYepV2 ?>
<li>
<div class="timeline_row">
<div class="timeline_date">
<?php webyep_shortText("Date", false, 550, 240); // WebYepV2 ?>
</div>
<div class="timeline_description">
<h4 class="timeline_description_title">
<?php webyep_shortText("Title", false, 550, 240); // WebYepV2 ?>
</h4>
<p class="timeline_description_text">
<?php webyep_longText("Description", false, "", true, 600, 400); // WebYepV2 ?>
</p>
</div>
</div>
</li>
<?php $webyep_oCurrentLoop->loopEnd(); } unset($_SESSION["loopid"]); // WebYepV2 ?>
</ul>
CSS
ul.timeline *,
ul.timeline:after,
ul.timeline:before {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ul.timeline {
padding: 0 0 0 2rem;
margin: 2rem 0;
list-style: none;
}
ul.timeline li {
padding: 0;
margin: 0;
}
.timeline_row {
width: auto;
margin-right: -1.5rem;
margin-left: -1.5rem;
}
.timeline_row:before {
height: 0;
content: ".";
display: block;
overflow: hidden;
}
.timeline_date {
line-height: 1;
padding-left: 5rem;
padding-right: 5rem;
position: relative;
z-index: 1;
float: left;
width: 100%;
}
.timeline_date:before {
left: 1.85rem;
width: 0.15rem;
content: "";
background-color: #cccccc;
position: absolute;
top: 0;
bottom: 0;
}
.timeline li:last-child .timeline_date:before {
display: none;
}
.timeline_date:after {
left: 1.55rem;
width: 12px;
height: 12px;
border-radius: 50%;
content: "";
border: 0.15rem solid #333;
background-color: #fff;
position: absolute;
top: 0;
z-index: 100;
}
.timeline_description {
padding-left: 5rem;
padding-right: 2rem;
position: relative;
}
.timeline_description:before {
left: 1.85rem;
width: 0.15rem;
content: "";
background-color: #cccccc;
position: absolute;
top: 0;
bottom: 0;
}
.timeline li:last-child .timeline_description:before {
display: none;
}
.timeline_description_title {
margin: 0;
padding: 3rem 0 1rem 0;
font-family: sans-serif;
font-size: 1.5rem;
font-weight: normal;
line-height: 1.2;
}
.timeline_description_text {
margin: 0;
padding-bottom: 3rem;
}
@media screen and (min-width: 996px) {
.timeline_row {
height: auto;
overflow: auto;
}
.timeline_date {
width: 12rem;
text-align: right;
padding-left: 0;
padding-right: 2rem;
padding-top: 0.5rem;
}
.timeline_date:after {
left: 100%;
top: 0.5rem;
}
.timeline_date:before {
display: none;
}
.timeline_description {
width: calc(100% - 15rem);
padding-left: 3rem;
float: left;
}
.timeline_description:before {
left: 0.30rem;
}
.timeline li:first-child .timeline_description:before {
top: 1rem;
}
.timeline li:last-child .timeline_description:before {
display: block;
left: 0.30rem;
width: 0.15rem;
height: 1rem;
content: "";
background-color: #cccccc;
position: absolute;
top: 0;
}
.timeline_description_title {
padding: 0 0 1rem 0;
}
}
Javascript