diff options
Diffstat (limited to 'tpl/views')
-rw-r--r-- | tpl/views/card.pug | 45 | ||||
-rw-r--r-- | tpl/views/icon-nav.pug | 2 | ||||
-rw-r--r-- | tpl/views/message-group.pug | 4 | ||||
-rw-r--r-- | tpl/views/message.pug | 6 | ||||
-rw-r--r-- | tpl/views/text-field.pug | 2 |
5 files changed, 45 insertions, 14 deletions
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 @@ | |||
1 | mixin view-card | 1 | mixin 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') |