Mercurial > gemma

diff client/src/components/gauge/Waterlevel.vue @ 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 ad27721d804d
children 13bb0ff62ac8
line wrap: on
line diff
--- 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