Mercurial > gemma
changeset 2283:1169f18a0f11
make room for searchbar
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 15 Feb 2019 12:32:22 +0100 |
parents | 2e40909a975d |
children | 9f327f197ddd |
files | client/src/components/App.vue client/src/components/Search.vue |
diffstat | 2 files changed, 27 insertions(+), 8 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/App.vue Fri Feb 15 11:55:56 2019 +0100 +++ b/client/src/components/App.vue Fri Feb 15 12:32:22 2019 +0100 @@ -4,7 +4,7 @@ <div class="topbar d-flex pt-3 mx-3"> <div class="mr-auto d-flex"> <Sidebar :routeName="routeName"></Sidebar> - <div class="d-flex flex-column ml-3" style="max-width: 600px"> + <div :class="searchContainer"> <Search v-if="routeName == 'mainview'"></Search> <Contextbox v-if="routeName == 'mainview'"></Contextbox> </div> @@ -33,6 +33,13 @@ </template> <style lang="scss" scoped> +.small { + width: $icon-width; +} +.wide { + width: 600px; +} + .userinterface { position: absolute; top: 0; @@ -80,10 +87,20 @@ name: "app", computed: { ...mapState("user", ["isAuthenticated"]), - ...mapState("application", ["contextBoxContent"]), + ...mapState("application", ["contextBoxContent", "showSearchbar"]), routeName() { const routeName = this.$route.name; return routeName; + }, + searchContainer() { + return [ + "d-flex", + "flex-column", + "ml-3", + { + wide: this.showSearchbar + } + ]; } }, components: {
--- a/client/src/components/Search.vue Fri Feb 15 11:55:56 2019 +0100 +++ b/client/src/components/Search.vue Fri Feb 15 12:32:22 2019 +0100 @@ -78,14 +78,10 @@ .searchgroup { margin-left: -3px; transition: width 0.3s; - width: 300px; + width: 571px; overflow: hidden; } -.searchgroup.big { - width: 571px; -} - .searchgroup-collapsed { width: 0; } @@ -134,6 +130,11 @@ .searchresults a:hover { background: #f8f8f8; } + +.smallbox { + width: 2rem; + transition: 0.3s; +} </style> <script> @@ -195,7 +196,8 @@ "input-group searchcontainer shadow-xs", { "d-flex": this.contextBoxContent !== "imports", - "d-none": this.contextBoxContent === "imports" && this.showContextBox + "d-none": this.contextBoxContent === "imports" && this.showContextBox, + smallbox: !this.showSearchbar } ]; },