From 1dafd13f826b22e07e6161b7b8a51e6614101d8e Mon Sep 17 00:00:00 2001 From: martin Date: Tue, 27 Mar 2018 08:11:04 +0100 Subject: [PATCH] Added spinner --- package-lock.json | 2 +- src/css/custom.scss | 1 + src/css/spinner.scss | 92 +++++++++++++++++++++++++++++++++++++++++ src/service-worker.js | 2 +- src/v1/js/NearbyList.js | 2 +- src/v1/js/NewsList.js | 4 +- src/v1/js/NewsViewer.js | 3 +- src/v1/js/libs/panel.js | 11 ++++- 8 files changed, 111 insertions(+), 6 deletions(-) create mode 100644 src/css/spinner.scss diff --git a/package-lock.json b/package-lock.json index 269d765..1dade87 100644 --- a/package-lock.json +++ b/package-lock.json @@ -52,7 +52,7 @@ }, "@sinonjs/formatio": { "version": "2.0.0", - "resolved": "http://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz", + "resolved": "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz", "integrity": "sha512-ls6CAMA6/5gG+O/IdsBcblvnd8qcO/l1TYoNeAzp3wcISOxlPXQEus0mLcdwazEkWjaBdaJ3TaxmNgCLWwvWzg==", "dev": true, "requires": { diff --git a/src/css/custom.scss b/src/css/custom.scss index 1127573..08dce64 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -21,6 +21,7 @@ $mui-link-font-color: mui-color('yellow', '900') !default; @import "./node_modules/muicss/lib/sass/mui"; @import "./src/css/viewport"; @import "./src/css/horscroll"; +@import "./src/css/spinner"; //// body { diff --git a/src/css/spinner.scss b/src/css/spinner.scss new file mode 100644 index 0000000..617c7bb --- /dev/null +++ b/src/css/spinner.scss @@ -0,0 +1,92 @@ +$green: #008744; +$blue: #0057e7; +$red: #d62d20; +$yellow: #ffa700; +$white: #eee; + +// scaling... any units +$width: 100px; + +body { + background-color: $white; +} + +// demo-specific +.showbox { + position: absolute; + top: 40vh; + bottom: 60vh; + left: 0; + right: 0; + padding: 5%; +} +// end demo-specific + +.loader { + position: relative; + margin: 0 auto; + width: $width; + &:before { + content: ''; + display: block; + padding-top: 100%; + } +} + +.circular { + animation: rotate 2s linear infinite; + height: 100%; + transform-origin: center center; + width: 100%; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; +} + +.path { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@keyframes rotate { + 100% { + transform: rotate(360deg); + } +} + +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35px; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124px; + } +} + +@keyframes color { + 100%, + 0% { + stroke: $red; + } + 40% { + stroke: $blue; + } + 66% { + stroke: $green; + } + 80%, + 90% { + stroke: $yellow; + } +} diff --git a/src/service-worker.js b/src/service-worker.js index ba6622e..6a010f5 100644 --- a/src/service-worker.js +++ b/src/service-worker.js @@ -11,7 +11,7 @@ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. -const CACHE_VERSION = { 'version': '0.0.645' }; +const CACHE_VERSION = { 'version': '0.0.651' }; const dataCacheName = 'jubileeData-v1'; const cacheName = 'jubilee-final-1'; const filesToCache = [ diff --git a/src/v1/js/NearbyList.js b/src/v1/js/NearbyList.js index 948fdbf..a0fd194 100644 --- a/src/v1/js/NearbyList.js +++ b/src/v1/js/NearbyList.js @@ -106,7 +106,7 @@ const NearbyListView = Backbone.View.extend({ this.$el = addPanel(this.$newPanel); - this.$el.empty(); + //this.$el.empty(); this.$newPanel.show(); // console.log(this.model); diff --git a/src/v1/js/NewsList.js b/src/v1/js/NewsList.js index 70d7b08..21d4b17 100644 --- a/src/v1/js/NewsList.js +++ b/src/v1/js/NewsList.js @@ -115,7 +115,7 @@ const NewsListView = Backbone.View.extend({ this.$el = addPanel(this.$newPanel); - this.$el.empty(); + // this.$el.empty(); this.$newPanel.show(); }, 'events': { 'click': 'doClick' @@ -129,6 +129,8 @@ const NewsListView = Backbone.View.extend({ 'render' : function() { console.log('>> Do render'); + this.$el.empty(); + this.model.newsCollection.each(function(item) { const niView = new NewsItemView({ 'model': item }); diff --git a/src/v1/js/NewsViewer.js b/src/v1/js/NewsViewer.js index c1b305f..20536fe 100644 --- a/src/v1/js/NewsViewer.js +++ b/src/v1/js/NewsViewer.js @@ -69,7 +69,7 @@ const NewsCardView = Backbone.View.extend({ this.$el = addPanel(this.$newPanel); - this.$el.empty(); + // this.$el.empty(); this.$newPanel.show(); if (prevGuid === guid) @@ -88,6 +88,7 @@ const NewsCardView = Backbone.View.extend({ console.log('close??'); }, 'doRender': function() { + this.$el.empty(); this.$el.html(this.template(this.model.get('article'))); } diff --git a/src/v1/js/libs/panel.js b/src/v1/js/libs/panel.js index dd00ddc..b3d3718 100644 --- a/src/v1/js/libs/panel.js +++ b/src/v1/js/libs/panel.js @@ -22,7 +22,16 @@ function createPanel(params) {
-
+
+
+
+ + + +
+
+ +