Mercurial > gemma
changeset 3279:215173f62900
available_fairway_depth: improve legend layout
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Thu, 16 May 2019 09:24:50 +0200 |
parents | 831193935739 |
children | 8fb81b45085f |
files | client/src/components/fairway/AvailableFairwayDepth.vue |
diffstat | 1 files changed, 17 insertions(+), 14 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Wed May 15 19:42:21 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Thu May 16 09:24:50 2019 +0200 @@ -2,19 +2,19 @@ <div class="d-flex flex-column flex-fill"> <UIBoxHeader icon="chart-area" :title="title" :closeCallback="close" /> <UISpinnerOverlay v-if="loading" /> - <div class="mt-3 d-flex flex-row my-auto"> - <div class="my-auto mx-auto"> - <ul class="list-group"> - <li - :style="legendStyle(index)" - class="text-left list-group-item" - v-for="(entry, index) in legend" - :key="index" - > - {{ entry }} - </li> - </ul> - <div class="my-auto mx-auto"> + <div class="d-flex flex-fill"> + <DiagramLegend> + <div v-for="(entry, index) in legend" :key="index" class="legend"> + <span + :style=" + `${legendStyle( + index + )}; border-radius: 0; width: 40px; height: 20px;` + " + ></span> + {{ entry }} + </div> + <div> <select @change="applyChange" v-model="form.template" @@ -36,7 +36,7 @@ <translate>Export to PDF</translate> </button> </div> - </div> + </DiagramLegend> <div ref="diagramContainer" :id="containerId" @@ -79,6 +79,9 @@ export default { mixins: [diagram, pdfgen], + components: { + DiagramLegend: () => import("@/components/DiagramLegend") + }, data() { return { containerId: "availablefairwaydepth",