summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--www/js/todo.js22
-rw-r--r--www/styles/common.css135
-rw-r--r--www/styles/todo.css13
-rw-r--r--www/todo.html19
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>
generated by cgit v0.10.2 at 2024-11-21 12:06:40 (GMT)