Implement bubble group with flex

3 files changed, 60 insertions, 28 deletions

diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss
index d63930a..c0e8e43 100644
--- a/src/layouts/_bubble-group.scss
+++ b/src/layouts/_bubble-group.scss
@@ -15,66 +15,78 @@
     ), 'dims');
 
     @include iro.bem-layout(iro.props-namespace()) {
-        display:               grid;
-        grid-template-columns: auto 1fr;
-        grid-auto-rows:        auto;
-        grid-template-areas:   'avatar bubble';
-        align-items:           flex-start;
-        gap:                   fn.dim(--spacing-y) fn.dim(--spacing-x);
+        display:     flex;
+        align-items: flex-start;
+        gap:         fn.dim(--spacing-x);
         
         @include iro.bem-elem('avatar') {
-            grid-area: avatar;
+            flex: 0 0 auto;
         }
         
-        @include iro.bem-elem('bubble') {
-            grid-column: bubble;
-            min-width:   0;
+        @include iro.bem-elem('content') {
+            grid-column:    content;
+            display:        flex;
+            flex-direction: column;
+            min-width:      0;
+            gap:            fn.dim(--spacing-y);
         }
         
         @include iro.bem-modifier('compact') {
-            gap: fn.dim(--compact --spacing-y) fn.dim(--compact --spacing-x);
+            gap: fn.dim(--compact --spacing-x);
+        
+            @include iro.bem-elem('content') {
+                gap: fn.dim(--compact --spacing-y);
+            }
         
             @include iro.bem-modifier('left') {
-                justify-items: start;
+                @include iro.bem-elem('content') {
+                    align-items: flex-start;
+                }
             }
         
             @include iro.bem-modifier('right') {
-                justify-items: end;
+                @include iro.bem-elem('content') {
+                    align-items:    flex-end;
+                }
             }
         }
         
         @include iro.bem-modifier('right') {
-            grid-template-columns: 1fr auto;
-            grid-template-areas:   'bubble avatar';
+            flex-direction: row-reverse;
         }
         
         @include iro.bem-modifier('no-avatar') {
-            grid-template-columns: 1fr;
-            grid-template-areas:   'bubble';
-
             @include iro.bem-elem('avatar') {
                 display: none;
             }
         }
         
         @include iro.bem-modifier('arrow') {
-            @include iro.bem-elem('avatar') {
-                @include iro.bem-next-elem('bubble') {
+            @include iro.bem-elem('bubble') {
+                &::before {
+                    display: block;
+                }
+
+                @include iro.bem-sibling-elem('bubble') {
                     &::before {
-                        display: block;
+                        display: none;
                     }
                 }
             }
         
             @include iro.bem-modifier('right') {
-                @include iro.bem-elem('avatar') {
-                    @include iro.bem-next-elem('bubble') {
-                        &::before {
-                            display: none;
-                        }
+                @include iro.bem-elem('bubble') {
+                    &::before {
+                        display: none;
+                    }
 
+                    &::after {
+                        display: block;
+                    }
+    
+                    @include iro.bem-sibling-elem('bubble') {
                         &::after {
-                            display: block;
+                            display: none;
                         }
                     }
                 }
diff --git a/tpl/objects/bubble-group.pug b/tpl/objects/bubble-group.pug
index 4fcb1a4..e22953d 100644
--- a/tpl/objects/bubble-group.pug
+++ b/tpl/objects/bubble-group.pug
@@ -14,4 +14,5 @@ mixin bubble-group(user)
     section(class=classes)
         .l-bubble-group__avatar.u-p-sticky-top
             +avatar= user.slice(0, 2)
-        block
+        .l-bubble-group__content
+            block
diff --git a/tpl/views/bubble-group.pug b/tpl/views/bubble-group.pug
index ce00067..dcdbe73 100644
--- a/tpl/views/bubble-group.pug
+++ b/tpl/views/bubble-group.pug
@@ -19,6 +19,25 @@ mixin view-bubble-group
                     +slot('time')= '12:39'
 
         .c-box.l-overflow(style='resize: vertical')
+            +bubble-group('Volpeon')(compact=true right=true)
+                strong= 'Volpeon'
+                +bubble()(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='resize: vertical')
             +bubble-group('Volpeon')
                 +bubble()(class='l-bubble-group__bubble')
                     +slot('header')