Mercurial > gemma
changeset 1170:3807b6c2cfbf
merge
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Wed, 14 Nov 2018 12:31:15 +0100 |
parents | a9e455c017cb (diff) 930fdd8b474f (current diff) |
children | d61be0d972d8 |
files | |
diffstat | 3 files changed, 46 insertions(+), 59 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/App.vue Wed Nov 14 12:23:10 2018 +0100 +++ b/client/src/App.vue Wed Nov 14 12:31:15 2018 +0100 @@ -6,7 +6,6 @@ </div> <div class="midcontainer d-flex flex-row"> <div class="leftcontainer"> - <Sidebar :routeName="routeName"></Sidebar> <Bottlenecks v-if="routeName == 'mainview'"></Bottlenecks> </div> <div class="middle"></div> @@ -99,7 +98,6 @@ } }, components: { - Sidebar: () => import("./application/Sidebar"), Bottlenecks: () => import("./bottlenecks/Bottlenecks"), Topbar: () => import("./application/Topbar"), Drawtool: () => import("./drawtool/Drawtool"),
--- a/client/src/application/Sidebar.vue Wed Nov 14 12:23:10 2018 +0100 +++ b/client/src/application/Sidebar.vue Wed Nov 14 12:31:15 2018 +0100 @@ -1,5 +1,8 @@ <template> <div :class="sidebarStyle"> + <div @click="$store.commit('application/showSidebar', !showSidebar)" class="menubutton position-absolute d-flex justify-content-center"> + <i class="ui-element d-print-none fa fa-bars"></i> + </div> <div :class="menuStyle"> <div class="menupoints" v-if="this.showSidebar"> <router-link to="/" class="text-body d-flex flex-row nav-link"> @@ -72,15 +75,13 @@ }; }, sidebarStyle() { - return { - "ui-element": true, - sidebar: true, - overlay: true, - sidebarcollapsed: !this.showSidebar, - sidebarextended: this.showSidebar, - shadow: true, - "d-print-none": true - }; + return [ + "ui-element position-relative sidebar shadow d-print-none", + { + sidebarcollapsed: !this.showSidebar, + sidebarextended: this.showSidebar + } + ]; } }, methods: { @@ -95,45 +96,40 @@ }; </script> -<style lang="scss" scoped> -.menupoints { - text-align: left; -} +<style lang="sass" scoped> +.menupoints + text-align: left -.router-link-exact-active { - background-color: #f2f2f2; -} +.menubutton + background-color: white + padding: $small-offset + border-radius: $border-radius + height: $icon-height + width: $icon-width + top: 0 + left: 0 -.navicon { - margin-right: $small-offset; -} +.router-link-exact-active + background-color: #f2f2f2 -.menu { - padding-top: $small-offset; -} +.navicon + margin-right: $small-offset -.sidebar { - top: $offset; - left: $offset; - background-color: #ffffff; - padding-top: $large-offset; - opacity: $slight-transparent; - border-radius: $border-radius; -} +.menu + padding-top: $small-offset + +.sidebar + background-color: #ffffff + padding-top: $large-offset + opacity: $slight-transparent + border-radius: $border-radius -.overlay { - position: absolute; - z-index: -1; -} +.sidebarcollapsed + height: 30px + width: 30px + transition: $transition-fast -.sidebarcollapsed { - height: 30px; - width: 30px; - transition: $transition-fast; -} - -.sidebarextended { - min-height: $sidebar-height; - width: $sidebar-width; -} +.sidebarextended + min-height: $sidebar-height + min-width: $sidebar-width </style>
--- a/client/src/application/Topbar.vue Wed Nov 14 12:23:10 2018 +0100 +++ b/client/src/application/Topbar.vue Wed Nov 14 12:31:15 2018 +0100 @@ -1,8 +1,6 @@ <template> <div class="topbar d-flex flex-row"> - <div @click="$store.commit('application/showSidebar', !showSidebar)"> - <i class="ui-element menubutton d-print-none fa fa-bars"></i> - </div> + <Sidebar :routeName="routeName"></Sidebar> <div v-if="routeName == 'mainview'" :class="searchbarContainerStyle"> <div class="input-group-prepend shadow"> <span @click="toggleSearchbar" :class="searchButtonStyle" for="search"> @@ -43,14 +41,6 @@ height: $icon-height width: $icon-width -.menubutton - background-color: white - padding: $small-offset - border-radius: $border-radius - margin-left: $offset - height: $icon-height - width: $icon-width - .searchcontainer height: $icon-height border-radius: 0.25rem @@ -83,6 +73,7 @@ .topbar padding-top: $offset + margin-left: $offset margin-right: $offset .logout @@ -111,14 +102,16 @@ import { HTTP } from "../application/lib/http"; import Identify from "../identify/Identify"; import Layers from "../layers/Layers"; +import Sidebar from "./Sidebar"; const setFocus = () => document.querySelector("#search").focus(); export default { name: "topbar", components: { - Identify: Identify, - Layers: Layers + Identify, + Layers, + Sidebar }, data() { return {