Mercurial > gemma
changeset 1171:d61be0d972d8
fixed searchbar overlapping issue
utilized flexbox to make boxes in topbar more flexible
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 14 Nov 2018 12:54:13 +0100 |
parents | 3807b6c2cfbf |
children | c3955e3db074 fdab87f013e2 |
files | client/src/App.vue client/src/application/Sidebar.vue client/src/application/Topbar.vue client/src/application/assets/application.scss client/src/bottlenecks/Bottlenecks.vue |
diffstat | 5 files changed, 87 insertions(+), 119 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/App.vue Wed Nov 14 12:31:15 2018 +0100 +++ b/client/src/App.vue Wed Nov 14 12:54:13 2018 +0100 @@ -4,13 +4,7 @@ <div class="topcontainer"> <Topbar :routeName="routeName"></Topbar> </div> - <div class="midcontainer d-flex flex-row"> - <div class="leftcontainer"> - <Bottlenecks v-if="routeName == 'mainview'"></Bottlenecks> - </div> - <div class="middle"></div> - <div class="rightcontainer"></div> - </div> + <div class="flex-fill"></div> <div class="bottomcontainer d-flex flex-row align-items-end"> <Morphtool v-if="routeName == 'mainview'"></Morphtool> <Pdftool v-if="routeName == 'mainview'"></Pdftool> @@ -24,50 +18,30 @@ </div> </template> -<style lang="scss" scoped> -.topcontainer { - height: 10vh; -} - -.bottomcontainer { - height: 10vh; -} +<style lang="sass" scoped> +.topcontainer + height: 10vh -.midcontainer { - height: 80vh; -} - -.rightcontainer { - width: 20vw; -} - -.leftcontainer { - width: 20vw; -} +.bottomcontainer + height: 10vh -.middle { - width: 60vw; -} +.userinterface + position: absolute + top: 0 + left: 0 + height: 100vh + width: 100vw + z-index: 4 + pointer-events: none -.userinterface { - position: absolute; - top: 0; - left: 0; - height: 100vh; - width: 100vw; - z-index: 4; - pointer-events: none; -} - -#app { - height: 100vh; - width: 100vw; - font-family: "Avenir", Helvetica, Arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-align: center; - color: #2c3e50; -} +#app + height: 100vh + width: 100vw + font-family: "Avenir", Helvetica, Arial, sans-serif + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale + text-align: center + color: #2c3e50 </style> <script> @@ -98,7 +72,6 @@ } }, components: { - Bottlenecks: () => import("./bottlenecks/Bottlenecks"), Topbar: () => import("./application/Topbar"), Drawtool: () => import("./drawtool/Drawtool"), Morphtool: () => import("./morphtool/Morphtool"),
--- a/client/src/application/Sidebar.vue Wed Nov 14 12:31:15 2018 +0100 +++ b/client/src/application/Sidebar.vue Wed Nov 14 12:54:13 2018 +0100 @@ -76,7 +76,7 @@ }, sidebarStyle() { return [ - "ui-element position-relative sidebar shadow d-print-none", + "ui-element position-relative sidebar shadow d-print-none mb-auto", { sidebarcollapsed: !this.showSidebar, sidebarextended: this.showSidebar @@ -130,6 +130,7 @@ transition: $transition-fast .sidebarextended - min-height: $sidebar-height + height: $sidebar-height + width: $sidebar-width min-width: $sidebar-width </style>
--- a/client/src/application/Topbar.vue Wed Nov 14 12:31:15 2018 +0100 +++ b/client/src/application/Topbar.vue Wed Nov 14 12:54:13 2018 +0100 @@ -1,6 +1,7 @@ <template> <div class="topbar d-flex flex-row"> <Sidebar :routeName="routeName"></Sidebar> + <Bottlenecks v-if="routeName == 'mainview'"></Bottlenecks> <div v-if="routeName == 'mainview'" :class="searchbarContainerStyle"> <div class="input-group-prepend shadow"> <span @click="toggleSearchbar" :class="searchButtonStyle" for="search"> @@ -46,8 +47,9 @@ border-radius: 0.25rem .searchbar-expanded - margin-left: 22vw + margin-left: auto margin-right: auto + padding-left: $offset width: $searchbar-width !important .searchbar border-top-left-radius: 0 !important @@ -103,6 +105,7 @@ import Identify from "../identify/Identify"; import Layers from "../layers/Layers"; import Sidebar from "./Sidebar"; +import Bottlenecks from "../bottlenecks/Bottlenecks"; const setFocus = () => document.querySelector("#search").focus(); @@ -111,7 +114,8 @@ components: { Identify, Layers, - Sidebar + Sidebar, + Bottlenecks }, data() { return {
--- a/client/src/application/assets/application.scss Wed Nov 14 12:31:15 2018 +0100 +++ b/client/src/application/assets/application.scss Wed Nov 14 12:54:13 2018 +0100 @@ -24,7 +24,7 @@ $identify-width: 20rem; $offset: 1rem; $searchbar-width: 50vw; -$sidebar-height: 16rem; +$sidebar-height: 27rem; $sidebar-width: 15rem; $slight-transparent: 0.96; $small-offset: 0.5rem;
--- a/client/src/bottlenecks/Bottlenecks.vue Wed Nov 14 12:31:15 2018 +0100 +++ b/client/src/bottlenecks/Bottlenecks.vue Wed Nov 14 12:54:13 2018 +0100 @@ -1,5 +1,5 @@ <template> - <div :class="bottlenecksStyle" :style="'left: ' + (showSidebar ? '17rem' : '64px')"> + <div :class="bottlenecksStyle"> <div @click="$store.commit('application/showBottlenecks', !showBottlenecks);" class="ui-element close-bottlenecks"> <i class="fa fa-close"></i> </div> @@ -85,22 +85,22 @@ ...mapState("bottlenecks", ["bottlenecks"]), ...mapState("map", ["openLayersMap"]), bottlenecksStyle() { - return { - "ui-element": true, - bottlenecks: true, - overlay: true, - bottleneckscollapsed: !this.showBottlenecks, - bottlenecksextended: this.showBottlenecks, - shadow: true - }; + return [ + "ui-element shadow bottlenecks", + { + bottleneckscollapsed: !this.showBottlenecks, + bottlenecksextended: this.showBottlenecks + } + ]; }, sortClass() { - return { - fa: true, - "fa-sort-amount-asc": this.sortDirection === "ASC", - "fa-sort-amount-desc": this.sortDirection === "DESC", - "ml-1": true - }; + return [ + "fa ml-1", + { + "fa-sort-amount-asc": this.sortDirection === "ASC", + "fa-sort-amount-desc": this.sortDirection === "DESC" + } + ]; } }, methods: { @@ -207,62 +207,52 @@ }; </script> -<style lang="scss" scoped> -.bottlenecks { - position: absolute; - z-index: -2; - top: $offset; - background-color: #ffffff; - padding-top: $offset; - opacity: $slight-transparent; - border-radius: $border-radius; - transition: left 0.3s ease; - overflow: hidden; - background: #fff; -} +<style lang="sass" scoped> +.bottlenecks + position: relative + background-color: #ffffff + padding-top: $offset + opacity: $slight-transparent + border-radius: $border-radius + transition: left 0.3s ease + overflow: hidden + background: #fff + margin-left: $offset -.bottleneckscollapsed { - width: 0; - height: 0; - transition: $transition-fast; -} +.bottleneckscollapsed + width: 0 + height: 0 + transition: $transition-fast -.bottlenecksextended { - width: 600px; -} +.bottlenecksextended + min-width: 600px -.close-bottlenecks { - position: absolute; - z-index: 2; - right: 0; - top: 7px; - border-radius: $border-radius; - height: $icon-width; - width: $icon-height; - display: none; -} +.close-bottlenecks + position: absolute + z-index: 2 + right: 0 + top: 7px + border-radius: $border-radius + height: $icon-width + width: $icon-height + display: none -.bottlenecksextended .close-bottlenecks { - display: block; -} +.bottlenecksextended .close-bottlenecks + display: block -.bottleneck-list { - overflow-y: auto; - max-height: 500px; -} +.bottleneck-list + overflow-y: auto + max-height: 500px -.surveys { - max-height: 0; - overflow: hidden; - transition: max-height 0.3s ease; -} +.surveys + max-height: 0 + overflow: hidden + transition: max-height 0.3s ease -.surveys.open { - max-height: 999px; -} +.surveys.open + max-height: 999px -.sort-link { - color: #444; - font-weight: bold; -} +.sort-link + color: #444 + font-weight: bold </style>