Skip to content

Instantly share code, notes, and snippets.

@thebeebs

thebeebs/index.html

Created July 17, 2020 21:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save thebeebs/b9fddbdfa39e1833a2813ab3b3c70586 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save thebeebs/b9fddbdfa39e1833a2813ab3b3c70586 to your computer and use it in GitHub Desktop.
Download ZIP
status page concept
Raw
index.html
<div class="container">
<h1>MYOB Status Page Concept</h1>
<div class="accordion">
<dl>
<dt><a class="accordionTitle" href="#">MYOB Advanced</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<div class="accordionStatusItem itemN"><p>SYSTEM STATUS: NORMAL</p>
<br><p>2 days, 3 hours, 6 minutes and 11 seconds. </p></div>
<hr>
<div class="accordionStatusItem"><p>UPTIME OVERVIEW</p></div>
<hr>
<div class="accordionStatusItem"><p>SCHEDULED MAINTENENCE</p></div>
<hr>
<div class="accordionStatusItem"><p>ACTIVITY FEED</p></div>
</dd>
<dt><a href="#" class="accordionTitle D">MYOB EXO OnTheGo</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<div class="accordionStatusItem itemD"><p>SYSTEM STATUS: DISRUPTION</p>
<br><p>2 days, 3 hours, 6 minutes and 11 seconds. </p></div>
<hr>
<div class="accordionStatusItem"><p>UPTIME OVERVIEW</p></div>
<hr>
<div class="accordionStatusItem"><p>SCHEDULED MAINTENENCE</p></div>
<hr>
<div class="accordionStatusItem"><p>ACTIVITY FEED</p></div>
</dd>
<dt><a class="accordionTitle" href="#">MYOB HIVE</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<div class="accordionStatusItem itemN"><p>SYSTEM STATUS: NORMAL</p>
<br><p>2 days, 3 hours, 6 minutes and 11 seconds. </p></div>
<hr>
<div class="accordionStatusItem"><p>UPTIME OVERVIEW</p></div>
<hr>
<div class="accordionStatusItem"><p>SCHEDULED MAINTENENCE</p></div>
<hr>
<div class="accordionStatusItem"><p>ACTIVITY FEED</p></div>
</dd>
<dt><a class="accordionTitle" href="#">MYOB INFOCENTRAL</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<div class="accordionStatusItem itemN"><p>SYSTEM STATUS: NORMAL</p>
<br><p>2 days, 3 hours, 6 minutes and 11 seconds. </p></div>
<hr>
<div class="accordionStatusItem"><p>UPTIME OVERVIEW</p></div>
<hr>
<div class="accordionStatusItem"><p>SCHEDULED MAINTENENCE</p></div>
<hr>
<div class="accordionStatusItem"><p>ACTIVITY FEED</p></div>
</dd>
<dt><a href="#" class="accordionTitle PI">MYOB API</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<div class="accordionStatusItem itemPI"><p>SYSTEM STATUS: PERFORMANCE ISSUES</p>
<br><p>2 days, 3 hours, 6 minutes and 11 seconds. </p></div>
<hr>
<div class="accordionStatusItem"><p>UPTIME OVERVIEW</p></div>
<hr>
<div class="accordionStatusItem"><p>SCHEDULED MAINTENENCE</p></div>
<hr>
<div class="accordionStatusItem"><p>ACTIVITY FEED</p></div>
</dd>
<dt><a class="accordionTitle" href="#">MYOB Product X</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<div class="accordionStatusItem itemN"><p>SYSTEM STATUS: NORMAL</p>
<br><p>2 days, 3 hours, 6 minutes and 11 seconds. </p></div>
<hr>
<div class="accordionStatusItem"><p>UPTIME OVERVIEW</p></div>
<hr>
<div class="accordionStatusItem"><p>SCHEDULED MAINTENENCE</p></div>
<hr>
<div class="accordionStatusItem"><p>ACTIVITY FEED</p></div>
</dd>
</dl>
</div>
</div>
Raw
script.js
/*!
* classie - class helper functions
* from bonzo https://github.com/ded/bonzo
*
* classie.has( elem, 'my-class' ) -> true/false
* classie.add( elem, 'my-new-class' )
* classie.remove( elem, 'my-unwanted-class' )
* classie.toggle( elem, 'my-class' )
*/
/*jshint browser: true, strict: true, undef: true */
/*global define: false */
( function( window ) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else {
// browser global
window.classie = classie;
}
})( window );
//fake jQuery
var $ = function(selector){
return document.querySelector(selector);
}
var accordion = $('.accordion');
//add event listener to all anchor tags with accordion title class
accordion.addEventListener("click",function(e) {
e.stopPropagation();
e.preventDefault();
if(e.target && e.target.nodeName == "A") {
var classes = e.target.className.split(" ");
if(classes) {
for(var x = 0; x < classes.length; x++) {
if(classes[x] == "accordionTitle") {
var title = e.target;
//next element sibling needs to be tested in IE8+ for any crashing problems
var content = e.target.parentNode.nextElementSibling;
//use classie to then toggle the active class which will then open and close the accordion
classie.toggle(title, 'accordionTitleActive');
//this is just here to allow a custom animation to treat the content
if(classie.has(content, 'accordionItemCollapsed')) {
if(classie.has(content, 'animateOut')){
classie.remove(content, 'animateOut');
}
classie.add(content, 'animateIn');
}else{
classie.remove(content, 'animateIn');
classie.add(content, 'animateOut');
}
//remove or add the collapsed state
classie.toggle(content, 'accordionItemCollapsed');
}
}
}
}
});
Raw
status-page-concept.markdown
Raw
style.scss
@import "compass/css3";
* {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
@import url(https://fonts.googleapis.com/css?family=Ubuntu);
body {
background-color: #fff;
font-family:'Ubuntu';
}
hr {
opacity:0.3;
}
h1 {
font-size:1.5em;
color: #000;
opacity: 0.3;
padding:0.5em;
margin-bottom:1em;
text-align:center;
}
.accordion {
dl {
border:1px solid #eee;
&:after {
content: "";
display:block;
height:0em;
width:100%;
background-color:darken(#6fb72b, 10%);
}
}
dt {
>a {
text-align:center;
font-weight:50;
padding:2em;
display:block;
text-decoration:none;
color:#fff;
-webkit-transition:background-color 0.5s ease-in-out;
}
}
dd {
background-color:#fff;
font-size:1em;
line-height:1.5em;
>p {
padding:2em 2em 2em 2em;
}
}
}
.accordion {
position:relative;
background-color:#eee;
}
.container {
max-width:960px;
margin:0 auto;
padding:2em 0 2em 0;
}
// status normal //
.accordionTitle {
background-color:#6fb72b;
opacity:0.8;
border-bottom:10px solid #fff;
&:before {
content: "+";
font-size:1.5em;
opacity: 0.5;
line-height:0.5em;
float:left;
@include transition(transform 0.3s ease-in-out);
}
&:after {
content: "✓";
font-size:2em;
opacity: 0.9;
line-height:0.5em;
float:right;
margin-right:0.5em;
@include transition(transform 0.3s ease-in-out);
}
&:hover {
background-color:darken(#6fb72b, 10%);
}
}
.accordionTitleActive {
background-color:darken(#6fb72b, 10%);
&:before {
-webkit-transform:rotate(-225deg);
-moz-transform:rotate(-225deg);
transform:rotate(-225deg);
}
}
// status disruption
.D {
background-color:#f54257;
opacity:1.0;
border-bottom:10px solid #fff;
&:before {
content: "+";
font-size:1.5em;
opacity: 0.5;
line-height:0.5em;
float:left;
@include transition(transform 0.3s ease-in-out);
}
&:after {
content: "!";
font-size:2em;
opacity: 0.9;
line-height:0.5em;
float:right;
margin-right:0.8em;
@include transition(transform 0.3s ease-in-out);
}
&:hover {
background-color:darken(#f54257, 10%);
}
}
.DActive {
background-color:darken(#f54257, 10%);
&:before {
-webkit-transform:rotate(-225deg);
-moz-transform:rotate(-225deg);
transform:rotate(-225deg);
}
}
// status performance issues
.PI {
background-color:#ffc300;
opacity:1.0;
border-bottom:10px solid #fff;
&:before {
content: "+";
font-size:1.5em;
opacity: 0.5;
line-height:0.5em;
float:left;
@include transition(transform 0.3s ease-in-out);
}
&:after {
content: "⚠";
font-size:2em;
opacity: 0.9;
line-height:0.5em;
float:right;
margin-right:0.5em;
@include transition(transform 0.3s ease-in-out);
}
&:hover {
background-color:darken(#ffc300, 10%);
}
}
.PIActive {
background-color:darken(#ffc300, 10%);
&:before {
-webkit-transform:rotate(-225deg);
-moz-transform:rotate(-225deg);
transform:rotate(-225deg);
}
}
// item details
.accordionItem {
height:auto;
overflow:hidden;
//SHAME: magic number to allow the accordion to animate
@media all {
max-height:50em;
@include transition(max-height 1s);
}
@media screen and (min-width:48em) {
max-height:50em;
@include transition(max-height 0.5s);
}
}
.accordionItemCollapsed {
max-height:0;
}
.accordionStatusItem {
text-align:center;
opacity:0.7;
padding:1em;
color:#686868;
font-size:1.5em;
}
// item normal
.itemN {
text-align:center;
opacity:0.7;
padding:1em;
color:#6fb72b;
font-size:1.5em;
}
// item disruption
.itemD {
text-align:center;
opacity:0.7;
padding:1em;
color:#f54257;
font-size:1.5em;
}
// item performance issues
.itemPI {
text-align:center;
opacity:0.7;
padding:1em;
color:#ec6915;
font-size:1.5em;
}
.animateIn {
-webkit-animation-name: accordionIn;
-webkit-animation-duration: 0.65s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: normal;
-moz-animation-duration: 0.65s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
animation-name: accordionIn;
animation-duration: 0.65s;
animation-iteration-count: 1;
animation-direction: normal;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
animation-delay: 0s;
}
.animateOut {
-webkit-animation-name: accordionOut;
-webkit-animation-duration: 0.75s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: accordionOut;
-moz-animation-duration: 0.75s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
animation-name: accordionOut;
animation-duration: 0.75s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
animation-delay: 0s;
}
@-webkit-keyframes accordionIn {
0% {
opacity: 0;
-webkit-transform:scale(0.8);
}
100% {
opacity:1;
-webkit-transform:scale(1);
}
}
@-moz-keyframes accordionIn {
0% {
opacity: 0;
-moz-transform:scale(0.8);
}
100% {
opacity:1;
-moz-transform:scale(1);
}
}
@keyframes accordionIn {
0% {
opacity: 0;
transform:scale(0.8);
}
100% {
opacity:1;
transform:scale(1);
}
}
@-webkit-keyframes accordionOut {
0% {
opacity: 1;
-webkit-transform:scale(1);
}
100% {
opacity:0;
-webkit-transform:scale(0.8);
}
}
@-moz-keyframes accordionOut {
0% {
opacity: 1;
-moz-transform:scale(1);
}
100% {
opacity:0;
-moz-transform:scale(0.8);
}
}
@keyframes accordionOut {
0% {
opacity: 1;
transform:scale(1);
}
100% {
opacity:0;
transform:scale(0.8);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment