# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1533037000 -7200
# Node ID 85b653d4380cccb6f8569694dabaa1d941cc6745
# Parent  dfd5a549ae95eb10572da9dcca14b5d94defab4b
style: Table is now rendered as a card.

diff -r dfd5a549ae95 -r 85b653d4380c client/src/views/Users.vue
--- 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>