From c349ec9b07bea4b414e282e69d704f6b6312a19e Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 17 Feb 2022 16:32:46 +0100 Subject: Improved lightbox --- src/objects/_backdrop.scss | 2 +- src/objects/_lightbox.scss | 77 ++++++++++++++++++++++++++++++++++++--------- static/ava_feralbot.png | Bin 0 -> 69371 bytes static/volpeon_spooky.png | Bin 0 -> 26024 bytes tpl/index.pug | 13 ++++++-- tpl/objects/backdrop.pug | 5 ++- tpl/objects/lightbox.pug | 14 ++++++--- 7 files changed, 87 insertions(+), 24 deletions(-) create mode 100755 static/ava_feralbot.png create mode 100755 static/volpeon_spooky.png diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss index 9ab140e..a0ec11e 100644 --- a/src/objects/_backdrop.scss +++ b/src/objects/_backdrop.scss @@ -18,7 +18,7 @@ @include iro.props-store(( --colors: ( - --bg: rgba(#000, .75), + --bg: rgba(#000, .85), ), ), 'colors-dark'); diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 3ba9744..59ae03f 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss @@ -4,32 +4,81 @@ @include iro.props-namespace('lightbox') { @include iro.props-store(( --dims: ( - + --pad-x: fn.global-dim(--size --150), + --pad-y: fn.global-dim(--size --150), + --spacing: fn.global-dim(--size --200), + --thumbnail: ( + --size: fn.global-dim(--size --800), + --spacing: fn.global-dim(--size --100), + --selected: 3px, + ), ), ), 'dims'); + @include iro.props-store(( + --colors: ( + --thumbnail: ( + --selected: fn.global-color(--fg-lo), + ), + ), + ), 'colors'); + @include iro.bem-object(iro.props-namespace()) { - display: contents; + display: grid; + grid-template-rows: auto minmax(0, 1fr) auto; + grid-template-columns: minmax(0, 1fr) auto; + grid-template-areas: 'header close' 'content content' 'footer footer'; + gap: fn.dim(--spacing); + min-height: 0; + + @include iro.bem-elem('footer') { + grid-area: footer; + display: flex; + gap: fn.dim(--thumbnail --spacing); + padding: fn.dim(--thumbnail --selected); + overflow: auto; + } @include iro.bem-elem('header') { - display: flex; - box-sizing: border-box; - flex: 0 0 auto; - align-items: center; - width: 100%; + grid-area: header; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } @include iro.bem-elem('img') { - align-self: center; - max-width: 100%; - min-height: 0; - max-height: 100%; - margin-top: auto; - margin-bottom: auto; + grid-area: content; + justify-self: center; + max-width: 100%; + max-height: 100%; + } + + @include iro.bem-elem('thumbnail') { + opacity: .75; + + &:hover { + opacity: 1; + } + + @include iro.bem-is('selected') { + opacity: 1; + box-shadow: 0 0 0 fn.dim(--thumbnail --selected) fn.color(--thumbnail --selected); + } + } + + @include iro.bem-elem('thumbnail-img') { + display: block; + width: fn.dim(--thumbnail --size); + height: fn.dim(--thumbnail --size); + object-fit: cover; + object-position: center center; } @include iro.bem-elem('close-btn') { - margin-left: auto; + --icon-stroke-width: 2px; + + grid-area: close; + font-size: fn.global-dim(--font-size --150); } } } diff --git a/static/ava_feralbot.png b/static/ava_feralbot.png new file mode 100755 index 0000000..402f927 Binary files /dev/null and b/static/ava_feralbot.png differ diff --git a/static/volpeon_spooky.png b/static/volpeon_spooky.png new file mode 100755 index 0000000..223769d Binary files /dev/null and b/static/volpeon_spooky.png differ diff --git a/tpl/index.pug b/tpl/index.pug index fde71fd..ed538df 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -554,7 +554,16 @@ html +rule('medium') +box - +backdrop(class='t-dark' center=true) - +lightbox('avatar.png') + +backdrop(class='t-dark') + +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png']) + = "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" diff --git a/tpl/objects/backdrop.pug b/tpl/objects/backdrop.pug index 3de1f99..cbe8866 100644 --- a/tpl/objects/backdrop.pug +++ b/tpl/objects/backdrop.pug @@ -1,9 +1,8 @@ mixin backdrop - let classes = { - 'o-backdrop': true, - 'u-p-relative': true, - 'o-backdrop--center': attributes.center + 'o-backdrop': true, + 'u-p-relative': true, } if (attributes.class) { classes[attributes.class] = true; diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug index ba68299..bfb4f49 100644 --- a/tpl/objects/lightbox.pug +++ b/tpl/objects/lightbox.pug @@ -1,5 +1,11 @@ -mixin lightbox(src) +mixin lightbox(images) .o-lightbox - header.o-lightbox__header - +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn') - img.o-lightbox__img(src=src) + header.o-lightbox__header.s-colored-links + block + +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn') + img.o-lightbox__img(src=images[0]) + footer.o-lightbox__footer + each img, i in images + - classes = i === 0 ? 'is-selected' : '' + button.o-lightbox__thumbnail(class=classes) + img.o-lightbox__thumbnail-img(src=img) -- cgit v1.2.3-54-g00ecf