diff options
Diffstat (limited to 'tpl')
-rw-r--r-- | tpl/objects/bubble-group.pug | 2 | ||||
-rw-r--r-- | tpl/objects/bubble.pug | 21 | ||||
-rw-r--r-- | tpl/views/bubble-group.pug | 4 | ||||
-rw-r--r-- | tpl/views/bubble.pug | 9 |
4 files changed, 27 insertions, 9 deletions
diff --git a/tpl/objects/bubble-group.pug b/tpl/objects/bubble-group.pug index 2b960f0..a1a8c00 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 | 13 | .l-bubble-group__avatar.u-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 681661c..1e0df38 100644 --- a/tpl/objects/bubble.pug +++ b/tpl/objects/bubble.pug | |||
@@ -19,12 +19,17 @@ mixin bubble(user) | |||
19 | classes[attributes.theme] = true | 19 | classes[attributes.theme] = true |
20 | } | 20 | } |
21 | 21 | ||
22 | article(class=classes) | 22 | let headerClasses = { |
23 | 'o-bubble__header': true, | ||
24 | 'u-mb-50': !attributes.compact, | ||
25 | } | ||
26 | |||
27 | mixin content | ||
23 | if slots.header | 28 | if slots.header |
24 | header.o-bubble__header | 29 | header(class=headerClasses) |
25 | - slots.header() | 30 | - slots.header() |
26 | else if user | 31 | else if user |
27 | header.o-bubble__header | 32 | header(class=headerClasses) |
28 | strong= user | 33 | strong= user |
29 | div.o-bubble__body.s-colored-links | 34 | div.o-bubble__body.s-colored-links |
30 | - slots.body() | 35 | - slots.body() |
@@ -34,3 +39,13 @@ mixin bubble(user) | |||
34 | if slots.footer | 39 | if slots.footer |
35 | footer.o-bubble__footer | 40 | footer.o-bubble__footer |
36 | - slots.footer() | 41 | - slots.footer() |
42 | |||
43 | article(class=classes) | ||
44 | if user && attributes.avatar | ||
45 | .l-card.l-card--flush.l-flex--align-start | ||
46 | .l-card__block.u-mt-50.u-sticky-top | ||
47 | +avatar= user.slice(0, 2) | ||
48 | .l-card__block.l-card__block--main | ||
49 | +content | ||
50 | else | ||
51 | +content | ||
diff --git a/tpl/views/bubble-group.pug b/tpl/views/bubble-group.pug index ec7d025..19b06c4 100644 --- a/tpl/views/bubble-group.pug +++ b/tpl/views/bubble-group.pug | |||
@@ -1,6 +1,6 @@ | |||
1 | mixin view-bubble-group | 1 | mixin view-bubble-group |
2 | +view('bubble-group', 'Bubble group') | 2 | +view('bubble-group', 'Bubble group') |
3 | .c-box.l-overflow(style='max-height: 15em') | 3 | .c-box.l-overflow(style='resize: vertical') |
4 | +bubble-group('Volpeon')(compact=true arrow=true) | 4 | +bubble-group('Volpeon')(compact=true arrow=true) |
5 | +bubble('Volpeon')(compact=true class='l-bubble-group__bubble') | 5 | +bubble('Volpeon')(compact=true class='l-bubble-group__bubble') |
6 | +slot('body')= 'Compact bubbles test' | 6 | +slot('body')= 'Compact bubbles test' |
@@ -18,7 +18,7 @@ mixin view-bubble-group | |||
18 | +slot('body')= loremIpsum | 18 | +slot('body')= loremIpsum |
19 | +slot('time')= '12:39' | 19 | +slot('time')= '12:39' |
20 | 20 | ||
21 | .c-box.l-overflow(style='max-height: 15em') | 21 | .c-box.l-overflow(style='resize: vertical') |
22 | +bubble-group('Volpeon') | 22 | +bubble-group('Volpeon') |
23 | +bubble()(class='l-bubble-group__bubble') | 23 | +bubble()(class='l-bubble-group__bubble') |
24 | +slot('header') | 24 | +slot('header') |
diff --git a/tpl/views/bubble.pug b/tpl/views/bubble.pug index 5e53f5b..0e65635 100644 --- a/tpl/views/bubble.pug +++ b/tpl/views/bubble.pug | |||
@@ -11,8 +11,8 @@ mixin view-bubble | |||
11 | +bubble()(compact=true theme='t-def') | 11 | +bubble()(compact=true theme='t-def') |
12 | +slot('body')= loremIpsum | 12 | +slot('body')= loremIpsum |
13 | 13 | ||
14 | .c-box | 14 | .c-box.l-overflow(style='resize: vertical') |
15 | +bubble() | 15 | +bubble('Volpeon')(avatar=true) |
16 | +slot('header') | 16 | +slot('header') |
17 | .l-card.l-card--flush | 17 | .l-card.l-card--flush |
18 | .l-card__block.l-card__block--main | 18 | .l-card__block.l-card__block--main |
@@ -21,4 +21,7 @@ mixin view-bubble | |||
21 | small.l-card__block | 21 | small.l-card__block |
22 | = '5 minutes ago' | 22 | = '5 minutes ago' |
23 | +icon('lock')(class='u-ml-100') | 23 | +icon('lock')(class='u-ml-100') |
24 | +slot('body')= loremIpsum | 24 | +slot('body') |
25 | = loremIpsum | ||
26 | = loremIpsum | ||
27 | = loremIpsum | ||