Improved bubble

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)
         }
 
     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