summaryrefslogtreecommitdiffstats
path: root/tpl
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
parentUpdate (diff)
downloadiro-design-57e28f7fe929f275a0c516d0a702ec8a8739a810.tar.gz
iro-design-57e28f7fe929f275a0c516d0a702ec8a8739a810.tar.bz2
iro-design-57e28f7fe929f275a0c516d0a702ec8a8739a810.zip
Add card
Diffstat (limited to 'tpl')
-rw-r--r--tpl/index.pug8
-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
-rw-r--r--tpl/views/card.pug24
-rw-r--r--tpl/views/menu.pug2
-rw-r--r--tpl/views/message-group.pug2
-rw-r--r--tpl/views/message.pug2
11 files changed, 71 insertions, 43 deletions
diff --git a/tpl/index.pug b/tpl/index.pug
index b6af02b..a6e99dd 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -49,7 +49,7 @@ mixin user-card(name, hue)
49 - 49 -
50 const avaName = name.slice(0, 1) 50 const avaName = name.slice(0, 1)
51 51
52 .l-media.l-media--flush.l-media--75 52 .l-media.l-media--sm
53 +avatar(block=true size='xs' class='l-media__block' hue=hue) 53 +avatar(block=true size='xs' class='l-media__block' hue=hue)
54 = avaName 54 = avaName
55 = name 55 = name
@@ -134,7 +134,7 @@ html
134 +view-message 134 +view-message
135 +view-message-group 135 +view-message-group
136 136
137 .c-sidebar.l-overflow.t-base.u-p-75 137 .c-sidebar.l-overflow.u-bie-1.u-p-100
138 +menu 138 +side-nav
139 each view in views 139 each view in views
140 +menu-item(tag='a' href='#' + view.id)= view.title 140 +side-nav-item(tag='a' href='#' + view.id)= view.title
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) {
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 0b88b0e..6858867 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -1,9 +1,23 @@
1mixin view-card 1mixin view-card
2 +view('card', 'Card') 2 +view('card', 'Card')
3 .c-box 3 .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '1em' })
4 +card(href='#') 4 +card(href='#')
5 +slot('body') 5 +card-image(src='Drawing_Half.png')
6 h1= 'XS Heading' 6 +card-avatar(src='avatar.png')
7 p= loremIpsum 7 +card-body
8 +slot('footer') 8 +card-title= 'XS Heading'
9 +card-content= loremIpsum
10 +card-footer
11 = 'Footer'
12
13 +card(href='#')
14 +card-body
15 .l-media
16 +avatar(class='l-media__block' src='avatar.png')
17 .l-media__block.l-media__block--main
18 strong.u-d-block= 'Volpeon'
19 small.u-d-block= '@volpeon@is-a.wyvern.rip'
20 +card-content= loremIpsum
21 +card-image(src='Drawing_Half.png')
22 +card-body
9 = 'Footer' 23 = 'Footer'
diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug
index 34a15ce..7c5df03 100644
--- a/tpl/views/menu.pug
+++ b/tpl/views/menu.pug
@@ -5,7 +5,7 @@ mixin view-menu
5 +action-button(quiet=true selected=true)= 'Menu' 5 +action-button(quiet=true selected=true)= 'Menu'
6 +popover 6 +popover
7 +menu 7 +menu
8 +menu-slot(class='l-media l-media--flush') 8 +menu-slot(class='l-media')
9 +avatar(block=true circle=true size='100' src='avatar.png' class='l-media__block') 9 +avatar(block=true circle=true size='100' src='avatar.png' class='l-media__block')
10 .l-media__block.l-media__block--main 10 .l-media__block.l-media__block--main
11 strong.u-d-block= 'Volpeon' 11 strong.u-d-block= 'Volpeon'
diff --git a/tpl/views/message-group.pug b/tpl/views/message-group.pug
index 3d1166f..dc744d9 100644
--- a/tpl/views/message-group.pug
+++ b/tpl/views/message-group.pug
@@ -68,7 +68,7 @@ mixin view-message-group
68 +message-group('Volpeon') 68 +message-group('Volpeon')
69 +message()(theme='t-up' group=true) 69 +message()(theme='t-up' group=true)
70 +slot('header') 70 +slot('header')
71 .l-media.l-media--flush 71 .l-media
72 .l-media__block.l-media__block--main 72 .l-media__block.l-media__block--main
73 strong= 'Volpeon' 73 strong= 'Volpeon'
74 small.u-ml-100= '@volpeon@mk.vulpes.one' 74 small.u-ml-100= '@volpeon@mk.vulpes.one'
diff --git a/tpl/views/message.pug b/tpl/views/message.pug
index f256e41..9130537 100644
--- a/tpl/views/message.pug
+++ b/tpl/views/message.pug
@@ -18,7 +18,7 @@ mixin view-message
18 .c-box.l-overflow(style='resize: vertical') 18 .c-box.l-overflow(style='resize: vertical')
19 +message('Volpeon')(avatar=true theme='t-up') 19 +message('Volpeon')(avatar=true theme='t-up')
20 +slot('header') 20 +slot('header')
21 .l-media.l-media--flush 21 .l-media
22 .l-media__block.l-media__block--main 22 .l-media__block.l-media__block--main
23 strong= 'Volpeon' 23 strong= 'Volpeon'
24 small.u-ml-100= '@volpeon@mk.vulpes.one' 24 small.u-ml-100= '@volpeon@mk.vulpes.one'