denizk0461/pages
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

image gallery now stacks vertically on mobile

Browse Source
This commit is contained in:
denizk0461
2026-04-12 12:44:27 +02:00
parent d13e4516da
commit 5cfd093910
1 changed files with 19 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/lib/lists/image-gallery.svelte
View File

@@ -31,26 +31,7 @@
}
</script>
<!-- <div class="gallery-zone">
<div class="gallery-container blurred-background">
<div class="gallery-button-container">
<button class="gallery-button" onclick={galleryBack}>&lt;</button>
<div class="gallery-text-container">
<p class="gallery-index">{currentIndex + 1} / {images.length} :: <a href={images[currentIndex].src}>full-size</a></p>
<div class="gallery-desc-container">
{#each images[currentIndex].desc as d}
<p>{@html d}</p>
{/each}
</div>
</div>
<button class="gallery-button" onclick={galleryForward}>&gt;</button>
</div>
<div class="gallery-img-container">
<img class="gallery-img" loading="lazy" src={images[currentIndex].src} alt={images[currentIndex].alt}>
</div>
</div>
</div> -->
<!-- TODO on mobile, put buttons between text and image -->
<div class="gallery-zone blurred-background">
<div class="gallery-img-container">
<img class="gallery-img" loading="lazy" src={images[currentIndex].src} alt={images[currentIndex].alt}>
@@ -98,7 +79,7 @@
.gallery-text-container {
width: 100%;
height: calc(var(--media-height));
height: var(--media-height);
/* overflow: hidden; */
display: flex;
flex-direction: column;
@@ -167,4 +148,21 @@
.gallery-button:hover {
background-color: var(--color-background-highlight-hover-alt);
}
@media screen and (max-width: 700px) {
.gallery-zone {
display: flex;
flex-direction: column;
height: initial;
}
.gallery-text-container {
height: initial;
}
.gallery-img-container {
border-right: none;
border-bottom: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
}
}
</style>