Mercurial > gemma

comparison client/src/components/fairway/AvailableFairwayDepth.vue @ 3279:215173f62900

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
available_fairway_depth: improve legend layout
author Fadi Abbud <fadi.abbud@intevation.de>
date Thu, 16 May 2019 09:24:50 +0200
parents 050e72ce5cf7
children 8fb81b45085f
comparison
equal deleted inserted replaced
3278:831193935739 3279:215173f62900
1 <template> 1 <template>
2 <div class="d-flex flex-column flex-fill"> 2 <div class="d-flex flex-column flex-fill">
3 <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" /> 3 <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" />
4 <UISpinnerOverlay v-if="loading" /> 4 <UISpinnerOverlay v-if="loading" />
5 <div class="mt-3 d-flex flex-row my-auto"> 5 <div class="d-flex flex-fill">
6 <div class="my-auto mx-auto"> 6 <DiagramLegend>
7 <ul class="list-group"> 7 <div v-for="(entry, index) in legend" :key="index" class="legend">
8 <li 8 <span
9 :style="legendStyle(index)" 9 :style="
10 class="text-left list-group-item" 10 `${legendStyle(
11 v-for="(entry, index) in legend" 11 index
12 :key="index" 12 )}; border-radius: 0; width: 40px; height: 20px;`
13 > 13 "
14 {{ entry }} 14 ></span>
15 </li> 15 {{ entry }}
16 </ul> 16 </div>
17 <div class="my-auto mx-auto"> 17 <div>
18 <select 18 <select
19 @change="applyChange" 19 @change="applyChange"
20 v-model="form.template" 20 v-model="form.template"
21 class="form-control d-block custom-select-sm w-100 mt-1" 21 class="form-control d-block custom-select-sm w-100 mt-1"
22 > 22 >
34 class="btn btn-sm btn-info d-block w-100 mt-1" 34 class="btn btn-sm btn-info d-block w-100 mt-1"
35 > 35 >
36 <translate>Export to PDF</translate> 36 <translate>Export to PDF</translate>
37 </button> 37 </button>
38 </div> 38 </div>
39 </div> 39 </DiagramLegend>
40 <div 40 <div
41 ref="diagramContainer" 41 ref="diagramContainer"
42 :id="containerId" 42 :id="containerId"
43 class="mx-auto my-auto diagram-container" 43 class="mx-auto my-auto diagram-container"
44 ></div> 44 ></div>
77 77
78 const hoursInDays = x => x / 24; 78 const hoursInDays = x => x / 24;
79 79
80 export default { 80 export default {
81 mixins: [diagram, pdfgen], 81 mixins: [diagram, pdfgen],
82 components: {
83 DiagramLegend: () => import("@/components/DiagramLegend")
84 },
82 data() { 85 data() {
83 return { 86 return {
84 containerId: "availablefairwaydepth", 87 containerId: "availablefairwaydepth",
85 loading: false, 88 loading: false,
86 width: 1000, 89 width: 1000,