Mercurial > gemma

comparison client/src/components/gauge/HydrologicalConditions.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 aac1ca73e92a
children db1dc197dc43
comparison
equal deleted inserted replaced
3322:b6afae085f5e 3323:de0d0685a17b
7 class="rounded-0" 7 class="rounded-0"
8 /> 8 />
9 <div class="d-flex flex-fill"> 9 <div class="d-flex flex-fill">
10 <DiagramLegend> 10 <DiagramLegend>
11 <div class="legend"> 11 <div class="legend">
12 <span style="background-color: red"></span> 12 <span
13 style="background-color: red; width: 20px; height: 20px;"
14 ></span>
13 {{ yearCompare }} 15 {{ yearCompare }}
14 </div> 16 </div>
15 <div class="legend"> 17 <div class="legend">
16 <span style="background-color: orange"></span> Q25% 18 <span
19 style="background-color: orange; width: 20px; height: 20px;"
20 ></span>
21 Q25%
17 </div> 22 </div>
18 <div class="legend"> 23 <div class="legend">
19 <span style="background-color: black"></span> Median 24 <span
25 style="background-color: black; width: 20px; height: 20px;"
26 ></span>
27 Median
20 </div> 28 </div>
21 <div class="legend"> 29 <div class="legend">
22 <span style="background-color: purple"></span> Q75% 30 <span
31 style="background-color: purple; width: 20px; height: 20px;"
32 ></span>
33 Q75%
23 </div> 34 </div>
24 <div class="legend"> 35 <div class="legend">
25 <span style="background-color: lightsteelblue"></span> 36 <span
37 style="background-color: lightsteelblue; width: 20px; height: 20px;"
38 ></span>
26 Long-term Amplitude 39 Long-term Amplitude
27 </div> 40 </div>
28 <select 41 <select
29 @change="applyChange" 42 @change="applyChange"
30 v-model="form.template" 43 v-model="form.template"