From 120ad0cdc11143fb6f184bcbca332dbf8a2114e8 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 28 Mar 2022 09:00:40 +0200 Subject: Improved bubble --- src/_utils.scss | 5 +++++ src/layouts/_bubble-group.scss | 13 ++++++++----- src/layouts/_card.scss | 3 +++ src/objects/_bubble.scss | 5 ----- tpl/objects/bubble-group.pug | 2 +- tpl/objects/bubble.pug | 21 ++++++++++++++++++--- tpl/views/bubble-group.pug | 4 ++-- tpl/views/bubble.pug | 9 ++++++--- 8 files changed, 43 insertions(+), 19 deletions(-) diff --git a/src/_utils.scss b/src/_utils.scss index 860fe3e..c0bc087 100644 --- a/src/_utils.scss +++ b/src/_utils.scss @@ -89,6 +89,11 @@ $dirs: ( position: relative; } +@include iro.bem-utility('sticky-top') { + position: sticky; + top: 0; +} + @include iro.bem-utility('themed') { background-color: fn.global-color(--bg); color: fn.global-color(--fg); diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss index 7593881..3e280b5 100644 --- a/src/layouts/_bubble-group.scss +++ b/src/layouts/_bubble-group.scss @@ -5,7 +5,12 @@ @include iro.props-store(( --dims: ( --spacing-x: fn.global-dim(--size --225), - --spacing-y: fn.global-dim(--size --50), + --spacing-y: fn.global-dim(--size --150), + + --compact: ( + --spacing-x: fn.global-dim(--size --225), + --spacing-y: fn.global-dim(--size --50), + ) ) ), 'dims'); @@ -18,10 +23,7 @@ gap: fn.dim(--spacing-y) fn.dim(--spacing-x); @include iro.bem-elem('avatar') { - grid-area: avatar; - position: sticky; - top: 0; - justify-self: end; + grid-area: avatar; } @include iro.bem-elem('bubble') { @@ -30,6 +32,7 @@ @include iro.bem-modifier('compact') { justify-items: start; + gap: fn.dim(--compact --spacing-y) fn.dim(--compact --spacing-x); } @include iro.bem-modifier('arrow') { diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss index e6c379d..9e54d50 100644 --- a/src/layouts/_card.scss +++ b/src/layouts/_card.scss @@ -7,14 +7,17 @@ --dims: ( --pad-x: fn.global-dim(--size --150), --pad-y: fn.global-dim(--size --85), + --75: ( --pad-x: fn.global-dim(--size --100), --pad-y: fn.global-dim(--size --50), ), + --200: ( --pad-x: fn.global-dim(--size --300), --pad-y: fn.global-dim(--size --150), ), + --300: ( --pad-x: fn.global-dim(--size --450), --pad-y: fn.global-dim(--size --225), diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss index 41b26ff..1259b4a 100644 --- a/src/objects/_bubble.scss +++ b/src/objects/_bubble.scss @@ -14,7 +14,6 @@ --pad-y: fn.global-dim(--size --150), --rounding: 3px, --arrow-size: fn.global-dim(--size --100), - --spacing: fn.global-dim(--size --100), --compact: ( --pad-x: fn.global-dim(--size --150), @@ -24,10 +23,7 @@ ), 'dims'); @include iro.bem-object(iro.props-namespace()) { - display: flex; position: relative; - flex-direction: column; - gap: fn.dim(--spacing); padding: fn.dim(--pad-y) fn.dim(--pad-x); border-radius: fn.dim(--rounding); background-color: fn.global-color(--bg); @@ -51,7 +47,6 @@ } @include iro.bem-modifier('compact') { - gap: 0; padding: fn.dim(--compact --pad-y) fn.dim(--compact --pad-x); } } 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) } section(class=classes) - .l-bubble-group__avatar + .l-bubble-group__avatar.u-sticky-top +avatar= user.slice(0, 2) 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) classes[attributes.theme] = true } - article(class=classes) + let headerClasses = { + 'o-bubble__header': true, + 'u-mb-50': !attributes.compact, + } + + mixin content if slots.header - header.o-bubble__header + header(class=headerClasses) - slots.header() else if user - header.o-bubble__header + header(class=headerClasses) strong= user div.o-bubble__body.s-colored-links - slots.body() @@ -34,3 +39,13 @@ mixin bubble(user) if slots.footer footer.o-bubble__footer - slots.footer() + + article(class=classes) + if user && attributes.avatar + .l-card.l-card--flush.l-flex--align-start + .l-card__block.u-mt-50.u-sticky-top + +avatar= user.slice(0, 2) + .l-card__block.l-card__block--main + +content + else + +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 @@ mixin view-bubble-group +view('bubble-group', 'Bubble group') - .c-box.l-overflow(style='max-height: 15em') + .c-box.l-overflow(style='resize: vertical') +bubble-group('Volpeon')(compact=true arrow=true) +bubble('Volpeon')(compact=true class='l-bubble-group__bubble') +slot('body')= 'Compact bubbles test' @@ -18,7 +18,7 @@ mixin view-bubble-group +slot('body')= loremIpsum +slot('time')= '12:39' - .c-box.l-overflow(style='max-height: 15em') + .c-box.l-overflow(style='resize: vertical') +bubble-group('Volpeon') +bubble()(class='l-bubble-group__bubble') +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 +bubble()(compact=true theme='t-def') +slot('body')= loremIpsum - .c-box - +bubble() + .c-box.l-overflow(style='resize: vertical') + +bubble('Volpeon')(avatar=true) +slot('header') .l-card.l-card--flush .l-card__block.l-card__block--main @@ -21,4 +21,7 @@ mixin view-bubble small.l-card__block = '5 minutes ago' +icon('lock')(class='u-ml-100') - +slot('body')= loremIpsum + +slot('body') + = loremIpsum + = loremIpsum + = loremIpsum -- cgit v1.2.3-54-g00ecf