Change presence layout

web/src/components/UserPresenceStatusList.vue

@@ -1,15 +1,25 @@
 <template>
   <div v-if="!loading">
-    <v-list three-line>
+    <transition-group
-      <v-fade-transition group hide-on-leave appear>
+      name="scale-transition"
-        <v-list-item
+      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)
+                    userPresence.wifiDevices.some(
+                      wifiDevice => wifiDevice.isOnline
+                    )
                       ? 'green'
                       : 'grey'
                   "
@@ -25,7 +35,9 @@
                 <v-list-item-title>
                   {{ userPresence.user.displayName }}
                 </v-list-item-title>
-            <v-list-item-subtitle v-if="!userPresence.wifiDevices[0].isOnline">
+                <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>
@@ -40,8 +52,10 @@
                 </v-list-item-subtitle>
               </v-list-item-content>
             </v-list-item>
-      </v-fade-transition>
           </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: {