glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-10-16 18:30:47 +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

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

@@ -1,6 +1,6 @@
<template>
<MangaDetailPage :manga="manga" :back-url="backUrl">
<div class="grid gap-3 max-sm:grid-flow-row-dense min-sm:grid-cols-[70%_auto]">
<div class="grid gap-3 max-xl:grid-flow-row-dense min-2xl:grid-cols-[70%_auto] min-xl:grid-cols-[60%_auto]">
<ChaptersList :manga-id="mangaId" />
<div class="flex flex-col gap-2">
<UCard :class="[flashDownloading ? 'animate-[flash_0.75s_ease_0.5s]' : '']">

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

@@ -1,22 +1,21 @@
<template>
<MangaDetailPage :manga="manga" :back-url="backUrl" :title="metadataFetcherName">
<USkeleton v-if="status === 'pending'" class="w-full h-14" />
<UCard v-else class="flex flex-wrap gap-2">
<div
v-for="data in searchData"
:key="data.identifier"
class="grid grid-cols-[var(--mangacover-width)_auto_auto] grid-flow-col gap-4">
<NuxtImg
: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" class="underline underline-offset-2">
<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>
</div>
</UCard>
<div class="flex flex-col flex-wrap gap-2">
<USkeleton v-if="status === 'pending'" class="w-full h-14" />
<UCard v-for="data in searchData" v-else :key="data.identifier">
<div class="grid grid-cols-[var(--mangacover-width)_auto] grid-flow-col gap-4">
<NuxtImg
: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" class="underline underline-offset-2">
<h2 class="text-xl text-secondary italic">{{ data.name }}</h2>
</NuxtLink>
<MDC :value="data.description ?? undefined" class="max-h-full" />
<UButton class="w-min h-min px-4 place-self-end" @click="link(data.identifier)">Link</UButton>
</div>
</UCard>
</div>
</MangaDetailPage>
</template>

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>