Improved bubble

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