From 736e571471483c4d1930c1b82796aa609d5b11e5 Mon Sep 17 00:00:00 2001
From: Tim Zieger <tim.zieger98@web.de>
Date: Fri, 22 May 2020 13:57:47 +0200
Subject: [PATCH] users same style as timetrack

---
 frontend/src/App.vue              |   4 +-
 frontend/src/views/Users.vue      |   4 +-
 frontend/src/views/UsersItems.vue | 128 ++++++++++++------------------
 3 files changed, 54 insertions(+), 82 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 5679f86..5fcf8ad 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -197,7 +197,7 @@ export default {
          sessionStorage.setItem("lastname", userInformation.lastname);
          sessionStorage.setItem("username", userInformation.username);
          sessionStorage.setItem("role", userInformation.role.name);
-         console.log(this.fullname);
+         
          
           this.fullname= sessionStorage.getItem("firstname") + " " + sessionStorage.getItem("lastname");
           location.reload();
@@ -209,7 +209,7 @@ export default {
       whoxhttp.setRequestHeader("Authorization", sessionStorage.getItem("jwt"));
 
       whoxhttp.send(null);
-        
+      location.reload();
       }
     },
     signUp(signupData) {
diff --git a/frontend/src/views/Users.vue b/frontend/src/views/Users.vue
index de661f2..1639f6d 100644
--- a/frontend/src/views/Users.vue
+++ b/frontend/src/views/Users.vue
@@ -1,9 +1,9 @@
 <template>
-  <div>
+  <v-container fluid>
     <div v-bind:key="user.username" v-for="user in users">
       <UsersItems v-bind:user="user" v-on:edit-user="edituser" />
     </div>
-  </div>
+  </v-container>
 </template>
 
 <script>
diff --git a/frontend/src/views/UsersItems.vue b/frontend/src/views/UsersItems.vue
index be1c3dd..34a7c4c 100644
--- a/frontend/src/views/UsersItems.vue
+++ b/frontend/src/views/UsersItems.vue
@@ -1,58 +1,51 @@
 <template>
-  <div class="time-record-item">
-    <v-card outlined>
-      <v-list-item class="main_accent">
-        <v-list-item-content>
-          <v-row no-gutters align="center">
-            <v-col cols="2">
-              <pre>    <v-avatar>
-      <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
-    </v-avatar>
-
-</pre>
-            </v-col>
-            <v-col></v-col>
-            <v-col cols="3">
-              <v-card color="background" elevation="0">
-                <pre><v-icon color="primary">mdi-account</v-icon>{{" " + user.username}}</pre>
-              </v-card>
-            </v-col>
-            <v-col></v-col>
-            <v-col cols="3">
-              <v-card color="background" elevation="0">
-                <pre><v-icon color="primary">mdi-account-box</v-icon>{{" " + user.firstname + " " +user.lastname}}</pre>
-              </v-card>
-            </v-col>
-            <v-col></v-col>
-            <v-col cols="2">
-            </v-col>
-            <v-col></v-col>
-          </v-row>
-        </v-list-item-content>
-        <v-list-item-action>
-          <v-speed-dial
-            v-model="fab"
-            transition="slide-x-reverse-transition"
-            direction="left"
-            open-on-hover
-          >
-            <template v-slot:activator>
-              <v-btn v-model="fab" color="background" elevation="0" dark fab>
-                <v-icon v-if="fab">mdi-close</v-icon>
-                <v-icon v-else>mdi-pencil</v-icon>
-              </v-btn>
-            </template>
-            <v-btn fab dark small color="green" @click="$emit('edit-user', user.username)">
-              <v-icon>mdi-file-document-edit</v-icon>
+  <v-card outlined>
+    <v-list-item class="main_accent">
+      <v-list-item-content>
+        <v-row no-gutters align="center">
+          <v-col cols="1">
+            <v-avatar><img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" /></v-avatar>
+          </v-col>
+          
+          <v-col cols="3">
+            <v-card color="background" elevation="0">
+              <pre><v-icon color="primary">mdi-account</v-icon>{{" " + user.username}}</pre>
+            </v-card>
+          </v-col>
+          <v-col></v-col>
+          <v-col cols="3">
+            <v-card color="background" elevation="0">
+              <pre><v-icon color="primary">mdi-account-box</v-icon>{{" " + user.firstname + " " +user.lastname}}</pre>
+            </v-card>
+          </v-col>
+          <v-col></v-col>
+          <v-col cols="2"></v-col>
+          <v-col></v-col>
+        </v-row>
+      </v-list-item-content>
+      <v-list-item-action>
+        <v-speed-dial
+          v-model="fab"
+          transition="slide-x-reverse-transition"
+          direction="left"
+          open-on-hover
+        >
+          <template v-slot:activator>
+            <v-btn v-model="fab" color="background" elevation="0" dark fab>
+              <v-icon v-if="fab">mdi-close</v-icon>
+              <v-icon v-else>mdi-pencil</v-icon>
             </v-btn>
-            <v-btn fab dark small color="red" @click="$emit('del-user', user.username)">
-              <v-icon>mdi-delete</v-icon>
-            </v-btn>
-          </v-speed-dial>
-        </v-list-item-action>
-      </v-list-item>
-    </v-card>
-  </div>
+          </template>
+          <v-btn fab dark small color="green" @click="$emit('edit-user', user.username)">
+            <v-icon>mdi-file-document-edit</v-icon>
+          </v-btn>
+          <v-btn fab dark small color="red" @click="$emit('del-user', user.username)">
+            <v-icon>mdi-delete</v-icon>
+          </v-btn>
+        </v-speed-dial>
+      </v-list-item-action>
+    </v-list-item>
+  </v-card>
 </template>
 
 <script>
@@ -63,30 +56,9 @@ export default {
 </script>
 
 <style scoped>
-.time-record-item {
-  background: #131313;
-  padding: 10px;
-  border-bottom: 3px #272727 solid;
-}
-
-.del {
-  background: #ff0000;
-  color: #fff;
-  border: none;
-  padding: 5px 9px;
-  border-radius: 0%;
-  cursor: pointer;
-  float: right;
-}
-
-.edit {
-  background: #272727;
-  color: #fff;
-  border: none;
-  padding: 5px 9px;
-  border-radius: 0%;
-  cursor: pointer;
-  float: right;
-  margin: 0px;
+.v-card {
+  border-color: #131313 !important;
+  border-width: 3px !important;
+  border-radius: 10000px !important;
 }
 </style>
\ No newline at end of file