Styling (fix margins)

Remove expanding MangaCards
Center MangaCardList
Fix LibrarySelect

website/app/components/ChaptersList.vue

@@ -8,18 +8,14 @@
                     <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>
             <template #default>
-                <div class="flex flex-row gap-2 w-full">
+                <div class="flex flex-row gap-2 w-full items-center">
+                    <UTooltip :text="chapter.downloaded ? 'Downloaded' : 'Not downloaded'">
+                        <UIcon :name="chapter.downloaded ? 'i-lucide-cloud-check' : 'i-lucide-cloud-alert'" size="20" />
+                    </UTooltip>
                     <div
                         v-for="mangaconnectorId in chapter.mangaConnectorIds.sort((a, b) =>
                             a.mangaConnectorName < b.mangaConnectorName ? -1 : 1

website/app/components/LibrarySelect.vue

@@ -33,7 +33,7 @@ export interface LibrarySelectProps {
 
 const props = defineProps<LibrarySelectProps>();
 
-const library = ref(props.libraryId);
+const library = computed(() => props.libraryId);
 const { data: libraries } = await useApi('/v2/FileLibrary', { key: FetchKeys.FileLibraries });
 
 const loading = ref(false);

website/app/components/LoadingPage.vue

@@ -2,7 +2,7 @@
     <UPageBody v-if="loading">
         <UPageHero title="Loading..." />
     </UPageBody>
-    <UPageBody v-else v-bind="$props" class="mt-0 pb-0 pr-4 h-full">
+    <UPageBody v-else v-bind="$props" class="mt-0 pb-0 px-4 h-full">
         <template v-for="(_, slotName) in $slots" #[slotName]>
             <slot :name="slotName" />
         </template>

website/app/components/MangaCard.vue

@@ -1,34 +1,12 @@
 <template>
     <UCard
-        v-if="!expanded"
         :ui="{ body: 'p-0 sm:p-0', root: 'overflow-visible' }"
-        class="relative max-sm:w-[calc(var(--mangacover-width)/2)] max-sm:h-[calc(var(--mangacover-height)/2)] w-(--mangacover-width) h-(--mangacover-height) mt-4 mr-4"
+        class="relative max-sm:w-[calc(var(--mangacover-width)/2)] max-sm:h-[calc(var(--mangacover-height)/2)] w-(--mangacover-width) h-(--mangacover-height) mt-4 mr-4">
-        @click="$emit('click')">
         <MangaCover :manga="manga" blur />
         <div class="absolute -top-4 -right-4 flex flex-col bg-pink rounded-full">
             <MangaconnectorIcon v-for="m in manga.mangaConnectorIds" v-bind="m" :key="m.key" />
         </div>
     </UCard>
-    <UCard
-        v-else
-        orientation="horizontal"
-        reverse
-        class="relative max-sm:w-full max-sm:h-full w-[calc(var(--mangacover-width)*2+1.5rem)] h-(--mangacover-height) mt-4 mr-4"
-        :ui="{ body: 'p-0 sm:p-0', root: 'overflow-visible' }"
-        @click="$emit('click')">
-        <div class="flex flex-row w-full h-full basis-auto">
-            <MangaCover :manga="manga" class="shrink-0" />
-            <div class="absolute -top-4 -right-4 flex flex-col bg-pink rounded-full">
-                <MangaconnectorIcon v-for="m in manga.mangaConnectorIds" v-bind="m" :key="m.key" />
-            </div>
-            <div class="flex flex-col h-(--mangacover-height) shrink mx-2 mt-4">
-                <p class="font-semibold text-xl">{{ manga.name }}</p>
-            </div>
-        </div>
-        <div class="absolute bottom-0 w-full p-2 flex flex-row justify-end">
-            <slot name="actions" v-bind="manga" />
-        </div>
-    </UCard>
 </template>
 
 <script setup lang="ts">
@@ -38,10 +16,8 @@ type Manga = components['schemas']['Manga'];
 type MinimalManga = components['schemas']['MinimalManga'];
 
 defineProps<MangaCardProps>();
-defineEmits(['click']);
 
 export interface MangaCardProps extends /* @vue-ignore */ PageCardProps {
     manga: Manga | MinimalManga;
-    expanded?: boolean;
 }
 </script>

website/app/components/MangaCardList.vue

@@ -1,10 +1,12 @@
 <template>
-    <div class="flex flex-row flex-wrap gap-2">
+    <div class="flex flex-row flex-wrap gap-2 justify-evenly">
-        <MangaCard v-for="(m, i) in manga" :key="m.key" :manga="m" :expanded="i === expanded" @click="expanded = expanded === i ? -1 : i">
+        <MangaCard
-            <template #actions="forManga">
+            v-for="(m, i) in manga"
-                <UButton :to="`/manga/${forManga.key}`">Details</UButton>
+            :key="m.key"
-            </template>
+            :manga="m"
-        </MangaCard>
+            :expanded="i === expanded"
+            class="cursor-pointer"
+            @click="$emit('click', m)" />
     </div>
 </template>
 
@@ -14,5 +16,7 @@ type Manga = components['schemas']['Manga'];
 type MinimalManga = components['schemas']['MinimalManga'];
 
 const expanded = ref(-1);
+
+defineEmits<{ (e: 'click', manga: MinimalManga | Manga): void }>();
 defineProps<{ manga?: (MinimalManga | Manga)[] }>();
 </script>

website/app/components/TrangaPage.vue

@@ -1,7 +1,7 @@
 <template>
     <UPageBody v-bind="$props" class="mt-0 pb-0 pr-4 h-full">
         <div class="flex flex-row gap-4 h-full relative">
-            <div v-if="$slots.left" class="flex flex-col gap-2 bg-elevated w-1/5 h-full pl-4 py-4">
+            <div v-if="$slots.left" class="flex flex-col gap-2 bg-elevated w-2/7 h-full px-4 py-4">
                 <slot name="left" />
             </div>
             <div :class="['flex flex-col gap-2 w-full py-4 relative', $slots.left ? '' : 'pl-4']">

website/app/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
     <LoadingPage :loading="status === 'pending'">
-        <MangaCardList :manga="manga" class="mx-4 mt-2" />
+        <MangaCardList :manga="manga" class="mx-4 mt-2" @click="(m) => navigateTo(`/manga/${m.key}`)" />
     </LoadingPage>
 </template>
 

website/app/pages/manga/[mangaId]/index.vue

@@ -7,7 +7,7 @@
                     <template #header>
                         <h1 class="font-semibold">Download</h1>
                     </template>
-                    <LibrarySelect :manga-id="mangaId" :library-id="libraryId" class="w-full" />
+                    <LibrarySelect :manga-id="mangaId" :library-id="manga?.fileLibraryId" class="w-full" />
                     <div v-if="manga" class="flex flex-row gap-2 w-full flex-wrap my-2 justify-between">
                         <div
                             v-for="mangaconnectorId in manga.mangaConnectorIds.sort((a, b) =>
@@ -23,7 +23,7 @@
                                 <UButton
                                     :icon="mangaconnectorId.useForDownload ? 'i-lucide-cloud-off' : 'i-lucide-cloud-download'"
                                     variant="ghost"
-                                    :disabled="!libraryId"
+                                    :disabled="!manga?.fileLibraryId"
                                     @click="setRequestedFrom(mangaconnectorId.mangaConnectorName, !mangaconnectorId.useForDownload)" />
                             </UTooltip>
                         </div>
@@ -81,7 +81,6 @@ const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
     },
     lazy: true,
 });
-const libraryId = computed(() => manga.value?.fileLibraryId);
 
 const { data: metadataFetchers } = await useApi('/v2/MetadataFetcher', { key: FetchKeys.Metadata.Fetchers, lazy: true });
 const { data: metadata } = await useApi('/v2/MetadataFetcher/Links/{MangaId}', {

website/app/pages/manga/[mangaId]/linkMetadata/[metadataFetcherName].vue

@@ -13,8 +13,8 @@
                     :src="data.coverUrl ?? '/blahaj.png'"
                     alt="cover"
                     class="row-span-3 object-contain max-sm:w-[calc(var(--mangacover-width)/2)] max-sm:h-[calc(var(--mangacover-height)/2)] w-(--mangacover-width) h-(--mangacover-height) rounded-lg overflow-clip" />
-                <NuxtLink :href="data.url" no-prefetch external target="_blank">
+                <NuxtLink :href="data.url" no-prefetch external target="_blank" class="underline underline-offset-2">
-                    <h2 class="text-xl font-semibold text-primary">{{ data.name }}</h2>
+                    <h2 class="text-xl text-secondary italic">{{ data.name }}</h2>
                 </NuxtLink>
                 <MDC :value="data.description ?? undefined" />
                 <UButton class="w-min h-min px-4 place-self-end" @click="link(data.identifier)">Link</UButton>

website/app/pages/manga/[mangaId]/merge/[targetId].vue

@@ -1,22 +1,23 @@
 <template>
-    <UPageBody class="flex flex-col items-center">
+    <TrangaPage :back="{ href: `/manga/${mangaId}/merge/`, text: 'Back', icon: 'i-lucide-arrow-left' }">
-        <UButton icon="i-lucide-arrow-left" class="w-fit self-start m-20" variant="soft" :to="`/manga/${mangaId}/merge/`">Back</UButton>
+        <div class="flex flex-col items-center justify-center gap-10">
-        <div class="flex flex-row justify-evenly items-center">
+            <div class="flex flex-row justify-evenly items-center">
-            <MangaCard v-if="manga" :manga="manga" :expanded="true" />
+                <MangaCard v-if="manga" :manga="manga" :expanded="true" />
-            <USkeleton v-else class="max-w-[600px] w-full h-[350px]" />
+                <USkeleton v-else class="max-w-[600px] w-full h-[350px]" />
-            <UButton
+                <UButton
-                icon="i-lucide-merge"
+                    icon="i-lucide-merge"
-                :class="[reverse ? 'rotate-270' : 'rotate-90', 'px-20 transition-transform duration-200 p-5 m-10']"
+                    :class="[reverse ? 'rotate-270' : 'rotate-90', 'px-20 transition-transform duration-200 p-5 m-10', 'rounded-full']"
-                size="xl"
+                    size="xl"
-                variant="ghost"
+                    variant="soft"
-                color="neutral"
+                    color="primary"
-                @click="reverse = !reverse" />
+                    @click="reverse = !reverse" />
-            <MangaCard v-if="target" :manga="target" :expanded="true" />
+                <MangaCard v-if="target" :manga="target" :expanded="true" />
-            <USkeleton v-else class="max-w-[600px] w-full h-[350px]" />
+                <USkeleton v-else class="max-w-[600px] w-full h-[350px]" />
+            </div>
+            <p class="text-red-500 animate-pulse font-bold text-3xl">This action is irreversible!</p>
+            <UButton color="warning" variant="outline" class="w-fit" @click="merge">Merge</UButton>
         </div>
-        <p class="text-warning">This action is irreversible!</p>
+    </TrangaPage>
-        <UButton color="warning" class="w-fit" @click="merge">Merge</UButton>
-    </UPageBody>
 </template>
 
 <script setup lang="ts">

website/app/pages/manga/[mangaId]/merge/index.vue

@@ -1,9 +1,7 @@
 <template>
     <MangaDetailPage :manga="manga" :back="{ text: 'Back', href: `/manga/${mangaId}`, icon: 'i-lucide-arrow-left' }" title="Merge with">
         <USkeleton v-if="!mangas" class="w-full h-[350px]" />
-        <NuxtLink v-for="m in mangas.filter((x) => x.key != mangaId)" v-else :key="m.key" :to="`/manga/${mangaId}/merge/${m.key}`">
+        <MangaCardList :manga="mangas" @click="(m) => navigateTo(`/manga/${mangaId}/merge/${m.key}`)" />
-            <MangaCard :manga="m" />
-        </NuxtLink>
     </MangaDetailPage>
 </template>