summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
Diffstat (limited to 'tpl')
-rw-r--r--tpl/objects/button.pug2
-rw-r--r--tpl/objects/card.pug11
-rw-r--r--tpl/views/card.pug45
-rw-r--r--tpl/views/icon-nav.pug2
-rw-r--r--tpl/views/message-group.pug4
-rw-r--r--tpl/views/message.pug6
-rw-r--r--tpl/views/text-field.pug2
7 files changed, 54 insertions, 18 deletions
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index b5fb8da..1fa3347 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -5,7 +5,7 @@ mixin a-button
5 'o-button--block': attributes.block, 5 'o-button--block': attributes.block,
6 'o-button--primary': attributes.primary, 6 'o-button--primary': attributes.primary,
7 'o-button--outline': attributes.outline, 7 'o-button--outline': attributes.outline,
8 'o-button--round': !!attributes.icon 8 'o-button--round': !!attributes.icon && !block
9 } 9 }
10 if (attributes.variant) { 10 if (attributes.variant) {
11 classes['o-button--' + attributes.variant] = true 11 classes['o-button--' + attributes.variant] = true
diff --git a/tpl/objects/card.pug b/tpl/objects/card.pug
index d61393d..d7595d1 100644
--- a/tpl/objects/card.pug
+++ b/tpl/objects/card.pug
@@ -1,7 +1,12 @@
1mixin card 1mixin card
2 - 2 -
3 let classes = { 3 let classes = {
4 'o-card': true, 4 'o-card': true,
5 'o-card--quiet': !!attributes.quiet,
6 }
7
8 if (attributes.class) {
9 classes[attributes.class] = true;
5 } 10 }
6 11
7 if attributes.href 12 if attributes.href
@@ -13,10 +18,10 @@ mixin card
13 18
14mixin card-image 19mixin card-image
15 .o-card__image 20 .o-card__image
16 img.o-card__image-img(src=attributes.src) 21 img.o-card__image-img(src=attributes.src style=attributes.style)
17 22
18mixin card-body 23mixin card-body
19 .o-card__body 24 .o-card__body(style=attributes.style)
20 block 25 block
21 26
22mixin card-title 27mixin card-title
diff --git a/tpl/views/card.pug b/tpl/views/card.pug
index 6858867..e466cdc 100644
--- a/tpl/views/card.pug
+++ b/tpl/views/card.pug
@@ -1,23 +1,54 @@
1mixin view-card 1mixin view-card
2 +view('card', 'Card') 2 +view('card', 'Card')
3 .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '1em' }) 3 .c-box(style={ display: 'flex', 'flex-direction': 'column', gap: '2em' })
4 +card(href='#') 4 +card(href='#')
5 +card-image(src='Drawing_Half.png') 5 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
6 +card-avatar(src='avatar.png') 6 +card-avatar(src='avatar.png')
7 +card-body 7 +card-body
8 +card-title= 'XS Heading' 8 +card-title= 'XS Heading'
9 +card-content= loremIpsum 9 +card-content
10 p= loremIpsum
11 p= loremIpsum
10 +card-footer 12 +card-footer
11 = 'Footer' 13 = 'Footer'
12 14
13 +card(href='#') 15 +card
14 +card-body 16 +card-body
15 .l-media 17 .l-media
16 +avatar(class='l-media__block' src='avatar.png') 18 +avatar(class='l-media__block' src='avatar.png')
17 .l-media__block.l-media__block--main 19 .l-media__block.l-media__block--main
18 strong.u-d-block= 'Volpeon' 20 strong.u-d-block= 'Volpeon'
19 small.u-d-block= '@volpeon@is-a.wyvern.rip' 21 small.u-d-block= '@volpeon@is-a.wyvern.rip'
20 +card-content= loremIpsum 22 +card-content
21 +card-image(src='Drawing_Half.png') 23 p= loremIpsum
24 p= loremIpsum
25 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '16 / 9' })
22 +card-body 26 +card-body
23 = 'Footer' 27 .l-media
28 .l-media__block
29 +badge('positive')(quiet=true icon='repeat' href='#')
30 +icon('repeat')
31 strong.u-mis-50= '12'
32 .l-media__block
33 +badge('warning')(quiet=true icon='star' href='#')
34 +icon('star')
35 strong.u-mis-50= '34'
36 .l-media__block.u-mis-auto
37 +a-button(primary=true)= 'Reply'
38
39 +card(quiet=true href='#')
40 +card-image(src='Drawing_Half.png' style={ 'aspect-ratio': '21 / 9' })
41 +card-body
42 +card-title= 'XS Heading'
43 +card-content
44 p= loremIpsum
45 p= loremIpsum
46
47 +divider('faint')
48
49 .l-card-list.l-card-list--masonry
50 each img in ['Drawing_Half.png', '0000 Cover@0.5x.webp', 'avatar.png', '01 Design Cody.png', 'avatar.png', 'Drawing_Half.png']
51 +card(href='#' class='l-card-list__card')
52 +card-image(src=img)
53 +card-body
54 +card-title= 'XS Heading'
diff --git a/tpl/views/icon-nav.pug b/tpl/views/icon-nav.pug
index e71229d..8ba9880 100644
--- a/tpl/views/icon-nav.pug
+++ b/tpl/views/icon-nav.pug
@@ -5,7 +5,7 @@ mixin view-icon-nav
5 +icon-nav-item('hash') 5 +icon-nav-item('hash')
6 +icon-nav-item('bookmark')(selected=true) 6 +icon-nav-item('bookmark')(selected=true)
7 +icon-nav-item('tags') 7 +icon-nav-item('tags')
8 +icon-nav-item('cog')(class='u-ml-auto') 8 +icon-nav-item('cog')(class='u-mis-auto')
9 +icon-nav-item('logout') 9 +icon-nav-item('logout')
10 10
11 .c-box 11 .c-box
diff --git a/tpl/views/message-group.pug b/tpl/views/message-group.pug
index dc744d9..48cb008 100644
--- a/tpl/views/message-group.pug
+++ b/tpl/views/message-group.pug
@@ -71,10 +71,10 @@ mixin view-message-group
71 .l-media 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-mis-100= '@volpeon@mk.vulpes.one'
75 small.l-media__block 75 small.l-media__block
76 = '5 minutes ago' 76 = '5 minutes ago'
77 +icon('lock')(class='u-ml-100') 77 +icon('lock')(class='u-mis-100')
78 +slot('body')= 'Full width bubble messages test' 78 +slot('body')= 'Full width bubble messages test'
79 +message()(theme='t-up' group=true) 79 +message()(theme='t-up' group=true)
80 +slot('body')= loremIpsum 80 +slot('body')= loremIpsum
diff --git a/tpl/views/message.pug b/tpl/views/message.pug
index 9130537..dc8b289 100644
--- a/tpl/views/message.pug
+++ b/tpl/views/message.pug
@@ -5,7 +5,7 @@ mixin view-message
5 +slot('body')= loremIpsum 5 +slot('body')= loremIpsum
6 +slot('time') 6 +slot('time')
7 = '12:34' 7 = '12:34'
8 +icon('lock')(class='u-ml-100') 8 +icon('lock')(class='u-mis-100')
9 9
10 .c-box 10 .c-box
11 +message('Volpeon')(compact=true highlight=true theme='t-up') 11 +message('Volpeon')(compact=true highlight=true theme='t-up')
@@ -21,10 +21,10 @@ mixin view-message
21 .l-media 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-mis-100= '@volpeon@mk.vulpes.one'
25 small.l-media__block 25 small.l-media__block
26 = '5 minutes ago' 26 = '5 minutes ago'
27 +icon('lock')(class='u-ml-100') 27 +icon('lock')(class='u-mis-100')
28 +slot('body') 28 +slot('body')
29 = loremIpsum 29 = loremIpsum
30 = loremIpsum 30 = loremIpsum
diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug
index 9a60741..165e2ce 100644
--- a/tpl/views/text-field.pug
+++ b/tpl/views/text-field.pug
@@ -17,7 +17,7 @@ mixin view-text-field
17 +text-field(placeholder='Just landed in L.A.' class="u-p-50") 17 +text-field(placeholder='Just landed in L.A.' class="u-p-50")
18 +slot('pre') 18 +slot('pre')
19 +action-button(quiet=true class='l-media__block')= 'Volpeon' 19 +action-button(quiet=true class='l-media__block')= 'Volpeon'
20 +divider('vertical')(class='u-ml-50') 20 +divider('vertical')(class='u-mis-50')
21 +slot('post') 21 +slot('post')
22 +action-button(quiet=true icon='smile' class='l-media__block') 22 +action-button(quiet=true icon='smile' class='l-media__block')
23 +action-button(quiet=true icon='send' class='l-media__block') 23 +action-button(quiet=true icon='send' class='l-media__block')
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-21 20:10:14 +0000