Improve MUC sidebar sizing based on viewport size

- Use Bootstrap columns to.
- Make the sidebar full size one small viewports.

src/plugins/muc-views/chatarea.js

@@ -1,8 +1,7 @@
+import { api, converse } from '@converse/headless';
 import tplMUCChatarea from './templates/muc-chatarea.js';
 import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
-import { api, converse } from '@converse/headless';
-
 
 const { u } = converse.env;
 
@@ -37,15 +36,7 @@ export default class MUCChatArea extends CustomElement {
     }
 
     render () {
-        return tplMUCChatarea({
-            'getHelpMessages': () => this.getHelpMessages(),
-            'jid': this.jid,
-            'model': this.model,
-            'onMousedown': ev => this.onMousedown(ev),
-            'show_send_button': api.settings.get('show_send_button'),
-            'shouldShowSidebar': () => this.shouldShowSidebar(),
-            'type': this.type,
-        });
+        return this.model ? tplMUCChatarea(this) : '';
     }
 
     shouldShowSidebar () {
@@ -84,12 +75,18 @@ export default class MUCChatArea extends CustomElement {
             .filter(line => this.model.getAllowedCommands().some(c => line.startsWith(c + '<', 9)));
     }
 
+    /**
+     * @param {MouseEvent} ev
+     */
     onMousedown (ev) {
         if (u.hasClass('dragresize-occupants-left', ev.target)) {
             this.onStartResizeOccupants(ev);
         }
     }
 
+    /**
+     * @param {MouseEvent} ev
+     */
     onStartResizeOccupants (ev) {
         this.resizing = true;
         this.addEventListener('mousemove', this.onMouseMove);
@@ -101,6 +98,9 @@ export default class MUCChatArea extends CustomElement {
         this.prev_pageX = ev.pageX;
     }
 
+    /**
+     * @param {MouseEvent} ev
+     */
     _onMouseMove (ev) {
         if (this.resizing) {
             ev.preventDefault();
@@ -110,6 +110,9 @@ export default class MUCChatArea extends CustomElement {
         }
     }
 
+    /**
+     * @param {MouseEvent} ev
+     */
     _onMouseUp (ev) {
         if (this.resizing) {
             ev.preventDefault();

src/plugins/muc-views/styles/index.scss

@@ -95,7 +95,6 @@ converse-muc-destroyed {
                             }
                         }
                         .occupants {
-                            padding: var(--occupants-padding);
                             .occupants-heading {
                                 font-size: var(--font-size-large);
                             }

src/plugins/muc-views/styles/muc-occupants.scss

@@ -21,18 +21,14 @@
                 flex-direction: column;
                 justify-content: space-between;
                 overflow: visible;
-                vertical-align: top;
                 background-color: var(--occupants-background-color);
                 border-left: var(--occupants-border-left);
-                padding: 0.5em;
-                max-width: 75%;
-                min-width: 25%;
-                flex: 0 0 25%;
 
                 .occupants-header--title {
                     display: flex;
                     flex-direction: row;
                     margin-bottom: 0.5em;
+                    padding: 0.5em;
 
                     .occupants-heading {
                         width: 100%;
@@ -69,6 +65,7 @@
                     list-style: none;
 
                     &.occupant-list {
+                        padding: 0.5em;
                         overflow-y: auto;
                         flex-basis: 0;
                         flex-grow: 1;

src/plugins/muc-views/styles/muc.scss

@@ -73,19 +73,11 @@
                         color: var(--subdued-color);
                     }
                 }
-                .disconnect-container {
-                    margin: 1em;
-                    width: 100%;
-                    h3.disconnect-msg {
-                        padding-bottom: 1em;
-                    }
-                }
                 .chat-area {
                     display: flex;
                     flex-direction: column;
-                    flex: 0 1 100%;
+                    flex: 1 1 100%;
                     justify-content: flex-end;
-                    min-width: 25%;
                     word-wrap: break-word;
                     .new-msgs-indicator {
                         background-color: var(--chatroom-color);

src/plugins/muc-views/templates/muc-chatarea.js

@@ -1,5 +1,5 @@
 import { html } from "lit";
-import { constants } from '@converse/headless';
+import { api, constants } from '@converse/headless';
 import '../bottom-panel.js';
 import '../sidebar.js';
 import 'shared/chat/chat-content.js';
@@ -7,29 +7,46 @@ import 'shared/chat/help-messages.js';
 
 const { CHATROOMS_TYPE } = constants;
 
-export default (o) => html`
-    <div class="chat-area">
-        <div class="chat-content ${ o.show_send_button ? 'chat-content-sendbutton' : '' }" aria-live="polite">
-            <converse-chat-content
-                class="chat-content__messages"
-                jid="${o.jid}"></converse-chat-content>
+/**
+ * @param {import('../chatarea').default} el
+ */
+export default (el) => {
+    const sidebar_width = el.model.get('occupants_width');
+    const show_send_button = api.settings.get('show_send_button');
+    const view_mode = api.settings.get('view_mode');
 
-            ${(o.model?.get('show_help_messages')) ?
-                html`<div class="chat-content__help">
-                    <converse-chat-help
-                        .model=${o.model}
-                        .messages=${o.getHelpMessages()}
-                        type="info"
-                        chat_type="${CHATROOMS_TYPE}"
-                    ></converse-chat-help></div>` : '' }
+    let chat_area_classes, sidebar_classes;
+
+    if (view_mode === 'overlayed') {
+        chat_area_classes = 'd-none d-md-flex col-s-10 col-md-8';
+        sidebar_classes = 'col-xs-12 col-s-2 col-md-4';
+    } else {
+        chat_area_classes = 'd-none d-md-flex col-md-8 col-xl-10';
+        sidebar_classes = 'col-xs-12 col-md-4 col-xl-2';
+    }
+
+    return html`
+        <div class="chat-area ${el.shouldShowSidebar() ? chat_area_classes : 'col-xs-12' }">
+            <div class="chat-content ${show_send_button ? 'chat-content-sendbutton' : ''}" aria-live="polite">
+                <converse-chat-content
+                    class="chat-content__messages"
+                    jid="${el.jid}"></converse-chat-content>
+
+                ${(el.model?.get('show_help_messages')) ?
+                    html`<div class="chat-content__help">
+                        <converse-chat-help
+                            .model=${el.model}
+                            .messages=${el.getHelpMessages()}
+                            type="info"
+                            chat_type="${CHATROOMS_TYPE}"
+                        ></converse-chat-help></div>` : '' }
+            </div>
+            <converse-muc-bottom-panel jid="${el.jid}" class="bottom-panel"></converse-muc-bottom-panel>
         </div>
-        <converse-muc-bottom-panel jid="${o.jid}" class="bottom-panel"></converse-muc-bottom-panel>
-    </div>
-    <div class="disconnect-container hidden"></div>
-    ${o.model ? html`
-        <converse-muc-sidebar
-            class="occupants col-md-3 col-4 ${o.shouldShowSidebar() ? '' : 'hidden' }"
-            style="flex: 0 0 ${o.model.get('occupants_width')}px"
-            jid=${o.jid}
-            @mousedown=${o.onMousedown}></converse-muc-sidebar>` : '' }
-`;
+        ${el.model ? html`
+            <converse-muc-sidebar
+                class="occupants ${el.shouldShowSidebar() ? sidebar_classes : 'col-xs-0 hidden' }"
+                style="${sidebar_width ? `flex: 0 0 ${sidebar_width}px` : ''}"
+                jid=${el.jid}
+                @mousedown=${(ev) => el.onMousedown(ev)}></converse-muc-sidebar>` : '' }`
+};

src/plugins/muc-views/utils.js

@@ -97,7 +97,7 @@ export async function destroyMUC (model) {
 export function getNicknameRequiredTemplate (model) {
     const jid = model.get('jid');
     if (api.settings.get('muc_show_logs_before_join')) {
-        return html`<converse-muc-chatarea jid="${jid}"></converse-muc-chatarea>`;
+        return html`<converse-muc-chatarea class="row g-0" jid="${jid}"></converse-muc-chatarea>`;
     } else {
         return html`<converse-muc-nickname-form jid="${jid}"></converse-muc-nickname-form>`;
     }
@@ -114,7 +114,7 @@ export function getChatRoomBodyTemplate (o) {
     } else {
         return html`
             ${ conn_status == RS.PASSWORD_REQUIRED ? html`<converse-muc-password-form class="muc-form-container" jid="${jid}"></converse-muc-password-form>` : '' }
-            ${ conn_status == RS.ENTERED ? html`<converse-muc-chatarea jid="${jid}"></converse-muc-chatarea>` : '' }
+            ${ conn_status == RS.ENTERED ? html`<converse-muc-chatarea class="row g-0" jid="${jid}"></converse-muc-chatarea>` : '' }
             ${ conn_status == RS.CONNECTING ? tplSpinner() : '' }
             ${ conn_status == RS.NICKNAME_REQUIRED ? getNicknameRequiredTemplate(o.model) : '' }
             ${ conn_status == RS.DISCONNECTED ? html`<converse-muc-disconnected jid="${jid}"></converse-muc-disconnected>` : '' }

src/shared/styles/_variables.scss

@@ -37,8 +37,6 @@ $mobile_portrait_length: 480px !default;
 
     --embedded-emoji-picker-height: 300px;
 
-    --occupants-padding: 1em;
-
     --minimized-chats-width: 130px;
     --mobile-chat-width: 100%;
     --mobile-chat-height: 400px;

src/types/plugins/muc-views/chatarea.d.ts

@@ -16,16 +16,28 @@ export default class MUCChatArea extends CustomElement {
     model: any;
     onMouseMove: any;
     onMouseUp: any;
-    render(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1> | "";
     shouldShowSidebar(): boolean;
     getHelpMessages(): string[];
-    onMousedown(ev: any): void;
-    onStartResizeOccupants(ev: any): void;
+    /**
+     * @param {MouseEvent} ev
+     */
+    onMousedown(ev: MouseEvent): void;
+    /**
+     * @param {MouseEvent} ev
+     */
+    onStartResizeOccupants(ev: MouseEvent): void;
     resizing: boolean;
     width: number;
-    prev_pageX: any;
-    _onMouseMove(ev: any): void;
-    _onMouseUp(ev: any): void;
+    prev_pageX: number;
+    /**
+     * @param {MouseEvent} ev
+     */
+    _onMouseMove(ev: MouseEvent): void;
+    /**
+     * @param {MouseEvent} ev
+     */
+    _onMouseUp(ev: MouseEvent): void;
     calculateSidebarWidth(element_position: any, delta: any): any;
     is_minimum: boolean;
     is_maximum: boolean;

src/types/plugins/muc-views/templates/muc-chatarea.d.ts

@@ -1,3 +1,3 @@
-declare function _default(o: any): import("lit").TemplateResult<1>;
+declare function _default(el: import('../chatarea').default): import("lit").TemplateResult<1>;
 export default _default;
 //# sourceMappingURL=muc-chatarea.d.ts.map