# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1536666076 -7200
# Node ID b17a4482d07d7cb2cd621892a15ca850b414a07c
# Parent  ef00684e021f788a69b2cd9390de1560459ecc0e
feat: UI adaptation of 4 slots

We have now basically 4 slots for UI components: Top middle (left, right)
and bottom.

diff -r ef00684e021f -r b17a4482d07d client/src/App.vue
--- a/client/src/App.vue	Tue Sep 11 12:38:34 2018 +0200
+++ b/client/src/App.vue	Tue Sep 11 13:41:16 2018 +0200
@@ -1,11 +1,28 @@
 <template>
-  <div id="app" class="main d-flex flex-column">
-    <div class="userinterface">
-      <Topbar v-if="isAuthenticated"></Topbar>
-      <Sidebar v-if="isAuthenticated"></Sidebar>
+    <div id="app" class="main">
+        <div class="d-flex flex-column userinterface">
+            <div class="topcontainer">
+                <Topbar v-if="isAuthenticated"></Topbar>
+            </div>
+            <div class="midcontainer d-flex flex-row">
+                <div class="leftcontainer">
+                    <Sidebar v-if="isAuthenticated"></Sidebar>
+                </div>
+                <div class="middle">
+
+                </div>
+                <div class="rightcontainer">
+
+                </div>
+            </div>
+            <div class="bottomcontainer">
+                <User v-if="isAuthenticated"></User>
+            </div>
+        </div>
+        <div class="d-flex flex-column">
+            <router-view/>
+        </div>
     </div>
-    <router-view/>
-  </div>
 </template>
 
 <style lang="scss">
@@ -20,6 +37,33 @@
   background-color: #efefef !important;
 }
 
+.topcontainer {
+  height: 10vh;
+}
+
+.bottomcontainer {
+  .top {
+    height: 10vh;
+  }
+}
+
+.midcontainer {
+  height: 80vh;
+}
+
+.rightcontainer {
+  width: 20vw;
+}
+
+.leftcontainer {
+  width: 20vw;
+}
+
+.middle {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .userinterface {
   position: absolute;
   top: 0;
@@ -45,6 +89,7 @@
 import Sidebar from "./application/Sidebar";
 import Topbar from "./application/Topbar";
 import { mapGetters } from "vuex";
+import User from "./application/User";
 
 export default {
   name: "app",
@@ -53,7 +98,8 @@
   },
   components: {
     Sidebar,
-    Topbar
+    Topbar,
+    User
   }
 };
 </script>
diff -r ef00684e021f -r b17a4482d07d client/src/application/Main.vue
--- a/client/src/application/Main.vue	Tue Sep 11 12:38:34 2018 +0200
+++ b/client/src/application/Main.vue	Tue Sep 11 13:41:16 2018 +0200
@@ -1,10 +1,10 @@
 <template>
-  <div class="main d-flex flex-column">
-    <Maplayer :split="isSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer>
-    <div v-if="isSplitscreen" class="profile d-flex flex-row">
-      <FairwayProfile height="300" width="1024" :xScale="[0, 300]" :yScaleLeft="[191, 199]" :yScaleRight="[-6, 1]" :margin="{ top: 20, right: 40, bottom: 20, left: 40 }"></FairwayProfile>
+    <div class="main d-flex flex-column">
+        <Maplayer :split="isSplitscreen" :lat="6155376" :long="1819178" :zoom="11"></Maplayer>
+        <div v-if="isSplitscreen" class="profile d-flex flex-row">
+            <FairwayProfile height="300" width="1024" :xScale="[0, 300]" :yScaleLeft="[191, 199]" :yScaleRight="[-6, 1]" :margin="{ top: 20, right: 40, bottom: 20, left: 40 }"></FairwayProfile>
+        </div>
     </div>
-  </div>
 </template>
 
 <style lang="scss">
diff -r ef00684e021f -r b17a4482d07d client/src/application/Sidebar.vue
--- a/client/src/application/Sidebar.vue	Tue Sep 11 12:38:34 2018 +0200
+++ b/client/src/application/Sidebar.vue	Tue Sep 11 13:41:16 2018 +0200
@@ -1,29 +1,24 @@
 <template>
-  <div :class="sidebarStyle">
-    <div :class="menuStyle">
-      <router-link to="/" class="text-body d-flex flex-row nav-link">
-        <i class="fa fa-map-o align-self-center navicon"></i>Riverbed Morphology</router-link>
-      <div v-if="isSysAdmin">
-        <hr/>
-        <div class="nav-link d-flex menupadding text-muted">Administration</div>
-        <router-link class="text-body d-flex flex-row nav-link" to="usermanagement">
-          <i class="fa fa-address-card-o align-self-center navicon"></i>Users
-        </router-link>
-      </div>
+    <div :class="sidebarStyle">
+        <div :class="menuStyle">
+            <router-link to="/" class="text-body d-flex flex-row nav-link">
+                <i class="fa fa-map-o align-self-center navicon"></i>Riverbed Morphology</router-link>
+            <div v-if="isSysAdmin">
+                <hr/>
+                <div class="nav-link d-flex menupadding text-muted">Administration</div>
+                <router-link class="text-body d-flex flex-row nav-link" to="usermanagement">
+                    <i class="fa fa-address-card-o align-self-center navicon"></i>Users
+                </router-link>
+            </div>
+        </div>
     </div>
-    <User></User>
-  </div>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
-import User from "./User";
 
 export default {
   name: "sidebar",
-  components: {
-    User: User
-  },
   computed: {
     ...mapGetters("user", ["isSysAdmin"]),
     ...mapGetters("application", ["sidebarCollapsed"]),
@@ -61,14 +56,12 @@
 
 .menu {
   padding-top: 5vh;
-  height: 90%;
 }
 
 .sidebar {
   top: 0;
   background-color: #ffffff;
   padding-top: $large-offset;
-  height: 100vh;
   opacity: 0.96;
 }
 
diff -r ef00684e021f -r b17a4482d07d client/src/application/Topbar.vue
--- 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 {
diff -r ef00684e021f -r b17a4482d07d client/src/application/User.vue
--- a/client/src/application/User.vue	Tue Sep 11 12:38:34 2018 +0200
+++ b/client/src/application/User.vue	Tue Sep 11 13:41:16 2018 +0200
@@ -1,19 +1,20 @@
 <template>
-  <div class="ui-element d-flex justify-content-around usermanagement">
-    <img class="userpic" src="../application/assets/user.png">
-    <span class="username align-self-center">{{ userinfo }}</span>
-    <span class="logout align-self-center" @click="logoff">
-      <i class="fa fa-power-off"></i>
-    </span>
-  </div>
+    <div class="ui-element d-flex flex-row justify-content-around usermanagement shadow">
+        <img class="userpic" src="../application/assets/user.png">
+        <span class="username align-self-center">{{ userinfo }}</span>
+        <span class="logout align-self-center" @click="logoff">
+            <i class="fa fa-power-off"></i>
+        </span>
+    </div>
 </template>
 
 <style lang="scss">
 .usermanagement {
   background: white;
+  margin-left: 1rem;
   width: 150px;
   padding: 0.25rem;
-  border-radius: 0.25rem;
+  border-radius: 5px;
 }
 </style>
 
diff -r ef00684e021f -r b17a4482d07d client/src/application/assets/application.scss
--- a/client/src/application/assets/application.scss	Tue Sep 11 12:38:34 2018 +0200
+++ b/client/src/application/assets/application.scss	Tue Sep 11 13:41:16 2018 +0200
@@ -1,9 +1,9 @@
-$offset: 20px;
-$small-offset: 10px;
-$large-offset: 30px;
-$x-large-offset: 50px;
-$iconsize: 3em;
-$iconLineHeight: 0.25em;
+$offset: 1rem;
+$small-offset: 0.5rem;
+$large-offset: 2rem;
+$x-large-offset: 3rem;
+$iconsize: 3rem;
+$iconLineHeight: 0.25rem;
 $iconwidth: 20px;
 $basic-shadow: 1px 3px 8px 2px rgba(220, 220, 220, 0.75);
 $basic-shadow-light: 1px 1px 12px 1px rgba(235, 235, 235, 0.75);
@@ -12,6 +12,10 @@
 $transition-slow: 3s;
 $topbarheight: 5vh;
 
+.debug {
+  border: 1px solid red;
+}
+
 %fully-centered {
   position: absolute;
   top: 50%;
diff -r ef00684e021f -r b17a4482d07d client/src/map/Maplayer.vue
--- a/client/src/map/Maplayer.vue	Tue Sep 11 12:38:34 2018 +0200
+++ b/client/src/map/Maplayer.vue	Tue Sep 11 13:41:16 2018 +0200
@@ -1,5 +1,5 @@
 <template>
-  <div id="map" :class="mapStyle"></div>
+    <div id="map" :class="mapStyle"></div>
 </template>
 
 <style lang="scss">
@@ -19,6 +19,7 @@
   margin-top: 2vh;
   z-index: 5;
   background-color: white;
+  box-shadow: $basic-shadow;
 }
 </style>