Simple timeline abstraction for an email workflow approval process we have with one of our internal tools
A Pen by Abhi Sharma on CodePen.
Created
August 1, 2015 23:04
-
-
Save vijayrajanna/f2cc10e26e70bb4195a9 to your computer and use it in GitHub Desktop.
Timeline
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href='http://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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment