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 --- src/objects/_lightbox.scss | 101 +++++++++++++++++---------------------------- tpl/objects/backdrop.pug | 5 ++- tpl/objects/lightbox.pug | 8 ++-- tpl/views/lightbox.pug | 14 ++++++- 4 files changed, 60 insertions(+), 68 deletions(-) diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 02714d7..5562696 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss @@ -12,17 +12,8 @@ @include materialize-at-root(meta.module-variables('vars')); @include bem.object('lightbox') { - box-sizing: border-box; - display: grid; - flex: 1 1 auto; - grid-template-areas: - 'header header header' - 'prev content next' - 'thumbnails thumbnails thumbnails' - 'footer footer footer'; - grid-template-rows: auto minmax(0, 1fr) auto auto; - grid-template-columns: auto minmax(0, 1fr) auto; - min-block-size: 0; + flex: 1 1 auto; + min-block-size: 0; @include bem.elem('header') { display: flex; @@ -34,56 +25,17 @@ @include bem.elem('img') { box-sizing: border-box; - display: none; + display: block; grid-area: content; place-self: center; max-inline-size: 100%; - max-block-size: 100%; + max-block-size: 80vh; padding: props.get(vars.$pad); - - @include bem.sibling-elem('img') { - @include bem.modifier('default') { - display: block; - - @include bem.next-elem('nav-btn') { - display: block; - - @include bem.next-elem('nav-btn') { - display: block; - } - } - } - } - - @include bem.multi('&:target', 'is' 'visible') { - display: block; - - @include bem.next-elem('nav-btn') { - display: block; - - @include bem.next-elem('nav-btn') { - display: block; - } - } - - @include bem.sibling-elem('img') { - @include bem.modifier('default') { - display: none; - - @include bem.next-elem('nav-btn') { - display: none; - - @include bem.next-elem('nav-btn') { - display: none; - } - } - } - } - } + margin-inline: auto; } @include bem.elem('thumbnails') { - display: flex; + display: none; grid-area: thumbnails; gap: props.get(vars.$thumbnail--spacing); padding: props.get(vars.$pad); @@ -91,14 +43,6 @@ overflow: auto; } - @include bem.elem('footer') { - display: flex; - grid-area: footer; - align-items: flex-start; - padding-block: 0 props.get(vars.$pad); - padding-inline: props.get(vars.$pad); - } - @include bem.elem('thumbnail') { position: relative; flex: 0 0 auto; @@ -163,6 +107,7 @@ } @include bem.elem('close-btn') { + display: none; flex: 0 0 auto; margin-block-start: calc(-.5 * props.get(vars.$pad)); margin-inline: auto calc(-.5 * props.get(vars.$pad)); @@ -205,6 +150,38 @@ } } + @include bem.modifier('interactive') { + display: grid; + grid-template-areas: + 'header header header' + 'prev content next' + 'thumbnails thumbnails thumbnails'; + grid-template-rows: auto minmax(0, 1fr) auto auto; + grid-template-columns: auto minmax(0, 1fr) auto; + + @include bem.elem('img') { + display: none; + max-block-size: 100%; + margin-inline: 0; + + @include bem.multi('&:target', 'is' 'visible') { + display: block; + } + } + + @include bem.elem('thumbnails') { + display: flex; + } + + @include bem.elem('close-btn') { + display: block; + } + + @include bem.elem('nav-btn') { + display: block; + } + } + @each $theme in map.keys(props.get(vars.$static-themes)) { @include bem.modifier(string.slice($theme, 3)) { color: props.get(vars.$static-themes, $theme, --text); 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