From 90bf54e9913294f03f79c016378680336ff3a56a Mon Sep 17 00:00:00 2001
From: clonbg <clonbg@gmail.com>
Date: Sun, 31 Aug 2025 18:12:34 +0200
Subject: [PATCH] Update list display layout and responsiveness

---
 app/pages/index.vue | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/app/pages/index.vue b/app/pages/index.vue
index d759742..fce3bbb 100644
--- a/app/pages/index.vue
+++ b/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>