diff options
| -rw-r--r-- | layouts/issues/small.html | 18 | ||||
| -rw-r--r-- | layouts/partials/index/summary.html | 4 | ||||
| -rw-r--r-- | layouts/partials/js.html | 93 |
3 files changed, 59 insertions, 56 deletions
diff --git a/layouts/issues/small.html b/layouts/issues/small.html index 6ed2cce..6112e46 100644 --- a/layouts/issues/small.html +++ b/layouts/issues/small.html @@ -7,8 +7,8 @@ <a href="{{ .Permalink }}" class="issue no-underline"> {{ if .Params.informational }} - - <small class="date float-right"> + + <small class="date float-right relative-time" title="{{ .Date.Format "02 Jan 2006 03:05:00 PM" }}"> {{ if .Site.Params.dateFormat }} {{ .Date.Format .Site.Params.dateFormat }} {{ else }} @@ -21,9 +21,9 @@ </h3> <span class="faded">{{ .Summary | truncate 200 }} </span> - + {{ else if .Params.Resolved }} - <small class="date float-right"> + <small class="date float-right relative-time" title="{{ .Date.Format "02 Jan 2006 03:05:00 PM" }}"> {{ if .Site.Params.dateFormat }} {{ .Date.Format .Site.Params.dateFormat }} {{ else }} @@ -67,7 +67,7 @@ {{ end }} {{ else }} - <small class="date float-right"> + <small class="date float-right relative-time" title="{{ .Date.Format "02 Jan 2006 03:05:00 PM" }}"> {{ if .Site.Params.dateFormat }} {{ .Date.Format .Site.Params.dateFormat }} {{ else }} @@ -82,17 +82,17 @@ <!-- Marker --> {{ if eq .Params.severity "notice" }} <strong class="warning"> - ◆ + ◆ {{ T "downtimeOngoing" }} </strong> {{ else }} <strong class="error"> {{ if eq .Params.severity "down" }} - ■ + ■ {{ else if eq .Params.severity "disrupted" }} - ▲ + ▲ {{ else }} - ◆ + ◆ {{ end }} {{ T "downtimeOngoing" }} </strong> diff --git a/layouts/partials/index/summary.html b/layouts/partials/index/summary.html index de6bceb..dcf753c 100644 --- a/layouts/partials/index/summary.html +++ b/layouts/partials/index/summary.html @@ -20,5 +20,5 @@ {{ end }}{{ end }}{{ end }} </strong> - <div class="summary__date clicky float-right" onclick="location.reload()"></div> -</div>
\ No newline at end of file + <div class="summary__date clicky float-right relative-time" onclick="location.reload()" data-prefix="{{ T "lastChecked" }} "></div> +</div> diff --git a/layouts/partials/js.html b/layouts/partials/js.html index fbe102c..7971bc5 100644 --- a/layouts/partials/js.html +++ b/layouts/partials/js.html @@ -41,58 +41,61 @@ } /** - * Timer + * Returns a relative date string for the given date. */ + function timeSince(date) { + var seconds = Math.floor((new Date() - date) / 1000); - function hasClass(element, className) { - return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1; - } - - if (hasClass(document.querySelector('body'), 'status-homepage')) { - var lastUpdated = document.querySelector('.summary__date'); - lastUpdated.innerHTML = '{{ T "lastChecked" }} {{ T "justNow" }}'; - - var lastUpdate = new Date(); - - 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 + ' {{ T "yearsAgo" }}'; - } - interval = Math.floor(seconds / 2592000); - if (interval > 1) { - return interval + ' {{ T "monthsAgo" }}'; - } - interval = Math.floor(seconds / 86400); - if (interval > 1) { - return interval + '{{ T "daysAgo" }}'; - } - interval = Math.floor(seconds / 3600); - if (interval > 1) { - return interval + '{{ T "hoursAgo" }}'; - } - interval = Math.floor(seconds / 60); - if (interval > 1) { - return interval + ' {{ T "minsAgo" }}'; - } - return Math.floor(seconds) + '{{ T "secondsAgo" }}'; + if (interval > 1) { + return interval + ' {{ T "yearsAgo" }}'; + } + interval = Math.floor(seconds / 2592000); + if (interval > 1) { + return interval + ' {{ T "monthsAgo" }}'; + } + interval = Math.floor(seconds / 86400); + if (interval > 1) { + return interval + '{{ T "daysAgo" }}'; } - var aDay = 24*60*60*1000; + interval = Math.floor(seconds / 3600); + if (interval > 1) { + return interval + '{{ T "hoursAgo" }}'; + } + interval = Math.floor(seconds / 60); + if (interval > 1) { + return interval + ' {{ T "minsAgo" }}'; + } + return Math.floor(seconds) + '{{ T "secondsAgo" }}'; } - window.setInterval(function() { - if (hasClass(document.querySelector('body'), 'status-homepage')) { - lastUpdated.innerHTML = '{{ T "lastChecked" }} ' + timeSince(lastUpdate) + ' {{ T "someTimeAgo" }}'; + /** + * Changes elements with the class 'relative-time' into relative times and + * moves the timestamp to a title attribute tooltip. + */ + function updateRelativeTimes() { + document.querySelectorAll('.relative-time') + .forEach(function(element) { + var time = Date.parse(element.getAttribute('title')); + var html = element.getAttribute('data-prefix') || ''; + if (!time) { + time = element.innerText; + element.setAttribute('title', time || new Date); + html += '{{ T "justNow" }}'; + } else { + html += timeSince(time) + ' {{ T "someTimeAgo" }}'; + } + element.innerHTML = html.trim(); + }) + } + updateRelativeTimes(); + setInterval(updateRelativeTimes, 5000); - // Refresh almost every 5m - if (Math.floor(new Date() - lastUpdate) > 290000) { - location.reload(); - } - } - }, 5000) + // Reload homepage eevery 290 seconds + if (document.querySelector('body.status-homepage')) { + setInterval(location.reload, 290000) + } </script> |