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"]),