diff --git a/code/LeftAndMain.php b/code/LeftAndMain.php index bb9c3ce1..0614dbda 100644 --- a/code/LeftAndMain.php +++ b/code/LeftAndMain.php @@ -1198,7 +1198,12 @@ class LeftAndMain extends Controller { self::$application_logo_text = ''; } - protected static $loading_image = 'cms/images/loading.gif'; + /** + * The height of the image should be around 164px to avoid the overlaping between the image and loading animation graphic. + * If the given image's height is significantly larger or smaller, adjust the loading animation's top offset in + * positionLoadingSpinner() in LeftAndMain.js + */ + protected static $loading_image = 'cms/images/logo.gif'; /** * Set the image shown when the CMS is loading. diff --git a/css/layout.css b/css/layout.css index f5cd81bc..47f90ad0 100644 --- a/css/layout.css +++ b/css/layout.css @@ -14,16 +14,54 @@ body { height: 100%; } -.ss-loading-screen { +.ss-loading-screen, .ss-loading-screen .loading-logo { + width: 100%; height: 100%; overflow: hidden; + position: absolute; + background: #fff; + background: -moz-radial-gradient(50% 50% 180deg, circle cover, #FFFFFF, #EFEFEF, #C7C7C7 100%); + background: -webkit-gradient(radial, 50% 50%, 350, 50% 50%, 0, from(#E3E3E3), to(white)); + z-index: 100000; + margin: 0; + padding: 0; +} + +.ss-loading-screen .loading-logo { + background-repeat: no-repeat; + background-color: transparent; + background-position: 50% 50%; } .ss-loading-screen p { width: 100%; text-align: center; - position: fixed; - bottom: 0px; + position: absolute; + bottom: 80px; +} + +.ss-loading-screen p span.notice { + display: inline-block; + font-size: 14px; + padding: 10px 20px; + color: #dc7f00; + border: none; + + -moz-border-radius: 5px; + -webkit-border-radius: 5px; + -o-border-radius: 5px; + + -moz-box-shadow: 1px 1px 15px rgba(0,0,0, 0.1); + -webkit-box-shadow: 1px 1px 15px rgba(0,0,0, 0.1); + -o-box-shadow: 1px 1px 15px rgba(0,0,0, 0.1); + box-shadow: 1px 1px 15px rgba(0,0,0, 0.1); +} + +.ss-loading-screen .loading-animation { + display: none; + position: absolute; + left: 49%; + top: 75%; } /* diff --git a/images/loading.gif b/images/loading.gif deleted file mode 100755 index cfbfba27..00000000 Binary files a/images/loading.gif and /dev/null differ diff --git a/images/logo.gif b/images/logo.gif new file mode 100644 index 00000000..77642f24 Binary files /dev/null and b/images/logo.gif differ diff --git a/images/spinner.gif b/images/spinner.gif new file mode 100644 index 00000000..8dc348a4 Binary files /dev/null and b/images/spinner.gif differ diff --git a/javascript/LeftAndMain.js b/javascript/LeftAndMain.js index a6135ed2..c7906114 100644 --- a/javascript/LeftAndMain.js +++ b/javascript/LeftAndMain.js @@ -10,6 +10,20 @@ var ss_MainLayout; (function($) { $.entwine('ss', function($){ + + $('.nojs-warning').hide(); + + /** + * Position the loading spinner animation below the ss logo + */ + var positionLoadingSpinner = function() { + var offset = 120; // offset from the ss logo + var spinner = $('.ss-loading-screen .loading-animation'); + var top = ($(window).height() - spinner.height()) / 2; + spinner.css('top', top + offset); + spinner.show(); + } + $(window).bind('resize', positionLoadingSpinner).trigger('resize'); // setup jquery.entwine $.entwine.warningLevel = $.entwine.WARN_LEVEL_BESTPRACTISE; @@ -54,6 +68,7 @@ var ss_MainLayout; // Remove loading screen $('.ss-loading-screen').hide(); $('body').removeClass('stillLoading'); + $(window).unbind('resize', positionLoadingSpinner); // Layout ss_MainLayout = this._setupLayout(); diff --git a/templates/LeftAndMain.ss b/templates/LeftAndMain.ss index 61c0b224..2728da56 100644 --- a/templates/LeftAndMain.ss +++ b/templates/LeftAndMain.ss @@ -9,7 +9,12 @@ -
<% _t('LOADING','Loading...',PR_HIGH) %>
+
+ +
$CMSTopMenu