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 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/components/MangaCard.vue
View File

@@ -1,7 +1,7 @@
<template>
<UCard
: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-[var(--mangacover-width-sm)] max-sm:h-[var(--mangacover-height-sm)] w-(--mangacover-width) h-(--mangacover-height) mt-4 mr-4">
<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" />

5
website/app/components/MangaCardList.vue
View File

@@ -1,11 +1,12 @@
<template>
<div class="grid grid-cols-[repeat(auto-fill,_minmax(240px,_1fr))] gap-4">
<div
class="grid min-sm:grid-cols-[repeat(auto-fill,_minmax(var(--mangacover-width),_1fr))] max-sm:grid-cols-[repeat(auto-fill,_minmax(var(--mangacover-width-sm),_1fr))] gap-4">
<MangaCard
v-for="(m, i) in manga"
:key="m.key"
:manga="m"
:expanded="i === expanded"
class="cursor-pointer basis-(--mangacover-width)"
class="cursor-pointer"
@click="$emit('click', m)" />
</div>
</template>

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

@@ -1,6 +1,6 @@
<template>
<div
class="relative 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">
class="relative object-contain max-sm:w-[var(--mangacover-width-sm)] max-sm:h-[var(--mangacover-height-sm)] 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"

8
website/app/components/TrangaPage.vue
View File

@@ -1,10 +1,10 @@
<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-2/7 h-full px-4 py-4">
<UPageBody v-bind="$props" class="mt-0 pb-0 min-md:pr-4 h-full">
<div class="flex min-md:flex-row max-md:flex-col gap-4 h-full relative">
<div v-if="$slots.left" class="flex flex-col gap-2 bg-elevated min-md:w-3/7 min-xl:w-2/7 max-md:w-full px-4 max-md:px-2 py-4">
<slot name="left" />
</div>
<div :class="['flex flex-col gap-2 w-full py-4 relative', $slots.left ? '' : 'pl-4']">
<div :class="['flex flex-col gap-2 w-full py-4 relative max-md:px-2', $slots.left ? '' : 'pl-4']">
<div class="w-full flex flex-row justify-between mb-4">
<div class="flex flex-row gap-6">
<UButton variant="outline" color="neutral" :to="back?.href ?? '/'" :icon="back?.icon ?? 'i-lucide-home'">{{