dietpi/listas_frontend_nuxt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update list display layout and responsiveness

Browse Source
This commit is contained in:
clonbg
2025-08-31 18:12:34 +02:00
parent 6885df22e8
commit 90bf54e991
1 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/pages/index.vue
View File

@@ -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>