From 4fe6ced2f0e1657969ab87966baf740f2fea2fc7 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 19 Jun 2022 13:41:22 +0200 Subject: Improved lightbox --- assets/css/components/_exhibit.scss | 27 ++------------------------- content/lightbox.js | 14 ++++++++------ templates/layouts/exhibit.html | 36 +++++++++++++++++------------------- templates/layouts/page.html | 6 +++--- yarn.lock | 2 +- 5 files changed, 31 insertions(+), 54 deletions(-) diff --git a/assets/css/components/_exhibit.scss b/assets/css/components/_exhibit.scss index 6122206..9ef013b 100644 --- a/assets/css/components/_exhibit.scss +++ b/assets/css/components/_exhibit.scss @@ -3,31 +3,8 @@ @use 'include-media/dist/include-media' as media; @include iro.props-namespace('exhibit') { - @include iro.props-store(( - --colors: ( - --footer: ( - --bg: fn.global-color(--bg-hi), - ), - ) - ), 'colors'); - @include iro.bem-component(iro.props-namespace()) { - display: grid; - grid-template-rows: 1fr auto; - grid-template-areas: 'content' 'footer'; - box-sizing: border-box; - height: 100vh; - height: 100dvh; - - @include iro.bem-elem('content') { - grid-area: content; - height: auto; - overflow: hidden; - } - - @include iro.bem-elem('footer') { - grid-area: footer; - background-color: fn.color(--footer --bg); - } + height: 100vh; + height: 100dvh; } } diff --git a/content/lightbox.js b/content/lightbox.js index e672d63..deb5cce 100644 --- a/content/lightbox.js +++ b/content/lightbox.js @@ -1,12 +1,14 @@ (() => { const mainEl = document.querySelector("main"); const lightboxContainerEl = document.querySelector(".js-lightbox"); - const lightboxEl = lightboxContainerEl.querySelector(".o-lightbox"); + const lightboxEl = lightboxContainerEl.classList.contains("o-lightbox") + ? lightboxContainerEl + : lightboxContainerEl.querySelector(".o-lightbox"); const lightboxCloseEl = lightboxEl.querySelector(".o-lightbox__close-btn"); - const lightboxPrevEl = lightboxEl.querySelector(".o-lightbox__prev-btn"); - const lightboxNextEl = lightboxEl.querySelector(".o-lightbox__next-btn"); + const lightboxPrevEl = lightboxEl.querySelector(".o-lightbox__nav-btn--prev"); + const lightboxNextEl = lightboxEl.querySelector(".o-lightbox__nav-btn--next"); const lightboxImgEl = lightboxEl.querySelector(".o-lightbox__img"); - const lightboxFooterEl = lightboxEl.querySelector(".o-lightbox__footer"); + const lightboxThumbnailsEl = lightboxEl.querySelector(".o-lightbox__thumbnails"); const figureEls = Array.from(mainEl.querySelectorAll(".js-lightbox__image")); const standalone = lightboxContainerEl.classList.contains("js-lightbox--standalone"); @@ -72,7 +74,7 @@ thumbnailButtonEl.appendChild(thumbnailImgEl); thumbnailButtonEl.addEventListener("click", go); - lightboxFooterEl.appendChild(thumbnailButtonEl); + lightboxThumbnailsEl.appendChild(thumbnailButtonEl); if (!standalone) { figureEl.firstElementChild.addEventListener("click", go); @@ -89,7 +91,7 @@ if (figureEls.length <= 1) { lightboxPrevEl.remove(); lightboxNextEl.remove(); - lightboxFooterEl.remove(); + lightboxThumbnailsEl.remove(); } if (!standalone) { diff --git a/templates/layouts/exhibit.html b/templates/layouts/exhibit.html index 1e0f19c..7e45298 100644 --- a/templates/layouts/exhibit.html +++ b/templates/layouts/exhibit.html @@ -5,26 +5,24 @@ itemtype="https://schema.org/$schema_type$" itemid="$url.full$" > -
-
- - - - - - -
-
+
+ + + + + + +
-