diff options
Diffstat (limited to 'tpl')
-rw-r--r-- | tpl/objects/backdrop.pug | 5 | ||||
-rw-r--r-- | tpl/objects/lightbox.pug | 8 | ||||
-rw-r--r-- | tpl/views/lightbox.pug | 14 |
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 @@ | |||
1 | mixin view-lightbox | 1 | mixin 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" | ||