summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
Diffstat (limited to 'tpl')
-rw-r--r--tpl/objects/backdrop.pug5
-rw-r--r--tpl/objects/lightbox.pug8
-rw-r--r--tpl/views/lightbox.pug14
3 files changed, 21 insertions, 6 deletions
diff --git a/tpl/objects/backdrop.pug b/tpl/objects/backdrop.pug
index 227700c..f577961 100644
--- a/tpl/objects/backdrop.pug
+++ b/tpl/objects/backdrop.pug
@@ -8,7 +8,10 @@ mixin backdrop
8 classes[attributes.class] = true; 8 classes[attributes.class] = true;
9 } 9 }
10 10
11 let styles = { width: '100%', 'min-height': '5em', 'max-height': '40em' } 11 let styles = { width: '100%', 'min-height': '5em' }
12 if (attributes.maxHeight) {
13 styles['max-height'] = '40em';
14 }
12 if (attributes.pad) { 15 if (attributes.pad) {
13 styles['padding'] = '2em'; 16 styles['padding'] = '2em';
14 } 17 }
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index 02a3200..85c468f 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -4,6 +4,7 @@ mixin lightbox(images)
4 - 4 -
5 let classes = { 5 let classes = {
6 'o-lightbox': true, 6 'o-lightbox': true,
7 'o-lightbox--interactive': attributes.interactive,
7 } 8 }
8 let linksClasses = { 9 let linksClasses = {
9 's-links': true, 10 's-links': true,
@@ -19,15 +20,14 @@ mixin lightbox(images)
19 div(class=linksClasses) 20 div(class=linksClasses)
20 block 21 block
21 +action-button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn') 22 +action-button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn')
23
22 each img, i in images 24 each img, i in images
23 img.o-lightbox__img(src=images[i] id='image-' + i) 25 img(src=images[i] id=('image-' + i) class=`o-lightbox__img ${attributes.interactive && !i ? 'is-visible' : ''}`)
24 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
25 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
26 26
27 img.o-lightbox__img.o-lightbox__img--default(src=images[0])
28 if images.length > 1 27 if images.length > 1
29 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') 28 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
30 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') 29 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
30
31 .o-lightbox__thumbnails 31 .o-lightbox__thumbnails
32 each img, i in images 32 each img, i in images
33 - classes = i === 0 ? 'is-selected' : '' 33 - classes = i === 0 ? 'is-selected' : ''
diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug
index 4eb234a..7e366c0 100644
--- a/tpl/views/lightbox.pug
+++ b/tpl/views/lightbox.pug
@@ -1,5 +1,5 @@
1mixin view-lightbox 1mixin view-lightbox
2 +view('lightbox', 'Lightbox') 2 +view('lightbox', 'Lightbox')(wide=true)
3 .c-box 3 .c-box
4 +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png']) 4 +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])
5 = "Let's try multiple links! " 5 = "Let's try multiple links! "
@@ -37,3 +37,15 @@ mixin view-lightbox
37 = ' ' 37 = ' '
38 a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06") 38 a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
39 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06" 39 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
40
41 +backdrop(maxHeight=true)
42 +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white' interactive=true)
43 = "Let's try multiple links! "
44 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
45 = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
46 = ' '
47 a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c")
48 = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c"
49 = ' '
50 a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
51 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"