responsive mobile layout

website/app/app.vue

@@ -1,7 +1,7 @@
 <template>
     <UApp>
         <UHeader>
-            <template #left>
+            <template #content>
                 <NuxtLink to="https://github.com/C9Glax/tranga" external no-prefetch><Icon name="i-lucide-github" />API</NuxtLink>
                 <NuxtLink to="https://github.com/C9Glax/tranga-website" external no-prefetch
                     ><Icon name="i-lucide-github" />Website</NuxtLink
@@ -10,7 +10,7 @@
                     ><Icon name="i-lucide-book-open" />Swagger</NuxtLink
                 >
             </template>
-            <template #default>
+            <template #title>
                 <NuxtLink to="/">
                     <div class="h-full flex gap-2 items-center">
                         <img src="/blahaj.png" class="h-lh cursor-grab" alt="Blahaj" />
@@ -27,7 +27,7 @@
                 </NuxtLink>
             </template>
             <template #right>
-                <UButton icon="i-lucide-plus" to="/search" color="primary">Add</UButton>
+                <UButton icon="i-lucide-plus" to="/search" color="primary">Manga</UButton>
                 <UColorModeButton color="secondary" />
                 <UButton icon="i-lucide-settings" variant="ghost" to="/settings" color="secondary" />
             </template>

website/app/assets/css/main.css

@@ -5,3 +5,8 @@
     --color-pink: #f5a9b8;
     --color-blue: #5bcefa;
 }
+
+:root {
+    --mangacover-width: 240px;
+    --mangacover-height: 350px;
+}

website/app/components/MangaCard.vue

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

website/app/components/MangaCover.vue

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

website/app/components/MangaDetailPage.vue

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

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

@@ -1,6 +1,6 @@
 <template>
     <MangaDetailPage :manga="manga">
-        <div class="grid gap-3 grid-cols-[70%_30%]">
+        <div class="grid gap-3 max-sm:grid-flow-row-dense min-sm:grid-cols-[70%_30%]">
             <ChaptersList v-if="manga" :manga-id="manga.key" />
             <UCard>
                 <template #header>

website/app/pages/search.vue

@@ -1,13 +1,13 @@
 <template>
     <UPageBody>
-        <UPageSection :ui="{ container: 'gap-4 sm:gap-4 lg:gap-4 py-4 sm:py-4 lg:py-4 gap-4 sm:gap-4 lg:gap-4' }" class="h-fit">
+        <UPageSection :ui="{ container: 'gap-1 sm:gap-1 lg:gap-1 py-4 sm:py-1 lg:py-1 gap-1 sm:gap-1 lg:gap-1' }" class="h-fit">
             <UButton variant="soft" to="/" icon="i-lucide-arrow-left" class="w-min">Back</UButton>
-            <div class="flex flex-row w-full h-full justify-between gap-4">
+            <div class="flex max-sm:flex-col flex-row w-full h-full justify-between gap-4">
                 <UStepper v-model="activeStep" orientation="vertical" :items="items" class="h-full" disabled color="secondary" />
                 <UCard class="grow">
                     <div class="flex flex-col justify-between gap-2">
                         <UInput v-model="query" class="w-full" :disabled="busy" />
-                        <div class="flex gap-1 w-full justify-center">
+                        <div class="flex flex-wrap gap-1 w-full justify-center">
                             <UButton
                                 v-for="c in connectors"
                                 :key="c.key"
@@ -27,14 +27,14 @@
         </UPageSection>
         <UPageSection
             v-if="searchResult.length > 0"
-            :ui="{ container: 'gap-4 sm:gap-4 lg:gap-4 py-4 sm:py-4 lg:py-4 gap-4 sm:gap-4 lg:gap-4' }">
+            :ui="{ container: 'gap-1 sm:gap-1 lg:gap-1 py-1 sm:py-1 lg:py-1 gap-1 sm:gap-1 lg:gap-1' }">
             <template #description>
                 <p class="text-lg">
                     Result for <span class="text-secondary">'{{ searchQuery }}'</span>
                 </p>
             </template>
             <template #default>
-                <div class="relative flex flex-row flex-wrap gap-6 mt-0">
+                <div class="relative flex flex-row flex-wrap gap-4 mt-0">
                     <MangaCard
                         v-for="(m, i) in searchResult"
                         :key="m.key"

website/app/pages/settings.vue

@@ -14,13 +14,11 @@
                 <template #header>
                     <h1>Maintenance</h1>
                 </template>
-                <div class="flex flex-col gap-1 items-end basis-1">
+                <UButton icon="i-lucide-database" :loading="cleanUpDatabaseBusy" class="w-fit mb-2" @click="cleanUpDatabase"
-                    <UButton icon="i-lucide-database" :loading="cleanUpDatabaseBusy" class="w-fit" @click="cleanUpDatabase"
                 >Clean database</UButton
                 >
-                </div>
                 <UFormField label="API Url" name="apiUrl">
-                    <UInput v-model="apiUrl" class="max-w-full w-lg" placeholder="http://<ip:port>/" />
+                    <UInput v-model="apiUrl" class="max-w-full w-xs" placeholder="http://<ip:port>/" />
                     <UButton :loading="reloading" class="mx-1" @click="setUrl">Set</UButton>
                 </UFormField>
             </UCard>