From 9baec9aec294656fb632123906b4ac6a712267ba Mon Sep 17 00:00:00 2001 From: Bastien Wirtz Date: Mon, 18 Feb 2019 00:23:20 -0800 Subject: [PATCH] Add offline cache + improve layout --- app.css | 17 +++++- app.js | 67 ++++++++++++--------- app.scss | 23 +++++++- assets/{homer.png => logo.png} | Bin config.yml | 2 +- index.html | 103 +++++++++++++++++---------------- worker.js | 32 ++++++++++ 7 files changed, 160 insertions(+), 84 deletions(-) rename assets/{homer.png => logo.png} (100%) create mode 100644 worker.js diff --git a/app.css b/app.css index 98574af..60d2762 100644 --- a/app.css +++ b/app.css @@ -4,7 +4,7 @@ html { body { font-family: 'Raleway', sans-serif; background-color: #F5F5F5; - height: 100%; } + min-height: 100%; } body h1, body h2, body h3, body h4, body h5, body h6 { font-family: 'Lato', sans-serif; } body h1 { @@ -66,7 +66,7 @@ body { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } - body #main-section .column { + body #main-section .container { padding: 1.2rem .75rem; } body #main-section .message { margin-top: 45px; @@ -82,7 +82,7 @@ body { background-color: #4285f4; position: absolute; top: 1rem; - right: -0.3rem; + right: -0.2rem; width: 3px; overflow: hidden; transition: all 0.2s ease-out; @@ -137,3 +137,14 @@ body { height: 20px; } body .search-bar:focus-within .search-label::before { color: #4a4a4a; } + body .offline-message { + text-align: center; + margin: 35px 0; } + body .offline-message i { + font-size: 2rem; } + body .offline-message i.fa-redo-alt { + font-size: 1.3rem; + line-height: 1rem; + vertical-align: middle; + cursor: pointer; + color: #3273dc; } diff --git a/app.js b/app.js index fda16b2..6e20ea3 100644 --- a/app.js +++ b/app.js @@ -1,42 +1,53 @@ -var app = new Vue({ +const app = new Vue({ el: '#app', data: { config: null, - filter: '' + offline: false, + filter: '', }, - beforeCreate() { + created: function () { let that = this; - return getConfig().then(function (config) { - const size = 3; - config.services.forEach(function (service) { - service.rows = []; - items = service.items; - while (items.length) { - service.rows.push(items.splice(0, size)); - } - - if (service.rows.length) { - let last = service.rows.length - 1; - service.rows[last] = service.rows[last].concat(Array(size - service.rows[last].length)); - } - }); + this.checkOffline(); + that.getConfig().then(function (config) { that.config = config; }).catch(function () { - console.error('Fail to get config'); + that.offline = true; }); + + document.addEventListener('visibilitychange', function () { + if (document.visibilityState == "visible") { + that.checkOffline(); + } + }, false); + }, + methods: { + checkOffline: function () { + let that = this; + return fetch(window.location.href + "?alive", { + method: 'HEAD', + cache: 'no-store' + }).then(function () { + that.offline = false; + }).catch(function () { + that.offline = true; + }); + }, + getConfig: function (event) { + return fetch('config.yml').then(function (response) { + if (response.status != 200) { + return + } + return response.text().then(function (body) { + return jsyaml.load(body); + }); + }); + }, } }); - -function getConfig() { - return fetch('config.yml').then(function (response) { - if (response.status !== 200) { - return; - } - - return response.text().then(function (body) { - return jsyaml.load(body); - }); +if ('serviceWorker' in navigator) { + window.addEventListener('load', function () { + navigator.serviceWorker.register('/worker.js'); }); } diff --git a/app.scss b/app.scss index e420c0e..da6271d 100644 --- a/app.scss +++ b/app.scss @@ -6,7 +6,7 @@ html { height: 100%; } body { font-family: 'Raleway', sans-serif; background-color: #F5F5F5; - height: 100%; + min-height: 100%; h1, h2, h3, h4, h5, h6 { font-family: 'Lato', sans-serif; @@ -109,7 +109,7 @@ body { text-overflow: ellipsis; } - .column { + .container { padding: 1.2rem .75rem; } @@ -136,7 +136,7 @@ body { background-color: $secondary-color; position: absolute; top: 1rem; - right: -0.3rem; + right: -0.2rem; width: 3px; overflow: hidden; transition: all 0.2s ease-out; @@ -213,4 +213,21 @@ body { } } + .offline-message { + text-align: center; + margin: 35px 0; + + i { + font-size: 2rem; + } + + i.fa-redo-alt { + font-size: 1.3rem; + line-height: 1rem; + vertical-align: middle; + cursor: pointer; + color: #3273dc; + } + } + } diff --git a/assets/homer.png b/assets/logo.png similarity index 100% rename from assets/homer.png rename to assets/logo.png diff --git a/config.yml b/config.yml index 3b0dec5..69c87ea 100644 --- a/config.yml +++ b/config.yml @@ -4,7 +4,7 @@ title: "Simple homepage" subtitle: "Homer" -logo: "assets/homer.png" +logo: "assets/logo.png" icon: "fas fa-skull-crossbones" # Optional message diff --git a/index.html b/index.html index 24adcd4..3b83c8e 100644 --- a/index.html +++ b/index.html @@ -7,8 +7,8 @@ Homer - + @@ -18,18 +18,18 @@
-
+
- {{ config.subtitle }} -

{{ config.title }}

+ {{ config.subtitle }} +

{{ config.title }}

-
+