From ac1c46bd6cb8f79cd47ee0fe072175c1da363adf Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 24 Jul 2022 09:24:14 +0200 Subject: Fixed lightbox misalignment --- src/objects/_lightbox.scss | 16 ++++++++-------- tpl/objects/lightbox.pug | 12 +++++++----- tpl/views/lightbox.pug | 13 +++++++++++++ 3 files changed, 28 insertions(+), 13 deletions(-) diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss index 568265e..a5f077f 100644 --- a/src/objects/_lightbox.scss +++ b/src/objects/_lightbox.scss @@ -51,7 +51,7 @@ grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: - 'header header close' + 'header header header' 'prev content next' 'thumbnails thumbnails thumbnails' 'footer footer footer'; @@ -60,8 +60,10 @@ overflow: hidden; @include iro.bem-elem('header') { - grid-area: header; - padding: fn.dim(--pad) fn.dim(--pad) 0; + grid-area: header; + display: flex; + align-items: flex-start; + padding: fn.dim(--pad) fn.dim(--pad) 0; } @include iro.bem-elem('img') { @@ -108,11 +110,9 @@ } @include iro.bem-elem('close-btn') { - grid-area: close; - align-self: start; - margin-top: calc(.5 * fn.dim(--pad)); - margin-right: calc(.5 * fn.dim(--pad)); - font-size: fn.dim(--close-button --font-size); + flex: 0 0 auto; + margin: calc(-.5 * fn.dim(--pad)) calc(-.5 * fn.dim(--pad)) 0 auto; + font-size: fn.dim(--close-button --font-size); } @include iro.bem-elem('nav-btn') { diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug index 5ba8c57..faf7fa2 100644 --- a/tpl/objects/lightbox.pug +++ b/tpl/objects/lightbox.pug @@ -2,12 +2,14 @@ include icon.pug mixin lightbox(images) .o-lightbox - header.o-lightbox__header.s-colored-links - block - +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn') + 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]) - +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') - +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') + if images.length > 1 + +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') + +action-button(round=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 174e904..c1e5054 100644 --- a/tpl/views/lightbox.pug +++ b/tpl/views/lightbox.pug @@ -12,3 +12,16 @@ 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" + + .c-box + +backdrop(class='t-dark') + +lightbox(['avatar.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" -- cgit v1.2.3-54-g00ecf