From 6d303e5cef9c3a3c77294b79c4907ec69943226f Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 26 Oct 2024 10:38:06 +0200 Subject: Lightbox fallback without :target --- tpl/objects/backdrop.pug | 5 ++++- tpl/objects/lightbox.pug | 8 ++++---- tpl/views/lightbox.pug | 14 +++++++++++++- 3 files changed, 21 insertions(+), 6 deletions(-) (limited to 'tpl') diff --git a/tpl/objects/backdrop.pug b/tpl/objects/backdrop.pug index 227700c..f577961 100644 --- a/tpl/objects/backdrop.pug +++ b/tpl/objects/backdrop.pug @@ -8,7 +8,10 @@ mixin backdrop classes[attributes.class] = true; } - let styles = { width: '100%', 'min-height': '5em', 'max-height': '40em' } + let styles = { width: '100%', 'min-height': '5em' } + if (attributes.maxHeight) { + styles['max-height'] = '40em'; + } if (attributes.pad) { styles['padding'] = '2em'; } diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug index 02a3200..85c468f 100644 --- a/tpl/objects/lightbox.pug +++ b/tpl/objects/lightbox.pug @@ -4,6 +4,7 @@ mixin lightbox(images) - let classes = { 'o-lightbox': true, + 'o-lightbox--interactive': attributes.interactive, } let linksClasses = { 's-links': true, @@ -19,15 +20,14 @@ mixin lightbox(images) div(class=linksClasses) block +action-button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn') + each img, i in images - img.o-lightbox__img(src=images[i] id='image-' + i) - +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') - +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') + img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`) - img.o-lightbox__img.o-lightbox__img--default(src=images[0]) if images.length > 1 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') + .o-lightbox__thumbnails each img, i in images - classes = i === 0 ? 'is-selected' : '' diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug index 4eb234a..7e366c0 100644 --- a/tpl/views/lightbox.pug +++ b/tpl/views/lightbox.pug @@ -1,5 +1,5 @@ mixin view-lightbox - +view('lightbox', 'Lightbox') + +view('lightbox', 'Lightbox')(wide=true) .c-box +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png']) = "Let's try multiple links! " @@ -37,3 +37,15 @@ mixin view-lightbox = ' ' a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06") = "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) + = "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" + = ' ' + a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c") + = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c" + = ' ' + a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06") + = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06" -- cgit v1.2.3-70-g09d2