Mercurial > gemma
changeset 3323:de0d0685a17b
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