mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-09-29 04:39:01 +02:00
MINOR Improved CMS loading spinner visibility by enforcing a higher z-index in its own element
This commit is contained in:
parent
f57a3018a3
commit
f3494839b0
@ -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; }
|
.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 ------------------------------------------------------- */
|
/** ------------------------------------------------------- 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 ------------------------------------------------ */
|
/** ----------------------------------------------- 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; }
|
.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; }
|
||||||
|
@ -267,10 +267,10 @@
|
|||||||
|
|
||||||
$('.cms-content.loading,.cms-edit-form.loading').entwine({
|
$('.cms-content.loading,.cms-edit-form.loading').entwine({
|
||||||
onmatch: function() {
|
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() {
|
onunmatch: function() {
|
||||||
this.find('.cms-content-loading-overlay').remove();
|
this.find('.cms-content-loading-overlay,.cms-content-loading-spinner').remove();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -156,12 +156,6 @@ html,body {
|
|||||||
/** -------------------------------------------------------
|
/** -------------------------------------------------------
|
||||||
* Loading Interface
|
* Loading Interface
|
||||||
* ------------------------------------------------------- */
|
* ------------------------------------------------------- */
|
||||||
.cms-content {
|
|
||||||
&.loading,
|
|
||||||
form.loading {
|
|
||||||
background: url(../images/spinner.gif) no-repeat 50% 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cms-content-loading-overlay {
|
.cms-content-loading-overlay {
|
||||||
position: absolute; // z-index doesn't apply properly without that
|
position: absolute; // z-index doesn't apply properly without that
|
||||||
@ -169,9 +163,18 @@ html,body {
|
|||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
z-index: 9999;
|
z-index: 9998;
|
||||||
// Further styling by .ui-widget-overlay-light which is usually applied at the same time
|
// 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%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** -----------------------------------------------
|
/** -----------------------------------------------
|
||||||
|
Loading…
Reference in New Issue
Block a user