Commit 1d857a7d authored by Tino Goratsch's avatar Tino Goratsch

reworked the AJAX loading layer to use flexbox

parent 590962f5
......@@ -22,26 +22,35 @@
transform: rotate(350deg);
}
}
/* AJAX loading layer */
#loading-layer {
width: 100%;
.loading-layer {
align-items: center;
background: rgba(255, 255, 255, 0.5);
display: none;
z-index: 999999;
display: flex;
justify-content: center;
left: 0;
height: 100%;
opacity: 0;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
transition: opacity 0.5s, visibility 0.5s;
-webkit-transition: opacity 0.5s, visibility 0.5s;
-moz-transition: opacity 0.5s, visibility 0.5s;
visibility: hidden;
width: 100%;
z-index: 999999;
}
.loading-layer.loading-layer__active {
opacity: 1;
visibility: visible;
}
#loading-layer h1 {
.loading-layer h1 {
width: 100%;
margin: 0;
font-size: 26px;
position: fixed;
top: 0;
left: 0;
text-align: center;
}
#loading-layer .glyphicon {
.loading-layer .glyphicon {
margin-bottom: 10px;
display: block;
-webkit-animation: rotate 2s linear infinite;
......
......@@ -187,24 +187,17 @@
if ($loadingLayer.length === 0) {
var $body = $('body'),
loadingText = $(this.element).data('ajax-form-loading-text') || '',
windowHeight = $(window).outerHeight(true),
html = '<div id="loading-layer" style="height: ' + windowHeight + 'px"><h1><span class="glyphicon glyphicon-cog"></span>' + loadingText + '</h1></div>';
html = '<div id="loading-layer" class="loading-layer"><h1><span class="glyphicon glyphicon-cog"></span>' + loadingText + '</h1></div>';
$(html).appendTo($body);
$loadingLayer = $($loadingLayer.selector);
setTimeout(function() {
$loadingLayer = $($loadingLayer.selector);
$loadingLayer.show();
var $heading = $loadingLayer.find('h1'),
headingHeight = $heading.height();
$heading.css({
marginTop: (Math.round(windowHeight / 2) - headingHeight) + 'px'
});
$loadingLayer.hide().fadeIn();
$loadingLayer.addClass('loading-layer__active');
}, 1);
} else {
$loadingLayer.fadeIn();
$loadingLayer.addClass('loading-layer__active');
}
if (typeof $submitButton !== "undefined") {
......@@ -227,7 +220,7 @@
}
},
hideLoadingLayer: function ($submitButton) {
$('#loading-layer').stop().fadeOut();
$('#loading-layer').removeClass('loading-layer__active');
if (typeof $submitButton !== "undefined") {
$submitButton.prop('disabled', false);
......
......@@ -25,23 +25,33 @@
}
}
/* AJAX loading layer */
#loading-layer {
width: 100%;
.loading-layer {
align-items: center;
background: rgba(255, 255, 255, 0.5);
display: none;
z-index: 999999;
display: flex;
justify-content: center;
left: 0;
height: 100%;
opacity: 0;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
transition: opacity 0.5s, visibility 0.5s;
-webkit-transition: opacity 0.5s, visibility 0.5s;
-moz-transition: opacity 0.5s, visibility 0.5s;
visibility: hidden;
width: 100%;
z-index: 999999;
&.loading-layer__active {
opacity: 1;
visibility: visible;
}
h1 {
width: 100%;
margin: 0;
font-size: 26px;
position: fixed;
top: 0;
left: 0;
text-align: center;
}
......
......@@ -22,26 +22,35 @@
transform: rotate(350deg);
}
}
/* AJAX loading layer */
#loading-layer {
width: 100%;
.loading-layer {
align-items: center;
background: rgba(255, 255, 255, 0.5);
display: none;
z-index: 999999;
display: flex;
justify-content: center;
left: 0;
height: 100%;
opacity: 0;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
transition: opacity 0.5s, visibility 0.5s;
-webkit-transition: opacity 0.5s, visibility 0.5s;
-moz-transition: opacity 0.5s, visibility 0.5s;
visibility: hidden;
width: 100%;
z-index: 999999;
}
.loading-layer.loading-layer__active {
opacity: 1;
visibility: visible;
}
#loading-layer h1 {
.loading-layer h1 {
width: 100%;
margin: 0;
font-size: 26px;
position: fixed;
top: 0;
left: 0;
text-align: center;
}
#loading-layer .glyphicon {
.loading-layer .glyphicon {
margin-bottom: 10px;
display: block;
-webkit-animation: rotate 2s linear infinite;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment