breadone/BreadnetV3
Archived
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Much better effort mobile layout

Browse Source
This commit is contained in:
June
2025-11-18 11:08:41 +13:00
parent c42f43812c
commit e2142c95e9
3 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/photos/carousel.astro
View File

@@ -70,4 +70,4 @@ const getImageLink = async (record: any) => {
<!-- Hidden element to pass server data to client -->
<div class="hidden" id="carousel-data">{JSON.stringify(photos)}</div>
<img id="carousel-img" class="rounded-lg w-full h-[calc(100vh-7rem)] object-contain" src={ pb.files.getURL(photos[0], photos[0].image) } />
<img id="carousel-img" class="w-full md:h-[calc(100vh-7rem)] object-contain" src={ pb.files.getURL(photos[0], photos[0].image) } />

12
web/src/layout/Base.astro
View File

@@ -12,18 +12,24 @@ import Footer from "@components/footer"
</head>
<body>
<main id="main" class="flex flex-row">
<div class="w-[32%] sticky top-0 py-14 h-screen text-center flex flex-col">
<main id="main" class="flex flex-col md:flex-row">
<div class="w-full md:w-[32%] md:sticky md:top-0 pt-8 md:py-14 md:h-screen text-center flex flex-col px-6 md:px-0">
<Sidebar>
<slot name="sidebar" />
</Sidebar>
<Footer/>
<div class="hidden md:block md:mt-auto">
<Footer/>
</div>
</div>
<div class="content-panel">
<slot name="content"/>
</div>
<div class="block md:hidden px-6 pb-8 text-center">
<Footer/>
</div>
</main>
</body>

4
web/src/styles/global.css
View File

@@ -28,7 +28,7 @@
html body {
@apply font-[Georgia];
@apply w-[68%] mx-auto h-full;
@apply w-full md:w-[68%] mx-auto h-full;
@apply bg-(--bg-light);
}
@@ -48,7 +48,7 @@
}
.content-panel {
@apply w-[68%] py-14 pl-10;
@apply w-full md:w-[68%] py-8 md:py-14 px-6 md:pl-10 md:pr-0;
}
@tailwind utilities;