Mercurial > gemma

changeset 2843:451d73940c81

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: diagrams: more compact legend style, removed unnecessary legend items
author Markus Kottlaender <markus@intevation.de>
date Thu, 28 Mar 2019 11:26:04 +0100
parents 37c2a73ed001
children 77cef49d93ca
files client/src/components/DiagramLegend.vue client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue
diffstat 3 files changed, 6 insertions(+), 15 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/DiagramLegend.vue	Thu Mar 28 11:16:32 2019 +0100
+++ b/client/src/components/DiagramLegend.vue	Thu Mar 28 11:26:04 2019 +0100
@@ -17,7 +17,8 @@
 <style lang="sass" scoped>
 #diagram-legend
   position: relative
-  width: 200px
+  width: 180px
+  font-size: 0.8rem
   .toggle
     margin-left: 0
     position: absolute
@@ -36,8 +37,8 @@
     span
       vertical-align: middle
       display: inline-block
-      width: 15px
-      height: 15px
+      width: 12px
+      height: 12px
       border-radius: 50%
 </style>
 
--- a/client/src/components/gauge/HydrologicalConditions.vue	Thu Mar 28 11:16:32 2019 +0100
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Thu Mar 28 11:26:04 2019 +0100
@@ -14,14 +14,9 @@
       <div class="legend">
         <span style="background-color: purple"></span> Q75%
       </div>
-      <div class="legend"><span style="background-color: red"></span> HDC</div>
-      <div class="legend">
-        <span style="background-color: green"></span> LDC
-      </div>
-      <div class="legend"><span style="background-color: grey"></span> MW</div>
       <div class="legend">
         <span style="background-color: lightsteelblue"></span>
-        Amplitude
+        Long-term Amplitude
       </div>
     </DiagramLegend>
     <div
--- a/client/src/components/gauge/Waterlevel.vue	Thu Mar 28 11:16:32 2019 +0100
+++ b/client/src/components/gauge/Waterlevel.vue	Thu Mar 28 11:26:04 2019 +0100
@@ -6,7 +6,7 @@
       </div>
       <div class="legend">
         <span
-          style="width: 5px; height: 5px; background-color: rgba(70, 130, 180, 0.6); border: solid 5px rgba(70, 130, 180, 0.2); background-clip: padding-box; box-sizing: content-box;"
+          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;"
         ></span>
         Prediction
       </div>
@@ -14,11 +14,6 @@
         <span style="background-color: rgba(0, 255, 0, 0.1)"></span> Navigable
         Range
       </div>
-      <div class="legend"><span style="background-color: red"></span> HDC</div>
-      <div class="legend">
-        <span style="background-color: green"></span> LDC
-      </div>
-      <div class="legend"><span style="background-color: grey"></span> MW</div>
     </DiagramLegend>
     <div
       class="d-flex flex-fill justify-content-center align-items-center diagram-container"