responsive layout

website/app/assets/css/main.css

@@ -9,4 +9,6 @@
 :root {
     --mangacover-width: 240px;
     --mangacover-height: 350px;
+    --mangacover-width-sm: 180px;
+    --mangacover-height-sm: 260px;
 }

website/app/components/MangaCard.vue

@@ -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" />

website/app/components/MangaCardList.vue

@@ -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>

website/app/components/MangaCover.vue

@@ -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"

website/app/components/TrangaPage.vue

@@ -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'">{{

website/app/pages/manga/[mangaId]/index.vue

@@ -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]' : '']">

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

@@ -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>
 

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

@@ -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>