diff options
Diffstat (limited to 'layouts/partials')
-rw-r--r-- | layouts/partials/custom/above-footer.html | 8 | ||||
-rw-r--r-- | layouts/partials/custom/above-header.html | 8 | ||||
-rw-r--r-- | layouts/partials/custom/below-footer.html | 8 | ||||
-rw-r--r-- | layouts/partials/custom/below-header.html | 8 | ||||
-rw-r--r-- | layouts/partials/custom/meta.html | 8 | ||||
-rw-r--r-- | layouts/partials/footer.html | 1 | ||||
-rw-r--r-- | layouts/partials/header.html | 1 | ||||
-rw-r--r-- | layouts/partials/js.html | 152 | ||||
-rw-r--r-- | layouts/partials/meta.html | 40 |
9 files changed, 201 insertions, 33 deletions
diff --git a/layouts/partials/custom/above-footer.html b/layouts/partials/custom/above-footer.html new file mode 100644 index 0000000..1dadab6 --- /dev/null +++ b/layouts/partials/custom/above-footer.html @@ -0,0 +1,8 @@ +<!-- + +This file can be used to add custom HTML +to your cState powered status page. + +https://github.com/mistermantas/cstate/wiki/Customization + +--> diff --git a/layouts/partials/custom/above-header.html b/layouts/partials/custom/above-header.html new file mode 100644 index 0000000..1dadab6 --- /dev/null +++ b/layouts/partials/custom/above-header.html @@ -0,0 +1,8 @@ +<!-- + +This file can be used to add custom HTML +to your cState powered status page. + +https://github.com/mistermantas/cstate/wiki/Customization + +--> diff --git a/layouts/partials/custom/below-footer.html b/layouts/partials/custom/below-footer.html new file mode 100644 index 0000000..1dadab6 --- /dev/null +++ b/layouts/partials/custom/below-footer.html @@ -0,0 +1,8 @@ +<!-- + +This file can be used to add custom HTML +to your cState powered status page. + +https://github.com/mistermantas/cstate/wiki/Customization + +--> diff --git a/layouts/partials/custom/below-header.html b/layouts/partials/custom/below-header.html new file mode 100644 index 0000000..1dadab6 --- /dev/null +++ b/layouts/partials/custom/below-header.html @@ -0,0 +1,8 @@ +<!-- + +This file can be used to add custom HTML +to your cState powered status page. + +https://github.com/mistermantas/cstate/wiki/Customization + +--> diff --git a/layouts/partials/custom/meta.html b/layouts/partials/custom/meta.html new file mode 100644 index 0000000..1dadab6 --- /dev/null +++ b/layouts/partials/custom/meta.html @@ -0,0 +1,8 @@ +<!-- + +This file can be used to add custom HTML +to your cState powered status page. + +https://github.com/mistermantas/cstate/wiki/Customization + +--> diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 085b814..d6b5486 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,3 +1,4 @@ + <div class="footer"> <div class="contain"> <p><strong>{{ now.Year }} © {{ .Site.Title }}</strong> diff --git a/layouts/partials/header.html b/layouts/partials/header.html index c378998..94bef80 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,3 +1,4 @@ + {{ if .Site.Params.useLargeHeaderDesign }} <div class="header header--large"> <div class="contain contain--more center"> diff --git a/layouts/partials/js.html b/layouts/partials/js.html index d47cd5d..a26d36c 100644 --- a/layouts/partials/js.html +++ b/layouts/partials/js.html @@ -18,48 +18,150 @@ } else { document.querySelector('meta[name=theme-color]').setAttribute('content', themeNoticeColor); } +</script> - +<!-- +<script> /** * Check for internet */ - var lastUpdated = document.querySelector('.summary__date'); - var lastUpdate = new Date(); + function hasClass(element, className) { + return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1; + } + + if (hasClass(document.querySelector('body'), 'status-homepage')) { + var lastUpdated = document.querySelector('.summary__date'); + var lastUpdate = new Date(); - function timeSince(date) { - var seconds = Math.floor((new Date() - date) / 1000); + function timeSince(date) { + var seconds = Math.floor((new Date() - date) / 1000); - var interval = Math.floor(seconds / 31536000); + var interval = Math.floor(seconds / 31536000); - if (interval > 1) { - return interval + ' years'; + if (interval > 1) { + return interval + ' years'; + } + interval = Math.floor(seconds / 2592000); + if (interval > 1) { + return interval + ' months'; + } + interval = Math.floor(seconds / 86400); + if (interval > 1) { + return interval + 'd'; + } + interval = Math.floor(seconds / 3600); + if (interval > 1) { + return interval + 'h'; + } + interval = Math.floor(seconds / 60); + if (interval > 1) { + return interval + ' min'; + } + return Math.floor(seconds) + 's'; } - interval = Math.floor(seconds / 2592000); - if (interval > 1) { - return interval + ' months'; + var aDay = 24*60*60*1000; + } + + function checkCurrentStatus() { + // Check for each status + if (hasClass(document.querySelector('body'), 'status-ok')) { + window.currentState = 'Operational'; } - interval = Math.floor(seconds / 86400); - if (interval > 1) { - return interval + 'd'; + if (hasClass(document.querySelector('body'), 'status-disrupted')) { + window.currentState = 'Disrupted'; } - interval = Math.floor(seconds / 3600); - if (interval > 1) { - return interval + 'h'; + if (hasClass(document.querySelector('body'), 'status-down')) { + window.currentState = 'Down'; } - interval = Math.floor(seconds / 60); - if (interval > 1) { - return interval + 'min'; + if (hasClass(document.querySelector('body'), 'status-notice')) { + window.currentState = 'Maintenance'; } - return Math.floor(seconds) + 's'; } - var aDay = 24*60*60*1000; + checkCurrentStatus(); + + // Set for first time use + if (typeof(Storage) !== 'undefined') { + window.sessionStorage.setItem('priorState', currentState); + } // Show second by second updates window.setInterval(function() { - lastUpdated.innerHTML = 'Last checked ' + timeSince(lastUpdate) + ' ago'; + if (hasClass(document.querySelector('body'), 'status-homepage')) { + lastUpdated.innerHTML = 'Last checked ' + timeSince(lastUpdate) + ' ago'; + } + + checkCurrentStatus(); + + if (typeof(Storage) !== "undefined") { + if (window.sessionStorage.getItem('priorState') !== currentState) { + displayNotification('Status changed from ' + window.sessionStorage.getItem('priorState') + ' to ' + currentState); + } + + window.sessionStorage.setItem('priorState', currentState); + } else { + console.log('UNSUPPORTED - SMART NOTIFICATIONS'); + } }, 1000); + + + /** + * Modern browser shiz + */ + + if (navigator.serviceWorker) { + console.log('Service Worker and Push is supported'); + + navigator.serviceWorker.register('sw.js') + .then(function(swReg) { + console.log('Service Worker is registered', swReg); + + swRegistration = swReg; + }) + .catch(function(error) { + console.error('Service Worker Error', error); + }); + } else { + console.log('Push messaging is not supported'); + } + + + Notification.requestPermission(function(status) { + console.log('Notification permission status:', status); + }); + + + function displayNotification(title, body) { + if (Notification.permission == 'granted') { + navigator.serviceWorker.getRegistration().then(function(reg) { + var options = { + body: body, + icon: '/favicon.png', + vibrate: [100, 50, 100], + data: { + dateOfArrival: Date.now(), + primaryKey: 1 + }, + actions: [ + {action: 'view', title: 'View incident'}, + {action: 'close', title: 'Dismiss'}, + ] + }; + reg.showNotification(title, options); + }); + } + } </script> -{{ with .Site.Params.customJS }} -<script type="text/javascript" src="{{ . }}"></script> +--> + +{{ if ne .Site.Params.googleAnalytics "UA-00000000-1" }} + <!-- Global site tag (gtag.js) - Google Analytics --> + <script type="text/javascript" defer src="https://www.googletagmanager.com/gtag/js?id=UA-109775664-1"></script> + <script type="text/javascript" defer> + window.dataLayer = window.dataLayer || []; + function gtag(){dataLayer.push(arguments);} + gtag('js', new Date()); + + gtag('config', '{{ .Site.Params.googleAnalytics }}'); + </script> {{ end }} diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html index 2bef153..7b45778 100644 --- a/layouts/partials/meta.html +++ b/layouts/partials/meta.html @@ -132,7 +132,7 @@ } .summary__date:hover { - color: #{{ .Site.Params.faded }}; + color: #ccc; } .summary__date:hover:after { @@ -141,21 +141,47 @@ } .components { - border: 2px solid #{{ .Site.Params.border }}; + border: 2px solid #ddd; border-bottom: 0; } .component { color: #000; padding: 16px; - border-bottom: 2px solid #{{ .Site.Params.border }}; + border-bottom: 2px solid #ddd; + } + + .description { cursor: pointer; position: relative; } + .description__text { display: none; } + .description:hover .description__text, + .description:active .description__text { + display: block; + position: absolute; + top: 0; + left: 32px; + background: #181818; + color: #fff; + z-index: 50; + padding: 8px; + border: 2px solid #242424; + font-size: 14px; + color: #ccc; + width: 1000%; + height: auto; + } + + @media (max-width: 640px) { + .description:hover .description__text, + .description:active .description__text { + width: 50vw; + } } .ok { color: #{{ .Site.Params.ok }}; } .error { color: #{{ .Site.Params.down }}; } .footer { - margin-top: 20px; + padding: 10px; background: #f5f5f5; } @@ -230,7 +256,7 @@ .status-down .announcement-box { border: 2px solid #{{ .Site.Params.down }}; } .status-notice .announcement-box { border: 2px solid #{{ .Site.Params.notice }}; } - .status .announcement-box { border-bottom-width: 1px; } + .status-homepage .announcement-box { border-bottom-width: 1px; } /** @@ -254,7 +280,5 @@ } } </style> - {{ with .Site.Params.customCSS }} - <link href="{{ . }}" rel="stylesheet"> - {{ end }} + </head> |