Update the minimized chats widget

css/converse.css

@@ -6233,19 +6233,28 @@ body.reset {
   border-radius: 4px; }
 
 #conversejs:not(.fullscreen) #minimized-chats {
+  order: 100;
   position: relative;
   width: 100%;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
-  flex: 0 0 8.3333333333%;
-  max-width: 8.3333333333%;
+  flex: 0 0 16.6666666667%;
+  max-width: 16.6666666667%;
   margin-bottom: -1em;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   color: white;
   margin-right: 0.5em;
   padding: 0; }
+  @media (min-width: 576px) {
+    #conversejs:not(.fullscreen) #minimized-chats {
+      flex: 0 0 16.6666666667%;
+      max-width: 16.6666666667%; } }
+  @media (min-width: 992px) {
+    #conversejs:not(.fullscreen) #minimized-chats {
+      flex: 0 0 8.3333333333%;
+      max-width: 8.3333333333%; } }
   #conversejs:not(.fullscreen) #minimized-chats .badge {
     bottom: 8px;
     border: 1px solid #818479; }
@@ -6261,7 +6270,8 @@ body.reset {
     white-space: nowrap;
     overflow-y: hidden;
     text-overflow: ellipsis;
-    display: block; }
+    display: block;
+    height: 50px; }
   #conversejs:not(.fullscreen) #minimized-chats a.restore-chat {
     padding: 1px 0 1px 5px;
     color: white;
@@ -6276,7 +6286,8 @@ body.reset {
     color: white; }
   #conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout {
     flex-direction: column-reverse;
-    width: 100%; }
+    width: 100%;
+    bottom: 48px; }
     #conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout .chat-head {
       padding: 0.3em;
       border-radius: 4px;

mockup/converse.html

@@ -218,10 +218,10 @@
             </div>
 
             <div id="minimized-chats">
-                <div class="flyout minimized-chats-flyout row">
-                    <a id="toggle-minimized-chats" href="#" class="row no-gutters">
-                        <span class="badge badge-light">322</span> Minimized
-                    </a>
+                <a id="toggle-minimized-chats" href="#" class="row no-gutters">
+                    <span class="badge badge-light">322</span> Minimized
+                </a>
+                <div class="flyout minimized-chats-flyout row no-gutters">
                     <div class="chat-head chat-head-chatroom row no-gutters">
                         <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
                             <span class="badge badge-light">42</span>

sass/converse/_minimized_chats.scss

@@ -1,7 +1,16 @@
 #conversejs:not(.fullscreen) {
     #minimized-chats {
+        order: 100;
         @include make-col-ready();
-        @include make-col(1);
+        @include media-breakpoint-up(xs) {
+            @include make-col(2);
+        }
+        @include media-breakpoint-up(sm) {
+            @include make-col(2);
+        }
+        @include media-breakpoint-up(lg) {
+            @include make-col(1);
+        }
 
         margin-bottom: -2*$chat-gutter;
         border-top-left-radius: $chatbox-border-radius;
@@ -28,6 +37,7 @@
             overflow-y: hidden;
             text-overflow: ellipsis;
             display: block;
+            height: 50px;
         }
 
         a.restore-chat {
@@ -50,6 +60,7 @@
         .minimized-chats-flyout {
             flex-direction: column-reverse;
             width: 100%;
+            bottom: 48px;
 
             .chat-head {
                 padding: 0.3em;

src/converse-minimize.js

@@ -318,7 +318,7 @@
 
             _converse.MinimizedChatBoxView = Backbone.NativeView.extend({
                 tagName: 'div',
-                className: 'chat-head',
+                className: 'chat-head row no-gutters',
                 events: {
                     'click .close-chatbox-button': 'close',
                     'click .restore-chat': 'restore'
@@ -389,7 +389,7 @@
                 render () {
                     if (!this.el.parentElement) {
                         this.el.innerHTML = tpl_chats_panel();
-                        _converse.chatboxviews.el.appendChild(this.el);
+                        _converse.chatboxviews.insertRowColumn(this.el);
                     }
                     if (this.keys().length === 0) {
                         this.el.classList.add('hidden');

src/templates/chats_panel.html

@@ -1,2 +1,2 @@
-<a id="toggle-minimized-chats" href="#"></a>
-<div class="flyout minimized-chats-flyout"></div>
+<a id="toggle-minimized-chats" href="#" class="row no-gutters"></a>
+<div class="flyout minimized-chats-flyout row no-gutters"></div>

src/templates/toggle_chats.html

@@ -1,4 +1,4 @@
-{{{o.Minimized}}} <span id="minimized-count">({{{o.num_minimized}}})</span>
+<span class="badge badge-light">{{{o.num_minimized}}}</span> {{{o.Minimized}}}
 <span class="unread-message-count
     {[ if (!o.num_unread) { ]} unread-message-count-hidden {[ } ]}"
     href="#">{{{o.num_unread}}}</span>

src/templates/trimmed_chat.html

@@ -1,7 +1,7 @@
 <a class="chatbox-btn close-chatbox-button icon-close"></a>
-<a class="chat-head-message-count
-    {[ if (!o.num_unread) { ]} chat-head-message-count-hidden {[ } ]}"
-    href="#">{{{o.num_unread}}}</a>
-<a href="#" class="restore-chat" title="{{{o.tooltip}}}">
+<a href="#" class="restore-chat w-100 align-self-center" title="{{{o.tooltip}}}">
+    {[ if (!o.num_unread) { ]} 
+        <span class="badge badge-light">{{{o.num_unread}}}2</span>
+    {[ } ]}"
     {{{o. title }}}
 </a>

src/utils.js

@@ -321,7 +321,6 @@
                  steps = duration/17; // We assume 17ms per animation which is ~60FPS
             let height = original_height;
 
-            debugger;
             el.style.overflow = 'hidden';
 
             function draw () {