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

Enhance list items UI and progress display

Browse Source
This commit is contained in:
clonbg
2025-08-16 12:00:33 +02:00
parent 82fb58c785
commit 021bd8aae2
1 changed files with 27 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/pages/index.vue
View File

@@ -2,37 +2,49 @@
<v-container
class="fill-height d-flex flex-column align-center justify-center text-center"
>
<div class="mt-3">My Application's Home Page</div>
<div class="mt-3">Listas</div>
<v-card
class="mx-auto"
class="mx-auto ma-5"
v-if="listasStore.listas.length > 0"
min-width="50vw"
>
<v-list-item
class="text-black bg-primary"
class="text-black ma-10 pa-5 rounded-lg"
:class="
lista.owner == data.email
? 'bg-green-lighten-2'
: 'bg-green-darken-1'
"
v-for="lista in listasStore.listas"
:key="lista.id"
:subtitle="lista.descripcion"
:title="lista.name"
>
<template v-slot:prepend>
<v-avatar color="grey-lighten-1">
<v-icon color="white">mdi-account</v-icon>
</v-avatar>
<div class="d-flex flex-column">
<v-icon color="grey-lighten-2" class="mx-auto"
>mdi-account</v-icon
>
<small class="ml-2">{{ lista.owner }}</small>
</div>
</template>
<template v-slot:append>
<v-btn
color="grey-lighten-1"
icon="mdi-information"
variant="text"
></v-btn>
<v-badge
class="mr-3"
location="top right"
color="grey-lighten-2"
:content="`${lista.countItems}/${lista.completedItems}`"
>
<v-btn
color="black"
icon="mdi-counter"
variant="text"
></v-btn>
</v-badge>
</template> </v-list-item
></v-card>
<div>
{{ listasStore.listas }}
{{ data }}
</div>
<div></div>
</v-container>
</template>