MangaCardList grid gapping

withtag show loading under navigation
This commit is contained in:
2025-10-14 23:52:18 +02:00
parent 3f5c009d2e
commit 3f6a58c0ed
2 changed files with 12 additions and 12 deletions

View File

@@ -1,11 +1,11 @@
<template>
<div class="flex flex-row flex-wrap gap-2 justify-evenly">
<div class="grid grid-cols-[repeat(auto-fill,_minmax(240px,_1fr))] gap-4">
<MangaCard
v-for="(m, i) in manga"
:key="m.key"
:manga="m"
:expanded="i === expanded"
class="cursor-pointer"
class="cursor-pointer basis-(--mangacover-width)"
@click="$emit('click', m)" />
</div>
</template>

View File

@@ -1,20 +1,20 @@
<template>
<LoadingPage :loading="status === 'pending'">
<TrangaPage>
<template #title>
<h1 class="text-2xl">
Manga with Tag <UBadge variant="outline" class="text-primary font-semibold text-xl">{{ tag }}</UBadge>
</h1>
</template>
<TrangaPage>
<template #title>
<h1 class="text-2xl">
Manga with Tag <UBadge variant="outline" class="text-primary font-semibold text-xl">{{ tag }}</UBadge>
</h1>
</template>
<LoadingPage :loading="status === 'pending'">
<MangaCardList :manga="manga" />
</TrangaPage>
</LoadingPage>
</LoadingPage>
</TrangaPage>
</template>
<script setup lang="ts">
const route = useRoute();
const tag = route.params.tag as string;
const { data: manga, status } = await useApi('/v2/Manga/WithTag/{Tag}', { path: { Tag: tag } });
const { data: manga, status } = await useApi('/v2/Manga/WithTag/{Tag}', { path: { Tag: tag }, lazy: true });
useHead({ title: 'Tranga' });
</script>