Mercurial > gemma

changeset 3613:6a5a2ffcf74b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: configuration: data accuracy: made headers less flashy
author Markus Kottlaender <markus@intevation.de>
date Wed, 05 Jun 2019 13:01:56 +0200
parents c48b1e0fccd0
children 2055b689be54
files client/src/components/systemconfiguration/DataAccuracy.vue
diffstat 1 files changed, 22 insertions(+), 13 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/systemconfiguration/DataAccuracy.vue	Wed Jun 05 12:42:31 2019 +0200
+++ b/client/src/components/systemconfiguration/DataAccuracy.vue	Wed Jun 05 13:01:56 2019 +0200
@@ -11,7 +11,7 @@
           </h6>
           <div class="d-flex flex-grow-1 text-center small">
             <div class="card rounded-left">
-              <div class="card-header text-white bg-success">OK</div>
+              <div class="card-header">OK</div>
               <div
                 class="card-body d-flex align-items-center justify-content-center"
               >
@@ -22,7 +22,7 @@
               </div>
             </div>
             <div class="card border-left-0 border-right-0 rounded-0">
-              <div class="card-header text-white bg-warning rounded-0">
+              <div class="card-header rounded-0">
                 Warning
               </div>
               <div
@@ -43,7 +43,7 @@
               </div>
             </div>
             <div class="card rounded-right">
-              <div class="card-header text-white bg-danger">Critical</div>
+              <div class="card-header">Critical</div>
               <div
                 class="card-body d-flex align-items-center justify-content-center"
               >
@@ -64,7 +64,7 @@
           </h6>
           <div class="d-flex flex-grow-1 text-center small">
             <div class="card rounded-left">
-              <div class="card-header text-white bg-success">OK</div>
+              <div class="card-header">OK</div>
               <div
                 class="card-body d-flex align-items-center justify-content-center"
               >
@@ -80,7 +80,7 @@
               </div>
             </div>
             <div class="card border-left-0 border-right-0 rounded-0">
-              <div class="card-header text-white bg-warning rounded-0">
+              <div class="card-header rounded-0">
                 Warning
               </div>
               <div
@@ -101,7 +101,7 @@
               </div>
             </div>
             <div class="card rounded-right">
-              <div class="card-header text-white bg-danger">Critical</div>
+              <div class="card-header">Critical</div>
               <div
                 class="card-body d-flex flex-column align-items-center justify-content-center"
               >
@@ -127,7 +127,7 @@
           </h6>
           <div class="d-flex flex-grow-1 text-center small">
             <div class="card rounded-left">
-              <div class="card-header text-white bg-success">OK</div>
+              <div class="card-header">OK</div>
               <div
                 class="card-body d-flex align-items-center justify-content-center"
               >
@@ -145,7 +145,7 @@
               </div>
             </div>
             <div class="card border-left-0 border-right-0 rounded-0">
-              <div class="card-header text-white bg-warning rounded-0">
+              <div class="card-header rounded-0">
                 Warning
               </div>
               <div
@@ -169,7 +169,7 @@
               </div>
             </div>
             <div class="card rounded-right">
-              <div class="card-header text-white bg-danger">Critical</div>
+              <div class="card-header">Critical</div>
               <div
                 class="card-body d-flex flex-column align-items-center justify-content-center"
               >
@@ -198,7 +198,7 @@
           </h6>
           <div class="d-flex flex-grow-1 text-center small">
             <div class="card rounded-left">
-              <div class="card-header text-white bg-success">OK</div>
+              <div class="card-header">OK</div>
               <div
                 class="card-body d-flex align-items-center justify-content-center"
               >
@@ -220,7 +220,7 @@
               </div>
             </div>
             <div class="card border-left-0 border-right-0 rounded-0">
-              <div class="card-header text-white bg-warning rounded-0">
+              <div class="card-header rounded-0">
                 Warning
               </div>
               <div
@@ -242,7 +242,7 @@
               </div>
             </div>
             <div class="card rounded-right">
-              <div class="card-header text-white bg-danger">Critical</div>
+              <div class="card-header">Critical</div>
               <div
                 class="card-body d-flex flex-column align-items-center justify-content-center"
               >
@@ -277,11 +277,20 @@
 <style lang="sass" scoped>
 .card
   width: 33.333%
+  &:nth-child(1)
+    > .card-header
+      border-bottom: solid 2px #28a745
+  &:nth-child(2)
+    > .card-header
+      border-bottom: solid 2px #ffc107
+  &:nth-child(3)
+    > .card-header
+      border-bottom: solid 2px #dc3545
 .rounded-left,
 .rounded-left .card-header
   border-top-right-radius: 0
   border-bottom-right-radius: 0
-.rounded-right
+.rounded-right,
 .rounded-right .card-header
   border-top-left-radius: 0
   border-bottom-left-radius: 0