diff options
Diffstat (limited to 'tpl/views')
-rw-r--r-- | tpl/views/avatar.pug | 16 | ||||
-rw-r--r-- | tpl/views/dialog.pug | 12 |
2 files changed, 22 insertions, 6 deletions
diff --git a/tpl/views/avatar.pug b/tpl/views/avatar.pug index 01aaf93..7941649 100644 --- a/tpl/views/avatar.pug +++ b/tpl/views/avatar.pug | |||
@@ -2,6 +2,14 @@ mixin view-avatar | |||
2 | +view('avatar', 'Avatar') | 2 | +view('avatar', 'Avatar') |
3 | .c-box | 3 | .c-box |
4 | div(style={ display: 'flex', gap: '.3em' }) | 4 | div(style={ display: 'flex', gap: '.3em' }) |
5 | +avatar(size='150' hue=180) | ||
6 | = 'Vo' | ||
7 | +avatar(size='150' hue=225) | ||
8 | = 'lp' | ||
9 | +avatar(size='150' src='avatar.png') | ||
10 | br | ||
11 | br | ||
12 | div(style={ display: 'flex', gap: '.3em' }) | ||
5 | +avatar | 13 | +avatar |
6 | = 'Vo' | 14 | = 'Vo' |
7 | +avatar(status='green' hue=45) | 15 | +avatar(status='green' hue=45) |
@@ -28,6 +36,14 @@ mixin view-avatar | |||
28 | 36 | ||
29 | .c-box | 37 | .c-box |
30 | div(style={ display: 'flex', gap: '.3em' }) | 38 | div(style={ display: 'flex', gap: '.3em' }) |
39 | +avatar(circle=true size='150' hue=180) | ||
40 | = 'Vo' | ||
41 | +avatar(circle=true size='150' hue=225) | ||
42 | = 'lp' | ||
43 | +avatar(circle=true size='150' src='avatar.png') | ||
44 | br | ||
45 | br | ||
46 | div(style={ display: 'flex', gap: '.3em' }) | ||
31 | +avatar(circle=true) | 47 | +avatar(circle=true) |
32 | = 'Vo' | 48 | = 'Vo' |
33 | +avatar(circle=true status='green' hue=45) | 49 | +avatar(circle=true status='green' hue=45) |
diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug index 9d6061d..6ef06df 100644 --- a/tpl/views/dialog.pug +++ b/tpl/views/dialog.pug | |||
@@ -1,13 +1,13 @@ | |||
1 | mixin view-dialog | 1 | mixin view-dialog |
2 | +view('dialog', 'Dialog') | 2 | +view('dialog', 'Dialog') |
3 | .c-box | 3 | .c-box |
4 | +backdrop | 4 | +backdrop(pad=true) |
5 | +dialog('Lorem ipsum')(flat=true) | 5 | +dialog('Lorem ipsum')(flat=true) |
6 | +slot('body') | 6 | +slot('body') |
7 | = loremIpsum | 7 | = loremIpsum |
8 | 8 | ||
9 | .c-box | 9 | .c-box |
10 | +backdrop | 10 | +backdrop(pad=true) |
11 | +dialog('Lorem ipsum')(bodyClass='l-overflow') | 11 | +dialog('Lorem ipsum')(bodyClass='l-overflow') |
12 | +slot('body') | 12 | +slot('body') |
13 | p.u-mt-0= loremIpsum | 13 | p.u-mt-0= loremIpsum |
@@ -17,7 +17,7 @@ mixin view-dialog | |||
17 | p= loremIpsum | 17 | p= loremIpsum |
18 | 18 | ||
19 | .c-box | 19 | .c-box |
20 | +backdrop | 20 | +backdrop(pad=true) |
21 | +dialog('Tags')(sidebarTitle='#channel') | 21 | +dialog('Tags')(sidebarTitle='#channel') |
22 | +slot('sidebar') | 22 | +slot('sidebar') |
23 | +menu(style={ 'min-width': '10em' }) | 23 | +menu(style={ 'min-width': '10em' }) |
@@ -28,7 +28,7 @@ mixin view-dialog | |||
28 | p.u-mt-0= loremIpsum | 28 | p.u-mt-0= loremIpsum |
29 | 29 | ||
30 | .c-box | 30 | .c-box |
31 | +backdrop | 31 | +backdrop(pad=true) |
32 | +dialog('#channel') | 32 | +dialog('#channel') |
33 | +slot('sidebar') | 33 | +slot('sidebar') |
34 | +menu(style={ 'min-width': '10em' }) | 34 | +menu(style={ 'min-width': '10em' }) |
@@ -39,14 +39,14 @@ mixin view-dialog | |||
39 | p.u-mt-0= loremIpsum | 39 | p.u-mt-0= loremIpsum |
40 | 40 | ||
41 | .c-box | 41 | .c-box |
42 | +backdrop | 42 | +backdrop(pad=true) |
43 | +dialog | 43 | +dialog |
44 | +slot('header') | 44 | +slot('header') |
45 | .l-media__block.l-flex | 45 | .l-media__block.l-flex |
46 | +action-button(quiet=true icon='chevron-left') | 46 | +action-button(quiet=true icon='chevron-left') |
47 | +action-button(quiet=true icon='chevron-right') | 47 | +action-button(quiet=true icon='chevron-right') |
48 | .l-media__block.l-media__block--main | 48 | .l-media__block.l-media__block--main |
49 | +div-heading('sm')= 'Tags' | 49 | +div-heading('xl')(class="u-mt-0")= 'Tags' |
50 | +slot('sidebar') | 50 | +slot('sidebar') |
51 | +menu(style={ 'min-width': '10em' }) | 51 | +menu(style={ 'min-width': '10em' }) |
52 | +menu-item(icon='bookmark')= 'Bookmark' | 52 | +menu-item(icon='bookmark')= 'Bookmark' |