Update list display layout and responsiveness

app/pages/index.vue

@@ -1,15 +1,16 @@
 <template>
     <v-container
-        class="fill-height d-flex flex-column align-center justify-center text-center"
+        class="d-flex flex-column align-center justify-center text-center"
     >
         <div class="mt-3">Listas</div>
         <v-card
-            class="mx-auto ma-5"
+            class="ma-5 mx-auto"
             v-if="listasStore.listas.length > 0"
-            min-width="50vw"
+            max-width="100%"
+            width="1000%"
         >
             <v-list-item
-                class="text-black ma-10 pa-5 rounded-lg"
+                class="text-black ma-10 pa-5 rounded-lg full-height flex-column"
                 :class="
                     lista.owner == data?.email
                         ? 'bg-green-lighten-2'
@@ -20,15 +21,22 @@
                 :subtitle="lista.descripcion"
                 :title="lista.name"
             >
-                <template v-slot:prepend>
-                    <div class="d-flex flex-column">
-                        <v-icon color="grey-lighten-2" class="mx-auto"
-                            >mdi-account</v-icon
+                <template v-slot:prepend v-if="width > 600">
+                    <div class="d-flex flex-column full-height">
+                        <small class="ml-2 text-red">{{ lista.owner }}</small>
+                        <template v-if="lista.sharedListas.length > 0">
+                            <small
+                                v-for="shared in lista.sharedListas"
+                                :key="shared"
+                                class="ml-2 text-orange-darken-3"
+                                >{{ shared }}</small
+                            ></template
                         >
-                        <small class="ml-2">{{ lista.owner }}</small>
                     </div>
                 </template>
 
+                <!-- TODO template número de compartidos -->
+
                 <template v-slot:append>
                     <v-badge
                         class="mr-3"
@@ -52,6 +60,7 @@
 definePageMeta({
     auth: true,
 });
+import { useWindowSize } from "@vueuse/core";
 const { data } = useAuth();
 import { ref, onMounted } from "vue";
 import { useSystemStore } from "~/stores/system";
@@ -59,8 +68,10 @@ import { useListasStore } from "~/stores/listas";
 
 const listasStore = useListasStore();
 const systemStore = useSystemStore();
+const { width, height } = useWindowSize();
 
 onMounted(async () => {
     await listasStore.getData();
+    console.log(listasStore.listas);
 });
 </script>

package-lock.json

@@ -10,6 +10,7 @@
         "@mdi/font": "^7.4.47",
         "@pinia/nuxt": "^0.11.2",
         "@sidebase/nuxt-auth": "^1.0.1",
+        "@vueuse/core": "^13.8.0",
         "nuxt": "^4.0.1",
         "pinia": "^3.0.3",
         "vue": "^3.5.18",
@@ -3874,6 +3875,12 @@
       "integrity": "sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==",
       "license": "MIT"
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
     "node_modules/@types/yauzl": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@@ -4298,6 +4305,44 @@
       "integrity": "sha512-cZy8Dq+uuIXbxCZpuLd2GJdeSO/lIzIspC2WtkqIpje5QyFbvLaI5wZtdUjLHjGZrlVX6GilejatWwVYYRc8tA==",
       "license": "MIT"
     },
+    "node_modules/@vueuse/core": {
+      "version": "13.8.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.8.0.tgz",
+      "integrity": "sha512-rmBcgpEpxY0ZmyQQR94q1qkUcHREiLxQwNyWrtjMDipD0WTH/JBcAt0gdcn2PsH0SA76ec291cHFngmyaBhlxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "13.8.0",
+        "@vueuse/shared": "13.8.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "13.8.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.8.0.tgz",
+      "integrity": "sha512-BYMp3Gp1kBUPv7AfQnJYP96mkX7g7cKdTIgwv/Jgd+pfQhz678naoZOAcknRtPLP4cFblDDW7rF4e3KFa+PfIA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "13.8.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.8.0.tgz",
+      "integrity": "sha512-x4nfM0ykW+RmNJ4/1IzZsuLuWWrNTxlTWUiehTGI54wnOxIgI9EDdu/O5S77ac6hvQ3hk2KpOVFHaM0M796Kbw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/@whatwg-node/disposablestack": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/@whatwg-node/disposablestack/-/disposablestack-0.0.6.tgz",

package.json

@@ -13,6 +13,7 @@
     "@mdi/font": "^7.4.47",
     "@pinia/nuxt": "^0.11.2",
     "@sidebase/nuxt-auth": "^1.0.1",
+    "@vueuse/core": "^13.8.0",
     "nuxt": "^4.0.1",
     "pinia": "^3.0.3",
     "vue": "^3.5.18",