summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-29 10:01:02 +0200
committerVolpeon <git@volpeon.ink>2024-06-29 10:01:02 +0200
commit6376f1a5225b2fa45f6c861d4a265bf13b56d038 (patch)
tree7c2ec8bea63df05b6a533fdfa6dab4b2f17f7a1f /tpl
parentUpdate (diff)
downloadiro-design-6376f1a5225b2fa45f6c861d4a265bf13b56d038.tar.gz
iro-design-6376f1a5225b2fa45f6c861d4a265bf13b56d038.tar.bz2
iro-design-6376f1a5225b2fa45f6c861d4a265bf13b56d038.zip
Update
Diffstat (limited to 'tpl')
-rw-r--r--tpl/index.pug14
-rw-r--r--tpl/objects/card.pug12
-rw-r--r--tpl/objects/lightbox.pug27
-rw-r--r--tpl/views/card.pug31
-rw-r--r--tpl/views/lightbox.pug20
5 files changed, 77 insertions, 27 deletions
diff --git a/tpl/index.pug b/tpl/index.pug
index a6e99dd..c4baa64 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -40,7 +40,7 @@ mixin view(id, title)
40 - 40 -
41 views.push({ id, title }); 41 views.push({ id, title });
42 42
43 +container(narrow=true class='u-p-700 c-view' id=id) 43 +container(narrow=!attributes.wide class='u-p-700 c-view' id=id)
44 +h1-heading('xl')(class='u-mt-0')= title 44 +h1-heading('xl')(class='u-mt-0')= title
45 +divider('medium') 45 +divider('medium')
46 block 46 block
@@ -117,22 +117,22 @@ html
117 +view-switch 117 +view-switch
118 +view-form 118 +view-form
119 +view-action-button 119 +view-action-button
120 +view-overflow-button 120 //+view-overflow-button
121 +view-status-indicator 121 +view-status-indicator
122 +view-avatar 122 +view-avatar
123 +view-card 123 +view-card
124 +view-side-nav 124 +view-side-nav
125 +view-popover 125 +view-popover
126 +view-menu 126 +view-menu
127 +view-icon-nav 127 //+view-icon-nav
128 +view-backdrop 128 +view-backdrop
129 +view-dialog 129 //+view-dialog
130 +view-lightbox 130 +view-lightbox
131 +view-list-group 131 //+view-list-group
132 +view-table 132 +view-table
133 +view-alert 133 +view-alert
134 +view-message 134 //+view-message
135 +view-message-group 135 //+view-message-group
136 136
137 .c-sidebar.l-overflow.u-bie-1.u-p-100 137 .c-sidebar.l-overflow.u-bie-1.u-p-100
138 +side-nav 138 +side-nav
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index d7595d1..d622d3b 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -17,7 +17,16 @@ mixin card
17 block 17 block
18 18
19mixin card-image 19mixin card-image
20 .o-card__image 20 -
21 let classes = {
22 'o-card__image': true,
23 }
24
25 if (attributes.class) {
26 classes[attributes.class] = true;
27 }
28
29 div(class=classes)
21 img.o-card__image-img(src=attributes.src style=attributes.style) 30 img.o-card__image-img(src=attributes.src style=attributes.style)
22 31
23mixin card-body 32mixin card-body
@@ -34,6 +43,7 @@ mixin card-avatar
34mixin card-content 43mixin card-content
35 .o-card__content 44 .o-card__content
36 block 45 block
46
37mixin card-footer 47mixin card-footer
38 footer.o-card__footer 48 footer.o-card__footer
39 block 49 block
diff --git a/tpl/objects/lightbox.pug b/tpl/objects/lightbox.pug
index 58abdae..02a3200 100644
--- a/tpl/objects/lightbox.pug
+++ b/tpl/objects/lightbox.pug
@@ -1,20 +1,33 @@
1include icon.pug 1include icon.pug
2 2
3mixin lightbox(images) 3mixin lightbox(images)
4 .o-lightbox 4 -
5 let classes = {
6 'o-lightbox': true,
7 }
8 let linksClasses = {
9 's-links': true,
10 }
11
12 if (attributes.theme) {
13 classes[`o-lightbox--${attributes.theme}`] = true;
14 linksClasses[`s-links--${attributes.theme}`] = true;
15 }
16
17 div(class=classes)
5 header.o-lightbox__header 18 header.o-lightbox__header
6 .s-links.s-links--colored 19 div(class=linksClasses)
7 block 20 block
8 +action-button(round=true quiet=true icon='x' class='o-lightbox__close-btn') 21 +action-button(theme=attributes.theme pill=true quiet=true icon='x' class='o-lightbox__close-btn')
9 each img, i in images 22 each img, i in images
10 img.o-lightbox__img(src=images[i] id='image-' + i) 23 img.o-lightbox__img(src=images[i] id='image-' + i)
11 +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') 24 +action-button(theme=attributes.theme pill=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') 25 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
13 26
14 img.o-lightbox__img.o-lightbox__img--default(src=images[0]) 27 img.o-lightbox__img.o-lightbox__img--default(src=images[0])
15 if images.length > 1 28 if images.length > 1
16 +action-button(round=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev') 29 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-left' class='o-lightbox__nav-btn o-lightbox__nav-btn--prev')
17 +action-button(round=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next') 30 +action-button(theme=attributes.theme pill=true quiet=true icon='chevron-right' class='o-lightbox__nav-btn o-lightbox__nav-btn--next')
18 .o-lightbox__thumbnails 31 .o-lightbox__thumbnails
19 each img, i in images 32 each img, i in images
20 - classes = i === 0 ? 'is-selected' : '' 33 - classes = i === 0 ? 'is-selected' : ''
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index e466cdc..4871d30 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -1,5 +1,5 @@
1mixin view-card 1mixin view-card
2 +view('card', 'Card') 2 +view('card', 'Card')(wide=true)
3 .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '2em' }) 3 .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '2em' })
4 +card(href='#') 4 +card(href='#')
5 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' }) 5 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
@@ -44,11 +44,26 @@ mixin view-card
44 p= loremIpsum 44 p= loremIpsum
45 p= loremIpsum 45 p= loremIpsum
46 46
47 +divider('faint') 47 each layout in ['grid', 'masonry', 'masonry-h']
48 -
49 let quiet = true
48 50
49 .l-card-list.l-card-list--masonry 51 let classes = {
50 each img in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png'] 52 'l-card-list': true,
51 +card(href='#' class='l-card-list__card') 53 'l-card-list--aspect-5/4': layout === 'grid',
52 +card-image(src=img) 54 'l-card-list--quiet': quiet,
53 +card-body 55 }
54 +card-title= 'XS Heading' 56 classes[`l-card-list--${layout}`] = true;
57
58
59 +divider('faint')(class='u-mb-700')
60
61 div(class=classes)
62 each img, i in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png']
63 +card(quiet=quiet href='#' class='l-card-list__card')
64 +card-image(src=img class='l-card-list__card-image')
65 +card-body
66 .l-media
67 .l-media__block.l-media__block--main
68 h1.u-mbs-0= 'XS Heading'
69 small.u-c-mute-more= `Episode ${i + 1}`
diff --git a/tpl/views/lightbox.pug b/tpl/views/lightbox.pug
index 8169a35..4eb234a 100644
--- a/tpl/views/lightbox.pug
+++ b/tpl/views/lightbox.pug
@@ -1,8 +1,20 @@
1mixin view-lightbox 1mixin view-lightbox
2 +view('lightbox', 'Lightbox') 2 +view('lightbox', 'Lightbox')
3 .c-box 3 .c-box
4 +backdrop(class='t-media') 4 +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])
5 +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png']) 5 = "Let's try multiple links! "
6 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
7 = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
8 = ' '
9 a(href="https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c")
10 = "https://mk.vulpes.one/files/741dcfd3-6a26-48ae-8985-d0c3ccca016c"
11 = ' '
12 a(href="https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06")
13 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
14
15 .c-box
16 +backdrop
17 +lightbox(['avatar.png', 'ava_feralbot.png', 'volpeon_spooky.png'])(theme='static-white')
6 = "Let's try multiple links! " 18 = "Let's try multiple links! "
7 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") 19 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
8 = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" 20 = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"
@@ -14,8 +26,8 @@ mixin view-lightbox
14 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06" 26 = "https://mk.vulpes.one/files/081e0684-08dc-4a42-b810-b0ac63ec7d06"
15 27
16 .c-box 28 .c-box
17 +backdrop(class='t-media') 29 +backdrop
18 +lightbox(['avatar.png']) 30 +lightbox(['avatar.png'])(theme='static-white')
19 = "Let's try multiple links! " 31 = "Let's try multiple links! "
20 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925") 32 a(href="https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925")
21 = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925" 33 = "https://mk.vulpes.one/files/3023f361-124a-4c80-bb69-9535e47c2925"