From 1c1a00c12c1be4989e28d6c3bf19b9139396250f Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 26 Oct 2024 18:13:16 +0200 Subject: Move lightbox thumbnail to own object --- tpl/objects/lightbox.pug | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) (limited to 'tpl') diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug index 85c468f..842d44a 100644 --- a/tpl/objects/lightbox.pug +++ b/tpl/objects/lightbox.pug @@ -9,10 +9,14 @@ mixin lightbox(images) let linksClasses = { 's-links': true, } + let thumbnailClasses = { + 'o-thumbnail': true, + } if (attributes.theme) { classes[`o-lightbox--${attributes.theme}`] = true; linksClasses[`s-links--${attributes.theme}`] = true; + thumbnailClasses[`o-thumbnail--${attributes.theme}`] = true; } div(class=classes) @@ -30,10 +34,13 @@ mixin lightbox(images) .o-lightbox__thumbnails each img, i in images - - classes = i === 0 ? 'is-selected' : '' - a.o-lightbox__thumbnail(class=classes href='#image-' + i) - img.o-lightbox__thumbnail-img(src=img) - button.o-lightbox__thumbnail - +icon('volume-2')(class='o-lightbox__thumbnail-icon') - button.o-lightbox__thumbnail - +icon('video')(class='o-lightbox__thumbnail-icon') + - + let classes = { 'is-selected': i === 0 } + Object.assign(classes, thumbnailClasses) + + a.o-thumbnail(class=classes href='#image-' + i) + img.o-thumbnail__image(src=img) + button(class=thumbnailClasses) + +icon('volume-2')(class='o-thumbnail__icon') + button(class=thumbnailClasses) + +icon('video')(class='o-thumbnail__icon') -- cgit v1.2.3-70-g09d2