From 62d0e619de3b4b65812382dc7fb82d4e79158929 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 7 Feb 2026 21:00:48 +0100 Subject: New lightbox --- tpl/objects/lightbox.pug | 24 +++++++++++++----------- tpl/views/lightbox.pug | 6 +++--- 2 files changed, 16 insertions(+), 14 deletions(-) (limited to 'tpl') diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug index 2d520b5..0fddad1 100644 --- a/tpl/objects/lightbox.pug +++ b/tpl/objects/lightbox.pug @@ -11,26 +11,28 @@ mixin lightbox(images) } let thumbnailClasses = { 'o-thumbnail': true, + 'o-lightbox__thumbnail': true, } + let inverseTheme = { + "static-black": "static-white", + "static-white": "static-black", + }[attributes.theme] if (attributes.theme) { classes[`o-lightbox--${attributes.theme}`] = true; - linksClasses[`s-links--${attributes.theme}`] = true; - thumbnailClasses[`o-thumbnail--${attributes.theme}`] = true; + linksClasses[`s-links--${inverseTheme}`] = true; + thumbnailClasses[`o-thumbnail--${inverseTheme}`] = true; } div(class=classes) - header.o-lightbox__header - div(class=linksClasses) - block - +button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn') - each img, i in images img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`) - if images.length > 1 - +button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') - +button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') + .o-lightbox__controls + if images.length > 1 + +button(theme=inverseTheme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') + +button(theme=inverseTheme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') + +button(theme=inverseTheme pill=true quiet=true icon='x' class='o-lightbox__close-btn') .o-lightbox__thumbnails each img, i in images @@ -38,7 +40,7 @@ mixin lightbox(images) let classes = { 'is-selected': i === 0 } Object.assign(classes, thumbnailClasses) - a.o-thumbnail(class=classes href='#image-' + i) + a(class=classes href='#image-' + i) img.o-thumbnail__image(src=img) button(class=thumbnailClasses) +icon('volume-2')(class='o-thumbnail__icon') diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug index 7e366c0..c4b9878 100644 --- a/tpl/views/lightbox.pug +++ b/tpl/views/lightbox.pug @@ -14,7 +14,7 @@ mixin view-lightbox .c-box +backdrop - +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white') + +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-black') = "Let's try multiple links! " a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" @@ -27,7 +27,7 @@ mixin view-lightbox .c-box +backdrop - +lightbox(['avatar.png'])(theme='static-white') + +lightbox(['avatar.png'])(theme='static-black') = "Let's try multiple links! " a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" @@ -39,7 +39,7 @@ mixin view-lightbox = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06" +backdrop(maxHeight=true) - +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white' interactive=true) + +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-black' interactive=true) = "Let's try multiple links! " a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" -- cgit v1.2.3-70-g09d2