Skip to content

Instantly share code, notes, and snippets.

@aelbore
Created November 16, 2020 05:26
Show Gist options
  • Save aelbore/ee4de1fdfdfe720434d85bdb298876c6 to your computer and use it in GitHub Desktop.
Save aelbore/ee4de1fdfdfe720434d85bdb298876c6 to your computer and use it in GitHub Desktop.
Timeline
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,600,700' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<button id="toggleButton">Toggle</button>
<ul class="timeline" id="timeline">
<li class="li complete">
<div class="timestamp">
<span class="author">Abhi Sharma</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Shift Created </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Email Sent </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Aaron Rodgers</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> SIC Approval </h4>
</div>
</li>
<li class="li">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">TBD<span>
</div>
<div class="status">
<h4> Shift Completed </h4>
</div>
</li>
</ul>
var completes = document.querySelectorAll(".complete");
var toggleButton = document.getElementById("toggleButton");
function toggleComplete(){
var lastComplete = completes[completes.length - 1];
lastComplete.classList.toggle('complete');
}
toggleButton.onclick = toggleComplete;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
.timeline
list-style-type: none
display: flex
align-items: center
justify-content: center
.li
transition: all 200ms ease-in
.timestamp
margin-bottom: 20px
padding: 0px 40px
display: flex
flex-direction: column
align-items: center
font-weight: 100
.status
padding: 0px 40px
display: flex
justify-content: center
border-top: 2px solid #D6DCE0
position: relative
transition: all 200ms ease-in
h4
font-weight: 600
&:before
content: ''
width: 25px
height: 25px
background-color: white
border-radius: 25px
border: 1px solid #ddd
position: absolute
top: -15px
left: 42%
transition: all 200ms ease-in
.li.complete
.status
border-top: 2px solid #66DC71
&:before
background-color: #66DC71
border: none
transition: all 200ms ease-in
h4
color: #66DC71
@media (min-device-width: 320px) and (max-device-width: 700px)
.timeline
list-style-type: none
display: block
.li
transition: all 200ms ease-in
display: flex
width: inherit
.timestamp
width: 100px
.status
&:before
left: -8%
top: 30%
transition: all 200ms ease-in
/// Layout stuff
html,body
width: 100%
height: 100%
display: flex
justify-content: center
font-family: 'Titillium Web', sans serif
color: #758D96
button
position: absolute
width: 100px
min-width: 100px
padding: 20px
margin: 20px
font-family: 'Titillium Web', sans serif
border: none
color: white
font-size: 16px
text-align: center
#toggleButton
position: absolute
left: 50px
top: 20px
background-color: #75C7F6

Timeline

Simple timeline abstraction for an email workflow approval process we have with one of our internal tools

A Pen by Jay on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment