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

Styling (fix margins)

Browse Source 
Remove expanding MangaCards
Center MangaCardList
Fix LibrarySelect
This commit is contained in:
glax
2025-10-14 23:36:39 +02:00
parent 39a1cb3857
commit 3f5c009d2e
11 changed files with 42 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -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}`">
<MangaCard :manga="m" />
</NuxtLink>
<MangaCardList :manga="mangas" @click="(m) => navigateTo(`/manga/${mangaId}/merge/${m.key}`)" />
</MangaDetailPage>
</template>