diff options
Diffstat (limited to 'www')
| -rw-r--r-- | www/js/todo.js | 22 | ||||
| -rw-r--r-- | www/styles/common.css | 135 | ||||
| -rw-r--r-- | www/styles/todo.css | 13 | ||||
| -rw-r--r-- | www/todo.html | 19 |
4 files changed, 181 insertions, 8 deletions
diff --git a/www/js/todo.js b/www/js/todo.js index 84f5b33..f576d91 100644 --- a/www/js/todo.js +++ b/www/js/todo.js @@ -46,7 +46,7 @@ rh.ShowList.prototype.fetch = function() { this.current_week = get_rd_week(this.current.valueOf()); this.request_sent = true; - self.$this.trigger('update-hdr'); + self.$this.trigger('pre-update'); $.getJSON( "/rh-bin/schedules.json?DAYS=1&START=" + format_date_iso(this.current), function(data) { if(data.status == "OK") { history.replaceState(null, null, '/todo/' + format_date_iso(self.current)); @@ -102,11 +102,13 @@ rh.ShowListView = function(model) { this.showViews = []; var self = this; - $(this.model).on('update-hdr', function() { + $(this.model).on('pre-update', function() { self.render_hdr(); + self.render_loading(); }); $(this.model).on('update', function() { - self.render(); + self.render_hdr(); + self.render_list(); }); this.model.fetch(); }; @@ -131,22 +133,26 @@ rh.ShowListView.prototype.render_hdr = function() { default: weekspan.addClass('label-default').text('Fehler'); } +}; +rh.ShowListView.prototype.render_list = function() { + $('#loading').hide(); var list = $('#shows'); $('div.show', list).remove(); this.showViews = []; -}; - -rh.ShowListView.prototype.render = function() { - this.render_hdr(); - var list = $('#shows'); for (var i = 0; i < this.model.shows.length; i++) { var showView = new rh.ShowView(this.model.shows[i], this); this.showViews.push(showView); showView.render(); list.append(showView.$el); } + list.show(); +}; + +rh.ShowListView.prototype.render_loading = function() { + $('#shows').hide(); + $('#loading').show(); }; diff --git a/www/styles/common.css b/www/styles/common.css index 7e0d8a8..36fcb36 100644 --- a/www/styles/common.css +++ b/www/styles/common.css @@ -24,3 +24,138 @@ body { font-family: Sans-Serif; } + +.sk-fading-circle { + width: 2em; + height: 2em; + position: relative; +} + +.sk-fading-circle .sk-circle { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; +} + +.sk-fading-circle .sk-circle:before { + content: ''; + display: block; + margin: 0 auto; + width: 15%; + height: 15%; + background-color: #333; + border-radius: 100%; + -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; + animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; +} +.sk-fading-circle .sk-circle2 { + -webkit-transform: rotate(30deg); + -ms-transform: rotate(30deg); + transform: rotate(30deg); +} +.sk-fading-circle .sk-circle3 { + -webkit-transform: rotate(60deg); + -ms-transform: rotate(60deg); + transform: rotate(60deg); +} +.sk-fading-circle .sk-circle4 { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); +} +.sk-fading-circle .sk-circle5 { + -webkit-transform: rotate(120deg); + -ms-transform: rotate(120deg); + transform: rotate(120deg); +} +.sk-fading-circle .sk-circle6 { + -webkit-transform: rotate(150deg); + -ms-transform: rotate(150deg); + transform: rotate(150deg); +} +.sk-fading-circle .sk-circle7 { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} +.sk-fading-circle .sk-circle8 { + -webkit-transform: rotate(210deg); + -ms-transform: rotate(210deg); + transform: rotate(210deg); +} +.sk-fading-circle .sk-circle9 { + -webkit-transform: rotate(240deg); + -ms-transform: rotate(240deg); + transform: rotate(240deg); +} +.sk-fading-circle .sk-circle10 { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); +} +.sk-fading-circle .sk-circle11 { + -webkit-transform: rotate(300deg); + -ms-transform: rotate(300deg); + transform: rotate(300deg); +} +.sk-fading-circle .sk-circle12 { + -webkit-transform: rotate(330deg); + -ms-transform: rotate(330deg); + transform: rotate(330deg); +} +.sk-fading-circle .sk-circle2:before { + -webkit-animation-delay: -1.1s; + animation-delay: -1.1s; +} +.sk-fading-circle .sk-circle3:before { + -webkit-animation-delay: -1s; + animation-delay: -1s; +} +.sk-fading-circle .sk-circle4:before { + -webkit-animation-delay: -0.9s; + animation-delay: -0.9s; +} +.sk-fading-circle .sk-circle5:before { + -webkit-animation-delay: -0.8s; + animation-delay: -0.8s; +} +.sk-fading-circle .sk-circle6:before { + -webkit-animation-delay: -0.7s; + animation-delay: -0.7s; +} +.sk-fading-circle .sk-circle7:before { + -webkit-animation-delay: -0.6s; + animation-delay: -0.6s; +} +.sk-fading-circle .sk-circle8:before { + -webkit-animation-delay: -0.5s; + animation-delay: -0.5s; +} +.sk-fading-circle .sk-circle9:before { + -webkit-animation-delay: -0.4s; + animation-delay: -0.4s; +} +.sk-fading-circle .sk-circle10:before { + -webkit-animation-delay: -0.3s; + animation-delay: -0.3s; +} +.sk-fading-circle .sk-circle11:before { + -webkit-animation-delay: -0.2s; + animation-delay: -0.2s; +} +.sk-fading-circle .sk-circle12:before { + -webkit-animation-delay: -0.1s; + animation-delay: -0.1s; +} + +@-webkit-keyframes sk-circleFadeDelay { + 0%, 39%, 100% { opacity: 0; } + 40% { opacity: 1; } +} + +@keyframes sk-circleFadeDelay { + 0%, 39%, 100% { opacity: 0; } + 40% { opacity: 1; } +}
\ No newline at end of file diff --git a/www/styles/todo.css b/www/styles/todo.css index 74ec1e5..09726f2 100644 --- a/www/styles/todo.css +++ b/www/styles/todo.css @@ -54,6 +54,14 @@ body { } +#loading-inner { + width: 60px; + margin-top: 5em; + margin-left: auto; + margin-right: auto; +} + + #shows div.show { padding: 0.2em 0; } @@ -66,6 +74,11 @@ div.show span { font-weight: bold; } +div.show span.show-title { + white-space:nowrap; + overflow:hidden; +} + div.show span.show-start { font-size: 0.75em; margin-left: 5em; diff --git a/www/todo.html b/www/todo.html index 0f582c1..a569858 100644 --- a/www/todo.html +++ b/www/todo.html @@ -28,6 +28,25 @@ </div> </div> + <div id="loading"> + <div id="loading-inner"> + <div class="sk-fading-circle"> + <div class="sk-circle1 sk-circle"></div> + <div class="sk-circle2 sk-circle"></div> + <div class="sk-circle3 sk-circle"></div> + <div class="sk-circle4 sk-circle"></div> + <div class="sk-circle5 sk-circle"></div> + <div class="sk-circle6 sk-circle"></div> + <div class="sk-circle7 sk-circle"></div> + <div class="sk-circle8 sk-circle"></div> + <div class="sk-circle9 sk-circle"></div> + <div class="sk-circle10 sk-circle"></div> + <div class="sk-circle11 sk-circle"></div> + <div class="sk-circle12 sk-circle"></div> + </div> + </div> + </div> + <div id="shows"> </div> </div> |