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

responsive mobile layout

Browse Source
This commit is contained in:
glax
2025-10-13 20:46:09 +02:00
parent f641272c22
commit c292da4d60
12 changed files with 31 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
website/app/components/MangaCard.vue
View File

@@ -2,7 +2,7 @@
<UCard
v-if="!expanded"
:ui="{ body: 'p-0 sm:p-0', root: 'overflow-visible' }"
class="relative h-[350px] mt-2 mb-2"
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-2 mb-2"
@click="$emit('click')">
<MangaCover :manga="manga" blur />
<div class="absolute -top-4 -right-4 flex flex-col bg-pink rounded-full">
@@ -13,7 +13,7 @@
v-else
orientation="horizontal"
reverse
class="relative max-w-[600px] w-full h-[350px] mt-2 mb-2"
class="relative max-sm:w-full max-sm:h-full w-[calc(var(--mangacover-width)*2+1.5rem)] h-(--mangacover-height) mt-2 mb-2"
:ui="{ body: 'p-0 sm:p-0', root: 'overflow-visible' }"
@click="$emit('click')">
<div class="flex flex-row w-full h-full basis-auto">
@@ -21,7 +21,7 @@
<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-[350px] shrink mx-2 mt-4">
<div class="flex flex-col h-(--mangacover-height) shrink mx-2 mt-4">
<p class="font-semibold text-xl">{{ manga.name }}</p>
<p class="max-h-30 overflow-y-hidden grow">{{ manga.description }}</p>
</div>

4
website/app/components/MangaCover.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="relative w-[240px] h-[350px] rounded-lg overflow-clip">
<div class="relative 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">
<div
v-if="blur"
class="absolute l-0 t-0 w-full h-full rounded-lg overflow-clip"
@@ -9,7 +9,7 @@
backdrop-filter: blur(2px) brightness(70%);
-webkit-backdrop-filter: blur(2px) brightness(70%);
">
<p class="p-3 text-xl font-semibold max-h-full overflow-clip text-shadow-lg text-white">
<p class="p-3 max-sm:text-sm text-xl font-semibold max-h-full overflow-clip text-shadow-lg text-white">
{{ manga?.name }}
</p>
</div>

2
website/app/components/MangaDetailPage.vue
View File

@@ -23,7 +23,7 @@
<USkeleton v-else class="w-full h-30" />
</div>
</template>
<UPageBody class="relative mr-12">
<UPageBody class="relative min-sm:mr-12 max-sm:mx-4">
<div class="w-full flex flex-row justify-between">
<div>
<UButton variant="soft" :to="backPath ?? '/'" icon="i-lucide-arrow-left">Back</UButton>