tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-09-28 20:29:15 +02:00
Code Issues Projects Releases Wiki Activity

MINOR Improved CMS loading spinner visibility by enforcing a higher z-index in its own element

Browse Source
This commit is contained in:
Ingo Schommer 2011-12-14 17:13:33 +01:00
parent f57a3018a3
commit f3494839b0
3 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
admin/css/screen.css
View File

@ -200,9 +200,9 @@ html article, html aside, html details, html figcaption, html figure, html foote
.ui-tabs .cms-content-header .ui-state-active a, .ui-tabs .cms-content-header .ui-widget-content .ui-state-active a, .ui-tabs .cms-content-header .ui-widget-header .ui-state-active a { border-bottom: 2px solid #eceff1; }
/** ------------------------------------------------------- Loading Interface ------------------------------------------------------- */
.cms-content.loading, .cms-content form.loading { background: url(../images/spinner.gif) no-repeat 50% 50%; }
.cms-content-loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; }
.cms-content-loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; }
.cms-content-loading-spinner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background: url(../images/spinner.gif) no-repeat 50% 50%; }
/** ----------------------------------------------- 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, white, #efefef, #c7c7c7 100%); background: -webkit-gradient(radial, 50% 50%, 350, 50% 50%, 0, from(#e3e3e3), to(white)); z-index: 100000; margin: 0; padding: 0; }

4
admin/javascript/LeftAndMain.Content.js
View File

@ -267,10 +267,10 @@
$('.cms-content.loading,.cms-edit-form.loading').entwine({
onmatch: function() {
this.append('<div class="cms-content-loading-overlay ui-widget-overlay-light"></div>');
this.append('<div class="cms-content-loading-overlay ui-widget-overlay-light"></div><div class="cms-content-loading-spinner"></div>');
},
onunmatch: function() {
this.find('.cms-content-loading-overlay').remove();
this.find('.cms-content-loading-overlay,.cms-content-loading-spinner').remove();
}
});

19
admin/scss/_style.scss
View File

@ -156,12 +156,6 @@ html,body {
/** -------------------------------------------------------
* Loading Interface
* ------------------------------------------------------- */
.cms-content {
&.loading,
form.loading {
background: url(../images/spinner.gif) no-repeat 50% 50%;
}
}
.cms-content-loading-overlay {
position: absolute; // z-index doesn't apply properly without that
@ -169,9 +163,18 @@ html,body {
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
z-index: 9998;
// Further styling by .ui-widget-overlay-light which is usually applied at the same time
}
.cms-content-loading-spinner {
position: absolute; // z-index doesn't apply properly without that
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
background: url(../images/spinner.gif) no-repeat 50% 50%;
}
/** -----------------------------------------------