Update mockups and tweak margin for chatroom in responsive mode

mockup/chatbox.html

@@ -36,11 +36,9 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-3">
-                            <div class="chatbox-buttons row no-gutters">
-                                <a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
-                                <a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
-                            </div>
+                        <div class="chatbox-buttons row no-gutters">
+                            <a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
+                            <a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
                         </div>
                     </div>
 

mockup/user-panel.html

 <!-- <div id="users" class="controlbox-pane"> -->
 <div class="userinfo">
-    <div class="d-flex">
-        <canvas height="20" width="20" class="avatar align-self-center"></canvas>
+    <div class="profile d-flex">
+        <canvas height="40px" width="40px" class="avatar align-self-center"></canvas>
         <span class="username w-100 align-self-center">Walter White</span>
         <!-- <a class="chatbox-btn fa fa-vcard align-self-center" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a> -->
         <!-- <a class="chatbox-btn fa fa-cog align-self-center" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a> -->
@@ -23,19 +23,19 @@
         <div class="rooms-list">
             <div class="available-chatroom d-flex flex-row">
                 <span class="badge badge-info msgs-indicator">1</span>
-                <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 class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="chatroom.html">public</a>
                 <a href="#" class="room-info fa fa-info-circle" 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" title="Click to bookmark this room">&nbsp;</a>
                 <a href="#" class="fa fa-times" 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 class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="chatroom.html">team</a>
                 <a href="#" class="room-info fa fa-info-circle" 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 class="open-room available-room w-100" data-room-jid="test@conference.test.com" title="Click to open this room" href="chatroom.html">test</a>
                 <a href="#" class="room-info fa fa-info-circle" 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>
@@ -86,17 +86,17 @@
 
             <ul>
                 <li class="online current-xmpp-contact d-flex">
-                    <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                    <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                         <span class="fa fa-circle" title="This contact is online"></span> Victor Matfield</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
                 <li class="away current-xmpp-contact d-flex">
-                    <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                    <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                         <span class="fa fa-circle-o" title="this contact is away"></span> William Winterbottom</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
                 <li class="dnd current-xmpp-contact d-flex">
-                    <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                    <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                         <span class="fa fa-minus-circle" title="This contact is busy"></span> Gary Teichmann</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
@@ -108,12 +108,12 @@
                 <span class="fa fa-caret-down"></span> Family</a>
             <ul>
                 <li class="away current-xmpp-contact d-flex">
-                    <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                    <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                         <span class="fa fa-circle-o" title="this contact is away"></span> Allan Donald</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
                 <li class="offline current-xmpp-contact d-flex">
-                    <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                    <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                         <span class="fa fa-times-circle" title="This contact is offline"></span> Corné Krige</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
@@ -125,12 +125,12 @@
                 <span class="fa fa-caret-down"></span> Friends</a>
             <ul>
                 <li class="online current-xmpp-contact d-flex">
-                    <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                    <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                         <span class="fa fa-circle" title="This contact is online"></span> John Smit</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
                 <li class="online current-xmpp-contact d-flex">
-                    <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                    <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                         <span class="fa fa-circle" title="This contact is online"></span> Bakkies Botha</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>
@@ -142,7 +142,7 @@
                 <span class="fa fa-caret-down"></span> Ungrouped</a>
             <ul>
                 <li class="online current-xmpp-contact d-flex">
-                    <a class="open-chat w-100" title="Click to chat with this contact" href="#">
+                    <a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
                         <span class="fa fa-circle" title="This contact is online"></span> James Small</a>
                     <a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
                 </li>

sass/_chatrooms.scss

-#converse-embedded-chat,
+#conversejs.converse-embedded,
 #conversejs {
     .add-chatroom {
         input[type="submit"],

sass/_controlbox.scss

@@ -449,6 +449,9 @@
 
             .chatbox { 
                 .box-flyout {
+                    top: -100vh;
+                    margin-left: 15px; // Counteracts Bootstrap margins, but
+                                       // not clear why needed...
                     left: 0;
                     bottom: 0;
                     border-radius: 0;

sass/inverse/_chatrooms.scss

-#conversejs.fullscreen {
+#conversejs.converse-fullscreen,
+#conversejs.converse-mobile {
 
     .chat-head-chatroom {
         height: $chatroom-head-height;

sass/inverse/inverse.scss

@@ -36,7 +36,6 @@
     @import "bootstrap/scss/popover";
     @import "bootstrap/scss/utilities";
 }
-@import "../fonts";
 @import "../core";
 @import "core";
 @import "../profile";