Simple timeline abstraction for an email workflow approval process we have with one of our internal tools
A Pen by Michael Crump on CodePen.
Created
February 18, 2020 23:27
-
-
Save mbcrump/fe2f96ed7ae9e530e065d8663a5aa6eb 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
| <body style="background-color:black;"> | |
| <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" hidden="true">Toggle</button> | |
| <ul class="timeline" id="timeline"> | |
| <li class="li intro" id="intro"> | |
| <div class="status"> | |
| <h4> Intro </h4> | |
| </div> | |
| </li> | |
| <li class="li devnews" id="devnews"> | |
| <div class="status"> | |
| <h4> Developer News </h4> | |
| </div> | |
| </li> | |
| <li class="li topic1" id="topic1"> | |
| <div class="status"> | |
| <h4> Frontpage? </h4> | |
| </div> | |
| <li class="li topic2" id="topic2"> | |
| <div class="status"> | |
| <h4> BUILD - .NET Interactive </h4> | |
| </div> | |
| </li> | |
| <li class="li wrapup" id="wrapup"> | |
| <div class="status"> | |
| <h4> Wrap-up </h4> | |
| </div> | |
| </li> | |
| </li> | |
| </ul> | |
| <a href="#" id="edit">Edit</a> |
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; | |
| var div1 = document.getElementsByClassName("intro")[0]; | |
| $(".intro").click(function() { | |
| div1.classList.toggle("complete"); | |
| }); | |
| var div2 = document.getElementsByClassName("devnews")[0]; | |
| $(".devnews").click(function() { | |
| div2.classList.toggle("complete"); | |
| }); | |
| toggleButton.onclick = toggleComplete; | |
| var div3 = document.getElementsByClassName("topic1")[0]; | |
| $(".topic1").click(function() { | |
| div3.classList.toggle("complete"); | |
| }); | |
| toggleButton.onclick = toggleComplete; | |
| var div4 = document.getElementsByClassName("topic2")[0]; | |
| $(".topic2").click(function() { | |
| div4.classList.toggle("complete"); | |
| }); | |
| toggleButton.onclick = toggleComplete; | |
| var div5 = document.getElementsByClassName("wrapup")[0]; | |
| $(".wrapup").click(function() { | |
| div5.classList.toggle("complete"); | |
| }); | |
| $("#edit").click(function() { | |
| $(".status").attr("contentEditable", "true"); | |
| }); |
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="https://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