UI changes

web/src/views/UserPresence.vue

@@ -1,28 +1,14 @@
 <template>
-  <div>
-    <v-toolbar height="115" flat tile>
+  <v-container fluid class="mb-12">
+    <v-toolbar class="mb-2" flat outlined>
       <v-text-field
         v-model="search"
-        class="mt-6 search"
         label="Pesquisar"
-        hint="Ex.: jose, pp, sala 102, 10.7."
-        prepend-icon="mdi-account-search"
+        prepend-inner-icon="mdi-account-search"
         clearable
-        outlined
-        rounded
-        style="max-width: 512px"
-      >
-        <v-progress-circular
-          v-if="$apollo.queries.userPresence.loading && search"
-          slot="prepend"
-          color="grey"
-          class="pa-0 ma-0"
-          :width="2"
-          :size="24"
-          indeterminate
+        hide-details
+        :loading="$apollo.queries.userPresence.loading"
       />
-      </v-text-field>
-
       <v-dialog v-model="helpDialog" width="500px">
         <template #activator="{ on, attrs }">
           <v-btn class="ml-1" color="info" dark v-bind="attrs" icon v-on="on">
@@ -67,11 +53,7 @@
         </v-card>
       </v-dialog>
     </v-toolbar>
-    <v-progress-linear
-      height="2"
-      :indeterminate="$apollo.queries.userPresence.loading"
-    />
-    <v-container fluid class="mb-12">
+
     <div v-if="stats" class="text-center my-4">
       <span>
         <v-chip color="online" class="mr-1" dark>
@@ -94,9 +76,7 @@
     </div>
 
     <v-fade-transition
-        v-if="
-          !$apollo.queries.userPresence.loading || pagedUserPresences.length
-        "
+      v-if="!$apollo.queries.userPresence.loading || pagedUserPresences.length"
       class="layout row row--dense wrap"
       group
     >
@@ -110,13 +90,13 @@
       >
         <v-card
           outlined
-            class="border-highlight light-shadow"
+          class="border-highlight light-shadow pa-0 ma-0"
           :class="{
             'user-online': userPresence.status == 'ONLINE',
             'user-recent': userPresence.status == 'RECENT'
           }"
         >
-            <v-list three-line>
+          <v-list three-line class="pa-0">
             <v-list-item>
               <v-list-item-avatar size="52px" style="overflow: visible">
                 <v-badge
@@ -139,10 +119,7 @@
                     <span class="font-weight-medium">On-line</span>
                   </v-list-item-subtitle>
                   <v-list-item-subtitle>
-                      <span
-                        v-if="userPresence.local"
-                        class="font-weight-medium"
-                      >
+                    <span v-if="userPresence.local" class="font-weight-medium">
                       {{ userPresence.local }}
                     </span>
                     <span v-else>
@@ -157,10 +134,7 @@
                     <span class="font-weight-medium">Visto recentemente</span>
                   </v-list-item-subtitle>
                   <v-list-item-subtitle>
-                      <span
-                        v-if="userPresence.local"
-                        class="font-weight-medium"
-                      >
+                    <span v-if="userPresence.local" class="font-weight-medium">
                       {{ userPresence.local }}
                     </span>
                     <span v-else>
@@ -258,8 +232,8 @@
         <v-alert type="info" icon="mdi-alert" border="left" text>
           A lista de usuários é obtida através do uso da rede
           <strong>Wi-Fi</strong>. Ela pode não mostrar alguém presente ou
-            indicar alguém que deixou um dispositivo no campus. Use esta lista
-            com a <strong>devida cautela</strong>.
+          indicar alguém que deixou um dispositivo no campus. Use esta lista com
+          a <strong>devida cautela</strong>.
         </v-alert>
       </v-col>
 
@@ -271,7 +245,6 @@
       </v-col>
     </v-row>
   </v-container>
-  </div>
 </template>
 
 <script>