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

responsive layout

Browse Source
This commit is contained in:
glax
2025-10-15 01:29:13 +02:00
parent 852587bd70
commit f1f54f72e3
8 changed files with 35 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,16 @@
<template>
<TrangaPage :back="{ href: backUrl ?? `/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">
<div class="flex flex-row max-sm:flex-col 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']"
:class="[
reverse ? 'min-sm:-rotate-90 rotate-0' : 'min-sm:rotate-90 rotate-180',
'transition-transform duration-200 p-5 ml-6 mr-10 mt-10 mb-6',
'rounded-full',
]"
size="xl"
variant="soft"
color="primary"
@@ -14,7 +18,7 @@
<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>
<p class="text-red-500 animate-pulse font-bold min-sm:text-3xl">This action is irreversible!</p>
<UButton color="warning" variant="outline" class="w-fit" @click="merge">Merge</UButton>
</div>
</TrangaPage>