Mercurial > gemma

changeset 2740:85de42146bdb

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: css: moved class for loading overlay to application.scss
author Markus Kottlaender <markus@intevation.de>
date Tue, 19 Mar 2019 19:21:04 +0100
parents 8057662812f1
children 87aed4f9b1b8
files client/src/assets/application.scss client/src/components/fairway/Profiles.vue client/src/components/gauge/Gauges.vue client/src/components/importoverview/ImportOverview.vue client/src/components/splitscreen/Splitscreen.vue
diffstat 5 files changed, 25 insertions(+), 59 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/assets/application.scss	Tue Mar 19 19:09:41 2019 +0100
+++ b/client/src/assets/application.scss	Tue Mar 19 19:21:04 2019 +0100
@@ -200,3 +200,16 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.loading {
+  background: rgba(255, 255, 255, 0.9);
+  position: absolute;
+  z-index: 99;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
--- a/client/src/components/fairway/Profiles.vue	Tue Mar 19 19:09:41 2019 +0100
+++ b/client/src/components/fairway/Profiles.vue	Tue Mar 19 19:21:04 2019 +0100
@@ -8,12 +8,11 @@
     <div style="width: 18rem">
       <UIBoxHeader icon="chart-area" title="Profiles" :closeCallback="close" />
       <div class="box-body">
-        <div
-          class="loading d-flex justify-content-center align-items-center"
-          v-if="surveysLoading || profileLoading"
-        >
-          <font-awesome-icon icon="spinner" spin />
-        </div>
+        <transition name="fade">
+          <div class="loading" v-if="surveysLoading || profileLoading">
+            <font-awesome-icon icon="spinner" spin />
+          </div>
+        </transition>
         <select
           @change="moveToBottleneck"
           v-model="selectedBottleneck"
@@ -201,16 +200,6 @@
 </template>
 
 <style lang="scss" scoped>
-.loading {
-  background: rgba(255, 255, 255, 0.9);
-  position: absolute;
-  z-index: 99;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-
 .input-button-right {
   border-top-right-radius: $border-radius;
   border-bottom-right-radius: $border-radius;
--- a/client/src/components/gauge/Gauges.vue	Tue Mar 19 19:09:41 2019 +0100
+++ b/client/src/components/gauge/Gauges.vue	Tue Mar 19 19:21:04 2019 +0100
@@ -12,12 +12,11 @@
         :closeCallback="close"
       />
       <div class="box-body">
-        <div
-          class="loading d-flex justify-content-center align-items-center"
-          v-if="loading"
-        >
-          <font-awesome-icon icon="spinner" spin />
-        </div>
+        <transition name="fade">
+          <div class="loading" v-if="loading">
+            <font-awesome-icon icon="spinner" spin />
+          </div>
+        </transition>
         <select
           @change="moveToGauge"
           v-model="selectedGaugeISRS"
@@ -78,18 +77,6 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
-.loading {
-  background: rgba(255, 255, 255, 0.9);
-  position: absolute;
-  z-index: 99;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-}
-</style>
-
 <script>
 /* This is Free Software under GNU Affero General Public License v >= 3.0
  * without warranty, see README.md and license for details.
--- a/client/src/components/importoverview/ImportOverview.vue	Tue Mar 19 19:09:41 2019 +0100
+++ b/client/src/components/importoverview/ImportOverview.vue	Tue Mar 19 19:21:04 2019 +0100
@@ -8,10 +8,7 @@
     />
     <div class="position-relative">
       <transition name="fade">
-        <div
-          class="loading d-flex justify-content-center align-items-center"
-          v-if="loading"
-        >
+        <div class="loading" v-if="loading">
           <font-awesome-icon icon="spinner" spin />
         </div>
       </transition>
@@ -54,17 +51,6 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
-.loading
-  background: rgba(255, 255, 255, 0.9)
-  position: absolute
-  z-index: 99
-  top: 0
-  right: 0
-  bottom: 0
-  left: 0
-</style>
-
 <script>
 /* This is Free Software under GNU Affero General Public License v >= 3.0
  * without warranty, see README.md and license for details.
--- a/client/src/components/splitscreen/Splitscreen.vue	Tue Mar 19 19:09:41 2019 +0100
+++ b/client/src/components/splitscreen/Splitscreen.vue	Tue Mar 19 19:21:04 2019 +0100
@@ -15,10 +15,7 @@
       />
       <div class="d-flex flex-fill">
         <transition name="fade">
-          <div
-            class="loading d-flex justify-content-center align-items-center"
-            v-if="splitscreenLoading"
-          >
+          <div class="loading" v-if="splitscreenLoading">
             <font-awesome-icon icon="spinner" spin />
           </div>
         </transition>
@@ -43,13 +40,7 @@
     bottom: 0
 
   .loading
-    background: rgba(255, 255, 255, 0.96)
-    position: absolute
-    z-index: 99
     top: 34px
-    right: 0
-    bottom: 0
-    left: 0
 </style>
 
 <script>