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 ++++---- 2 files changed, 8 insertions(+), 5 deletions(-) (limited to 'tpl/objects') 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' : '' -- cgit v1.2.3-70-g09d2