aboutsummaryrefslogtreecommitdiff
path: root/layouts
diff options
context:
space:
mode:
authorKevin Hamer <kevin@imarc.com>2020-10-11 17:12:45 -0400
committerMantas Vilčinskas <hi@mnts.lt>2020-10-27 21:38:46 +0200
commit78b3b15525d756c5b522b07e98049dcb9c024a6a (patch)
tree57f0eb54db845ca730e54d1e087f63c10f53dd78 /layouts
parente8e50381292a6532cdc3c2802f37262b279fe30b (diff)
Add .relative-time class and JS logic
Diffstat (limited to 'layouts')
-rw-r--r--layouts/issues/small.html18
-rw-r--r--layouts/partials/index/summary.html4
-rw-r--r--layouts/partials/js.html93
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>