Mercurial > gemma

changeset 3323:de0d0685a17b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: improve diagram-legends style
author Fadi Abbud <fadi.abbud@intevation.de>
date Mon, 20 May 2019 11:46:06 +0200
parents b6afae085f5e
children 96dbfcc614be
files client/src/components/fairway/Fairwayprofile.vue client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue
diffstat 3 files changed, 38 insertions(+), 12 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/fairway/Fairwayprofile.vue	Mon May 20 11:41:35 2019 +0200
+++ b/client/src/components/fairway/Fairwayprofile.vue	Mon May 20 11:46:06 2019 +0200
@@ -4,13 +4,21 @@
     <div class="d-flex flex-fill">
       <DiagramLegend>
         <div class="legend">
-          <span style="background-color: #5995ff"></span> Water
+          <span
+            style="background-color: #5995ff; width: 20px; height: 20px;"
+          ></span>
+          Water
         </div>
         <div class="legend">
-          <span style="background-color: #1f4fff"></span> Fairway
+          <span
+            style="background-color: #1f4fff; width: 20px; height: 20px;"
+          ></span>
+          Fairway
         </div>
         <div class="legend">
-          <span style="background-color: #4a2f06"></span>
+          <span
+            style="background-color: #4a2f06; width: 20px; height: 20px;"
+          ></span>
           Ground
         </div>
         <div>
--- a/client/src/components/gauge/HydrologicalConditions.vue	Mon May 20 11:41:35 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Mon May 20 11:46:06 2019 +0200
@@ -9,20 +9,33 @@
     <div class="d-flex flex-fill">
       <DiagramLegend>
         <div class="legend">
-          <span style="background-color: red"></span>
+          <span
+            style="background-color: red; width: 20px; height: 20px;"
+          ></span>
           {{ yearCompare }}
         </div>
         <div class="legend">
-          <span style="background-color: orange"></span> Q25%
+          <span
+            style="background-color: orange; width: 20px; height: 20px;"
+          ></span>
+          Q25%
         </div>
         <div class="legend">
-          <span style="background-color: black"></span> Median
+          <span
+            style="background-color: black; width: 20px; height: 20px;"
+          ></span>
+          Median
         </div>
         <div class="legend">
-          <span style="background-color: purple"></span> Q75%
+          <span
+            style="background-color: purple; width: 20px; height: 20px;"
+          ></span>
+          Q75%
         </div>
         <div class="legend">
-          <span style="background-color: lightsteelblue"></span>
+          <span
+            style="background-color: lightsteelblue; width: 20px; height: 20px;"
+          ></span>
           Long-term Amplitude
         </div>
         <select
--- a/client/src/components/gauge/Waterlevel.vue	Mon May 20 11:41:35 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Mon May 20 11:46:06 2019 +0200
@@ -9,17 +9,22 @@
     <div class="d-flex flex-fill">
       <DiagramLegend>
         <div class="legend">
-          <span style="background-color: steelblue"></span> Waterlevel
+          <span
+            style="background-color: steelblue; width: 20px; height: 20px;"
+          ></span>
+          Waterlevel
         </div>
         <div class="legend">
           <span
-            style="width: 4px; height: 4px; background-color: rgba(70, 130, 180, 0.6); border: solid 4px rgba(70, 130, 180, 0.2); background-clip: padding-box; box-sizing: content-box;"
+            style="width: 8px; height: 8px; background-color: rgba(70, 130, 180, 0.6); border: solid 7px rgba(70, 130, 180, 0.2); background-clip: padding-box; box-sizing: content-box;"
           ></span>
           Prediction
         </div>
         <div class="legend">
-          <span style="background-color: rgba(0, 255, 0, 0.1)"></span> Navigable
-          Range
+          <span
+            style="background-color: rgba(0, 255, 0, 0.1); width: 20px; height: 20px;"
+          ></span>
+          Navigable Range
         </div>
         <div>
           <select