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:
Saophalkun Ponlu
parent
28ee63fed1
commit
d97cfcbc7f
@ -1198,7 +1198,12 @@ class LeftAndMain extends Controller {
|
|||||||
self::$application_logo_text = '';
|
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.
|
* Set the image shown when the CMS is loading.
|
||||||
|
|||||||
@ -14,16 +14,54 @@ body {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ss-loading-screen {
|
.ss-loading-screen, .ss-loading-screen .loading-logo {
|
||||||
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
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 {
|
.ss-loading-screen p {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: fixed;
|
position: absolute;
|
||||||
bottom: 0px;
|
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($) {
|
(function($) {
|
||||||
$.entwine('ss', 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
|
// setup jquery.entwine
|
||||||
$.entwine.warningLevel = $.entwine.WARN_LEVEL_BESTPRACTISE;
|
$.entwine.warningLevel = $.entwine.WARN_LEVEL_BESTPRACTISE;
|
||||||
|
|
||||||
@ -54,6 +68,7 @@ var ss_MainLayout;
|
|||||||
// Remove loading screen
|
// Remove loading screen
|
||||||
$('.ss-loading-screen').hide();
|
$('.ss-loading-screen').hide();
|
||||||
$('body').removeClass('stillLoading');
|
$('body').removeClass('stillLoading');
|
||||||
|
$(window).unbind('resize', positionLoadingSpinner);
|
||||||
|
|
||||||
// Layout
|
// Layout
|
||||||
ss_MainLayout = this._setupLayout();
|
ss_MainLayout = this._setupLayout();
|
||||||
|
|||||||
@ -9,7 +9,12 @@
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="stillLoading $CSSClasses">
|
<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">
|
<div class="ui-layout-north ss-cms-top-menu">
|
||||||
$CMSTopMenu
|
$CMSTopMenu
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user