pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(gallery): improve responsivity

Browse Source
This commit is contained in:
Stevan
2026-01-03 21:56:37 +01:00
parent 8e652e195c
commit f733ed736e
3 changed files with 51 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/app.css
View File

@@ -35,3 +35,7 @@
body {
background: #000000;
}
@theme {
--breakpoint-xs: 30rem;
}

61
app/components/GalleryModal.vue
View File

@@ -37,11 +37,12 @@ const getPlaceholder = (image: InternalApi["/api/gallery"]["get"][number]) => {
<template #body>
<div class="relative flex flex-col items-center justify-center">
<UCarousel
ref="carousel"
v-slot="{ item, index }"
:start-index="props.initialIndex"
:items="images"
:ui="{
item: 'flex-shrink-0 h-screen flex flex-col items-center justify-center select-none',
item: 'relative flex-shrink-0 h-screen flex flex-col items-center justify-center select-none',
}"
arrows
:prev="{
@@ -65,25 +66,57 @@ const getPlaceholder = (image: InternalApi["/api/gallery"]["get"][number]) => {
:src="item.url"
:width="1920"
:placeholder="getPlaceholder(item)"
:fetchpriority="index === currentIndex ? 'high' : 'low'"
class="max-w-[90vw] h-[80vh] object-contain rounded-sm"
class="xs:max-w-[95vw] sm:max-w-[90vw] md:h-[80vh] object-contain rounded-sm"
/>
<!-- metadata -->
<div
class="px-4 py-2 text-sm font-mono text-white flex flex-wrap items-center justify-center gap-2"
<p
class="font-[JetBrains_Mono] text-xs lg:text-sm bottom-13 absolute invisible md:visible"
>
<span>{{ new Date(item.exif.date).toLocaleDateString() }}</span>
<span class="text-white/50">|</span>
<span class="text-white/50"> | </span>
<span>{{ item.exif.camera }}</span>
<span class="text-white/50">|</span>
<span class="text-white/50"> | </span>
<span>{{ item.exif.lens }}</span>
<span class="text-white/50">|</span>
<span>{{ item.exif.settings.aperture }}</span>
<span>{{ item.exif.settings.shutter }}</span>
<span>ISO {{ item.exif.settings.iso }}</span>
<span>{{ item.exif.settings.focalLength }}</span>
</div>
<span class="text-white/50"> | </span>
<span
>{{ item.exif.settings.aperture }}
{{ item.exif.settings.shutter }} ISO {{ item.exif.settings.iso }}
{{ item.exif.settings.focalLength }}</span
>
</p>
<p
class="font-[JetBrains_Mono] text-xs bottom-16 absolute sm:invisible text-center"
>
<span>- {{ new Date(item.exif.date).toLocaleDateString() }} -</span>
<br />
<span>{{ item.exif.camera }}</span>
<br />
<span>{{ item.exif.lens }}</span>
<br />
<span
>{{ item.exif.settings.aperture }}
{{ item.exif.settings.shutter }} ISO {{ item.exif.settings.iso }}
{{ item.exif.settings.focalLength }}</span
>
</p>
<p
class="font-[JetBrains_Mono] text-xs bottom-13 absolute invisible sm:visible md:invisible text-center"
>
<span>{{ new Date(item.exif.date).toLocaleDateString() }}</span>
<span class="text-white/50"> | </span>
<span>{{ item.exif.camera }}</span>
<span class="text-white/50"> | </span>
<span>{{ item.exif.lens }}</span>
<br />
<span
>{{ item.exif.settings.aperture }}
{{ item.exif.settings.shutter }} ISO {{ item.exif.settings.iso }}
{{ item.exif.settings.focalLength }}</span
>
</p>
</UCarousel>
<UButton
@@ -91,7 +124,7 @@ const getPlaceholder = (image: InternalApi["/api/gallery"]["get"][number]) => {
color="neutral"
variant="link"
size="xl"
class="absolute top-6 right-6"
class="absolute top-2 right-2 lg:top-4 lg:right-4 xl:top-6 xl:rizght-6"
aria-label="Close modal"
@click="emit('close', currentIndex)"
/>

1
app/pages/gallery.vue
View File

@@ -224,7 +224,6 @@ onMounted(() => {
:src="image.url"
:width="600"
:custom="true"
:fetchpriority="isModalOpen ? 'low' : 'auto'"
>
<img
v-if="isLoaded"