glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-10-15 09:50:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Styling of Manga-detail-page

Browse Source
This commit is contained in:
glax
2025-10-13 19:34:56 +02:00
parent 189e5b8f17
commit 925eda2bc9
3 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
website/app/components/ChaptersList.vue
View File

@@ -1,24 +1,25 @@
<template> <template>
<UPageList> <UPageList class="gap-2">
<UPageCard <UPageCard
v-for="chapter in chapters" v-for="chapter in chapters"
:key="chapter.key" :key="chapter.key"
orientation="horizontal" orientation="horizontal"
:ui="{ container: 'p-2 sm:p-2' }"> :ui="{ container: 'p-2 sm:p-2' }"
>
<template #title> <template #title>
<p class="text-primary">{{ chapter.title }}</p> <p class="text-primary">{{ chapter.title }}</p>
</template>
<template #leading>
<p class="mr-1">Downloaded:</p>
<Icon v-if="chapter.downloaded" name="i-lucide-circle-check-big" />
<Icon v-else name="i-lucide-circle-x" />
</template>
<template #footer>
<p class="text-secondary"> <p class="text-secondary">
<span v-if="chapter.volume" class="mr-1">Vol. {{ chapter.volume }}</span> <span v-if="chapter.volume" class="mr-1">Vol. {{ chapter.volume }}</span>
<span class="inline">Ch. {{ chapter.chapterNumber }}</span> <span class="inline">Ch. {{ chapter.chapterNumber }}</span>
</p> </p>
</template> </template>
<template #footer>
<div class="flex flex-row gap-1 items-center text-dimmed">
<p>Downloaded:</p>
<Icon v-if="chapter.downloaded" name="i-lucide-circle-check-big" />
<Icon v-else name="i-lucide-circle-x" />
</div>
</template>
<template #description> <template #description>
<p>{{ chapter.fileName }}</p> <p>{{ chapter.fileName }}</p>
</template> </template>

2
website/app/components/MangaDetailPage.vue
View File

@@ -25,7 +25,7 @@
<USkeleton v-else class="w-full h-30" /> <USkeleton v-else class="w-full h-30" />
</div> </div>
</template> </template>
<UPageBody class="relative pr-12"> <UPageBody class="relative mr-12">
<div class="w-full flex flex-row justify-between"> <div class="w-full flex flex-row justify-between">
<div> <div>
<UButton variant="soft" :to="backPath ?? '/'" icon="i-lucide-arrow-left">Back</UButton> <UButton variant="soft" :to="backPath ?? '/'" icon="i-lucide-arrow-left">Back</UButton>

9
website/app/pages/manga/[mangaId]/index.vue
View File

@@ -1,8 +1,15 @@
<template> <template>
<MangaDetailPage :manga="manga"> <MangaDetailPage :manga="manga">
<div class="grid gap-3 grid-cols-[70%_30%]">
<ChaptersList v-if="manga" :manga-id="manga.key" /> <ChaptersList v-if="manga" :manga-id="manga.key" />
<UCard>
<template #header>
<h1>Download</h1>
</template>
<LibrarySelect :manga-id="mangaId" :library-id="libraryId" />
</UCard>
</div>
<template #actions> <template #actions>
<LibrarySelect :library-id="libraryId" />
<UButton variant="soft" color="warning" icon="i-lucide-trash" /> <UButton variant="soft" color="warning" icon="i-lucide-trash" />
</template> </template>
</MangaDetailPage> </MangaDetailPage>