summaryrefslogtreecommitdiffstats
path: root/tpl/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-01-12 12:12:46 +0100
committerVolpeon <git@volpeon.ink>2024-01-12 12:12:46 +0100
commit4762946fc78613239dbcdde0af79564c19a9803f (patch)
treecbb4e36540fe283531bfb4ec94a2884eab42896b /tpl/objects
parentFix (diff)
downloadiro-design-4762946fc78613239dbcdde0af79564c19a9803f.tar.gz
iro-design-4762946fc78613239dbcdde0af79564c19a9803f.tar.bz2
iro-design-4762946fc78613239dbcdde0af79564c19a9803f.zip
Support basic JS-free lightbox
Diffstat (limited to 'tpl/objects')
-rw-r--r--tpl/objects/lightbox.pug5
1 files changed, 3 insertions, 2 deletions
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index 7298ed9..5091565 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -6,14 +6,15 @@ mixin lightbox(images)
6 .s-links.s-links--colored 6 .s-links.s-links--colored
7 block 7 block
8 +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn') 8 +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn')
9 img.o-lightbox__img(src=images[0]) 9 each img, i in images
10 img.o-lightbox__img(src=images[i] id='image-' + i)
10 if images.length > 1 11 if images.length > 1
11 +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') 12 +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
12 +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') 13 +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
13 .o-lightbox__thumbnails 14 .o-lightbox__thumbnails
14 each img, i in images 15 each img, i in images
15 - classes = i === 0 ? 'is-selected' : '' 16 - classes = i === 0 ? 'is-selected' : ''
16 button.o-lightbox__thumbnail(class=classes) 17 a.o-lightbox__thumbnail(class=classes href='#image-' + i)
17 img.o-lightbox__thumbnail-img(src=img) 18 img.o-lightbox__thumbnail-img(src=img)
18 button.o-lightbox__thumbnail 19 button.o-lightbox__thumbnail
19 +icon('volume-2')(class='o-lightbox__thumbnail-icon') 20 +icon('volume-2')(class='o-lightbox__thumbnail-icon')