Mercurial > gemma
changeset 2871:2cdf43c84a8c
client: aligned width of searchbar and content box
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 29 Mar 2019 14:23:06 +0100 |
parents | 35f6e4383161 |
children | bfea3f80ca9a |
files | client/src/components/Bottlenecks.vue client/src/components/Search.vue |
diffstat | 2 files changed, 30 insertions(+), 14 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Bottlenecks.vue Fri Mar 29 13:37:17 2019 +0100 +++ b/client/src/components/Bottlenecks.vue Fri Mar 29 14:23:06 2019 +0100 @@ -7,13 +7,18 @@ /> <UITableHeader :columns="[ - { id: 'properties.name', title: `${nameLabel}`, class: 'col-4' }, + { id: 'properties.name', title: `${nameLabel}`, width: '200px' }, + { + id: 'properties.responsible_country', + title: `${countryLabel}`, + width: '80px' + }, { id: 'properties.current', title: `${latestmeasurementLabel}`, - class: 'col-3' + width: '150px' }, - { id: 'properties.from', title: `${chainageLabel}`, class: 'col-3' } + { id: 'properties.from', title: `${chainageLabel}`, width: '150px' } ]" /> <UITableBody @@ -22,15 +27,18 @@ :active="openBottleneck" v-slot="{ item: bottleneck }" > - <div class="col-4 py-2 text-left"> + <div class="table-cell truncate text-left" style="width: 200px"> <a href="#" @click="selectBottleneck(bottleneck)">{{ bottleneck.properties.name }}</a> </div> - <div class="col-3 py-2"> + <div class="table-cell text-center" style="width: 80px"> + {{ bottleneck.properties.responsible_country }} + </div> + <div class="table-cell" style="width: 150px"> {{ bottleneck.properties.current | surveyDate }} </div> - <div class="col-3 py-2"> + <div class="table-cell" style="width: 150px"> {{ displayCurrentChainage( bottleneck.properties.from, @@ -38,7 +46,10 @@ ) }} </div> - <div class="col-2 py-2 pr-0 text-right d-flex flex-column"> + <div + class="table-cell pr-0 text-right d-flex flex-column" + style="width: 30px" + > <a class="text-info mt-auto mb-auto mr-2" @click="loadSurveys(bottleneck)" @@ -66,11 +77,8 @@ </a> </div> <div - :class="[ - 'col-12 p-0', - 'surveys', - { open: openBottleneck === bottleneck } - ]" + :class="['p-0', 'surveys', { open: openBottleneck === bottleneck }]" + style="width: 100%" > <a href="#" @@ -99,6 +107,11 @@ color: #fff !important .surveys border-bottom: solid 1px $color-info + .table-cell + padding: 0 3px + border-right: solid 1px #dee2e6 + &:last-child + border-right: none .surveys overflow: hidden max-height: 0 @@ -147,6 +160,9 @@ bottlenecksLabel() { return this.$gettext("Bottlenecks"); }, + countryLabel() { + return this.$gettext("Country"); + }, nameLabel() { return this.$gettext("Name"); },
--- a/client/src/components/Search.vue Fri Mar 29 13:37:17 2019 +0100 +++ b/client/src/components/Search.vue Fri Mar 29 14:23:06 2019 +0100 @@ -74,7 +74,7 @@ <style lang="scss" scoped> .searchcontainer { opacity: 0.96; - width: 663px; + width: 660px; } .searchcontainer .searchbar { @@ -83,7 +83,7 @@ } .searchgroup { - width: 631px; + width: 628px; overflow: hidden; }