Mercurial > gemma

diff client/src/application/Topbar.vue @ 621:b17a4482d07d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
feat: UI adaptation of 4 slots We have now basically 4 slots for UI components: Top middle (left, right) and bottom.
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 11 Sep 2018 13:41:16 +0200
parents c4a4dc612191
children d4fa28bfa6ec
line wrap: on
line diff
--- a/client/src/application/Topbar.vue	Tue Sep 11 12:38:34 2018 +0200
+++ b/client/src/application/Topbar.vue	Tue Sep 11 13:41:16 2018 +0200
@@ -1,21 +1,21 @@
 <template>
-  <div class="topbar d-flex flex-row justify-content-between">
-    <div>
-      <i @click="toggleSidebar" class="ui-element menubutton fa fa-bars"></i>
+    <div class="topbar d-flex flex-row justify-content-between">
+        <div>
+            <i @click="toggleSidebar" class="ui-element menubutton fa fa-bars"></i>
+        </div>
+        <div v-if="routeName != 'usermanagement'" class="input-group searchcontainer">
+            <div class="input-group-prepend shadow">
+                <span class="input-group-text searchlabel" for="search">
+                    <i class="fa fa-search"></i>
+                </span>
+            </div>
+            <input id="search" type="text" class="form-control ui-element search searchbar">
+        </div>
+        <div>
+            <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore shadow"></i>
+        </div>
+        <Layers v-if="routeName != 'usermanagement'"></Layers>
     </div>
-    <div v-if="routeName != 'usermanagement'" class="input-group searchcontainer">
-      <div class="input-group-prepend">
-        <span class="input-group-text searchlabel" for="search">
-          <i class="fa fa-search"></i>
-        </span>
-      </div>
-      <input id="search" type="text" class="form-control ui-element search searchbar">
-    </div>
-    <div>
-      <i @click="splitScreen" class="ui-element splitscreen fa fa-window-restore"></i>
-    </div>
-    <Layers v-if="routeName != 'usermanagement'"></Layers>
-  </div>
 </template>
 
 <style lang="scss">
@@ -26,11 +26,13 @@
   padding: 0.5rem;
   margin-right: 0.5rem;
   margin-left: 1rem;
+  border-radius: 5px;
 }
 
 .menubutton {
   background-color: white;
   padding: 0.5rem;
+  border-radius: 5px;
 }
 
 .searchcontainer {