From 925eda2bc914ed01abb25b1a7e2b315a2627a754 Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Mon, 13 Oct 2025 19:34:56 +0200
Subject: [PATCH] Styling of Manga-detail-page

---
 website/app/components/ChaptersList.vue     | 19 ++++++++++---------
 website/app/components/MangaDetailPage.vue  |  2 +-
 website/app/pages/manga/[mangaId]/index.vue | 11 +++++++++--
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/website/app/components/ChaptersList.vue b/website/app/components/ChaptersList.vue
index 10303c4..f3f4341 100644
--- a/website/app/components/ChaptersList.vue
+++ b/website/app/components/ChaptersList.vue
@@ -1,24 +1,25 @@
 <template>
-    <UPageList>
+    <UPageList class="gap-2">
         <UPageCard
             v-for="chapter in chapters"
             :key="chapter.key"
             orientation="horizontal"
-            :ui="{ container: 'p-2 sm:p-2' }">
+            :ui="{ container: 'p-2 sm:p-2' }"
+        >
             <template #title>
                 <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">
                     <span v-if="chapter.volume" class="mr-1">Vol. {{ chapter.volume }}</span>
                     <span class="inline">Ch. {{ chapter.chapterNumber }}</span>
                 </p>
             </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>
                 <p>{{ chapter.fileName }}</p>
             </template>
diff --git a/website/app/components/MangaDetailPage.vue b/website/app/components/MangaDetailPage.vue
index f91a7a8..177dbcd 100644
--- a/website/app/components/MangaDetailPage.vue
+++ b/website/app/components/MangaDetailPage.vue
@@ -25,7 +25,7 @@
                 <USkeleton v-else class="w-full h-30" />
             </div>
         </template>
-        <UPageBody class="relative pr-12">
+        <UPageBody class="relative mr-12">
             <div class="w-full flex flex-row justify-between">
                 <div>
                     <UButton variant="soft" :to="backPath ?? '/'" icon="i-lucide-arrow-left">Back</UButton>
diff --git a/website/app/pages/manga/[mangaId]/index.vue b/website/app/pages/manga/[mangaId]/index.vue
index 2607264..dbdf656 100644
--- a/website/app/pages/manga/[mangaId]/index.vue
+++ b/website/app/pages/manga/[mangaId]/index.vue
@@ -1,8 +1,15 @@
 <template>
     <MangaDetailPage :manga="manga">
-        <ChaptersList v-if="manga" :manga-id="manga.key" />
+        <div class="grid gap-3 grid-cols-[70%_30%]">
+            <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>
-            <LibrarySelect :library-id="libraryId" />
             <UButton variant="soft" color="warning" icon="i-lucide-trash" />
         </template>
     </MangaDetailPage>