From b3f16d37cc99271074d2fc3581bf3aa78baf1fb6 Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Wed, 3 Oct 2018 23:00:25 +0200
Subject: [PATCH] FEAT improve loader angular
---
.../font-awesome-maarch/css/font-maarch.css | 37 ++++++++++++++++++-
apps/maarch_entreprise/index.php | 2 +-
apps/maarch_entreprise/js/angularFunctions.js | 6 +--
3 files changed, 40 insertions(+), 5 deletions(-)
diff --git a/apps/maarch_entreprise/css/font-awesome-maarch/css/font-maarch.css b/apps/maarch_entreprise/css/font-awesome-maarch/css/font-maarch.css
index c2a8c0ef7e2..37857135e3d 100644
--- a/apps/maarch_entreprise/css/font-awesome-maarch/css/font-maarch.css
+++ b/apps/maarch_entreprise/css/font-awesome-maarch/css/font-maarch.css
@@ -344,5 +344,40 @@
.fm-file-model:before {
content: "\f03b" ;
}
-
+.lds-ring {
+ display: inline-block;
+ position: absolute;
+ width: 64px;
+ height: 64px;
+ margin-top: -60px;
+}
+.lds-ring div {
+ box-sizing: border-box;
+ display: block;
+ position: absolute;
+ width: 51px;
+ height: 51px;
+ margin: 6px;
+ border: 6px solid #135f7f;
+ border-radius: 50%;
+ animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+ border-color: #135f7f transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+ animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+ animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+ animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+}
diff --git a/apps/maarch_entreprise/index.php b/apps/maarch_entreprise/index.php
index 1f55edb9b02..9804db5f069 100755
--- a/apps/maarch_entreprise/index.php
+++ b/apps/maarch_entreprise/index.php
@@ -351,7 +351,7 @@ if ($_REQUEST['page'] && empty($_REQUEST['triggerAngular'])) {
$user = \User\models\UserModel::getByUserId(['userId' => $cookie['userId'], 'select' => ['password_modification_date', 'change_password', 'status']]);
//HTML CONTENT OF ANGULAR
- echo '<div id="loadingAngularContent" style="color:#666"></div>';
+ echo '<div id="loadingAngularContent" style="color: #666;height: 100%;padding: 0;margin: 0;display: flex;align-items: center;justify-content: center;"></div>';
echo '<my-app></my-app>';
if ($user['status'] == 'ABS') {
diff --git a/apps/maarch_entreprise/js/angularFunctions.js b/apps/maarch_entreprise/js/angularFunctions.js
index 7e84077c1c3..6c981f02254 100755
--- a/apps/maarch_entreprise/js/angularFunctions.js
+++ b/apps/maarch_entreprise/js/angularFunctions.js
@@ -11,10 +11,10 @@ function triggerAngular(locationToGo) {
if (!alreadyLoaded) {
var head = document.getElementsByTagName('head')[0];
- if ($j('#inner_content').length > 0) {
- $j('#inner_content').html('<i class="fa fa-spinner fa-spin fa-5x" style="margin-left: 50%;margin-top: 16%;font-size: 8em"></i>');
+ if ($j('#maarch_content').length > 0) {
+ $j('#maarch_content').html('<div style="color: #666;height: 100%;padding: 0;margin: 0;display: flex;align-items: center;justify-content: center;"><div style="opacity:0.5;display: flex;justify-content: center;padding: 5px;height: 20px;margin: 10px;line-height: 20px;font-weight: bold;font-size: 2em;text-align: center;"><div class="lds-ring"><div></div><div></div><div></div><div></div></div><div style=\'font-family: Roboto,"Helvetica Neue",sans-serif;\'>Chargement en cours ...</div></div></div>');
} else {
- $j('#loadingAngularContent').html('<i class="fa fa-spinner fa-spin fa-5x" style="margin-left: 50%;margin-top: 16%;font-size: 8em"></i>');
+ $j('#loadingAngularContent').html('<div style="opacity:0.5;display: flex;justify-content: center;padding: 5px;height: 20px;margin: 10px;line-height: 20px;font-weight: bold;font-size: 2em;text-align: center;"><div class="lds-ring"><div></div><div></div><div></div><div></div></div><div style=\'font-family: Roboto,"Helvetica Neue",sans-serif;\'>Chargement en cours ...</div></div>');
}
answer['scriptsToinject'].forEach(function(element, i) {
var script = document.createElement('script');
--
GitLab