mirror of
https://github.com/silverstripe/silverstripe-reports
synced 2024-10-22 11:05:53 +02:00
ENHANCEMENT: Improve CMS loading screen #6254
git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@115117 467b73ca-7a2a-4603-9d3b-597d59a354a9
This commit is contained in:
parent
28ee63fed1
commit
d97cfcbc7f
@ -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.
|
||||
|
@ -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%;
|
||||
}
|
||||
|
||||
/*
|
||||
|
Binary file not shown.
Before Width: | Height: | Size: 4.9 KiB |
BIN
images/logo.gif
Normal file
BIN
images/logo.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.0 KiB |
BIN
images/spinner.gif
Normal file
BIN
images/spinner.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 8.6 KiB |
@ -11,6 +11,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();
|
||||
|
@ -9,7 +9,12 @@
|
||||
</head>
|
||||
|
||||
<body class="stillLoading $CSSClasses">
|
||||
<div class="ss-loading-screen" style="background: #FFF url($LoadingImage) 50% 50% no-repeat; position: absolute;z-index: 100000;height: 100%;width: 100%;margin: 0;padding: 0;z-index: 100000;position: absolute;"><% _t('LOADING','Loading...',PR_HIGH) %><noscript><p class="message notice"><% _t('REQUIREJS','The CMS requires that you have JavaScript enabled.',PR_HIGH) %></p></noscript></div>
|
||||
<div class="ss-loading-screen">
|
||||
<div class="loading-logo" style="background-image: url($LoadingImage);">
|
||||
<img class="loading-animation" src="cms/images/spinner.gif" alt="<% _t('LOADING','Loading...',PR_HIGH) %>" />
|
||||
<p class="nojs-warning"><span class="message notice"><% _t('REQUIREJS','The CMS requires that you have JavaScript enabled.',PR_HIGH) %></span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ui-layout-north ss-cms-top-menu">
|
||||
$CMSTopMenu
|
||||
|
Loading…
Reference in New Issue
Block a user