Mercurial > gemma
changeset 5450:62caee603217 uiimprovements
Make BN-Overview smaller.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Wed, 14 Jul 2021 12:07:31 +0200 |
parents | d01c098562d9 |
children | 66f2c48aa69c |
files | client/src/components/App.vue client/src/components/Bottlenecks.vue client/src/components/Contextbox.vue client/src/components/Search.vue |
diffstat | 4 files changed, 58 insertions(+), 11 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/App.vue Tue Jul 13 16:17:01 2021 +0200 +++ b/client/src/components/App.vue Wed Jul 14 12:07:31 2021 +0200 @@ -2,7 +2,7 @@ <div id="app" class="main" style="overflow-x:scroll"> <div v-if="isAuthenticated" class="d-flex flex-column userinterface"> <div class="boxes d-flex p-2"> - <div class="mr-auto d-flex"> + <div class="d-flex"> <Sidebar /> <div :class="searchContainer"> <Search v-if="isMapVisible" />
--- a/client/src/components/Bottlenecks.vue Tue Jul 13 16:17:01 2021 +0200 +++ b/client/src/components/Bottlenecks.vue Wed Jul 14 12:07:31 2021 +0200 @@ -18,7 +18,7 @@ title: `${latestmeasurementLabel}`, width: '150px' }, - { id: 'properties.from', title: `${chainageLabel}`, width: '135px' } + { id: 'properties.from', title: `${chainageLabel}`, width: '155px' } ]" /> <UITableBody @@ -44,7 +44,7 @@ v-if="bottleneck.properties.current" /> </div> - <div class="table-cell" style="width: 135px"> + <div class="table-cell" style="flex-grow:1;"> {{ displayCurrentChainage( bottleneck.properties.from, @@ -52,7 +52,6 @@ ) }} </div> - <div class="table-cell center" style="flex-grow: 1"></div> </template> <template v-slot:expand="{ item: bottleneck }"> <a
--- a/client/src/components/Contextbox.vue Tue Jul 13 16:17:01 2021 +0200 +++ b/client/src/components/Contextbox.vue Wed Jul 14 12:07:31 2021 +0200 @@ -47,7 +47,10 @@ "ui-element shadow-xs contextbox", { contextboxcollapsed: !this.showContextBox, - contextboxextended: this.showContextBox, + contextboxextended: + this.showContextBox && this.contextBoxContent !== "bottlenecks", + contextboxbottlenecks: + this.showContextBox && this.contextBoxContent === "bottlenecks", "rounded-bottom": this.contextBoxContent !== "imports", rounded: this.contextBoxContent === "imports" } @@ -79,9 +82,6 @@ overflow: hidden; background: #fff; } -.contextbox > div:last-child { - width: 860px; -} .contextboxcollapsed { max-width: 0; @@ -89,7 +89,15 @@ } .contextboxextended { - max-width: 860px; + max-width: 858px; + transition: 0.1s; + transition-timing-function: ease; +} + +.contextboxbottlenecks { + max-width: 650px; + transition: 0.1s; + transition-timing-function: ease; } .close-contextbox {
--- a/client/src/components/Search.vue Tue Jul 13 16:17:01 2021 +0200 +++ b/client/src/components/Search.vue Wed Jul 14 12:07:31 2021 +0200 @@ -9,6 +9,10 @@ :class="[ 'searchgroup', { + searchgroupwidthbottlenecks: + this.showSearchbar && this.contextBoxContent === 'bottlenecks', + sgnobottlenecks: + this.showSearchbar && this.contextBoxContent !== 'bottlenecks', 'searchgroup-collapsed': !showSearchbar, big: showContextBox && @@ -85,7 +89,36 @@ <style lang="scss" scoped> .searchcontainer { opacity: 0.96; +} + +.searchcontainerwitdh { width: 860px; + transition: 0.1s; + transition-timing-function: ease; +} + +.searchcontainerwitdhbottlenecks { + width: 650px; + transition: 0.1s; + transition-timing-function: ease; +} + +.searchgroupwidth { + max-width: 860px; + transition: 0.1s; + transition-timing-function: ease; +} + +.sgnobottlenecks { + width: 817px; + transition: 0.1s; + transition-timing-function: ease; +} + +.searchgroupwidthbottlenecks { + width: 617px; + transition: 0.1s; + transition-timing-function: ease; } .searchcontainer .searchbar { @@ -94,7 +127,6 @@ } .searchgroup { - width: 827px; overflow: hidden; } @@ -218,7 +250,15 @@ { "d-flex": this.contextBoxContent !== "imports", "d-none": this.contextBoxContent === "imports" && this.showContextBox, - smallbox: !this.showSearchbar + smallbox: !this.showSearchbar, + searchcontainerwidth: + this.showSearchbar && this.contextBoxContent !== "bottlenecks", + searchgroupwidth: + this.showSearchbar && this.contextBoxContent !== "bottlenecks", + searchcontainerwidthbottlenecks: + this.showSearchbar && this.contextBoxContent === "bottlenecks", + searchgroupwidthbottleneks: + this.showSearchbar && this.contextBoxContent === "bottlenecks" } ]; },