# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1550230342 -3600
# Node ID 1169f18a0f11ec3597a47efe19c2f4466638afae
# Parent  2e40909a975d61635a5a2852f2eb831c1655e323
make room for searchbar

diff -r 2e40909a975d -r 1169f18a0f11 client/src/components/App.vue
--- 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: {
diff -r 2e40909a975d -r 1169f18a0f11 client/src/components/Search.vue
--- 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
         }
       ];
     },