Update chat head markup and CSS

- Use flexbox where possible
- Simplify header by using `justify-content` instead of setting column widths
- Show description below the row containing the title and buttons

sass/_chatbox.scss

@@ -37,11 +37,13 @@
     }
 
     .chat-head {
-        flex-wrap: nowrap;
+        display: flex;
+        flex-direction: column;
         color: #ffffff;
         font-size: 100%;
         margin: 0;
-        padding: 0.5em;
+        padding: 0;
+        padding-bottom: 0.5em;
         position: relative;
 
         &.chat-head-chatbox {
@@ -49,20 +51,35 @@
         }
 
         .avatar {
-            height: 36px;
-            width: 36px;
             margin-right: 0.5em;
         }
 
+        .chat-head__desc {
+            font-size: 80%;
+        }
+
         .chatbox-title {
-            .chatroom-description {
-                font-size: 80%;
-            }
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            width: 100%;
         }
-        .chatbox-buttons {
+
+        .chatbox-title--row {
+            display: flex;
+            flex-direction: row;
+            overflow: hidden;
+        }
+
+        .chatbox-title__text {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .chatbox-title__buttons {
+            display: flex;
             flex-direction: row-reverse;
-            @include make-col-ready();
-            @include make-col(3);
+            flex-wrap: nowrap;
             padding: 0;
         }
 
@@ -128,7 +145,7 @@
             background-color: var(--chat-head-color);
             box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
             z-index: 2;
-            overflow-y: hidden;
+            overflow: hidden;
             width: 100%;
 
             @media screen and (max-height: $mobile-landscape-height) {
@@ -296,6 +313,7 @@
             .chat-toolbar {
                 box-sizing: border-box;
                 margin: 0;
+                width: 100%;
                 padding: 0.25em;
                 display: block;
                 border-top: 4px solid var(--chat-head-color);
@@ -424,12 +442,6 @@
             border-top-left-radius: 0;
             border-top-right-radius: 0;
         }
-        .chatbox-title {
-            @include make-col(8);
-        }
-        .chatbox-buttons {
-            @include make-col(4);
-        }
     }
     .chatbox {
         min-width: var(--overlayed-chat-width) !important;
@@ -438,10 +450,10 @@
         .box-flyout {
             min-width: var(--overlayed-chat-width) !important;
             width: var(--overlayed-chat-width);
+        }
 
-            .chat-body {
-                height: calc(100% - var(--overlayed-chat-head-height));
-            }
+        .chat-head {
+            padding: 0.5em;
         }
     }
 }
@@ -455,7 +467,7 @@
         min-height: calc(var(--overlayed-chat-height) / 2);
     }
     .chat-head {
-        height: var(--overlayed-chat-head-height);
+        min-height: var(--overlayed-chat-head-height);
     }
     .chat-textarea {
         max-height: var(--overlayed-max-chat-textarea-height);
@@ -496,18 +508,11 @@
 
     .chat-head {
         height: var(--fullpage-chat-head-height);
-        padding: 0;
         .user-custom-message {
             font-size: 70%;
             height: auto;
             line-height: var(--line-height);
         }
-        .chatbox-title {
-            @include make-col(10);
-        }
-        .chatbox-buttons {
-            @include make-col(2);
-        }
     }
 
     .chatbox {
@@ -533,7 +538,7 @@
             border: none !important;
         }
         .chat-head {
-            height: var(--fullpage-chat-head-height);
+            min-height: var(--fullpage-chat-head-height);
             padding: 0.5em;
         }
         .chatbox {
@@ -572,7 +577,7 @@
             width: 100%;
         }
 
-        .chat-title {
+        .chat-title--text {
             padding: 0.3em;
             font-size: 120%;
         }
@@ -606,7 +611,6 @@
             overflow: hidden;
         }
         .chat-body {
-            height: calc(100% - var(--fullpage-chat-head-height));
             background-color: var(--chat-head-color);
             border-top-left-radius: var(--chatbox-border-radius);
             border-top-right-radius: var(--chatbox-border-radius);
@@ -657,19 +661,13 @@
             .box-flyout {
                 .chatbox-navback {
                     display: flex;
-                    @include make-col(2);
+                    padding-right: 1em;
                     .fa-arrow-left {
                         &:before {
                             color: white;
                         }
                     }
                 }
-                .chatbox-title {
-                    @include make-col(7);
-                }
-                .chatbox-buttons {
-                    @include make-col(3);
-                }
             }
         }
     }

sass/_chatrooms.scss

@@ -40,7 +40,7 @@
         background-color: var(--chatroom-head-color);
         border-bottom: var(--chatroom-head-border-bottom);
 
-        .chatroom-description {
+        .chat-head__desc {
             color: var(--chatroom-head-description-color);
             display: var(--chatroom-head-description-display);
             font-size: var(--font-size);
@@ -73,7 +73,7 @@
                 color: var(--chatroom-head-button-color);
             }
         }
-        .chat-title {
+        .chatbox-title__text {
             display: var(--heading-display);
             font-weight: var(--chatroom-head-title-font-weight);
             padding-right: var(--chatroom-head-title-padding-right);
@@ -398,15 +398,16 @@
                 min-width: var(--chatroom-width) !important;
                 width: var(--chatroom-width);
             }
-            .chatbox-title {
+            .chatbox-title__text {
                 @include make-col(7);
-                .chatroom-description {
-                    font-size: 80%;
-                }
             }
-            .chatbox-buttons {
+            .chatbox-title__buttons {
                 @include make-col(5);
             }
+
+            .chat-head__desc {
+                font-size: 80%;
+            }
             .chatroom-body {
                 .occupants {
                     .occupants-heading {
@@ -450,40 +451,6 @@
     }
 }
 
-
-#conversejs.converse-fullscreen {
-    .chatroom {
-        .box-flyout {
-            .chatbox-title {
-                @include make-col(9);
-            }
-            .chatbox-buttons {
-                @include make-col(3);
-            }
-        }
-    }
-}
-
-@include media-breakpoint-down(sm) {
-
-    #conversejs:not(.converse-embedded) {
-        .chatroom {
-            width: 100vw !important;
-            .box-flyout {
-                .chatbox-navback {
-                    @include make-col(2);
-                }
-                .chatbox-title {
-                    @include make-col(7);
-                }
-                .chatbox-buttons {
-                    @include make-col(3);
-                }
-            }
-        }
-    }
-}
-
 #conversejs.converse-embedded,
 #conversejs.converse-fullscreen,
 #conversejs.converse-mobile {
@@ -495,10 +462,8 @@
             border-top: 0.8em solid var(--chatroom-head-color);
             width: 100%;
 
-            .chatbox-title {
-                .chatroom-description {
-                    font-size: 70%;
-                }
+            .chat-head__desc {
+                font-size: 70%;
             }
 
             .chatroom-body {

src/converse-bookmark-views.js

@@ -114,7 +114,7 @@ converse.plugins.add('converse-bookmark-views', {
                         'bookmarked': this.model.get('bookmarked')
                     }));
 
-                const buttons_row = this.el.querySelector('.chatbox-buttons')
+                const buttons_row = this.el.querySelector('.chatbox-title__buttons')
                 const close_button = buttons_row.querySelector('.close-chatbox-button');
                 if (close_button) {
                     close_button.insertAdjacentHTML('afterend', bookmark_button);

src/converse-minimize.js

@@ -155,7 +155,7 @@ converse.plugins.add('converse-minimize', {
                 const html = this.__super__.generateHeadingHTML.apply(this, arguments);
                 const div = document.createElement('div');
                 div.innerHTML = html;
-                const buttons_row = div.querySelector('.chatbox-buttons')
+                const buttons_row = div.querySelector('.chatbox-title__buttons')
                 const button = buttons_row.querySelector('.close-chatbox-button');
                 const minimize_el = tpl_chatbox_minimize({'info_minimize': __('Minimize this chat box')})
                 if (button) {

src/templates/chatbox_head.html

@@ -1,26 +1,22 @@
 <div class="chat-head chat-head-chatbox row no-gutters">
-    {[ if (!o._converse.singleton) { ]}
-        <div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>
-    {[ } ]}
     <div class="chatbox-title">
-        <div class="row no-gutters">
+        <div class="chatbox-title--row">
+            {[ if (!o._converse.singleton) { ]}
+                <div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>
+            {[ } ]}
             {[ if (o.type !== o._converse.HEADLINES_TYPE) { ]}
-                <canvas class="avatar" height="36" width="36"></canvas>
+                <div> <canvas class="avatar" height="36" width="36"></canvas> </div>
             {[ } ]}
-            <div class="col chat-title" title="{{{o.jid}}}">
-                {[ if (o.url) { ]}
-                    <a href="{{{o.url}}}" target="_blank" rel="noopener" class="user">
-                {[ } ]}
-                        {{{ o.display_name }}}
-                {[ if (o.url) { ]}
-                    </a>
-                {[ } ]}
-                <p class="user-custom-message">{{{ o.status }}}</p>
+            <div class="chatbox-title__text" title="{{{o.jid}}}">
+                {[ if (o.url) { ]} <a href="{{{o.url}}}" target="_blank" rel="noopener" class="user"> {[ } ]}
+                    {{{ o.display_name }}}
+                {[ if (o.url) { ]} </a> {[ } ]}
             </div>
         </div>
+        <div class="chatbox-title__buttons row no-gutters">
+            <a class="chatbox-btn close-chatbox-button fa fa-times" title="{{{o.info_close}}}"></a>
+            <a class="chatbox-btn show-user-details-modal fa fa-id-card" title="{{{o.info_details}}}"></a>
+        </div>
     </div>
-    <div class="chatbox-buttons row no-gutters">
-        <a class="chatbox-btn close-chatbox-button fa fa-times" title="{{{o.info_close}}}"></a>
-        <a class="chatbox-btn show-user-details-modal fa fa-id-card" title="{{{o.info_details}}}"></a>
-    </div>
+    <p class="chat-head__desc">{{{ o.status }}}</p>
 </div>

src/templates/chatroom_head.html

@@ -1,19 +1,17 @@
-{[ if (!o._converse.singleton) { ]}
-    <div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>
-{[ } ]}
 <div class="chatbox-title">
-    <div class="chat-title" {[ if (o._converse.locked_muc_domain !== 'hidden') { ]} title="{{{o.jid}}}" {[ } ]} >
-        {{{ o.title }}}
-    </div>
-    <!-- Sanitized in converse-muc-views. We want to render links. -->
-    <p class="chatroom-description">{{o.description}}</p>
-</div>
-<div class="chatbox-buttons row no-gutters">
     {[ if (!o._converse.singleton) { ]}
-        <a class="chatbox-btn close-chatbox-button fa fa-sign-out-alt" title="{{{o.info_close}}}"></a>
+        <div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>
     {[ } ]}
-    {[ if (o.isOwner) { ]}
-        <a class="chatbox-btn configure-chatroom-button fa fa-wrench" title="{{{o.info_configure}}} "></a>
-    {[ } ]}
-    <a class="chatbox-btn show-room-details-modal fa fa-info-circle" title="{{{o.info_details}}}"></a>
+    <div class="chatbox-title__text" {[ if (o._converse.locked_muc_domain !== 'hidden') { ]} title="{{{o.jid}}}" {[ } ]} >{{{ o.title }}}</div>
+    <div class="chatbox-title__buttons row no-gutters">
+        {[ if (!o._converse.singleton) { ]}
+            <a class="chatbox-btn close-chatbox-button fa fa-sign-out-alt" title="{{{o.info_close}}}"></a>
+        {[ } ]}
+        {[ if (o.isOwner) { ]}
+            <a class="chatbox-btn configure-chatroom-button fa fa-wrench" title="{{{o.info_configure}}} "></a>
+        {[ } ]}
+        <a class="chatbox-btn show-room-details-modal fa fa-info-circle" title="{{{o.info_details}}}"></a>
+    </div>
+    <!-- Sanitized in converse-muc-views. We want to render links. -->
 </div>
+<p class="chat-head__desc">{{o.description}}</p>

webpack.html

@@ -27,7 +27,7 @@
         message_archiving: 'always',
         muc_domain: 'conference.chat.example.org',
         muc_respect_autojoin: true,
-        view_mode: 'fullscreen',
+        view_mode: 'overlayed',
         websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
         // bosh_service_url: 'http://chat.example.org:5280/http-bind',
         muc_show_logs_before_join: true,