Mercurial > gemma
changeset 551:89bc8111563a
refac: Layout adjustments
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 31 Aug 2018 14:12:00 +0200 |
parents | 06907c875077 |
children | ac61b03c0eaf |
files | client/src/App.vue client/src/components/Maplayer.vue client/src/components/Sidebar.vue client/src/components/Topbar.vue client/src/components/Userdetail.vue client/src/views/Main.vue client/src/views/Users.vue |
diffstat | 7 files changed, 52 insertions(+), 39 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/App.vue Fri Aug 31 12:11:38 2018 +0200 +++ b/client/src/App.vue Fri Aug 31 14:12:00 2018 +0200 @@ -1,5 +1,7 @@ <template> - <div id="app"> + <div id="app main d-flex flex-column"> + <Topbar></Topbar> + <Sidebar></Sidebar> <router-view/> </div> </template> @@ -26,3 +28,15 @@ color: #2c3e50; } </style> + +<script> +import Sidebar from "./components/Sidebar"; +import Topbar from "./components/Topbar"; +export default { + name: "app", + components: { + Sidebar, + Topbar + } +}; +</script>
--- a/client/src/components/Maplayer.vue Fri Aug 31 12:11:38 2018 +0200 +++ b/client/src/components/Maplayer.vue Fri Aug 31 14:12:00 2018 +0200 @@ -23,12 +23,13 @@ } #map { - height: 96vh; + margin-top: $topbarheight; + height: 100-$topbarheight; } .layerselection { position: absolute; - top: $topbarheight; + top: 40px + $small-offset; margin-top: $small-offset; right: $small-offset; min-height: 20%;
--- a/client/src/components/Sidebar.vue Fri Aug 31 12:11:38 2018 +0200 +++ b/client/src/components/Sidebar.vue Fri Aug 31 14:12:00 2018 +0200 @@ -91,7 +91,7 @@ margin-top: $topbarheight; background-color: #ffffff; padding-top: $large-offset; - height: 95vh; + height: 100vh-$topbarheight; } .overlay {
--- a/client/src/components/Topbar.vue Fri Aug 31 12:11:38 2018 +0200 +++ b/client/src/components/Topbar.vue Fri Aug 31 14:12:00 2018 +0200 @@ -22,17 +22,19 @@ <style lang="scss"> @import "../assets/application.scss"; .topbar { - min-height: 38px; + position: absolute; + width: 100vw; height: $topbarheight; + min-height: 40px; + background-color: white; + z-index: 100; } .searchcontainer { - min-width: 300px; margin-left: auto; } .usermanagement { - min-width: 300px; margin-left: auto; } .logout { @@ -60,7 +62,7 @@ } .searchbar { - width: 50vw; + width: 30vw; border: 1px solid; border-color: #aaaaaa; border-radius: 10px;
--- a/client/src/components/Userdetail.vue Fri Aug 31 12:11:38 2018 +0200 +++ b/client/src/components/Userdetail.vue Fri Aug 31 14:12:00 2018 +0200 @@ -74,8 +74,8 @@ } .userdetails { - margin-top: $large-offset; - width: 48vw; + margin-top: $topbarheight; + min-width: 40vw; margin-right: auto; height: 100%; }
--- a/client/src/views/Main.vue Fri Aug 31 12:11:38 2018 +0200 +++ b/client/src/views/Main.vue Fri Aug 31 14:12:00 2018 +0200 @@ -1,18 +1,11 @@ <template> - <div class="main d-flex flex-column"> - <Topbar></Topbar> - <Sidebar></Sidebar> - <Maplayer :lat="6155376" :long="1819178" :zoom="11"></Maplayer> - </div> + <div class="main d-flex flex-column"> + <Maplayer :lat="6155376" :long="1819178" :zoom="11"></Maplayer> + </div> </template> <style lang="scss"> @import "../assets/application.scss"; -.topbar { - background-color: white; - height: $topbarheight; - z-index: 10; -} .menubutton { margin-left: $small-offset; @@ -21,14 +14,11 @@ <script> import Maplayer from "../components/Maplayer"; -import Sidebar from "../components/Sidebar"; -import Topbar from "../components/Topbar"; + export default { name: "mainview", components: { - Maplayer, - Sidebar, - Topbar + Maplayer } }; </script>
--- a/client/src/views/Users.vue Fri Aug 31 12:11:38 2018 +0200 +++ b/client/src/views/Users.vue Fri Aug 31 14:12:00 2018 +0200 @@ -1,7 +1,5 @@ <template> <div class="main d-flex flex-column"> - <Topbar></Topbar> - <Sidebar></Sidebar> <div class="d-flex content flex-column"> <div class="d-flex flex-row"> <div :class="userlistStyle"> @@ -49,16 +47,16 @@ </tbody> </table> </div> - <div> - <i @click="prevPage" v-if="this.currentPage!=1" class="pages fa fa-caret-left"></i> {{this.currentPage}} / {{this.pages}} - <i @click="nextPage" class="pages fa fa-caret-right"></i> + <div class="d-flex flex-row pagination"> + <i @click=" prevPage " v-if="this.currentPage!=1 " class="backwards btn btn-sm btn-light align-self-center pages fa fa-caret-left "></i> {{this.currentPage}} / {{this.pages}} + <i @click="nextPage " class="forwards btn btn-sm btn-light align-self-center pages fa fa-caret-right "></i> </div> - <div class="adduser"> - <button @click="addUser" class="btn btn-info pull-right shadow-sm">Add User</button> + <div class="adduser "> + <button @click="addUser " class="btn btn-info pull-right shadow-sm ">Add User</button> </div> </div> </div> - <Userdetail v-if="isUserDetailsVisible"></Userdetail> + <Userdetail v-if="isUserDetailsVisible "></Userdetail> </div> </div> </div> @@ -70,6 +68,14 @@ height: 100vh; } +.backwards { + margin-right: 0.5rem; +} + +.forwards { + margin-left: 0.5rem; +} + .content { margin-top: $large-offset; margin-left: auto; @@ -82,11 +88,15 @@ } .userlist { - margin-top: $large-offset; + margin-top: $topbarheight; margin-right: $offset; min-width: 520px; } +.pagination { + margin-left: auto; + margin-right: auto; +} .userlistsmall { width: 35vw; } @@ -124,8 +134,6 @@ </style> <script> -import Sidebar from "../components/Sidebar"; -import Topbar from "../components/Topbar"; import Userdetail from "../components/Userdetail"; import store from "../store"; import { mapGetters } from "vuex"; @@ -141,9 +149,7 @@ }; }, components: { - Sidebar, - Userdetail, - Topbar + Userdetail }, computed: { ...mapGetters("usermanagement", ["isUserDetailsVisible"]),