Mercurial > gemma

comparison client/src/views/Users.vue @ 293:85b653d4380c usermanagement

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
style: Table is now rendered as a card.
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 31 Jul 2018 13:36:40 +0200
parents dfd5a549ae95
children c57b0b230452
comparison
equal deleted inserted replaced
290:dfd5a549ae95 293:85b653d4380c
5 <div class="d-flex flex-column"> 5 <div class="d-flex flex-column">
6 <div> 6 <div>
7 <h1>User Management</h1> 7 <h1>User Management</h1>
8 </div> 8 </div>
9 <div class="userlist"> 9 <div class="userlist">
10 <table class="table"> 10 <div class="card shadow" style="width: 85rem;">
11 <thead> 11 <div class="card-header text-white bg-info mb-3">
12 <tr> 12 users
13 <th scope="col">Username</th> 13 </div>
14 <th scope="col">Country</th> 14 <div class="card-body">
15 <th scope="col">Email</th> 15 <table class="table">
16 <th scope="col">Role</th> 16 <thead>
17 </tr> 17 <tr>
18 </thead> 18 <th scope="col">Username</th>
19 <tbody> 19 <th scope="col">Country</th>
20 <tr v-for="user in users" :key="user.user"> 20 <th scope="col">Email</th>
21 <td>{{ user.user }}</td> 21 <th scope="col">Role</th>
22 <td>{{ user.country }}</td> 22 </tr>
23 <td>{{ user.email}}</td> 23 </thead>
24 <td>{{ user.role }}</td> 24 <tbody>
25 </tr> 25 <tr v-for="user in users" :key="user.user">
26 </tbody> 26 <td>{{ user.user }}</td>
27 </table> 27 <td>{{ user.country }}</td>
28 <td>{{ user.email}}</td>
29 <td>{{ user.role }}</td>
30 </tr>
31 </tbody>
32 </table>
33 </div>
34 </div>
28 </div> 35 </div>
29 </div> 36 </div>
30 </div> 37 </div>
31 </div> 38 </div>
32 </template> 39 </template>
36 .main { 43 .main {
37 height: 100vh; 44 height: 100vh;
38 } 45 }
39 46
40 .content { 47 .content {
41 margin-left: $offset; 48 margin-top: $large-offset;
49 margin-left: auto;
50 margin-right: auto;
42 } 51 }
43 52
44 .userlist { 53 .userlist {
45 margin-top: $large-offset; 54 margin-top: $large-offset;
55 }
56 .shadow {
57 box-shadow: $basic-shadow-light !important;
46 } 58 }
47 </style> 59 </style>
48 60
49 <script> 61 <script>
50 import Sidebar from "../components/Sidebar"; 62 import Sidebar from "../components/Sidebar";