valknar/palina-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(lightbox): prevent unintended activation during navigation and fix broken images
All checks were successful
Deploy Theme / deploy (push) Successful in 14s
Details

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-19 18:16:34 +01:00
parent 64a3c1d583
commit af4cc2ae48
3 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/tailwind.css
View File

@@ -68,7 +68,7 @@ html[data-theme='light'] {
} }
} }
.kg-image-card img, .post-content img { .kg-image-card img, .post-content img, .post-feature-image img {
@apply cursor-pointer transition-opacity duration-200 hover:opacity-90; @apply cursor-pointer transition-opacity duration-200 hover:opacity-90;
} }

7
default.hbs
View File

@@ -29,9 +29,10 @@
<div class="min-h-screen flex flex-col" <div class="min-h-screen flex flex-col"
x-data="{ mobileMenuOpen: false, lightboxOpen: false, lightboxImage: '' }" x-data="{ mobileMenuOpen: false, lightboxOpen: false, lightboxImage: '' }"
@click="if ($event.target.closest('.kg-image-card img, .post-content img')) { @click="const img = $event.target.closest('.kg-image-card img, .post-content img, .post-feature-image img');
if (img && img.src && !img.closest('a')) {
$event.preventDefault(); $event.preventDefault();
lightboxImage = $event.target.src; lightboxImage = img.src;
lightboxOpen = true; lightboxOpen = true;
}"> }">
{{> header}} {{> header}}
@@ -50,7 +51,7 @@
@click="lightboxOpen = false" @click="lightboxOpen = false"
class="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center" class="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center"
x-cloak> x-cloak>
<button @click="lightboxOpen = false" class="absolute top-4 right-4 text-white text-3xl">&times;</button> <button @click.stop="lightboxOpen = false" class="absolute top-4 right-4 text-white text-3xl">&times;</button>
<img :src="lightboxImage" alt="Lightbox image" class="max-w-full max-h-full" @click.stop> <img :src="lightboxImage" alt="Lightbox image" class="max-w-full max-h-full" @click.stop>
</div> </div>
</div> </div>

2
post.hbs
View File

@@ -14,7 +14,7 @@
</header> </header>
{{#if feature_image}} {{#if feature_image}}
<figure class="mb-12 rounded-lg overflow-hidden shadow-xl"> <figure class="post-feature-image mb-12 rounded-lg overflow-hidden shadow-xl">
<img <img
class="w-full h-auto object-cover" class="w-full h-auto object-cover"
src="{{img_url feature_image size="xl"}}" src="{{img_url feature_image size="xl"}}"