summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
Diffstat (limited to 'tpl')
-rw-r--r--tpl/objects/backdrop.pug7
-rw-r--r--tpl/objects/bubble-group.pug2
-rw-r--r--tpl/objects/bubble.pug2
-rw-r--r--tpl/objects/dialog.pug4
-rw-r--r--tpl/objects/icon.pug2
-rw-r--r--tpl/views/avatar.pug16
-rw-r--r--tpl/views/dialog.pug12
7 files changed, 33 insertions, 12 deletions
diff --git a/tpl/objects/backdrop.pug b/tpl/objects/backdrop.pug
index cbe8866..227700c 100644
--- a/tpl/objects/backdrop.pug
+++ b/tpl/objects/backdrop.pug
@@ -8,5 +8,10 @@ mixin backdrop
8 classes[attributes.class] = true; 8 classes[attributes.class] = true;
9 } 9 }
10 10
11 div(class=classes, style={ width: '100%', 'min-height': '5em', 'max-height': '40em' }) 11 let styles = { width: '100%', 'min-height': '5em', 'max-height': '40em' }
12 if (attributes.pad) {
13 styles['padding'] = '2em';
14 }
15
16 div(class=classes, style=styles)
12 block 17 block
diff --git a/tpl/objects/bubble-group.pug b/tpl/objects/bubble-group.pug
index a1a8c00..e6a6d19 100644
--- a/tpl/objects/bubble-group.pug
+++ b/tpl/objects/bubble-group.pug
@@ -10,6 +10,6 @@ mixin bubble-group(user)
10 } 10 }
11 11
12 section(class=classes) 12 section(class=classes)
13 .l-bubble-group__avatar.u-sticky-top 13 .l-bubble-group__avatar.u-p-sticky-top
14 +avatar= user.slice(0, 2) 14 +avatar= user.slice(0, 2)
15 block 15 block
diff --git a/tpl/objects/bubble.pug b/tpl/objects/bubble.pug
index bec6e9e..d04f06b 100644
--- a/tpl/objects/bubble.pug
+++ b/tpl/objects/bubble.pug
@@ -43,7 +43,7 @@ mixin bubble(user)
43 article(class=classes) 43 article(class=classes)
44 if user && attributes.avatar 44 if user && attributes.avatar
45 .l-media.l-media--flush.l-flex--align-start 45 .l-media.l-media--flush.l-flex--align-start
46 .l-media__block.u-mt-50.u-sticky-top 46 .l-media__block.u-mt-50.u-p-sticky-top
47 +avatar= user.slice(0, 2) 47 +avatar= user.slice(0, 2)
48 .l-media__block.l-media__block--main 48 .l-media__block.l-media__block--main
49 +content 49 +content
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 95aa41c..ece0d67 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -40,7 +40,7 @@ mixin dialog(title)
40 if slots['sidebar-header'] 40 if slots['sidebar-header']
41 - slots['sidebar-header']() 41 - slots['sidebar-header']()
42 else 42 else
43 +div-heading('sm')(class='o-dialog__title l-media__block l-media__block--main')= attributes.sidebarTitle 43 +div-heading('xl')(class='o-dialog__title u-mt-0 l-media__block l-media__block--main')= attributes.sidebarTitle
44 44
45 if slots.sidebar 45 if slots.sidebar
46 .o-dialog__sidebar.l-overflow 46 .o-dialog__sidebar.l-overflow
@@ -51,7 +51,7 @@ mixin dialog(title)
51 - slots.header() 51 - slots.header()
52 else 52 else
53 if title 53 if title
54 +div-heading('sm')(class='o-dialog__title l-media__block l-media__block--main')= title 54 +div-heading('xl')(class='o-dialog__title u-mt-0 l-media__block l-media__block--main')= title
55 +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block') 55 +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn l-media__block')
56 56
57 section(class=bodyClass) 57 section(class=bodyClass)
diff --git a/tpl/objects/icon.pug b/tpl/objects/icon.pug
index 67bcf37..98d51ad 100644
--- a/tpl/objects/icon.pug
+++ b/tpl/objects/icon.pug
@@ -9,5 +9,5 @@ mixin icon(id)
9 classes[attributes.class] = true; 9 classes[attributes.class] = true;
10 } 10 }
11 11
12 svg(class=classes width='1em' height='1em') 12 svg(class=classes)
13 use(href=href) 13 use(href=href)
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 @@
1mixin view-dialog 1mixin 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'