Change presence layout

web/src/components/UserPresenceStatusList.vue

@@ -1,47 +1,61 @@
 <template>
   <div v-if="!loading">
-    <v-list three-line>
-      <v-fade-transition group hide-on-leave appear>
-        <v-list-item
-          v-for="userPresence in userPresences"
-          :key="userPresence.user.id"
-        >
-          <v-list-item-avatar size="52px" style="overflow: visible">
-            <v-badge
-              :color="
-                userPresence.wifiDevices.some(wifiDevice => wifiDevice.isOnline)
-                  ? 'green'
-                  : 'grey'
-              "
-              bottom
-              offset-x="18px"
-              offset-y="18px"
-            >
-              <Avatar :src="userPresence.user.thumbnailPhoto" size="52px" />
-            </v-badge>
-          </v-list-item-avatar>
+    <transition-group
+      name="scale-transition"
+      tag="div"
+      class="d-flex flex-wrap"
+    >
+      <v-col
+        v-for="userPresence in userPresences"
+        :key="userPresence.user.id"
+        cols="12"
+        md="6"
+      >
+        <v-card rounded outlined>
+          <v-list three-line>
+            <v-list-item>
+              <v-list-item-avatar size="52px" style="overflow: visible">
+                <v-badge
+                  :color="
+                    userPresence.wifiDevices.some(
+                      wifiDevice => wifiDevice.isOnline
+                    )
+                      ? 'green'
+                      : 'grey'
+                  "
+                  bottom
+                  offset-x="18px"
+                  offset-y="18px"
+                >
+                  <Avatar :src="userPresence.user.thumbnailPhoto" size="52px" />
+                </v-badge>
+              </v-list-item-avatar>
 
-          <v-list-item-content>
-            <v-list-item-title>
-              {{ userPresence.user.displayName }}
-            </v-list-item-title>
-            <v-list-item-subtitle v-if="!userPresence.wifiDevices[0].isOnline">
-              <span class="font-weight-medium">Off-line.</span>
-              Visto {{ userPresence.wifiDevices[0].lastSeen | from }}
-            </v-list-item-subtitle>
-            <v-list-item-subtitle v-else>
-              <span class="font-weight-medium">On-line</span>
-            </v-list-item-subtitle>
-            <v-list-item-subtitle>
-              Próximo ao AP
-              <span class="font-weight-medium"
-                >{{ userPresence.wifiDevices[0].apName }}
-              </span>
-            </v-list-item-subtitle>
-          </v-list-item-content>
-        </v-list-item>
-      </v-fade-transition>
-    </v-list>
+              <v-list-item-content>
+                <v-list-item-title>
+                  {{ userPresence.user.displayName }}
+                </v-list-item-title>
+                <v-list-item-subtitle
+                  v-if="!userPresence.wifiDevices[0].isOnline"
+                >
+                  <span class="font-weight-medium">Off-line.</span>
+                  Visto {{ userPresence.wifiDevices[0].lastSeen | from }}
+                </v-list-item-subtitle>
+                <v-list-item-subtitle v-else>
+                  <span class="font-weight-medium">On-line</span>
+                </v-list-item-subtitle>
+                <v-list-item-subtitle>
+                  Próximo ao AP
+                  <span class="font-weight-medium"
+                    >{{ userPresence.wifiDevices[0].apName }}
+                  </span>
+                </v-list-item-subtitle>
+              </v-list-item-content>
+            </v-list-item>
+          </v-list>
+        </v-card>
+      </v-col>
+    </transition-group>
   </div>
   <v-list v-else>
     <v-divider />

web/src/views/UserPresence.vue

@@ -29,7 +29,7 @@
       text
       large
       block
-      @click="resultSize = resultSize + 5"
+      @click="resultSize += 10"
     >
       Mostrar mais
     </v-btn>
@@ -56,7 +56,7 @@ export default {
   components: { UserPresenceStatusList },
   data: () => ({
     search: '',
-    resultSize: 5
+    resultSize: 10
   }),
   apollo: {
     userPresence: {