Mercurial > gemma
changeset 621:b17a4482d07d
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 | ef00684e021f |
| children | 47f11401d999 |
| files | client/src/App.vue client/src/application/Main.vue client/src/application/Sidebar.vue client/src/application/Topbar.vue client/src/application/User.vue client/src/application/assets/application.scss client/src/map/Maplayer.vue |
| diffstat | 7 files changed, 109 insertions(+), 62 deletions(-) [+] |
line wrap: on
line diff
--- 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>
--- 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">
--- 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; }
--- 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 {
--- 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>
--- 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%;
--- 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>