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 --> <!-- Hidden element to pass server data to client -->
<div class="hidden" id="carousel-data">{JSON.stringify(photos)}</div> <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,19 +12,25 @@ import Footer from "@components/footer"
</head> </head>
<body> <body>
<main id="main" class="flex flex-row"> <main id="main" class="flex flex-col md:flex-row">
<div class="w-[32%] sticky top-0 py-14 h-screen text-center flex flex-col"> <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> <Sidebar>
<slot name="sidebar" /> <slot name="sidebar" />
</Sidebar> </Sidebar>
<Footer/> <div class="hidden md:block md:mt-auto">
<Footer/>
</div>
</div> </div>
<div class="content-panel"> <div class="content-panel">
<slot name="content"/> <slot name="content"/>
</div> </div>
<div class="block md:hidden px-6 pb-8 text-center">
<Footer/>
</div>
</main> </main>
</body> </body>
</html> </html>

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

@@ -28,7 +28,7 @@
html body { html body {
@apply font-[Georgia]; @apply font-[Georgia];
@apply w-[68%] mx-auto h-full; @apply w-full md:w-[68%] mx-auto h-full;
@apply bg-(--bg-light); @apply bg-(--bg-light);
} }
@@ -48,7 +48,7 @@
} }
.content-panel { .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; @tailwind utilities;