summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
Diffstat (limited to 'tpl')
-rw-r--r--tpl/objects/avatar.pug9
-rw-r--r--tpl/views/avatar.pug16
2 files changed, 13 insertions, 12 deletions
diff --git a/tpl/objects/avatar.pug b/tpl/objects/avatar.pug
index a2ff941..19439bb 100644
--- a/tpl/objects/avatar.pug
+++ b/tpl/objects/avatar.pug
@@ -3,9 +3,10 @@ include ../objects/status-indicator.pug
3mixin avatar 3mixin avatar
4 - 4 -
5 let classes = { 5 let classes = {
6 'o-avatar': true, 6 'o-avatar': true,
7 'o-avatar--circle': attributes.circle, 7 'o-avatar--colored': true,
8 'u-d-block': attributes.block 8 'o-avatar--circle': attributes.circle,
9 'u-d-block': attributes.block
9 } 10 }
10 if (attributes.class) { 11 if (attributes.class) {
11 classes[attributes.class] = true; 12 classes[attributes.class] = true;
@@ -19,7 +20,7 @@ mixin avatar
19 styles['--avatar--colors--h'] = attributes.hue; 20 styles['--avatar--colors--h'] = attributes.hue;
20 } 21 }
21 22
22 div(class=classes style=styles) 23 a(class=classes style=styles href=attributes.href)
23 if attributes.status 24 if attributes.status
24 +status-indicator(attributes.status)(class='o-avatar__status') 25 +status-indicator(attributes.status)(class='o-avatar__status')
25 if attributes.src 26 if attributes.src
diff --git a/tpl/views/avatar.pug b/tpl/views/avatar.pug
index 7941649..fcde68d 100644
--- a/tpl/views/avatar.pug
+++ b/tpl/views/avatar.pug
@@ -2,7 +2,7 @@ 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) 5 +avatar(size='150' hue=180 href='#')
6 = 'Vo' 6 = 'Vo'
7 +avatar(size='150' hue=225) 7 +avatar(size='150' hue=225)
8 = 'lp' 8 = 'lp'
@@ -10,7 +10,7 @@ mixin view-avatar
10 br 10 br
11 br 11 br
12 div(style={ display: 'flex', gap: '.3em' }) 12 div(style={ display: 'flex', gap: '.3em' })
13 +avatar 13 +avatar(href='#')
14 = 'Vo' 14 = 'Vo'
15 +avatar(status='green' hue=45) 15 +avatar(status='green' hue=45)
16 = 'lp' 16 = 'lp'
@@ -19,7 +19,7 @@ mixin view-avatar
19 br 19 br
20 br 20 br
21 div(style={ display: 'flex', gap: '.3em' }) 21 div(style={ display: 'flex', gap: '.3em' })
22 +avatar(size='75' hue=90) 22 +avatar(size='75' hue=90 href='#')
23 = 'eo' 23 = 'eo'
24 +avatar(size='75' status='green' hue=135) 24 +avatar(size='75' status='green' hue=135)
25 = 'n' 25 = 'n'
@@ -28,7 +28,7 @@ mixin view-avatar
28 br 28 br
29 br 29 br
30 div(style={ display: 'flex', gap: '.3em' }) 30 div(style={ display: 'flex', gap: '.3em' })
31 +avatar(size='50' hue=180) 31 +avatar(size='50' hue=180 href='#')
32 = 'V' 32 = 'V'
33 +avatar(size='50' hue=225) 33 +avatar(size='50' hue=225)
34 = 'o' 34 = 'o'
@@ -36,7 +36,7 @@ mixin view-avatar
36 36
37 .c-box 37 .c-box
38 div(style={ display: 'flex', gap: '.3em' }) 38 div(style={ display: 'flex', gap: '.3em' })
39 +avatar(circle=true size='150' hue=180) 39 +avatar(circle=true size='150' hue=180 href='#')
40 = 'Vo' 40 = 'Vo'
41 +avatar(circle=true size='150' hue=225) 41 +avatar(circle=true size='150' hue=225)
42 = 'lp' 42 = 'lp'
@@ -44,7 +44,7 @@ mixin view-avatar
44 br 44 br
45 br 45 br
46 div(style={ display: 'flex', gap: '.3em' }) 46 div(style={ display: 'flex', gap: '.3em' })
47 +avatar(circle=true) 47 +avatar(circle=true href='#')
48 = 'Vo' 48 = 'Vo'
49 +avatar(circle=true status='green' hue=45) 49 +avatar(circle=true status='green' hue=45)
50 = 'lp' 50 = 'lp'
@@ -53,7 +53,7 @@ mixin view-avatar
53 br 53 br
54 br 54 br
55 div(style={ display: 'flex', gap: '.3em' }) 55 div(style={ display: 'flex', gap: '.3em' })
56 +avatar(circle=true size='75' hue=90) 56 +avatar(circle=true size='75' hue=90 href='#')
57 = 'eo' 57 = 'eo'
58 +avatar(circle=true size='75' status='green' hue=135) 58 +avatar(circle=true size='75' status='green' hue=135)
59 = 'n' 59 = 'n'
@@ -62,7 +62,7 @@ mixin view-avatar
62 br 62 br
63 br 63 br
64 div(style={ display: 'flex', gap: '.3em' }) 64 div(style={ display: 'flex', gap: '.3em' })
65 +avatar(circle=true size='50' hue=180) 65 +avatar(circle=true size='50' hue=180 href='#')
66 = 'V' 66 = 'V'
67 +avatar(circle=true size='50' hue=225) 67 +avatar(circle=true size='50' hue=225)
68 = 'o' 68 = 'o'