responsive layout

This commit is contained in:
2025-10-15 01:29:13 +02:00
parent 852587bd70
commit f1f54f72e3
8 changed files with 35 additions and 29 deletions

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