In mobile view, add arrows to chat headings

so that you can navigate "back" to the controlbox.

css/converse.css

@@ -7286,6 +7286,8 @@ body.reset {
 #conversejs #user-profile-modal label {
   font-weight: bold; }
 
+#conversejs .chatbox-navback {
+  display: none; }
 #conversejs .flyout {
   border-radius: 4px;
   position: absolute; }
@@ -7325,15 +7327,10 @@ body.reset {
     height: 36px;
     width: 36px;
     margin-right: 0.5em; }
+  #conversejs .chat-head .chatbox-title .chatroom-description {
+    font-size: 80%; }
   #conversejs .chat-head .chatbox-buttons {
     flex-direction: row-reverse;
-    position: relative;
-    width: 100%;
-    min-height: 1px;
-    padding-right: 15px;
-    padding-left: 15px;
-    flex: 0 0 33.3333333333%;
-    max-width: 33.3333333333%;
     padding: 0; }
   #conversejs .chat-head .user-custom-message {
     color: white;
@@ -7630,6 +7627,14 @@ body.reset {
     #conversejs.converse-overlayed .chat-head {
       border-top-left-radius: 0;
       border-top-right-radius: 0; } }
+  #conversejs.converse-embedded .chat-head .chatbox-title,
+  #conversejs.converse-overlayed .chat-head .chatbox-title {
+    flex: 0 0 66.6666666667%;
+    max-width: 66.6666666667%; }
+  #conversejs.converse-embedded .chat-head .chatbox-buttons,
+  #conversejs.converse-overlayed .chat-head .chatbox-buttons {
+    flex: 0 0 33.3333333333%;
+    max-width: 33.3333333333%; }
 #conversejs.converse-embedded .chatbox,
 #conversejs.converse-overlayed .chatbox {
   min-width: 250px !important;
@@ -7690,13 +7695,16 @@ body.reset {
   height: 62px;
   font-size: 20px;
   padding: 0; }
-  #conversejs.converse-fullscreen .chat-head .chatbox-buttons {
-    flex: 0 0 25%;
-    max-width: 25%; }
   #conversejs.converse-fullscreen .chat-head .user-custom-message {
     font-size: 50%;
     height: auto;
     line-height: 16px; }
+  #conversejs.converse-fullscreen .chat-head .chatbox-title {
+    flex: 0 0 83.3333333333%;
+    max-width: 83.3333333333%; }
+  #conversejs.converse-fullscreen .chat-head .chatbox-buttons {
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%; }
 #conversejs.converse-fullscreen .chat-textarea {
   max-height: 400px; }
 #conversejs.converse-fullscreen .emoji-picker {
@@ -7752,23 +7760,43 @@ body.reset {
     padding-left: 10px;
     padding-right: 10px; }
 
-@media screen and (max-width: 767px) {
+@media (max-width: 767.98px) {
   #conversejs:not(.converse-embedded) > .row {
     flex-direction: row-reverse; }
   #conversejs:not(.converse-embedded) #converse-login-panel .converse-form {
     padding: 3em 2em 3em; }
-  #conversejs:not(.converse-embedded) .sidebar {
-    display: block; }
   #conversejs:not(.converse-embedded) .chatbox {
     width: calc(100% - 50px); }
     #conversejs:not(.converse-embedded) .chatbox .row .box-flyout {
       left: 50px;
       bottom: 0;
       height: 100vh;
-      box-shadow: none; } }
-@media screen and (max-width: 767px) {
-  #conversejs:not(.converse-embedded).converse-fullscreen .chatbox {
-    width: calc(100% - 50px); } }
+      box-shadow: none; }
+
+  #conversejs.converse-mobile .chatbox .box-flyout .chatbox-navback,
+  #conversejs.converse-overlayed .chatbox .box-flyout .chatbox-navback,
+  #conversejs.converse-embedded .chatbox .box-flyout .chatbox-navback,
+  #conversejs.converse-fullscreen .chatbox .box-flyout .chatbox-navback {
+    display: flex;
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%; }
+    #conversejs.converse-mobile .chatbox .box-flyout .chatbox-navback .fa-arrow-left:before,
+    #conversejs.converse-overlayed .chatbox .box-flyout .chatbox-navback .fa-arrow-left:before,
+    #conversejs.converse-embedded .chatbox .box-flyout .chatbox-navback .fa-arrow-left:before,
+    #conversejs.converse-fullscreen .chatbox .box-flyout .chatbox-navback .fa-arrow-left:before {
+      color: white; }
+  #conversejs.converse-mobile .chatbox .box-flyout .chatbox-title,
+  #conversejs.converse-overlayed .chatbox .box-flyout .chatbox-title,
+  #conversejs.converse-embedded .chatbox .box-flyout .chatbox-title,
+  #conversejs.converse-fullscreen .chatbox .box-flyout .chatbox-title {
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%; }
+  #conversejs.converse-mobile .chatbox .box-flyout .chatbox-buttons,
+  #conversejs.converse-overlayed .chatbox .box-flyout .chatbox-buttons,
+  #conversejs.converse-embedded .chatbox .box-flyout .chatbox-buttons,
+  #conversejs.converse-fullscreen .chatbox .box-flyout .chatbox-buttons {
+    flex: 0 0 25%;
+    max-width: 25%; } }
 #conversejs .set-xmpp-status .fa-circle, #conversejs .xmpp-status .fa-circle, #conversejs .roster-contacts .fa-circle {
   color: #3AA569; }
 #conversejs .set-xmpp-status .fa-minus-circle, #conversejs .xmpp-status .fa-minus-circle, #conversejs .roster-contacts .fa-minus-circle {
@@ -8700,12 +8728,24 @@ body.reset {
   max-width: 25%; }
 
 @media (max-width: 767.98px) {
-  .chatroom .box-flyout .chatbox-title {
-    flex: 0 0 66.6666666667%;
-    max-width: 66.6666666667%; }
-  .chatroom .box-flyout .chatbox-buttons {
-    flex: 0 0 33.3333333333%;
-    max-width: 33.3333333333%; } }
+  #conversejs.converse-mobile .chatroom .box-flyout .chatbox-navback,
+  #conversejs.converse-overlayed .chatroom .box-flyout .chatbox-navback,
+  #conversejs.converse-embedded .chatroom .box-flyout .chatbox-navback,
+  #conversejs.converse-fullscreen .chatroom .box-flyout .chatbox-navback {
+    flex: 0 0 16.6666666667%;
+    max-width: 16.6666666667%; }
+  #conversejs.converse-mobile .chatroom .box-flyout .chatbox-title,
+  #conversejs.converse-overlayed .chatroom .box-flyout .chatbox-title,
+  #conversejs.converse-embedded .chatroom .box-flyout .chatbox-title,
+  #conversejs.converse-fullscreen .chatroom .box-flyout .chatbox-title {
+    flex: 0 0 58.3333333333%;
+    max-width: 58.3333333333%; }
+  #conversejs.converse-mobile .chatroom .box-flyout .chatbox-buttons,
+  #conversejs.converse-overlayed .chatroom .box-flyout .chatbox-buttons,
+  #conversejs.converse-embedded .chatroom .box-flyout .chatbox-buttons,
+  #conversejs.converse-fullscreen .chatroom .box-flyout .chatbox-buttons {
+    flex: 0 0 25%;
+    max-width: 25%; } }
 #conversejs.converse-fullscreen .chatroom .box-flyout,
 #conversejs.converse-mobile .chatroom .box-flyout {
   background-color: #E77051;

sass/_chatbox.scss

@@ -1,4 +1,7 @@
 #conversejs {
+    .chatbox-navback {
+        display: none;
+    }
     .flyout {
         border-radius: $chatbox-border-radius;
         position: absolute;
@@ -51,10 +54,13 @@
             margin-right: 0.5em;
         }
 
+        .chatbox-title {
+            .chatroom-description {
+                font-size: 80%;
+            }
+        }
         .chatbox-buttons {
             flex-direction: row-reverse;
-            @include make-col-ready();
-            @include make-col(4);
             padding: 0;
         }
 
@@ -443,7 +449,14 @@
             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: $overlayed-chat-width!important;
         width: $overlayed-chat-width;
@@ -536,9 +549,6 @@
     }
     .chat-head {
         height: $fullpage-chat-head-height;
-        .chatbox-buttons {
-            @include make-col(3);
-        }
         font-size: $font-size-huge;
         padding: 0;
         .user-custom-message {
@@ -546,6 +556,12 @@
             height: auto;
             line-height: $line-height;
         }
+        .chatbox-title {
+            @include make-col(10);
+        }
+        .chatbox-buttons {
+            @include make-col(2);
+        }
     }
     .chat-textarea {
         max-height: $fullpage-max-chat-textarea-height;
@@ -623,22 +639,16 @@
     }
 }
 
-@media screen and (max-width: 767px) {
+@include media-breakpoint-down(sm) {
     #conversejs:not(.converse-embedded)  {
         > .row {
             flex-direction: row-reverse;
         }
-
         #converse-login-panel {
             .converse-form {
                 padding: 3em 2em 3em;
             }
         }
-
-        .sidebar {
-            display: block;
-        }
-
         .chatbox {
             width: calc(100% - 50px);
             .row {
@@ -651,12 +661,29 @@
             }
         }
     }
-}
 
-@media screen and (max-width: 767px) {
-    #conversejs:not(.converse-embedded).converse-fullscreen {
+    #conversejs.converse-mobile,
+    #conversejs.converse-overlayed,
+    #conversejs.converse-embedded,
+    #conversejs.converse-fullscreen {
         .chatbox {
-            width: calc(100% - 50px);
+            .box-flyout {
+                .chatbox-navback {
+                    display: flex;
+                    @include make-col(2);
+                    .fa-arrow-left {
+                        &:before {
+                            color: white;
+                        }
+                    }
+                }
+                .chatbox-title {
+                    @include make-col(7);
+                }
+                .chatbox-buttons {
+                    @include make-col(3);
+                }
+            }
         }
     }
 }

sass/_chatrooms.scss

@@ -333,13 +333,21 @@
 }
 
 @include media-breakpoint-down(sm) {
-    .chatroom {
-        .box-flyout {
-            .chatbox-title {
-                @include make-col(8);
-            }
-            .chatbox-buttons {
-                @include make-col(4);
+    #conversejs.converse-mobile,
+    #conversejs.converse-overlayed,
+    #conversejs.converse-embedded,
+    #conversejs.converse-fullscreen {
+        .chatroom {
+            .box-flyout {
+                .chatbox-navback {
+                    @include make-col(2);
+                }
+                .chatbox-title {
+                    @include make-col(7);
+                }
+                .chatbox-buttons {
+                    @include make-col(3);
+                }
             }
         }
     }

src/converse-chatview.js

@@ -321,16 +321,17 @@
 
                 events: {
                     'change input.fileupload': 'onFileSelection',
+                    'click .chatbox-navback': 'showControlBox',
                     'click .close-chatbox-button': 'close',
-                    'click .show-user-details-modal': 'showUserDetailsModal',
                     'click .new-msgs-indicator': 'viewUnreadMessages',
                     'click .send-button': 'onFormSubmitted',
+                    'click .show-user-details-modal': 'showUserDetailsModal',
+                    'click .spoiler-toggle': 'toggleSpoilerMessage',
                     'click .toggle-call': 'toggleCall',
                     'click .toggle-clear': 'clearMessages',
                     'click .toggle-compose-spoiler': 'toggleComposeSpoilerMessage',
                     'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
                     'click .toggle-smiley': 'toggleEmojiMenu',
-                    'click .spoiler-toggle': 'toggleSpoilerMessage',
                     'click .upload-file': 'toggleFileUpload',
                     'keypress .chat-textarea': 'keyPressed',
                     'input .chat-textarea': 'inputChanged'
@@ -413,6 +414,13 @@
                     this.renderToolbar();
                 },
 
+                showControlBox () {
+                    // Used in mobile view, to navigate back to the controlbox
+                    const view = _converse.chatboxviews.get('controlbox');
+                    view.show();
+                    this.hide();
+                },
+
                 showUserDetailsModal (ev) {
                     if (_.isUndefined(this.user_details_modal)) {
                         this.user_details_modal = new _converse.UserDetailsModal({model: this.model});

src/converse-muc-views.js

@@ -492,14 +492,15 @@
                 is_chatroom: true,
                 events: {
                     'change input.fileupload': 'onFileSelection',
+                    'click .chatbox-navback': 'showControlBox',
                     'click .close-chatbox-button': 'close',
                     'click .configure-chatroom-button': 'getAndRenderConfigurationForm',
+                    'click .hide-occupants': 'hideOccupants',
                     'click .new-msgs-indicator': 'viewUnreadMessages',
                     'click .occupant-nick': 'onOccupantClicked',
                     'click .send-button': 'onFormSubmitted',
                     'click .toggle-call': 'toggleCall',
                     'click .toggle-occupants': 'toggleOccupants',
-                    'click .hide-occupants': 'hideOccupants',
                     'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
                     'click .toggle-smiley': 'toggleEmojiMenu',
                     'click .upload-file': 'toggleFileUpload',

src/templates/chatbox_head.html

@@ -1,5 +1,6 @@
 <div class="chat-head chat-head-chatbox row no-gutters">
-    <div class="col">
+    <div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>
+    <div class="chatbox-title">
         <div class="row no-gutters">
             <canvas class="avatar" height="36" width="36"></canvas>
             <div class="col chat-title" title="{{{o.jid}}}">

src/templates/chatroom_head.html

@@ -1,3 +1,4 @@
+<div class="chatbox-navback"><i class="fa fa-arrow-left"></i></div>
 <div class="chatbox-title">
     <div class="chat-title" title="{{{o.jid}}}">
         {[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}