Don't put #chatrooms inside #converse-roster and remove `users` id

css/converse.css

@@ -5722,18 +5722,15 @@ body.reset {
     display: block;
     font-weight: normal;
     margin: 1em 0; }
-  #conversejs #controlbox #users .add-converse-contact {
-    margin: 0 0 0.75em 0; }
-  #conversejs #controlbox #users .chatbox-btn {
-    margin: 0; }
   #conversejs #controlbox #chatrooms, #conversejs #controlbox #contacts {
-    margin-top: 0.75em; }
-  #conversejs #controlbox #users .userinfo {
+    margin-top: 0.75em;
+    padding-bottom: 0.75em; }
+  #conversejs #controlbox .controlbox-pane .userinfo {
     padding-bottom: 1em;
     border-bottom: 1px solid #818479; }
-    #conversejs #controlbox #users .userinfo .username {
+    #conversejs #controlbox .controlbox-pane .userinfo .username {
       margin-left: 0.5em; }
-    #conversejs #controlbox #users .userinfo .d-flex {
+    #conversejs #controlbox .controlbox-pane .userinfo .d-flex {
       margin-bottom: 0.2em; }
   #conversejs #controlbox #chatrooms {
     border-bottom: 1px solid #818479; }
@@ -5923,6 +5920,10 @@ body.reset {
     overflow-y: scroll;
     overflow-x: hidden;
     border-radius: 4px; }
+    #conversejs #controlbox .controlbox-pane .add-converse-contact {
+      margin: 0 0 0.75em 0; }
+    #conversejs #controlbox .controlbox-pane .chatbox-btn {
+      margin: 0; }
     #conversejs #controlbox .controlbox-pane .switch-form {
       padding-bottom: 2em; }
       #conversejs #controlbox .controlbox-pane .switch-form p {
@@ -5987,15 +5988,14 @@ body.reset {
     left: 0; }
   #conversejs #controlbox .sidebar {
     display: block; }
-  #conversejs #controlbox #users {
+  #conversejs #controlbox .controlbox-pane {
     position: absolute;
     top: 0;
-    display: none; }
-    #conversejs #controlbox #users.controlbox-pane {
-      width: 100%; }
+    display: none;
+    width: 100%; }
   #conversejs.sidebar-open .chatbox:not(#controlbox) {
     display: none; }
-  #conversejs.sidebar-open #controlbox #users {
+  #conversejs.sidebar-open #controlbox .controlbox-pane {
     display: block; } }
 #conversejs:not(.fullscreen) #controlbox {
   order: -1; }

css/inverse.css

@@ -5794,18 +5794,15 @@ body {
     display: block;
     font-weight: normal;
     margin: 1em 0; }
-  #conversejs #controlbox #users .add-converse-contact {
-    margin: 0 0 0.75em 0; }
-  #conversejs #controlbox #users .chatbox-btn {
-    margin: 0; }
   #conversejs #controlbox #chatrooms, #conversejs #controlbox #contacts {
-    margin-top: 0.75em; }
-  #conversejs #controlbox #users .userinfo {
+    margin-top: 0.75em;
+    padding-bottom: 0.75em; }
+  #conversejs #controlbox .controlbox-pane .userinfo {
     padding-bottom: 1em;
     border-bottom: 1px solid #818479; }
-    #conversejs #controlbox #users .userinfo .username {
+    #conversejs #controlbox .controlbox-pane .userinfo .username {
       margin-left: 0.5em; }
-    #conversejs #controlbox #users .userinfo .d-flex {
+    #conversejs #controlbox .controlbox-pane .userinfo .d-flex {
       margin-bottom: 0.2em; }
   #conversejs #controlbox #chatrooms {
     border-bottom: 1px solid #818479; }
@@ -5995,6 +5992,10 @@ body {
     overflow-y: scroll;
     overflow-x: hidden;
     border-radius: 4px; }
+    #conversejs #controlbox .controlbox-pane .add-converse-contact {
+      margin: 0 0 0.75em 0; }
+    #conversejs #controlbox .controlbox-pane .chatbox-btn {
+      margin: 0; }
     #conversejs #controlbox .controlbox-pane .switch-form {
       padding-bottom: 2em; }
       #conversejs #controlbox .controlbox-pane .switch-form p {
@@ -6059,15 +6060,14 @@ body {
     left: 0; }
   #conversejs #controlbox .sidebar {
     display: block; }
-  #conversejs #controlbox #users {
+  #conversejs #controlbox .controlbox-pane {
     position: absolute;
     top: 0;
-    display: none; }
-    #conversejs #controlbox #users.controlbox-pane {
-      width: 100%; }
+    display: none;
+    width: 100%; }
   #conversejs.sidebar-open .chatbox:not(#controlbox) {
     display: none; }
-  #conversejs.sidebar-open #controlbox #users {
+  #conversejs.sidebar-open #controlbox .controlbox-pane {
     display: block; } }
 #conversejs.fullscreen #controlbox {
   margin: 0; }
@@ -6117,6 +6117,8 @@ body {
     width: 100%;
     z-index: 1;
     background-color: #578EA9; }
+    #conversejs.fullscreen #controlbox .box-flyout .controlbox-head {
+      display: none; }
   #conversejs.fullscreen #controlbox #converse-register, #conversejs.fullscreen #controlbox #converse-login {
     margin: 2em 30% 3em 30%; }
     #conversejs.fullscreen #controlbox #converse-register .title, #conversejs.fullscreen #controlbox #converse-register .instructions, #conversejs.fullscreen #controlbox #converse-login .title, #conversejs.fullscreen #controlbox #converse-login .instructions {

mockup/chatbox.html

@@ -15,7 +15,7 @@
             <div id="controlbox" class="chatbox col-xl-2 col-md-3">
                 <div class="flyout box-flyout">
                     <div class="controlbox-panes">
-                        <div id="users" class="controlbox-pane"></div>
+                        <div class="controlbox-pane"></div>
                     </div>
                 </div>
             </div>

mockup/chatroom.html

@@ -15,7 +15,7 @@
             <div id="controlbox" class="chatbox col-xl-2 col-md-3">
                 <div class="flyout box-flyout">
                     <div class="controlbox-panes">
-                        <div id="users" class="controlbox-pane"></div>
+                        <div class="controlbox-pane"></div>
                     </div>
                 </div>
             </div>

mockup/converse.html

@@ -19,7 +19,7 @@
                 <div class="flyout box-flyout">
                     <div class="controlbox-panes">
                         <div class="sidebar"></div>
-                        <div id="users" class="controlbox-pane"></div>
+                        <div class="controlbox-pane"></div>
                     </div>
                 </div>
             </div>

mockup/sidebar.html

@@ -1,5 +1,6 @@
 <!-- <div class="sidebar"> -->
 <a class="hamburger chatbox-btn fa fa-bars"></a>
+<!--
 <a class="chatbox-btn fa fa-vcard" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a>
 <a class="chatbox-btn fa fa-pencil" title="Click to change your chat status" data-toggle="modal" data-target="#changeStatusModal"></a>
 <div class="bottom">
@@ -7,4 +8,5 @@
     <a class="chatbox-btn fa fa-users" title="Click to change rooms" data-toggle="modal" data-target="#chatroomsModal"></a>
     <a class="chatbox-btn fa fa-cog" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a>
 </div>
+-->
 <!-- </div> -->

mockup/user-panel.html

@@ -13,35 +13,35 @@
     </div>
 </div>
 
-<div id="converse-roster">
-    <div id="chatrooms">
-        <div class="d-flex">
-            <span class="w-100">Chatrooms</span>
-            <a class="chatbox-btn fa fa-users" title="Click to change rooms" data-toggle="modal" data-target="#chatroomsModal"></a>
-        </div>
-        <div class="list-container rooms-list-container">
-            <div class="rooms-list">
-                <div class="available-chatroom d-flex flex-row">
-                    <a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="#">public</a>
-                    <a href="#" class="fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
-                        data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
-                    <a href="#" class="fa fa-bookmark-o align-self-center" title="Click to bookmark this room">&nbsp;</a>
-                    <a href="#" class="fa fa-times align-self-center" title="Click to leave this room">&nbsp;</a>
-                </div>
-                <div class="available-chatroom d-flex flex-row">
-                    <a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="#">team</a>
-                    <a href="#" class="fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
-                        data-html="true" data-content="<b>Room Address (JID): </b><br>team@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
-                </div>
-                <div class="available-chatroom d-flex flex-row">
-                    <a class="open-room available-room w-100" data-room-jid="test@conference.test.com" title="Click to open this room" href="#">test</a>
-                    <a href="#" class="fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
-                        data-html="true" data-content="<b>Room Address (JID): </b><br>test@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
-                </div>
+<div id="chatrooms">
+    <div class="d-flex">
+        <span class="w-100">Chatrooms</span>
+        <a class="chatbox-btn fa fa-users" title="Click to change rooms" data-toggle="modal" data-target="#chatroomsModal"></a>
+    </div>
+    <div class="list-container rooms-list-container">
+        <div class="rooms-list">
+            <div class="available-chatroom d-flex flex-row">
+                <a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="#">public</a>
+                <a href="#" class="fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
+                    data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
+                <a href="#" class="fa fa-bookmark-o align-self-center" title="Click to bookmark this room">&nbsp;</a>
+                <a href="#" class="fa fa-times align-self-center" title="Click to leave this room">&nbsp;</a>
+            </div>
+            <div class="available-chatroom d-flex flex-row">
+                <a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="#">team</a>
+                <a href="#" class="fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
+                    data-html="true" data-content="<b>Room Address (JID): </b><br>team@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
+            </div>
+            <div class="available-chatroom d-flex flex-row">
+                <a class="open-room available-room w-100" data-room-jid="test@conference.test.com" title="Click to open this room" href="#">test</a>
+                <a href="#" class="fa fa-info-circle align-self-center" data-container="body" data-toggle="popover" title="Room info"
+                    data-html="true" data-content="<b>Room Address (JID): </b><br>test@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
             </div>
         </div>
     </div>
+</div>
 
+<div id="converse-roster">
     <div id="contacts">
         <div class="d-flex">
             <span class="w-100">Contacts</span>

mockup/user-panel.js

@@ -1,6 +1,6 @@
 /*global Backbone, _, window */
 const UserPanel = Backbone.NativeView.extend({
-    el: 'div#users',
+    el: '.controlbox-pane',
 
     initialize () {
         this.render();

sass/_controlbox.scss

@@ -157,21 +157,12 @@
 
         }
 
-        #users {
-            .add-converse-contact {
-                margin: 0 0 0.75em 0;
-            }
-
-            .chatbox-btn {
-                margin: 0;
-            }
-        }
-
         #chatrooms, #contacts {
             margin-top: 0.75em;
+            padding-bottom: 0.75em;
         }
 
-        #users {
+        .controlbox-pane {
             .userinfo {
                 padding-bottom: 1em;
                 border-bottom: 1px solid $gray-color;
@@ -420,6 +411,14 @@
             overflow-x: hidden;
             border-radius: $chatbox-border-radius;
 
+            .add-converse-contact {
+                margin: 0 0 0.75em 0;
+            }
+
+            .chatbox-btn {
+                margin: 0;
+            }
+
             .switch-form {
                 padding-bottom: 2em;
                 p {
@@ -521,13 +520,11 @@
                 display: block;
             }
 
-            #users {
+            .controlbox-pane {
                 position: absolute;
                 top: 0;
                 display: none;
-                &.controlbox-pane {
-                    width: 100%;
-                }
+                width: 100%;
             }
 
         }
@@ -537,7 +534,7 @@
                 display: none;
             }
             #controlbox {
-                #users {
+                .controlbox-pane {
                     display: block;
                 }
             }

sass/inverse/_controlbox.scss

@@ -1,7 +1,6 @@
 #conversejs.fullscreen {
     #controlbox {
         margin: 0;
-        // margin-left: -$chat-gutter; // Mystery why this is necessary
 
         .controlbox-pane {
             border-radius: 0;
@@ -51,6 +50,10 @@
             width: 100%;
             z-index: 1;
             background-color: $controlbox-head-color;
+
+            .controlbox-head {
+                display: none;
+            }
         }
 
         #converse-register, #converse-login {