Mercurial > gemma
diff client/src/views/Users.vue @ 551:89bc8111563a
refac: Layout adjustments
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 31 Aug 2018 14:12:00 +0200 |
parents | b91791664554 |
children | 09d8e5483851 |
line wrap: on
line diff
--- 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"]),