Mercurial > gemma

comparison client/src/views/Users.vue @ 551:89bc8111563a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
refac: Layout adjustments
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 31 Aug 2018 14:12:00 +0200
parents b91791664554
children 09d8e5483851
comparison
equal deleted inserted replaced
550:06907c875077 551:89bc8111563a
1 <template> 1 <template>
2 <div class="main d-flex flex-column"> 2 <div class="main d-flex flex-column">
3 <Topbar></Topbar>
4 <Sidebar></Sidebar>
5 <div class="d-flex content flex-column"> 3 <div class="d-flex content flex-column">
6 <div class="d-flex flex-row"> 4 <div class="d-flex flex-row">
7 <div :class="userlistStyle"> 5 <div :class="userlistStyle">
8 <div class="card"> 6 <div class="card">
9 <div class="card-header shadow-sm text-white bg-info mb-3"> 7 <div class="card-header shadow-sm text-white bg-info mb-3">
47 </td> 45 </td>
48 </tr> 46 </tr>
49 </tbody> 47 </tbody>
50 </table> 48 </table>
51 </div> 49 </div>
52 <div> 50 <div class="d-flex flex-row pagination">
53 <i @click="prevPage" v-if="this.currentPage!=1" class="pages fa fa-caret-left"></i> {{this.currentPage}} / {{this.pages}} 51 <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}}
54 <i @click="nextPage" class="pages fa fa-caret-right"></i> 52 <i @click="nextPage " class="forwards btn btn-sm btn-light align-self-center pages fa fa-caret-right "></i>
55 </div> 53 </div>
56 <div class="adduser"> 54 <div class="adduser ">
57 <button @click="addUser" class="btn btn-info pull-right shadow-sm">Add User</button> 55 <button @click="addUser " class="btn btn-info pull-right shadow-sm ">Add User</button>
58 </div> 56 </div>
59 </div> 57 </div>
60 </div> 58 </div>
61 <Userdetail v-if="isUserDetailsVisible"></Userdetail> 59 <Userdetail v-if="isUserDetailsVisible "></Userdetail>
62 </div> 60 </div>
63 </div> 61 </div>
64 </div> 62 </div>
65 </template> 63 </template>
66 64
68 @import "../assets/application.scss"; 66 @import "../assets/application.scss";
69 .main { 67 .main {
70 height: 100vh; 68 height: 100vh;
71 } 69 }
72 70
71 .backwards {
72 margin-right: 0.5rem;
73 }
74
75 .forwards {
76 margin-left: 0.5rem;
77 }
78
73 .content { 79 .content {
74 margin-top: $large-offset; 80 margin-top: $large-offset;
75 margin-left: auto; 81 margin-left: auto;
76 margin-right: auto; 82 margin-right: auto;
77 } 83 }
80 margin-right: $offset; 86 margin-right: $offset;
81 padding-bottom: $offset; 87 padding-bottom: $offset;
82 } 88 }
83 89
84 .userlist { 90 .userlist {
85 margin-top: $large-offset; 91 margin-top: $topbarheight;
86 margin-right: $offset; 92 margin-right: $offset;
87 min-width: 520px; 93 min-width: 520px;
88 } 94 }
89 95
96 .pagination {
97 margin-left: auto;
98 margin-right: auto;
99 }
90 .userlistsmall { 100 .userlistsmall {
91 width: 35vw; 101 width: 35vw;
92 } 102 }
93 103
94 .userlistextended { 104 .userlistextended {
122 display: flex; 132 display: flex;
123 } 133 }
124 </style> 134 </style>
125 135
126 <script> 136 <script>
127 import Sidebar from "../components/Sidebar";
128 import Topbar from "../components/Topbar";
129 import Userdetail from "../components/Userdetail"; 137 import Userdetail from "../components/Userdetail";
130 import store from "../store"; 138 import store from "../store";
131 import { mapGetters } from "vuex"; 139 import { mapGetters } from "vuex";
132 import { displayError } from "../lib/errors.js"; 140 import { displayError } from "../lib/errors.js";
133 141
139 pageSize: 10, 147 pageSize: 10,
140 currentPage: 1 148 currentPage: 1
141 }; 149 };
142 }, 150 },
143 components: { 151 components: {
144 Sidebar, 152 Userdetail
145 Userdetail,
146 Topbar
147 }, 153 },
148 computed: { 154 computed: {
149 ...mapGetters("usermanagement", ["isUserDetailsVisible"]), 155 ...mapGetters("usermanagement", ["isUserDetailsVisible"]),
150 users() { 156 users() {
151 let users = [...this.$store.getters["usermanagement/users"]]; 157 let users = [...this.$store.getters["usermanagement/users"]];