summaryrefslogtreecommitdiffstats
path: root/tpl/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-27 11:26:15 +0200
committerVolpeon <git@volpeon.ink>2024-06-27 11:26:15 +0200
commit57e28f7fe929f275a0c516d0a702ec8a8739a810 (patch)
treefd84e604e0d19dba9c18d93097837a6b1d58199e /tpl/objects
parentUpdate (diff)
downloadiro-design-57e28f7fe929f275a0c516d0a702ec8a8739a810.tar.gz
iro-design-57e28f7fe929f275a0c516d0a702ec8a8739a810.tar.bz2
iro-design-57e28f7fe929f275a0c516d0a702ec8a8739a810.zip
Add card
Diffstat (limited to 'tpl/objects')
-rw-r--r--tpl/objects/avatar.pug26
-rw-r--r--tpl/objects/card.pug43
-rw-r--r--tpl/objects/menu.pug2
-rw-r--r--tpl/objects/message.pug2
-rw-r--r--tpl/objects/side-nav.pug2
-rw-r--r--tpl/objects/text-field.pug1
6 files changed, 45 insertions, 31 deletions
diff --git a/tpl/objects/avatar.pug b/tpl/objects/avatar.pug
index 19439bb..ca3de07 100644
--- a/tpl/objects/avatar.pug
+++ b/tpl/objects/avatar.pug
@@ -20,11 +20,21 @@ mixin avatar
20 styles['--avatar--colors--h'] = attributes.hue; 20 styles['--avatar--colors--h'] = attributes.hue;
21 } 21 }
22 22
23 a(class=classes style=styles href=attributes.href) 23 if attributes.href
24 if attributes.status 24 a(class=classes style=styles href=attributes.href)
25 +status-indicator(attributes.status)(class='o-avatar__status') 25 if attributes.status
26 if attributes.src 26 +status-indicator(attributes.status)(class='o-avatar__status')
27 img.o-avatar__content(src=attributes.src) 27 if attributes.src
28 else 28 img.o-avatar__content(src=attributes.src)
29 .o-avatar__content 29 else
30 block 30 .o-avatar__content
31 block
32 else
33 div(class=classes style=styles)
34 if attributes.status
35 +status-indicator(attributes.status)(class='o-avatar__status')
36 if attributes.src
37 img.o-avatar__content(src=attributes.src)
38 else
39 .o-avatar__content
40 block
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index d6516be..d61393d 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -1,29 +1,34 @@
1mixin card 1mixin card
2 - const slots = {}
3
4 mixin slot(key)
5 - slots[key] = block
6
7 - 2 -
8 block ? block() : undefined
9
10 let classes = { 3 let classes = {
11 'o-card': true, 4 'o-card': true,
12 } 5 }
13 6
14 if attributes.href 7 if attributes.href
15 a(href=attributes.href class=classes) 8 a(href=attributes.href class=classes)
16 if slots.body 9 block
17 .o-card__body
18 - slots.body()
19 if slots.footer
20 .o-card__footer
21 - slots.footer()
22 else 10 else
23 div(class=classes) 11 div(class=classes)
24 if slots.body 12 block
25 .o-card__body 13
26 - slots.body() 14mixin card-image
27 if slots.footer 15 .o-card__image
28 .o-card__footer 16 img.o-card__image-img(src=attributes.src)
29 - slots.footer() 17
18mixin card-body
19 .o-card__body
20 block
21
22mixin card-title
23 h1.o-card__title
24 block
25
26mixin card-avatar
27 +avatar(class='o-card__avatar' src=attributes.src size='xl')
28
29mixin card-content
30 .o-card__content
31 block
32mixin card-footer
33 footer.o-card__footer
34 block
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
index a8b20d7..578f9bc 100644
--- a/tpl/objects/menu.pug
+++ b/tpl/objects/menu.pug
@@ -19,7 +19,7 @@ mixin menu-item
19 let classes = { 19 let classes = {
20 'o-menu__item': true, 20 'o-menu__item': true,
21 'l-media': true, 21 'l-media': true,
22 'l-media--75': true, 22 'l-media--sm': true,
23 'o-menu__header': attributes.header, 23 'o-menu__header': attributes.header,
24 'is-selected': attributes.selected, 24 'is-selected': attributes.selected,
25 } 25 }
diff --git a/tpl/objects/message.pug b/tpl/objects/message.pug
index d644347..6b64a40 100644
--- a/tpl/objects/message.pug
+++ b/tpl/objects/message.pug
@@ -45,7 +45,7 @@ mixin message(user)
45 45
46 article(class=classes) 46 article(class=classes)
47 if user && attributes.avatar 47 if user && attributes.avatar
48 .l-media.l-media--flush.l-flex--align-start 48 .l-media.l-flex--align-start
49 .l-media__block.u-mt-50.u-p-sticky-top 49 .l-media__block.u-mt-50.u-p-sticky-top
50 +avatar= user.slice(0, 2) 50 +avatar= user.slice(0, 2)
51 .l-media__block.l-media__block--main 51 .l-media__block.l-media__block--main
diff --git a/tpl/objects/side-nav.pug b/tpl/objects/side-nav.pug
index 511f298..ccd24e4 100644
--- a/tpl/objects/side-nav.pug
+++ b/tpl/objects/side-nav.pug
@@ -19,7 +19,7 @@ mixin side-nav-item
19 let classes = { 19 let classes = {
20 'o-side-nav__item': true, 20 'o-side-nav__item': true,
21 'l-media': true, 21 'l-media': true,
22 'l-media--75': true, 22 'l-media--sm': true,
23 'o-side-nav__header': attributes.header, 23 'o-side-nav__header': attributes.header,
24 'is-selected': attributes.selected, 24 'is-selected': attributes.selected,
25 } 25 }
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index f8e5263..0342f01 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -15,7 +15,6 @@ mixin text-field
15 'is-invalid': attributes.invalid, 15 'is-invalid': attributes.invalid,
16 'is-disabled': attributes.disabled, 16 'is-disabled': attributes.disabled,
17 'l-media': !!block, 17 'l-media': !!block,
18 'l-media--flush': !!block,
19 'l-media--gapless': !!block, 18 'l-media--gapless': !!block,
20 } 19 }
21 if (attributes.class) { 20 if (attributes.class) {