From a08dee14bcc07ee31175265cb586e857d44fb12e Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 27 Mar 2022 18:52:27 +0200 Subject: Improved bubbles --- tpl/views/bubble-group.pug | 43 +++++++++++++++++++++++++++++++++++++------ tpl/views/bubble.pug | 21 +++++++++++++++++++-- 2 files changed, 56 insertions(+), 8 deletions(-) (limited to 'tpl/views') diff --git a/tpl/views/bubble-group.pug b/tpl/views/bubble-group.pug index 6f057c0..ec7d025 100644 --- a/tpl/views/bubble-group.pug +++ b/tpl/views/bubble-group.pug @@ -1,9 +1,40 @@ mixin view-bubble-group +view('bubble-group', 'Bubble group') - .c-box.l-overflow(style='max-height: 13em') + .c-box.l-overflow(style='max-height: 15em') + +bubble-group('Volpeon')(compact=true arrow=true) + +bubble('Volpeon')(compact=true class='l-bubble-group__bubble') + +slot('body')= 'Compact bubbles test' + +slot('time')= '12:34' + +bubble()(compact=true class='l-bubble-group__bubble') + +slot('body')= loremIpsum + +slot('time')= '12:35' + +bubble()(compact=true class='l-bubble-group__bubble') + +slot('body')= 'qwertzuiop' + +slot('time')= '12:36' + +bubble()(compact=true class='l-bubble-group__bubble') + +slot('body')= '🐈️🦊️' + +slot('time')= '12:38' + +bubble()(compact=true class='l-bubble-group__bubble') + +slot('body')= loremIpsum + +slot('time')= '12:39' + + .c-box.l-overflow(style='max-height: 15em') +bubble-group('Volpeon') - +bubble-group-bubble('12:34')= loremIpsum - +bubble-group-bubble('12:35')= loremIpsum - +bubble-group-bubble('12:36')= loremIpsum - +bubble-group-bubble('12:38')= loremIpsum - +bubble-group-bubble('12:39')= loremIpsum + +bubble()(class='l-bubble-group__bubble') + +slot('header') + .l-card.l-card--flush + .l-card__block.l-card__block--main + strong= 'Volpeon' + small.u-ml-100= '@volpeon@mk.vulpes.one' + small.l-card__block + = '5 minutes ago' + +icon('lock')(class='u-ml-100') + +slot('body')= 'Full width bubbles test' + +bubble()(class='l-bubble-group__bubble') + +slot('body')= loremIpsum + +bubble()(class='l-bubble-group__bubble') + +slot('body')= 'qwertzuiop' + +bubble()(class='l-bubble-group__bubble') + +slot('body')= '🐈️🦊️' + +bubble()(class='l-bubble-group__bubble') + +slot('body')= loremIpsum diff --git a/tpl/views/bubble.pug b/tpl/views/bubble.pug index 037398f..5e53f5b 100644 --- a/tpl/views/bubble.pug +++ b/tpl/views/bubble.pug @@ -1,7 +1,24 @@ mixin view-bubble +view('bubble', 'Bubble') .c-box - +bubble('12:34', 'Volpeon')= loremIpsum + +bubble('Volpeon')(compact=true) + +slot('body')= loremIpsum + +slot('time') + = '12:34' + +icon('lock')(class='u-ml-100') + + .c-box.u-themed.t-hi + +bubble()(compact=true theme='t-def') + +slot('body')= loremIpsum .c-box - +bubble('12:34', 'Volpeon')(scope='lock')= loremIpsum + +bubble() + +slot('header') + .l-card.l-card--flush + .l-card__block.l-card__block--main + strong= 'Volpeon' + small.u-ml-100= '@volpeon@mk.vulpes.one' + small.l-card__block + = '5 minutes ago' + +icon('lock')(class='u-ml-100') + +slot('body')= loremIpsum -- cgit v1.2.3-54-g00ecf