From d678654cc0e5c7d35fed62db2bdc388b4fc14a13 Mon Sep 17 00:00:00 2001
From: Benoit Alessandroni <benoit@happy-dev.fr>
Date: Tue, 21 Jan 2020 22:17:28 +0100
Subject: [PATCH] Adding some loaders on the login stuff
---
src/includes/components/widgets.pug | 2 +-
src/index.pug | 9 +-
src/styles/index.scss | 127 ++++++++++++++++++++++++++++
3 files changed, 136 insertions(+), 2 deletions(-)
diff --git a/src/includes/components/widgets.pug b/src/includes/components/widgets.pug
index e88baddf..31655c23 100644
--- a/src/includes/components/widgets.pug
+++ b/src/includes/components/widgets.pug
@@ -42,8 +42,8 @@ sib-widget(name='cs-display-title')
//Do we need generalize this widget ?
sib-widget(name='cs-display-checkbox')
template
- label(for="instance_database_only") Search in Coopstarter database only
input(type='checkbox' name="instance_database_only")
+ label(for="instance_database_only") Search in Coopstarter database only
sib-widget(name='cs-display-related-property')
template
diff --git a/src/index.pug b/src/index.pug
index 6bfcd89d..f80ce788 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -27,6 +27,8 @@ html
#public-dashboard(hidden).no-sidebar
include includes/public/dashboard.pug
+ #main-loader(hidden) Loading…
+
sib-auth
sib-auth-provider(
class="sib-auth-provider"
@@ -45,20 +47,25 @@ script(type='module').
}
async triggerLogin() {
+ let loader = document.getElementById('main-loader');
+ loader.removeAttribute('hidden');
await sibAuth.login();
}
async update() {
+ let loader = document.getElementById('main-loader');
+ loader.removeAttribute('hidden');
let user = await sibAuth.getUser();
let idToken = await sibAuth.getUserIdToken();
if ( !user ) {
+ loader.setAttribute("hidden", true);
window.dispatchEvent(
new CustomEvent('requestNavigation', { detail: { route: 'splash' } })
);
}
user = await store.get(user);
- console.log("Current user", user);
+
if (user && user.mentor_profile) {
window.dispatchEvent(
new CustomEvent('requestNavigation', { detail: { route: 'mentor-dashboard' } })
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 2a87cb54..8e478dc9 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2071,6 +2071,133 @@ b, strong {
}
}
+/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+XXXXXXXXXXXXXXXXXXXXXXXX LOADER XXXXXXXXXXXXXXXXXXXXXXXXXXXX
+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
+
+#main-loader {
+ //display: none;
+ position: fixed;
+ z-index: 999;
+ height: 2em;
+ width: 2em;
+ overflow: show;
+ margin: auto;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ }
+
+ /* Transparent Overlay */
+ #main-loader:before {
+ content: '';
+ display: block;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0, .8));
+
+ background: -webkit-radial-gradient(rgba(20, 20, 20,.8), rgba(0, 0, 0,.8));
+ }
+
+ /* :not(:required) hides these rules from IE9 and below */
+ #main-loader:not(:required) {
+ /* hide "loading..." text */
+ font: 0/0 a;
+ color: transparent;
+ text-shadow: none;
+ background-color: transparent;
+ border: 0;
+ }
+
+ #main-loader:not(:required):after {
+ content: '';
+ display: block;
+ font-size: 10px;
+ width: 1em;
+ height: 1em;
+ margin-top: -0.5em;
+ -webkit-animation: spinner 150ms infinite linear;
+ -moz-animation: spinner 150ms infinite linear;
+ -ms-animation: spinner 150ms infinite linear;
+ -o-animation: spinner 150ms infinite linear;
+ animation: spinner 150ms infinite linear;
+ border-radius: 0.5em;
+ -webkit-box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
+ box-shadow: rgba(255,255,255, 0.75) 1.5em 0 0 0, rgba(255,255,255, 0.75) 1.1em 1.1em 0 0, rgba(255,255,255, 0.75) 0 1.5em 0 0, rgba(255,255,255, 0.75) -1.1em 1.1em 0 0, rgba(255,255,255, 0.75) -1.5em 0 0 0, rgba(255,255,255, 0.75) -1.1em -1.1em 0 0, rgba(255,255,255, 0.75) 0 -1.5em 0 0, rgba(255,255,255, 0.75) 1.1em -1.1em 0 0;
+ }
+
+ /* Animation */
+
+ @-webkit-keyframes spinner {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -moz-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ -o-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ -o-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
+ @-moz-keyframes spinner {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -moz-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ -o-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ -o-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
+ @-o-keyframes spinner {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -moz-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ -o-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ -o-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
+ @keyframes spinner {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -moz-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ -o-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -moz-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ -o-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
+
[hidden] {
display: none !important;
}
\ No newline at end of file
--
GitLab