diff options
| -rw-r--r-- | css/public.css | 7 | ||||
| -rw-r--r-- | css/styles.css | 24 | ||||
| -rw-r--r-- | js/gallery.js | 2 | ||||
| -rw-r--r-- | js/galleryrow.js | 2 | ||||
| -rw-r--r-- | js/galleryview.js | 11 | ||||
| -rw-r--r-- | templates/part.content.php | 1 | ||||
| -rw-r--r-- | templates/public.php | 1 |
7 files changed, 26 insertions, 22 deletions
diff --git a/css/public.css b/css/public.css index 40b196e4..2bed35fc 100644 --- a/css/public.css +++ b/css/public.css @@ -46,3 +46,10 @@ body { #gallery.hascontrols { padding-bottom: 0; } + +#loading-indicator { + height: 32px; + width: 100%; + margin-top: 100px; + margin-bottom: 0; +} diff --git a/css/styles.css b/css/styles.css index 3de7d9c8..6274e465 100644 --- a/css/styles.css +++ b/css/styles.css @@ -18,7 +18,7 @@ body:after { float: left; } -div.crumb.last a{ +div.crumb.last a { cursor: default; } @@ -32,9 +32,10 @@ div.crumb.last a{ padding: 8px; border-radius: 3px 0 0 3px; margin-left: 3px; - margin-right:0; + margin-right: 0; border-right: 0; } + #controls .button.right-sort-button { float: left; display: inline; @@ -47,7 +48,7 @@ div.crumb.last a{ background-color: rgb(230, 230, 230); } -#controls .sort-inactive img{ +#controls .sort-inactive img { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; filter: alpha(opacity=25); opacity: 0.25; @@ -157,7 +158,7 @@ div.crumb.last a{ #gallery a.album .album-label, #gallery a.image .image-label { - background: rgba(0,0,0,0.4); + background: rgba(0, 0, 0, 0.4); } #gallery a.image .image-label .title { @@ -253,15 +254,6 @@ div.crumb.last a{ border-bottom-right-radius: 0; } -#loading { - font-size: 16px; - color: #888; - position: absolute; - text-align: center; - top: 30%; - width: 100%; -} - /*Original ribbon design by Comatosed http://www.bypeople.com/author/comatosed/*/ .ribbon { @@ -312,3 +304,9 @@ http://www.bypeople.com/author/comatosed/*/ .ribbon.black:after { border-color: #bbb #bbb transparent #bbb; } + +#loading-indicator { + height: 32px; + width: 100%; + margin-bottom: 50px; +} diff --git a/js/gallery.js b/js/gallery.js index 7e2eb7ae..626337f4 100644 --- a/js/gallery.js +++ b/js/gallery.js @@ -272,7 +272,6 @@ showLoading: function () { $('#emptycontent').addClass('hidden'); $('#controls').removeClass('hidden'); - $('#content').addClass('icon-loading'); }, /** @@ -281,7 +280,6 @@ showNormal: function () { $('#emptycontent').addClass('hidden'); $('#controls').removeClass('hidden'); - $('#content').removeClass('icon-loading'); }, /** diff --git a/js/galleryrow.js b/js/galleryrow.js index d4e8b627..0ba65fb7 100644 --- a/js/galleryrow.js +++ b/js/galleryrow.js @@ -62,7 +62,7 @@ var scaleRatio = (this.width > this.targetWidth) ? this.targetWidth / this.width : 1; var targetHeight = 200 * scaleRatio; targetHeight = targetHeight.toFixed(3); - var row = $('<div/>').addClass('row loading'); + var row = $('<div/>').addClass('row'); /** * @param {*} row * @param {GalleryImage[]|Album[]} items diff --git a/js/galleryview.js b/js/galleryview.js index 93339fde..95118f0d 100644 --- a/js/galleryview.js +++ b/js/galleryview.js @@ -83,6 +83,7 @@ } this.clear(); + $('#loading-indicator').show(); if (albumPath !== Gallery.currentAlbum) { this.loadVisibleRows.loading = false; @@ -100,8 +101,7 @@ // Loading rows without blocking the execution of the rest of the script setTimeout(function () { this.loadVisibleRows.activeIndex = 0; - this.loadVisibleRows(Gallery.albumMap[Gallery.currentAlbum], - Gallery.currentAlbum); + this.loadVisibleRows(Gallery.albumMap[Gallery.currentAlbum], Gallery.currentAlbum); }.bind(this), 0); }, @@ -164,6 +164,7 @@ // If we've reached the end of the album, we kill the loader if (!(album.viewedItems < album.subAlbums.length + album.images.length)) { view.loadVisibleRows.loading = null; + $('#loading-indicator').hide(); return; } @@ -181,10 +182,6 @@ if (view.requestId === row.requestId) { return row.getDom().then(function (dom) { - // defer removal of loading class to trigger CSS3 animation - _.defer(function () { - dom.removeClass('loading'); - }); if (Gallery.currentAlbum !== path) { view.loadVisibleRows.loading = null; return; //throw away the row if the user has navigated away in the @@ -203,9 +200,11 @@ // No more rows to load at the moment view.loadVisibleRows.loading = null; + $('#loading-indicator').hide(); }, function () { // Something went wrong, so kill the loader view.loadVisibleRows.loading = null; + $('#loading-indicator').hide(); }); } // This is the safest way to do things diff --git a/templates/part.content.php b/templates/part.content.php index 7ff8668d..69d5aead 100644 --- a/templates/part.content.php +++ b/templates/part.content.php @@ -80,4 +80,5 @@ style( </div> <div id="gallery" class="hascontrols"></div> <div id="emptycontent" class="hidden"></div> +<div id="loading-indicator" class="loading"></div> <input type="hidden" name="allowShareWithLink" id="allowShareWithLink" value="yes"/> diff --git a/templates/public.php b/templates/public.php index 7da3bd30..9ff109ce 100644 --- a/templates/public.php +++ b/templates/public.php @@ -133,6 +133,7 @@ style( data-token="<?php isset($_['token']) ? p($_['token']) : p(false) ?>"> </div> <div id="emptycontent" class="hidden"></div> + <div id="loading-indicator" class="loading"></div> <footer> <p class="info"><?php print_unescaped($theme->getLongFooter()); ?></p> </footer> |