Mercurial > gemma
changeset 293:85b653d4380c usermanagement
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 |
| files | client/src/views/Users.vue |
| diffstat | 1 files changed, 31 insertions(+), 19 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/views/Users.vue Tue Jul 31 12:05:04 2018 +0200 +++ b/client/src/views/Users.vue Tue Jul 31 13:36:40 2018 +0200 @@ -7,24 +7,31 @@ <h1>User Management</h1> </div> <div class="userlist"> - <table class="table"> - <thead> - <tr> - <th scope="col">Username</th> - <th scope="col">Country</th> - <th scope="col">Email</th> - <th scope="col">Role</th> - </tr> - </thead> - <tbody> - <tr v-for="user in users" :key="user.user"> - <td>{{ user.user }}</td> - <td>{{ user.country }}</td> - <td>{{ user.email}}</td> - <td>{{ user.role }}</td> - </tr> - </tbody> - </table> + <div class="card shadow" style="width: 85rem;"> + <div class="card-header text-white bg-info mb-3"> + users + </div> + <div class="card-body"> + <table class="table"> + <thead> + <tr> + <th scope="col">Username</th> + <th scope="col">Country</th> + <th scope="col">Email</th> + <th scope="col">Role</th> + </tr> + </thead> + <tbody> + <tr v-for="user in users" :key="user.user"> + <td>{{ user.user }}</td> + <td>{{ user.country }}</td> + <td>{{ user.email}}</td> + <td>{{ user.role }}</td> + </tr> + </tbody> + </table> + </div> + </div> </div> </div> </div> @@ -38,12 +45,17 @@ } .content { - margin-left: $offset; + margin-top: $large-offset; + margin-left: auto; + margin-right: auto; } .userlist { margin-top: $large-offset; } +.shadow { + box-shadow: $basic-shadow-light !important; +} </style> <script>