浏览代码

Place chat boxes inside bootstrap rows

instead of the other way around.
JC Brand 7 年之前
父节点
当前提交
808155bc3c

+ 1 - 1
Makefile

@@ -3,7 +3,7 @@ SHELL := /bin/bash --login
 UGLIFYJS		?= node_modules/.bin/uglifyjs
 UGLIFYJS		?= node_modules/.bin/uglifyjs
 BABEL			?= node_modules/.bin/babel
 BABEL			?= node_modules/.bin/babel
 BOURBON 		= ./node_modules/bourbon/app/assets/stylesheets/ 
 BOURBON 		= ./node_modules/bourbon/app/assets/stylesheets/ 
-BOOTSTRAP		= ./node_modules/bootstrap/scss/ 
+BOOTSTRAP		= ./node_modules/ 
 BUILDDIR		= ./docs
 BUILDDIR		= ./docs
 BUNDLE		  	?= ./.bundle/bin/bundle
 BUNDLE		  	?= ./.bundle/bin/bundle
 CHROMIUM		?= ./node_modules/.bin/run-headless-chromium
 CHROMIUM		?= ./node_modules/.bin/run-headless-chromium

文件差异内容过多而无法显示
+ 0 - 4
css/bootstrap.min.css


文件差异内容过多而无法显示
+ 0 - 5301
css/converse.css


文件差异内容过多而无法显示
+ 0 - 3
css/font-awesome.min.css


文件差异内容过多而无法显示
+ 23 - 6515
css/inverse.css


+ 19 - 0
css/theme.css

@@ -5,6 +5,17 @@ body {
   color: #ffffff;
   color: #ffffff;
   background-color: #211018;
   background-color: #211018;
 }
 }
+
+body .brand-heading {
+    margin: auto;
+    font-size: 6em;
+    font-weight: bold;
+}
+
+body .brand-heading .icon-conversejs {
+    font-size: 0.88em;
+}
+
 html {
 html {
   width: 100%;
   width: 100%;
   height: 100%;
   height: 100%;
@@ -43,6 +54,14 @@ a:focus {
   text-decoration: none;
   text-decoration: none;
   color: #00aaff;
   color: #00aaff;
 }
 }
+
+.converse-bg {
+  position: relative;
+  height: 100vh;
+  text-align: center;
+  color: #fff;
+}
+
 .light {
 .light {
   font-weight: 400;
   font-weight: 400;
 }
 }

+ 99 - 128
mockup/chatbox.html

@@ -9,140 +9,109 @@
 </head>
 </head>
 
 
 <body>
 <body>
-     <div class="container-fluid">
-          <div id="conversejs" class="fullscreen">
-               <div id="controlbox" class="chatbox">
-                    <div class="flyout box-flyout">
-                         <div class="controlbox-panes">
-                              <div class="row">
-                                   <div class="col-xl-2 col-md-3">
-                                <div class="sidebar"></div>
-                                <div id="users" class="controlbox-pane"></div>
-                                   </div>
-                              </div>
-                         </div>
+    <div id="conversejs" class="fullscreen">
+        <div class="row no-gutters">
+            <div id="controlbox" class="chatbox col-xl-2 col-md-3">
+                <div class="flyout box-flyout">
+                    <div class="controlbox-panes">
+                        <div class="sidebar"></div>
+                        <div id="users" class="controlbox-pane"></div>
                     </div>
                     </div>
-               </div>
+                </div>
+            </div>
 
 
-               <div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
-                    <div class="row">
-                         <div class="col-xl-10 offset-xl-2 col-md-9 offset-md-3">
-                              <div class="flyout box-flyout">
-                                   <div class="chat-head chat-head-chatbox d-flex">
-                                        <div><canvas height="44" width="44" class="avatar"></canvas></div>
-                                        <div class="chat-title w-100">JC Brand
-                                             <p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
-                                        </div>
-                                        <a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
-                                        <a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
-                                   </div>
-
-                                   <div class="chat-body">
-                                        <div class="chat-content">
-                                             <div class="chat-info">
-                                                  <span class="badge badge-info">This is an info message</span></div>
-                                             <div class="chat-info">
-                                                  <span class="badge badge-danger">This is an error message</span></div>
-                                             <div class="chat-message">
-                                                  <span class="chat-msg-author chat-msg-me">09:35&nbsp;
-                                                       <canvas height="24" width="24" class="avatar"></canvas>
-                                                       <span class="chat-msg-me">me:&nbsp;</span>
-                                                  </span>
-                                                  <span class="chat-msg-content">Hello world
-                                                       <span class="fa fa-smile-o"></span>
-                                                  </span>
-                                             </div>
-                                             <div class="chat-message">
-                                                  <span class="chat-msg-author chat-msg-them">19:25&nbsp;
-                                                       <canvas height="24" width="24" class="avatar"></canvas>
-                                                       <span class="chat-msg-them">Benedict-John:&nbsp;</span>
-                                                  </span>
-                                                  <span class="chat-msg-content">Dagsê</span>
-                                             </div>
-                                             <div class="chat-message">
-                                                  <span class="chat-msg-author chat-msg-me">19:39&nbsp;
-                                                       <canvas height="24" width="24" class="avatar"></canvas>
-                                                       <span class="chat-msg-me">me:&nbsp;</span>
-                                                  </span>
-                                                  <span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
-                                             </div>
-                                             <div class="chat-message">
-                                                  <span class="chat-msg-author chat-msg-me">19:42&nbsp;
-                                                       <canvas height="24" width="24" class="avatar"></canvas>
-                                                       <span class="chat-msg-me">me:&nbsp;</span>
-                                                  </span>
-                                                  <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
-                                             </div>
-                                             <div class="chat-info chat-event">
-                                                  <span class="badge badge-success">JC Brand is busy</span>
-                                             </div>
-                                             <div class="chat-message">
-                                                  <span class="chat-msg-author chat-msg-me">19:43&nbsp;
-                                                       <canvas height="24" width="24" class="avatar"></canvas>
-                                                       <span class="chat-msg-me">me:&nbsp;</span>
-                                                  </span>
-                                                  <span class="chat-msg-content">Another message to check that scrolling works.</span>
-                                             </div>
-                                        </div>
-
-                                        <form class="sendXMPPMessage">
-                                             <div class="form-group">
-                                                  <ul class="chat-toolbar no-text-select">
-                                                       <li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
-                                                            <div class="emoji-picker-container toolbar-menu collapsed"></div>
-                                                       </li>
-
-                                                       <li class="toggle-clear">
-                                                            <a class="fa fa-trash" title="Clear all messages"></a>
-                                                       </li>
-
-                                                       <li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
-                                                            <span class="chat-toolbar-text">unencrypted</span>
-                                                            <span class="fa fa-unlock"></span>
-                                                            <ul class="toolbar-menu collapsed">
-                                                                 <li>
-                                                                      <a class="start-otr" href="#">Start encrypted conversation</a>
-                                                                 </li>
-                                                                 <li>
-                                                                      <a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
-                                                                 </li>
-                                                            </ul>
-                                                       </li>
-                                                  </ul>
-                                             </div>
-                                             <div class="form-group">
-                                                  <textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
-                                             </div>
-                                        </form>
-                                   </div>
-                              </div>
-                         </div>
+            <div class="chatbox col-xl-10 col-md-9" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
+                <div class="flyout box-flyout">
+                    <div class="chat-head chat-head-chatbox d-flex">
+                        <div><canvas height="44" width="44" class="avatar"></canvas></div>
+                        <div class="chat-title w-100">JC Brand
+                            <p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
+                        </div>
+                        <a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
+                        <a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
                     </div>
                     </div>
-               </div>
-          </div>
 
 
-          <!-- Contact Profile Modal -->
-          <div class="modal fade" id="contactProfileModal" tabindex="-1" role="dialog" aria-labelledby="contactProfileModalLabel" aria-hidden="true">
-               <div class="modal-dialog" role="document">
-                    <div class="modal-content">
-                         <div class="modal-header">
-                              <h5 class="modal-title" id="contactProfileModalLabel">JC Brand User Profile</h5>
-                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                   <span aria-hidden="true">&times;</span>
-                              </button>
-                         </div>
-                         <div class="modal-body">
-                         </div>
-                         <div class="modal-footer">
-                              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                         </div>
-                    </div>
-               </div>
-          </div>
+                    <div class="chat-body">
+                        <div class="chat-content">
+                            <div class="chat-info">
+                                <span class="badge badge-info">This is an info message</span></div>
+                            <div class="chat-info">
+                                <span class="badge badge-danger">This is an error message</span></div>
+                            <div class="chat-message">
+                                <span class="chat-msg-author chat-msg-me">09:35&nbsp;
+                                    <canvas height="24" width="24" class="avatar"></canvas>
+                                    <span class="chat-msg-me">me:&nbsp;</span>
+                                </span>
+                                <span class="chat-msg-content">Hello world
+                                    <span class="fa fa-smile-o"></span>
+                                </span>
+                            </div>
+                            <div class="chat-message">
+                                <span class="chat-msg-author chat-msg-them">19:25&nbsp;
+                                    <canvas height="24" width="24" class="avatar"></canvas>
+                                    <span class="chat-msg-them">Benedict-John:&nbsp;</span>
+                                </span>
+                                <span class="chat-msg-content">Dagsê</span>
+                            </div>
+                            <div class="chat-message">
+                                <span class="chat-msg-author chat-msg-me">19:39&nbsp;
+                                    <canvas height="24" width="24" class="avatar"></canvas>
+                                    <span class="chat-msg-me">me:&nbsp;</span>
+                                </span>
+                                <span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
+                            </div>
+                            <div class="chat-message">
+                                <span class="chat-msg-author chat-msg-me">19:42&nbsp;
+                                    <canvas height="24" width="24" class="avatar"></canvas>
+                                    <span class="chat-msg-me">me:&nbsp;</span>
+                                </span>
+                                <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
+                            </div>
+                            <div class="chat-info chat-event">
+                                <span class="badge badge-success">JC Brand is busy</span>
+                            </div>
+                            <div class="chat-message">
+                                <span class="chat-msg-author chat-msg-me">19:43&nbsp;
+                                    <canvas height="24" width="24" class="avatar"></canvas>
+                                    <span class="chat-msg-me">me:&nbsp;</span>
+                                </span>
+                                <span class="chat-msg-content">Another message to check that scrolling works.</span>
+                            </div>
+                        </div>
 
 
+                        <form class="sendXMPPMessage">
+                            <div class="form-group">
+                                <ul class="chat-toolbar no-text-select">
+                                    <li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
+                                        <div class="emoji-picker-container toolbar-menu collapsed"></div>
+                                    </li>
+                                    <li class="toggle-clear">
+                                        <a class="fa fa-trash" title="Clear all messages"></a>
+                                    </li>
+                                    <li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
+                                        <span class="chat-toolbar-text">unencrypted</span>
+                                        <span class="fa fa-unlock"></span>
+                                        <ul class="toolbar-menu collapsed">
+                                            <li>
+                                                <a class="start-otr" href="#">Start encrypted conversation</a>
+                                            </li>
+                                            <li>
+                                                <a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="form-group">
+                                <textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
         <div class="modals"></div>
         <div class="modals"></div>
-     </div>
-</body>
+    </div>
 
 
 <script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
 <script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
 <script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
 <script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
@@ -159,4 +128,6 @@
         new UserPanel();    
         new UserPanel();    
     });
     });
 </script>
 </script>
+
+</body>
 </html>
 </html>

+ 99 - 114
mockup/chatroom.html

@@ -3,144 +3,127 @@
 <head>
 <head>
     <meta charset="utf-8" />
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Converse.js Mockups</title>
+    <title>Chatroom Fullscreen</title>
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
 </head>
 </head>
 
 
 <body>
 <body>
-    <div class="container-fluid">
-        <div id="conversejs" class="fullscreen chatbox">
-            <div id="controlbox" class="chatbox">
+    <div id="conversejs" class="fullscreen">
+        <div class="row no-gutters">
+            <div id="controlbox" class="chatbox col-xl-2 col-md-3">
                 <div class="flyout box-flyout">
                 <div class="flyout box-flyout">
                     <div class="controlbox-panes">
                     <div class="controlbox-panes">
-                        <div class="row">
-                            <div class="col-xl-2 col-md-3">
-                                <div class="sidebar"></div>
-                                <div id="users" class="controlbox-pane"></div>
-                            </div>
-                        </div>
+                        <div class="sidebar"></div>
+                        <div id="users" class="controlbox-pane"></div>
                     </div>
                     </div>
                 </div>
                 </div>
             </div>
             </div>
 
 
-            <div class="chatbox chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
-                <div class="row">
-                    <div class="col-xl-10 offset-xl-2 col-md-9 offset-md-3">
-                        <div class="flyout box-flyout">
-                            <div class="chat-head chat-head-chatroom d-flex">
-                                <div class="w-100">
-                                    <div class="chat-title">Chatroom</div>
-                                    <p class="chatroom-topic">May the force be with you</p>
-                                </div>
-                                <a class="chatbox-btn fa fa-wrench"></a>
-                                <a class="chatbox-btn fa fa-minus"></a>
-                                <a class="chatbox-btn fa fa-close"></a>
-                            </div>
+            <div class="chatbox chatroom col-xl-10 col-md-9" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
+                <div class="flyout box-flyout">
+                    <div class="chat-head chat-head-chatroom d-flex">
+                        <div class="w-100">
+                            <div class="chat-title">Chatroom</div>
+                            <p class="chatroom-topic">May the force be with you</p>
+                        </div>
+                        <a class="chatbox-btn fa fa-wrench"></a>
+                        <a class="chatbox-btn fa fa-minus"></a>
+                        <a class="chatbox-btn fa fa-close"></a>
+                    </div>
 
 
-                            <div class="chat-body chatroom-body">
-                                <div class="row">
-                                    <div class="col-md-9 col-8">
-                                        <div class="chat-area">
-                                            <div class="chat-content">
-                                                <div class="chat-message">
-                                                    <span class="chat-msg-author chat-msg-room">18:50&nbsp;
-                                                        <canvas height="24" width="24" class="avatar"></canvas>
-                                                        <span class="chat-msg-room">luke:&nbsp;</span>
-                                                    </span>
-                                                    <span class="chat-msg-content">leia: hi :)</span>
-                                                </div>
-                                                <div class="chat-message">
-                                                    <span class="chat-msg-author chat-msg-room">19:40&nbsp;
-                                                        <canvas height="24" width="24" class="avatar"></canvas>
-                                                        <span class="chat-msg-room">leia:&nbsp;</span>
-                                                    </span>
-                                                    <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
-                                                </div>
-                                                <time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
-                                                <div class="chat-message">
-                                                    <span class="chat-msg-author chat-msg-room">19:40&nbsp;
-                                                        <canvas height="24" width="24" class="avatar"></canvas>
-                                                        <span class="chat-msg-room">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
-                                                    </span>
-                                                    <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
-                                                </div>
-                                                <div class="chat-message">
-                                                    <span class="chat-msg-author chat-msg-me">19:42&nbsp;
-                                                        <canvas height="24" width="24" class="avatar"></canvas>
-                                                        <span class="chat-msg-me">me:&nbsp;</span>
-                                                    </span>
-                                                    <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
-                                                </div>
-                                                <div class="chat-message">
-                                                    <span class="chat-msg-author chat-msg-room">19:43&nbsp;
-                                                        <canvas height="24" width="24" class="avatar"></canvas>
-                                                        <span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
-                                                    </span>
-                                                    <span class="chat-msg-content">Another message to check that scrolling works.</span>
-                                                </div>
-                                            </div>
-                                            <form class="sendXMPPMessage">
-                                                <div class="form-group">
-                                                    <ul class="chat-toolbar no-text-select">
-                                                        <li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
-                                                        <li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
-                                                        <li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
-                                                    </ul>
-                                                </div>
-                                                <div class="form-group">
-                                                    <textarea class="chat-textarea form-control" placeholder="Message"></textarea>
-                                                </div>
-                                            </form>
-                                        </div>
+                    <div class="chat-body chatroom-body">
+                        <div class="row no-gutters">
+                            <div class="chat-area col-md-9 col-8">
+                                <div class="chat-content">
+                                    <div class="chat-message">
+                                        <span class="chat-msg-author chat-msg-room">18:50&nbsp;
+                                            <canvas height="24" width="24" class="avatar"></canvas>
+                                            <span class="chat-msg-room">luke:&nbsp;</span>
+                                        </span>
+                                        <span class="chat-msg-content">leia: hi :)</span>
+                                    </div>
+                                    <div class="chat-message">
+                                        <span class="chat-msg-author chat-msg-room">19:40&nbsp;
+                                            <canvas height="24" width="24" class="avatar"></canvas>
+                                            <span class="chat-msg-room">leia:&nbsp;</span>
+                                        </span>
+                                        <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
+                                    </div>
+                                    <time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
+                                    <div class="chat-message">
+                                        <span class="chat-msg-author chat-msg-room">19:40&nbsp;
+                                            <canvas height="24" width="24" class="avatar"></canvas>
+                                            <span class="chat-msg-room">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
+                                        </span>
+                                        <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
+                                    </div>
+                                    <div class="chat-message">
+                                        <span class="chat-msg-author chat-msg-me">19:42&nbsp;
+                                            <canvas height="24" width="24" class="avatar"></canvas>
+                                            <span class="chat-msg-me">me:&nbsp;</span>
+                                        </span>
+                                        <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
+                                    </div>
+                                    <div class="chat-message">
+                                        <span class="chat-msg-author chat-msg-room">19:43&nbsp;
+                                            <canvas height="24" width="24" class="avatar"></canvas>
+                                            <span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
+                                        </span>
+                                        <span class="chat-msg-content">Another message to check that scrolling works.</span>
                                     </div>
                                     </div>
+                                </div>
+                                <form class="sendXMPPMessage">
+                                    <div class="form-group">
+                                        <ul class="chat-toolbar no-text-select">
+                                            <li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
+                                            <li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
+                                            <li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
+                                        </ul>
+                                    </div>
+                                    <div class="form-group">
+                                        <textarea class="chat-textarea form-control" placeholder="Message"></textarea>
+                                    </div>
+                                </form>
+                            </div>
 
 
-                                    <div class="col-md-3 col-4">
-                                        <div class="occupants w-100">
-                                            <p class="occupants-heading">Occupants:</p>
-                                            <form class="pure-form room-invite">
-                                                <div class="form-control">
-                                                    <input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
-                                                </div>
-                                                <pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
-                                            </form>
+                            <div class="occupants col-md-3 col-4">
+                                <p class="occupants-heading">Occupants:</p>
+                                <form class="pure-form room-invite">
+                                    <input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
+                                    <pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
+                                </form>
 
 
-                                            <ul class="occupant-list">
-                                                <li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
-                                                    <div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
-                                                <li class="participant occupant" title="Click to mention leia in your message.">
-                                                    <div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
-                                                <li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
-                                                    <div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
-                                                <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                                    <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                            </ul>
+                                <ul class="occupant-list">
+                                    <li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
+                                    <li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
+                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                </ul>
 
 
-                                            <div class="chatroom-features">
-                                                <p class="occupants-heading">Features</p>
-                                                <ul class="features-list">
-                                                    <li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span>&nbsp;</li>
-                                                    <li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span>&nbsp;</li>
-                                                    <li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span>&nbsp;</li>
-                                                    <li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span>&nbsp;</li>
-                                                    <li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span>&nbsp;</li>
-                                                    <li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span>&nbsp;</li>
-                                                </ul>
-                                            </div>
-                                        </div>
-                                    </div>
+                                <div class="chatroom-features">
+                                    <p class="occupants-heading">Features</p>
+                                    <ul class="features-list">
+                                        <li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span>&nbsp;</li>
+                                        <li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span>&nbsp;</li>
+                                        <li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span>&nbsp;</li>
+                                        <li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span>&nbsp;</li>
+                                        <li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span>&nbsp;</li>
+                                        <li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span>&nbsp;</li>
+                                    </ul>
                                 </div>
                                 </div>
                             </div>
                             </div>
-
                         </div>
                         </div>
                     </div>
                     </div>
                 </div>
                 </div>
             </div>
             </div>
         </div>
         </div>
-
-        <div class="modals"></div>
+    <div class="modals"></div>
     </div>
     </div>
-</body>
 
 
 <script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
 <script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
 <script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
 <script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
@@ -157,4 +140,6 @@
         new UserPanel();    
         new UserPanel();    
     });
     });
 </script>
 </script>
+
+</body>
 </html>
 </html>

+ 208 - 238
mockup/converse.html

@@ -3,7 +3,7 @@
 <head>
 <head>
     <meta charset="utf-8" />
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>inVerse Mockups</title>
+    <title>Overlayed chats</title>
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" />
 </head>
 </head>
@@ -13,277 +13,247 @@
           <h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
           <h1 class="brand-heading"><i class="icon-conversejs"></i>Converse.js</h1>
      </div>
      </div>
 
 
-     <div id="conversejs" class="chatbox">
-          <div id="controlbox" class="chatbox">
-               <div class="flyout box-flyout">
+     <div id="conversejs">
+        <div class="row no-gutters">
+            <div id="controlbox" class="chatbox col col-lg-2 col-md-3 col-sm-4 col-sx-12 w-100">
+                <div class="flyout box-flyout">
                     <div class="controlbox-panes">
                     <div class="controlbox-panes">
-                         <div class="row">
-                              <div class="col-12">
-                            <div class="sidebar"></div>
-                            <div id="users" class="controlbox-pane"></div>
-                              </div>
-                         </div>
+                        <div class="sidebar"></div>
+                        <div id="users" class="controlbox-pane"></div>
                     </div>
                     </div>
-               </div>
-          </div>
+                </div>
+            </div>
 
 
-          <div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
-               <div class="flyout box-flyout">
+            <div class="chatbox col col col-lg-2 col-md-3 col-sm-4 col-sx-12 w-100" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
+                <div class="flyout box-flyout">
                     <div class="chat-head chat-head-chatbox d-flex">
                     <div class="chat-head chat-head-chatbox d-flex">
-                         <div><canvas height="32" width="32" class="avatar"></canvas></div>
-                         <div class="chat-title w-100">JC Brand
-                              <p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
-                         </div>
-                         <a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
-                         <a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
+                        <div><canvas height="32" width="32" class="avatar"></canvas></div>
+                        <div class="chat-title w-100">JC Brand
+                            <p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
+                        </div>
+                        <a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
+                        <a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
                     </div>
                     </div>
 
 
                     <div class="chat-body">
                     <div class="chat-body">
-                         <div class="chat-content">
-                              <div class="chat-info">
-                                   <span class="badge badge-info">This is an info message</span></div>
-                              <div class="chat-info">
-                                   <span class="badge badge-danger">This is an error message</span></div>
-                              <div class="chat-message">
-                                   <span class="chat-msg-author chat-msg-me">09:35&nbsp;
-                                        <canvas height="24" width="24" class="avatar"></canvas>
-                                        <span class="chat-msg-me">me:&nbsp;</span>
-                                   </span>
-                                   <span class="chat-msg-content">Hello world
-                                        <span class="fa fa-smile-o"></span>
-                                   </span>
-                              </div>
-                              <div class="chat-message">
-                                   <span class="chat-msg-author chat-msg-them">19:25&nbsp;
+                        <div class="chat-content">
+                            <div class="chat-info">
+                                <span class="badge badge-info">This is an info message</span></div>
+                            <div class="chat-info">
+                                <span class="badge badge-danger">This is an error message</span></div>
+                            <div class="chat-message">
+                                <span class="chat-msg-author chat-msg-me">09:35&nbsp;
+                                    <canvas height="24" width="24" class="avatar"></canvas>
+                                    <span class="chat-msg-me">me:&nbsp;</span>
+                                </span>
+                                <span class="chat-msg-content">Hello world
+                                    <span class="fa fa-smile-o"></span>
+                                </span>
+                            </div>
+                            <div class="chat-message">
+                                <span class="chat-msg-author chat-msg-them">19:25&nbsp;
                                         <canvas height="24" width="24" class="avatar"></canvas>
                                         <canvas height="24" width="24" class="avatar"></canvas>
                                         <span class="chat-msg-them">Benedict-John:&nbsp;</span>
                                         <span class="chat-msg-them">Benedict-John:&nbsp;</span>
-                                   </span>
-                                   <span class="chat-msg-content">Dagsê</span>
-                              </div>
-                              <div class="chat-message">
-                                   <span class="chat-msg-author chat-msg-me">19:39&nbsp;
+                                </span>
+                                <span class="chat-msg-content">Dagsê</span>
+                            </div>
+                            <div class="chat-message">
+                                <span class="chat-msg-author chat-msg-me">19:39&nbsp;
                                         <canvas height="24" width="24" class="avatar"></canvas>
                                         <canvas height="24" width="24" class="avatar"></canvas>
                                         <span class="chat-msg-me">me:&nbsp;</span>
                                         <span class="chat-msg-me">me:&nbsp;</span>
-                                   </span>
-                                   <span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
-                              </div>
-                              <div class="chat-message">
-                                   <span class="chat-msg-author chat-msg-me">19:42&nbsp;
+                                </span>
+                                <span class="chat-msg-content">This is a relatively long message to check that wrapping works as expected.</span>
+                            </div>
+                            <div class="chat-message">
+                                <span class="chat-msg-author chat-msg-me">19:42&nbsp;
                                         <canvas height="24" width="24" class="avatar"></canvas>
                                         <canvas height="24" width="24" class="avatar"></canvas>
                                         <span class="chat-msg-me">me:&nbsp;</span>
                                         <span class="chat-msg-me">me:&nbsp;</span>
-                                   </span>
-                                   <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
-                              </div>
-                              <div class="chat-info chat-event">
-                                   <span class="badge badge-success">JC Brand is busy</span>
-                              </div>
-                              <div class="chat-message">
-                                   <span class="chat-msg-author chat-msg-me">19:43&nbsp;
+                                </span>
+                                <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
+                            </div>
+                            <div class="chat-info chat-event">
+                                <span class="badge badge-success">JC Brand is busy</span>
+                            </div>
+                            <div class="chat-message">
+                                <span class="chat-msg-author chat-msg-me">19:43&nbsp;
                                         <canvas height="24" width="24" class="avatar"></canvas>
                                         <canvas height="24" width="24" class="avatar"></canvas>
                                         <span class="chat-msg-me">me:&nbsp;</span>
                                         <span class="chat-msg-me">me:&nbsp;</span>
-                                   </span>
-                                   <span class="chat-msg-content">Another message to check that scrolling works.</span>
-                              </div>
-                         </div>
-
-                         <form class="sendXMPPMessage">
-                              <div class="form-group">
-                                   <ul class="chat-toolbar no-text-select">
-                                        <li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
-                                             <div class="emoji-picker-container toolbar-menu collapsed"></div>
-                                        </li>
+                                </span>
+                                <span class="chat-msg-content">Another message to check that scrolling works.</span>
+                            </div>
+                        </div>
 
 
-                                        <li class="toggle-clear">
-                                             <a class="fa fa-trash" title="Clear all messages"></a>
-                                        </li>
-
-                                        <li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
-                                             <span class="chat-toolbar-text">unencrypted</span>
-                                             <span class="fa fa-unlock"></span>
-                                             <ul class="toolbar-menu collapsed">
-                                                  <li>
-                                                       <a class="start-otr" href="#">Start encrypted conversation</a>
-                                                  </li>
-                                                  <li>
-                                                       <a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
-                                                  </li>
-                                             </ul>
-                                        </li>
-                                   </ul>
-                              </div>
-                              <div class="form-group">
-                                   <textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
-                              </div>
-                         </form>
+                        <form class="sendXMPPMessage">
+                            <div class="form-group">
+                                <ul class="chat-toolbar no-text-select">
+                                    <li class="toggle-toolbar-menu toggle-smiley fa fa-smile-o" title="Insert a smiley">
+                                        <div class="emoji-picker-container toolbar-menu collapsed"></div>
+                                    </li>
+                                    <li class="toggle-clear">
+                                        <a class="fa fa-trash" title="Clear all messages"></a>
+                                    </li>
+                                    <li class="toggle-toolbar-menu toggle-otr unencrypted" title="Your messages are not encrypted. Click here to enable OTR encryption.">
+                                        <span class="chat-toolbar-text">unencrypted</span>
+                                        <span class="fa fa-unlock"></span>
+                                        <ul class="toolbar-menu collapsed">
+                                            <li>
+                                                <a class="start-otr" href="#">Start encrypted conversation</a>
+                                            </li>
+                                            <li>
+                                                <a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank" rel="noopener">What's this?</a>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="form-group">
+                                <textarea class="chat-textarea form-control" placeholder="Personal message"></textarea>
+                            </div>
+                        </form>
                     </div>
                     </div>
-               </div>
-          </div>
+                </div>
+            </div>
 
 
-          <div class="chatbox chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
-               <div class="flyout box-flyout">
+            <div class="chatbox chatroom col col-lg-4 col-md-6 col-sm-8 col-xs-12 w-100" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
+                <div class="flyout box-flyout">
                     <div class="chat-head chat-head-chatroom d-flex">
                     <div class="chat-head chat-head-chatroom d-flex">
-                         <div class="w-100">
-                              <div class="chat-title">Chatroom</div>
-                              <p class="chatroom-topic">May the force be with you</p>
-                         </div>
-                         <a class="chatbox-btn fa fa-wrench"></a>
-                         <a class="chatbox-btn fa fa-minus"></a>
-                         <a class="chatbox-btn fa fa-close"></a>
+                        <div class="w-100">
+                            <div class="chat-title">Chatroom</div>
+                            <p class="chatroom-topic">May the force be with you</p>
+                        </div>
+                        <a class="chatbox-btn fa fa-wrench"></a>
+                        <a class="chatbox-btn fa fa-minus"></a>
+                        <a class="chatbox-btn fa fa-close"></a>
                     </div>
                     </div>
 
 
                     <div class="chat-body chatroom-body">
                     <div class="chat-body chatroom-body">
-                         <div class="row">
-                              <div class="col-md-9 col-8">
-                                   <div class="chat-area">
-                                        <div class="chat-content">
-                                             <div class="chat-message">
-                                                  <span class="chat-msg-author chat-msg-room">18:50&nbsp;
-                                                       <canvas height="24" width="24" class="avatar"></canvas>
-                                                       <span class="chat-msg-room">luke:&nbsp;</span>
-                                                  </span>
-                                                  <span class="chat-msg-content">leia: hi :)</span>
-                                             </div>
-                                             <div class="chat-message">
-                                                  <span class="chat-msg-author chat-msg-room">19:40&nbsp;
-                                                       <canvas height="24" width="24" class="avatar"></canvas>
-                                                       <span class="chat-msg-room">leia:&nbsp;</span>
-                                                  </span>
-                                                  <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
-                                             </div>
-                                             <time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
-                                             <div class="chat-message">
-                                                  <span class="chat-msg-author chat-msg-room">19:40&nbsp;
-                                                       <canvas height="24" width="24" class="avatar"></canvas>
-                                                       <span class="chat-msg-room">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
-                                                  </span>
-                                                  <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
-                                             </div>
-                                             <div class="chat-message">
-                                                  <span class="chat-msg-author chat-msg-me">19:42&nbsp;
-                                                       <canvas height="24" width="24" class="avatar"></canvas>
-                                                       <span class="chat-msg-me">me:&nbsp;</span>
-                                                  </span>
-                                                  <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
-                                             </div>
-                                             <div class="chat-message">
-                                                  <span class="chat-msg-author chat-msg-room">19:43&nbsp;
-                                                       <canvas height="24" width="24" class="avatar"></canvas>
-                                                       <span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
-                                                  </span>
-                                                  <span class="chat-msg-content">Another message to check that scrolling works.</span>
-                                             </div>
-                                        </div>
-                                        <form class="sendXMPPMessage">
-                                             <div class="form-group">
-                                                  <ul class="chat-toolbar no-text-select">
-                                                       <li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
-                                                       <li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
-                                                       <li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
-                                                  </ul>
-                                             </div>
-                                             <div class="form-group">
-                                                  <textarea class="chat-textarea form-control" placeholder="Message"></textarea>
-                                             </div>
-                                        </form>
-                                   </div>
-                              </div>
+                        <div class="row no-gutters">
+                            <div class="chat-area col-md-9 col-8">
+                                <div class="chat-content">
+                                    <div class="chat-message">
+                                        <span class="chat-msg-author chat-msg-room">18:50&nbsp;
+                                            <canvas height="24" width="24" class="avatar"></canvas>
+                                            <span class="chat-msg-room">luke:&nbsp;</span>
+                                        </span>
+                                        <span class="chat-msg-content">leia: hi :)</span>
+                                    </div>
+                                    <div class="chat-message">
+                                        <span class="chat-msg-author chat-msg-room">19:40&nbsp;
+                                            <canvas height="24" width="24" class="avatar"></canvas>
+                                            <span class="chat-msg-room">leia:&nbsp;</span>
+                                        </span>
+                                        <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
+                                    </div>
+                                    <time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
+                                    <div class="chat-message">
+                                        <span class="chat-msg-author chat-msg-room">19:40&nbsp;
+                                            <canvas height="24" width="24" class="avatar"></canvas>
+                                            <span class="chat-msg-room">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
+                                        </span>
+                                        <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
+                                    </div>
+                                    <div class="chat-message">
+                                        <span class="chat-msg-author chat-msg-me">19:42&nbsp;
+                                            <canvas height="24" width="24" class="avatar"></canvas>
+                                            <span class="chat-msg-me">me:&nbsp;</span>
+                                        </span>
+                                        <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
+                                    </div>
+                                    <div class="chat-message">
+                                        <span class="chat-msg-author chat-msg-room">19:43&nbsp;
+                                            <canvas height="24" width="24" class="avatar"></canvas>
+                                            <span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master:&nbsp;</span>
+                                        </span>
+                                        <span class="chat-msg-content">Another message to check that scrolling works.</span>
+                                    </div>
+                                </div>
+                                <form class="sendXMPPMessage">
+                                    <div class="form-group">
+                                        <ul class="chat-toolbar no-text-select">
+                                            <li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
+                                            <li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
+                                            <li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
+                                        </ul>
+                                    </div>
+                                    <div class="form-group">
+                                        <textarea class="chat-textarea form-control" placeholder="Message"></textarea>
+                                    </div>
+                                </form>
+                            </div>
 
 
-                              <div class="col-md-3 col-4">
-                                   <div class="occupants w-100">
-                                        <p class="occupants-heading">Occupants:</p>
-                                        <form class="pure-form room-invite">
-                                             <div class="form-control">
-                                                  <input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
-                                             </div>
-                                             <pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
-                                        </form>
+                            <div class="occupants col-md-3 col-4">
+                                <p class="occupants-heading">Occupants:</p>
+                                <form class="pure-form room-invite">
+                                    <input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
+                                    <pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
+                                </form>
 
 
-                                        <ul class="occupant-list">
-                                             <li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
-                                                  <div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
-                                             <li class="participant occupant" title="Click to mention leia in your message.">
-                                                  <div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
-                                             <li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
-                                                  <div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
-                                             <li class="participant occupant" title="Click to mention jabber the hut in your message.">
-                                                  <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
-                                        </ul>
+                                <ul class="occupant-list">
+                                    <li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
+                                    <li class="participant occupant" title="Click to mention leia in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
+                                    <li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
+                                    <li class="participant occupant" title="Click to mention jabber the hut in your message.">
+                                        <div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
+                                </ul>
 
 
-                                        <div class="chatroom-features">
-                                             <p class="occupants-heading">Features</p>
-                                             <ul class="features-list">
-                                                  <li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span>&nbsp;</li>
-                                                  <li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span>&nbsp;</li>
-                                                  <li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span>&nbsp;</li>
-                                                  <li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span>&nbsp;</li>
-                                                  <li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span>&nbsp;</li>
-                                                  <li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span>&nbsp;</li>
-                                             </ul>
-                                        </div>
-                                   </div>
-                              </div>
-                         </div>
+                                <div class="chatroom-features">
+                                    <p class="occupants-heading">Features</p>
+                                    <ul class="features-list">
+                                        <li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span>&nbsp;</li>
+                                        <li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span>&nbsp;</li>
+                                        <li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span>&nbsp;</li>
+                                        <li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span>&nbsp;</li>
+                                        <li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span>&nbsp;</li>
+                                        <li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span>&nbsp;</li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                     </div>
-               </div>
-          </div>
+                </div>
+            </div>
 
 
-          <div id="minimized-chats">
-               <a id="toggle-minimized-chats" href="#">Minimized
-                    <span id="minimized-count">(0)</span>
+            <div id="minimized-chats" class="col col-1 w-100">
+                <a id="toggle-minimized-chats" href="#" class="row no-gutters">
+                    <div class="col"><span id="minimized-count">0</span> Minimized</div>
                     <span class="badge badge-light">322</span>
                     <span class="badge badge-light">322</span>
-               </a>
-               <div class="flyout minimized-chats-flyout">
-                    <div class="chat-head chat-head-chatroom d-flex">
-                         <span class="badge badge-light">3</span>
-                         <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Restricted Chatroom</a>
-                         <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
-                    </div>
-                    <div class="chat-head chat-head-chatbox d-flex">
-                         <span class="badge badge-light">42</span>
-                         <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">JC Brand</a>
-                         <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
+                </a>
+                <div class="flyout minimized-chats-flyout">
+                    <div class="chat-head chat-head-chatroom row no-gutters">
+                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
+                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Restricted Chatroom</a>
+                        <span class="badge badge-light">42</span>
                     </div>
                     </div>
-                    <div class="chat-head chat-head-chatroom d-flex">
-                         <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">My Chatroom</a>
-                         <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
-                    </div>
-                    <div class="chat-head chat-head-chatbox d-flex">
-                         <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Annegreet Gomez</a>
-                         <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
-                    </div>
-                    <div class="chat-head chat-head-chatbox d-flex">
-                         <span class="badge badge-light">842</span>
-                         <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Asmaa Haakman</a>
-                         <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
+                    <div class="chat-head chat-head-chatbox row no-gutters">
+                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
+                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">JC Brand</a>
+                        <span class="badge badge-light">4</span>
                     </div>
                     </div>
-                    <div class="chat-head chat-head-chatbox d-flex">
-                         <a href="#" class="restore-chat w-100 align-self-center">Lena Grunewald</a>
-                         <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
+                    <div class="chat-head chat-head-chatroom row no-gutters">
+                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
+                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">My Chatroom</a>
                     </div>
                     </div>
-               </div>
-          </div>
-     </div>
-
-     <!-- Contact Profile Modal -->
-     <div class="modal fade" id="contactProfileModal" tabindex="-1" role="dialog" aria-labelledby="contactProfileModalLabel" aria-hidden="true">
-          <div class="modal-dialog" role="document">
-               <div class="modal-content">
-                    <div class="modal-header">
-                         <h5 class="modal-title" id="contactProfileModalLabel">JC Brand User Profile</h5>
-                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                              <span aria-hidden="true">&times;</span>
-                         </button>
+                    <div class="chat-head chat-head-chatbox row no-gutters">
+                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
+                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Annegreet Gomez</a>
                     </div>
                     </div>
-                    <div class="modal-body">
+                    <div class="chat-head chat-head-chatbox row no-gutters">
+                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
+                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Asmaa Haakman</a>
+                        <span class="badge badge-light">842</span>
                     </div>
                     </div>
-                    <div class="modal-footer">
-                         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                    <div class="chat-head chat-head-chatbox row no-gutters">
+                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
+                        <a href="#" class="restore-chat w-100 align-self-center">Lena Grunewald</a>
                     </div>
                     </div>
-               </div>
-          </div>
-     </div>
-
-    <div class="modals"></div>
+                </div>
+            </div>
+            <div class="modals"></div>
+        </div>
+    </div>
 </body>
 </body>
 
 
 <script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
 <script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>

+ 35 - 66
mockup/fullscreen-login.html

@@ -3,84 +3,53 @@
 <head>
 <head>
     <meta charset="utf-8" />
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Converse.js Mockups</title>
+    <title>Login Fullscreen</title>
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/bootstrap/dist/css/bootstrap.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../css/inverse.css" />
 </head>
 </head>
 
 
 <body>
 <body>
-     <div class="container converse-bg">
-          <h1 class="brand-heading"><i class="icon-conversejs"></i>&nbsp;inVerse</h1>
-     </div>
+    <div class="container converse-bg">
+        <h1 class="brand-heading"><i class="icon-conversejs"></i>&nbsp;inVerse</h1>
+    </div>
 
 
-     <div class="container-fluid">
-          <div id="conversejs" class="fullscreen">
-               <div id="controlbox" class="chatbox">
-                    <div class="flyout box-flyout">
-                         <div class="controlbox-panes">
-                              <div id="login-dialog" class="controlbox-pane">
-                                   <div class="row">
-                                        <div class="brand-heading-container col-12">
-                                             <h1 class="brand-heading">
-                                                  <i class="icon-conversejs"></i> inVerse</h1>
-                                             <p>
-                                                  <a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
-                                        </div>
-                                   </div>
+    <div id="conversejs" class="fullscreen">
+        <div class="row no-gutters">
+            <div id="controlbox" class="chatbox">
+                <div class="flyout box-flyout">
+                    <div class="controlbox-panes">
+                        <div id="login-dialog" class="controlbox-pane">
+                            <div class="row">
+                                <div class="brand-heading-container col-12">
+                                    <h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
+                                    <p><a href="https://conversejs.org">Open Source</a> XMPP chat client</p>
+                                </div>
+                            </div>
 
 
-                                   <div class="row">
-                                        <div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
-                                             <form id="converse-login" class="pure-form converse-form">
-                                                  <div class="form-group">
-                                                       <label for="jid">XMPP Username:</label>
-                                                       <input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
-                                                  </div>
-                                                  <div class="form-group">
-                                                       <label for="password">Password:</label>
-                                                       <input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
-                                                  </div>
+                            <div class="row">
+                                <div class="col-sm-8 offset-sm-2 col-md-8 offset-md-2 col-lg-6 offset-lg-3">
+                                    <form id="converse-login" class="pure-form converse-form">
+                                        <div class="form-group">
+                                            <label for="jid">XMPP Username:</label>
+                                            <input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="password">Password:</label>
+                                            <input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
+                                        </div>
                                         <fieldset class="buttons">
                                         <fieldset class="buttons">
                                             <p><input class="btn btn-primary" type="submit" value="Log In"></p>
                                             <p><input class="btn btn-primary" type="submit" value="Log In"></p>
                                             <p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
                                             <p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
                                         </fieldset>
                                         </fieldset>
-                                             </form>
-                                        </div>
-                                   </div>
-                              </div>
-                         </div>
+                                    </form>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                     </div>
-               </div>
-          </div>
-
-          <!-- Register Modal -->
-          <div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel" aria-hidden="true">
-               <div class="modal-dialog" role="document">
-                    <div class="modal-content">
-                         <div class="modal-header">
-                              <h5 class="modal-title" id="registerModalLabel">Register</h5>
-                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                                   <span aria-hidden="true">&times;</span>
-                              </button>
-                         </div>
-                         <div class="modal-body">
-                              <form id="converse-register">
-                                   <div class="form-group">
-                                        <label for="domain">Your XMPP provider's domain name:</label>
-                                        <input type="text" name="domain" class="form-control" placeholder=" e.g. conversejs.org">
-                                   </div>
-                                   <p>Tip: A list of public XMPP providers is available
-                                        <a href="https://xmpp.net/directory.php" class="url" target="_blank" rel="noopener">here</a>.</p>
-                                   <input class="btn btn-primary" type="submit" value="Fetch registration form">
-                              </form>
-                         </div>
-                         <div class="modal-footer">
-                              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                         </div>
-                    </div>
-               </div>
-          </div>
-     </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </body>
 </body>
-
 </html>
 </html>

+ 47 - 0
mockup/modals.html

@@ -1,3 +1,50 @@
+<!-- Register Modal -->
+<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="registerModalLabel">Register</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <form id="converse-register">
+                    <div class="form-group">
+                        <label for="domain">Your XMPP provider's domain name:</label>
+                        <input type="text" name="domain" class="form-control" placeholder=" e.g. conversejs.org">
+                    </div>
+                    <p>Tip: A list of public XMPP providers is available
+                        <a href="https://xmpp.net/directory.php" class="url" target="_blank" rel="noopener">here</a>.</p>
+                    <input class="btn btn-primary" type="submit" value="Fetch registration form">
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Contact Profile Modal -->
+<div class="modal fade" id="contactProfileModal" tabindex="-1" role="dialog" aria-labelledby="contactProfileModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                    <h5 class="modal-title" id="contactProfileModalLabel">JC Brand User Profile</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+            </div>
+            <div class="modal-body">
+            </div>
+            <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!-- User Profile Modal -->
 <!-- User Profile Modal -->
 <div class="modal fade" id="userProfileModal" tabindex="-1" role="dialog" aria-labelledby="userProfileModalLabel" aria-hidden="true">
 <div class="modal fade" id="userProfileModal" tabindex="-1" role="dialog" aria-labelledby="userProfileModalLabel" aria-hidden="true">
     <div class="modal-dialog" role="document">
     <div class="modal-dialog" role="document">

+ 48 - 57
mockup/overlayed-login.html

@@ -3,7 +3,7 @@
 <head>
 <head>
     <meta charset="utf-8" />
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Converse.js Mockups</title>
+    <title>Login Overlayed</title>
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../node_modules/font-awesome/css/font-awesome.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="../../css/converse.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
     <link type="text/css" rel="stylesheet" media="screen" href="css/mockup.css" />
@@ -15,64 +15,55 @@
 	</div>
 	</div>
 
 
 	<div id="conversejs">
 	<div id="conversejs">
-		<div id="controlbox" class="chatbox">
-			<div class="flyout box-flyout">
-				<div class="controlbox-panes">
-					<div id="login-dialog" class="controlbox-pane">
-						<div class="row">
-							<div class="brand-heading-container col-12">
-								<h1 class="brand-heading"><i class="icon-conversejs"></i> converse</h1>
-							</div>
+        <div class="row no-gutters">
+            <div id="controlbox" class="chatbox col col-lg-2 col-md-3 col-sm-4 col-sx-12">
+                <div class="flyout box-flyout">
+                    <div class="controlbox-panes">
+                        <div id="login-dialog" class="controlbox-pane row">
+                            <div class="brand-heading-container col-12">
+                                <h1 class="brand-heading"><i class="icon-conversejs"></i> converse</h1>
+                            </div>
 
 
-							<div class="col-12">
-								<form id="converse-login" class="pure-form converse-form">
-									<div class="form-group">
-										<label for="jid">XMPP Username:</label>
-										<input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
-									</div>
-									<div class="form-group">
-										<label for="password">Password:</label>
-										<input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
-									</div>
-									<p></p>
-									<p><input class="btn btn-primary" type="submit" value="Log In"></p>
-									<p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
-								</form>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
+                            <div class="col-12">
+                                <form id="converse-login" class="pure-form converse-form">
+                                    <div class="form-group">
+                                        <label for="jid">XMPP Username:</label>
+                                        <input type="text" name="jid" class="form-control" placeholder="user@server" autocomplete="off">
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="password">Password:</label>
+                                        <input type="password" name="password" class="form-control" placeholder="password" autocomplete="off">
+                                    </div>
+                                    <p></p>
+                                    <p><input class="btn btn-primary" type="submit" value="Log In"></p>
+                                    <p>Click <a href="#" data-toggle="modal" data-target="#registerModal">here</a> to register.</p>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="modals"></div>
 	</div>
 	</div>
 
 
-	<!-- Register Modal -->
-	<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel" aria-hidden="true">
-		<div class="modal-dialog" role="document">
-			<div class="modal-content">
-				<div class="modal-header">
-					<h5 class="modal-title" id="registerModalLabel">Register</h5>
-					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-						<span aria-hidden="true">&times;</span>
-					</button>
-				</div>
-				<div class="modal-body">
-					<form id="converse-register">
-						<div class="form-group">
-							<label for="domain">Your XMPP provider's domain name:</label>
-							<input type="text" name="domain" class="form-control" placeholder=" e.g. conversejs.org">
-						</div>
-						<p>Tip: A list of public XMPP providers is available
-							<a href="https://xmpp.net/directory.php" class="url" target="_blank" rel="noopener">here</a>.</p>
-						<input class="btn btn-primary" type="submit" value="Fetch registration form">
-					</form>
-				</div>
-				<div class="modal-footer">
-					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-				</div>
-			</div>
-		</div>
-	</div>
-</body>
+<script type="text/javascript" src="../../node_modules/lodash/lodash.js"></script>
+<script type="text/javascript" src="../../node_modules/backbone/backbone.js"></script>
+<script type="text/javascript" src="../../node_modules/backbone.nativeview/backbone.nativeview.js"></script>
+
+<script type="text/javascript" src="sidebar.js"></script>
+<script type="text/javascript" src="user-panel.js"></script>
+<script type="text/javascript" src="modals.js"></script>
 
 
+<script type="text/javascript" src="../../node_modules/bootstrap.native/dist/bootstrap-native-v4.js"></script>
+
+<script>
+    document.addEventListener("DOMContentLoaded", function(event) { 
+        new Modals();
+        new Sidebar();
+        new UserPanel();    
+    });
+</script>
+
+</body>
 </html>
 </html>

+ 5 - 11
sass/_chatbox.scss

@@ -9,8 +9,8 @@
             border-radius: 0;
             border-radius: 0;
         }
         }
         bottom: $chatbox-hover-height;
         bottom: $chatbox-hover-height;
-        display: block;
         position: absolute;
         position: absolute;
+
         @media screen and (max-height: $mobile-landscape-height) {
         @media screen and (max-height: $mobile-landscape-height) {
             bottom: 0;
             bottom: 0;
         }
         }
@@ -65,12 +65,10 @@
         }
         }
     }
     }
     .chatbox {
     .chatbox {
-        display: block;
         text-align: left;
         text-align: left;
-        float: right;
         height: $bottom-gutter-height;
         height: $bottom-gutter-height;
         margin: 0 $chat-gutter;
         margin: 0 $chat-gutter;
-        width: $chat-width;
+
         @media screen and (max-height: $mobile-landscape-height) {
         @media screen and (max-height: $mobile-landscape-height) {
             margin: 0;
             margin: 0;
             width: $mobile-chat-width;
             width: $mobile-chat-width;
@@ -84,9 +82,10 @@
             box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
             box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
             height: $chat-height;
             height: $chat-height;
             min-height: $chat-height/2;
             min-height: $chat-height/2;
-            min-width: $chat-width;
-            width: $chat-width;
             z-index: 1;
             z-index: 1;
+            overflow-y: scroll;
+            width: 100%;
+
             @media screen and (max-height: $mobile-landscape-height) {
             @media screen and (max-height: $mobile-landscape-height) {
                 height: $mobile-chat-height;
                 height: $mobile-chat-height;
                 width: $mobile-chat-width;
                 width: $mobile-chat-width;
@@ -448,9 +447,6 @@
                 padding: 3em 2em 3em;
                 padding: 3em 2em 3em;
             }
             }
         }
         }
-        > .chatbox {
-            width: calc(100% - 50px);
-        }
         .chatbox {
         .chatbox {
             .chat-body {
             .chat-body {
                 .chat-message {
                 .chat-message {
@@ -460,8 +456,6 @@
                 }
                 }
             }
             }
             .row {
             .row {
-                width: calc(100% - 50px);
-
                 .box-flyout {
                 .box-flyout {
                     left: 50px;
                     left: 50px;
                     bottom: 0;
                     bottom: 0;

+ 5 - 7
sass/_chatrooms.scss

@@ -49,8 +49,7 @@
         }
         }
 
 
         .box-flyout {
         .box-flyout {
-            min-width: $chatroom-width;
-            width: $chatroom-width;
+            width: 100%;
             @media screen and (max-height: $mobile-landscape-height) {
             @media screen and (max-height: $mobile-landscape-height) {
                 height: $mobile-chat-height;
                 height: $mobile-chat-height;
                 width: $mobile-chat-width;
                 width: $mobile-chat-width;
@@ -70,6 +69,10 @@
                 width: 100%;
                 width: 100%;
                 overflow: hidden;
                 overflow: hidden;
 
 
+                .row {
+                    flex-direction: row;
+                }
+
                 .chat-info {
                 .chat-info {
                     color: white;
                     color: white;
                     line-height: normal;
                     line-height: normal;
@@ -99,8 +102,6 @@
                 }
                 }
                 .chat-area {
                 .chat-area {
                     word-wrap: break-word; 
                     word-wrap: break-word; 
-                    width: 100%;
-                    float: left;
                     min-width: $chat-width;
                     min-width: $chat-width;
                     height: calc(100% - 95px);
                     height: calc(100% - 95px);
 
 
@@ -121,13 +122,10 @@
                 .occupants {
                 .occupants {
                     overflow-x: hidden;
                     overflow-x: hidden;
                     overflow-y: hidden;
                     overflow-y: hidden;
-                    float: right;
                     vertical-align: top;
                     vertical-align: top;
                     background-color: white;
                     background-color: white;
                     border-left: 1px solid $text-color;
                     border-left: 1px solid $text-color;
                     border-bottom-right-radius: $chatbox-border-radius;
                     border-bottom-right-radius: $chatbox-border-radius;
-                    width: 30%;
-                    height: 100%;
                     padding: 0.5em;
                     padding: 0.5em;
                     .occupants-heading {
                     .occupants-heading {
                         padding: 0.3em 0;
                         padding: 0.3em 0;

+ 4 - 11
sass/_controlbox.scss

@@ -2,13 +2,6 @@
     #controlbox {
     #controlbox {
         margin-right: 2*$chat-gutter;
         margin-right: 2*$chat-gutter;
 
 
-        @media screen and (max-width: $mobile-portrait-length) {
-            margin: 0;
-        }
-        @media screen and (max-height: $mobile-landscape-height) {
-            margin: 0;
-        }
-
         .pure-form.converse-form {
         .pure-form.converse-form {
             padding: 0;
             padding: 0;
         }
         }
@@ -122,6 +115,8 @@
         }
         }
 
 
 		#login-dialog {
 		#login-dialog {
+            flex-direction: column;
+
 			.brand-heading {
 			.brand-heading {
                 color: $global-background-color;
                 color: $global-background-color;
             }
             }
@@ -409,7 +404,6 @@
         }
         }
 
 
         .controlbox-panes {
         .controlbox-panes {
-            height: 100%;
             overflow-y: scroll;
             overflow-y: scroll;
         }
         }
 
 
@@ -420,9 +414,7 @@
             font-size: $font-size;
             font-size: $font-size;
             left: 0;
             left: 0;
             text-align: left;
             text-align: left;
-            width: 100%;
-            height: 100%;
-            overflow-y: hidden;
+            overflow-y: scroll;
             overflow-x: hidden;
             overflow-x: hidden;
             border-radius: $chatbox-border-radius;
             border-radius: $chatbox-border-radius;
 
 
@@ -532,6 +524,7 @@
                 top: 0;
                 top: 0;
                 left: 50px;
                 left: 50px;
                 display: none;
                 display: none;
+                width: calc(100% - 50px);
 
 
                 &.controlbox-pane {
                 &.controlbox-pane {
                     height: 100vh;
                     height: 100vh;

+ 26 - 55
sass/_core.scss

@@ -6,59 +6,32 @@
     @include animation-timing-function(ease);
     @include animation-timing-function(ease);
 }
 }
 
 
-// FIXME: these need to go elsewhere, they're outside of #conversejs
-.converse-bg {
-  position: relative;
-  height: 100vh;
-  text-align: center;
-  color: #fff;
-}
-
-body {
-    .brand-heading {
-        margin: auto;
-        font-size: 6em;
-        font-weight: bold;
-        .icon-conversejs {
-            font-size: 0.88em;
-        }
-    }
-}
-
 #converse-embedded-chat,
 #converse-embedded-chat,
 #conversejs {
 #conversejs {
+    height: 0;
+    width: 100vw;
     bottom: 0;
     bottom: 0;
     color: $text-color;
     color: $text-color;
     direction: ltr;
     direction: ltr;
     display: block;
     display: block;
     font-family: "Helvetica", "Arial", sans-serif;
     font-family: "Helvetica", "Arial", sans-serif;
     font-size: $font-size;
     font-size: $font-size;
-    height: $bottom-gutter-height;
     position: fixed;
     position: fixed;
     right: 0;
     right: 0;
-    width: auto;
     z-index: 1031; // One more than bootstrap navbar
     z-index: 1031; // One more than bootstrap navbar
-    @media screen and (max-height: $mobile-landscape-height) {
-        width: 100%;
-        width: 100vw;
+
+    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+    color: $subdued-color;
     }
     }
-    @media screen and (max-width: $mobile-portrait-length) {
-        width: 100%;
-        width: 100vw;
+    ::-moz-placeholder { /* Firefox 19+ */
+    color: $subdued-color;
+    }
+    :-ms-input-placeholder { /* IE 10+ */
+    color: $subdued-color;
+    }
+    :-moz-placeholder { /* Firefox 18- */
+    color: $subdued-color;
     }
     }
-
-     ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-        color: $subdued-color;
-     }
-     ::-moz-placeholder { /* Firefox 19+ */
-        color: $subdued-color;
-     }
-     :-ms-input-placeholder { /* IE 10+ */
-        color: $subdued-color;
-     }
-     :-moz-placeholder { /* Firefox 18- */
-        color: $subdued-color;
-     }
     ::placeholder {
     ::placeholder {
         color: $subdued-color;
         color: $subdued-color;
     }
     }
@@ -81,31 +54,33 @@ body {
     }
     }
 
 
      .sidebar {
      .sidebar {
-          display: none;
+        display: none;
         position: absolute;
         position: absolute;
         width: 50px;
         width: 50px;
         height: 100vh;
         height: 100vh;
         padding: 10px 0;
         padding: 10px 0;
-          background-color: $controlbox-head-color;
+        background-color: $controlbox-head-color;
+        color: white;
         text-align: center;
         text-align: center;
 
 
-          .chatbox-btn {
-               float: none;
+        .chatbox-btn {
+            float: none;
             margin: 0;
             margin: 0;
             font-size: 1.35em;
             font-size: 1.35em;
-               &.fa-vcard {
+            &.fa-vcard {
                 margin-top: 1em;
                 margin-top: 1em;
             }
             }
-          }
-          .bottom {
+        }
+        .bottom {
             position: absolute;
             position: absolute;
             bottom: 1em;
             bottom: 1em;
         }
         }
-     }
-
-     .badge {
-        padding: 0.25em 0.4em;
+    }
+    .badge {
+        padding: 0.4em;
         line-height: 1;
         line-height: 1;
+        font-weight: normal;
+        font-size: 90%;
     }
     }
 
 
     .fa {
     .fa {
@@ -387,10 +362,6 @@ body {
         }
         }
     }
     }
     #conversejs {
     #conversejs {
-        margin: 0;
-        width: 100%;
-        height: 100%;
-
         .chatbox  {
         .chatbox  {
             .chat-body {
             .chat-body {
                 border-radius: $chatbox-border-radius;
                 border-radius: $chatbox-border-radius;

+ 0 - 5
sass/_normalize.scss

@@ -1,9 +1,4 @@
 #conversejs {
 #conversejs {
-    @include box-sizing(border-box);
-    *, *:before, *:after {
-        @include box-sizing(border-box);
-    }
-
     @media screen and (max-width: $mobile-portrait-length) {
     @media screen and (max-width: $mobile-portrait-length) {
         margin: 0;
         margin: 0;
         right: 10px;
         right: 10px;

+ 1 - 1
sass/_roster.scss

@@ -5,7 +5,7 @@
     margin: 0;
     margin: 0;
     height: $roster-height;
     height: $roster-height;
     height: calc(~"100% - #{$controlbox-dropdown-height*2} - 20px");
     height: calc(~"100% - #{$controlbox-dropdown-height*2} - 20px");
-    padding: 0 0 2em 0;
+    padding: 0;
     overflow: hidden;
     overflow: hidden;
 
 
     &.no-contact-requests {
     &.no-contact-requests {

+ 8 - 0
sass/converse/_chatbox.scss

@@ -58,3 +58,11 @@
         }
         }
     }
     }
 }
 }
+
+@include media-breakpoint-down(sm) {
+	#conversejs:not(.fullscreen) {
+		.row {
+			flex-direction: column;
+		}
+	}
+}

+ 2 - 0
sass/converse/_controlbox.scss

@@ -1,5 +1,7 @@
 #conversejs:not(.fullscreen) {
 #conversejs:not(.fullscreen) {
     #controlbox {
     #controlbox {
+        order: -1;
+
         #converse-register {
         #converse-register {
             .button-cancel {
             .button-cancel {
                 font-size: 90%;
                 font-size: 90%;

+ 6 - 0
sass/converse/_core.scss

@@ -0,0 +1,6 @@
+#conversejs {
+    .row {
+        flex-direction: row-reverse;
+        flex-wrap: nowrap;
+    }
+}

+ 6 - 14
sass/converse/_minimized_chats.scss

@@ -3,16 +3,12 @@
         border-top-left-radius: $chatbox-border-radius;
         border-top-left-radius: $chatbox-border-radius;
         border-top-right-radius: $chatbox-border-radius;
         border-top-right-radius: $chatbox-border-radius;
         color: $inverse-link-color;
         color: $inverse-link-color;
-        float: right;
-        font-weight: bold;
         height: 100%;
         height: 100%;
-        margin: 0 $chat-gutter;
+        margin-right: $chat-gutter;
+        bottom: 3*$chat-gutter;
         padding: 0;
         padding: 0;
-        width: 130px;
 
 
         .badge {
         .badge {
-            position: absolute;
-            right: 122px;
             bottom: 8px;
             bottom: 8px;
             border: 1px solid $gray-color;
             border: 1px solid $gray-color;
         }
         }
@@ -21,22 +17,18 @@
             border-top-left-radius: $chatbox-border-radius;
             border-top-left-radius: $chatbox-border-radius;
             border-top-right-radius: $chatbox-border-radius;
             border-top-right-radius: $chatbox-border-radius;
             background-color: $link-color;
             background-color: $link-color;
-            color: white;
-            position: relative;
+            border: 1px solid white;
             padding: 10px 0 0 0;
             padding: 10px 0 0 0;
-            display: block;
-            width: 100%;
-            height: 100%;
             text-align: center;
             text-align: center;
+            color: white;
         }
         }
 
 
         .minimized-chats-flyout {
         .minimized-chats-flyout {
-            height: auto;
-            bottom: $bottom-gutter-height;
+            width: 100%;
+
             .chat-head {
             .chat-head {
                 padding: 0.3em;
                 padding: 0.3em;
                 border-radius: $chatbox-border-radius;
                 border-radius: $chatbox-border-radius;
-                width: $minimized-chats-width;
                 height: 35px;
                 height: 35px;
                 margin-bottom: 0.2em;
                 margin-bottom: 0.2em;
                 box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
                 box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);

+ 2 - 2
sass/converse/_variables.scss

@@ -87,7 +87,7 @@ $info-color: $dark-green !default;
 $button-border-radius: 5px !default;
 $button-border-radius: 5px !default;
 $chatbox-border-radius: 4px !default;
 $chatbox-border-radius: 4px !default;
 $bottom-gutter-height: 35px !default;
 $bottom-gutter-height: 35px !default;
-$chatbox-hover-height: 6px !default;
+$chatbox-hover-height: 3em !default;
 
 
 $mobile_landscape_height: 450px !default;
 $mobile_landscape_height: 450px !default;
 $mobile_portrait_length: 480px !default;
 $mobile_portrait_length: 480px !default;
@@ -111,7 +111,7 @@ $line-height-large:  20px !default;
 $controlbox-width: 200px !default;
 $controlbox-width: 200px !default;
 $chat-width: 200px !default;
 $chat-width: 200px !default;
 $chat-height: 450px !default;
 $chat-height: 450px !default;
-$chat-gutter: 0.5em !default;
+$chat-gutter: 1em !default;
 $minimized-chats-width: 130px !default;
 $minimized-chats-width: 130px !default;
 
 
 $mobile-chat-width: 100% !default;
 $mobile-chat-width: 100% !default;

+ 31 - 3
sass/converse/converse.scss

@@ -6,14 +6,42 @@
  * Licensed under the Mozilla Public License
  * Licensed under the Mozilla Public License
  */
  */
 
 
-#conversejs {
-    @import "bootstrap";
-}
+
 @import "bourbon";
 @import "bourbon";
 @import "variables";
 @import "variables";
+
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+
 @import "../fonts";
 @import "../fonts";
 @import "../normalize";
 @import "../normalize";
+#conversejs {
+    @import "bootstrap/scss/root";
+    @import "bootstrap/scss/reboot";
+    @import "bootstrap/scss/type";
+    @import "bootstrap/scss/images";
+    @import "bootstrap/scss/grid";
+    @import "bootstrap/scss/forms";
+    @import "bootstrap/scss/buttons";
+    @import "bootstrap/scss/transitions";
+    @import "bootstrap/scss/dropdown";
+    @import "bootstrap/scss/button-group";
+    @import "bootstrap/scss/input-group";
+    @import "bootstrap/scss/custom-forms";
+    @import "bootstrap/scss/card";
+    @import "bootstrap/scss/breadcrumb";
+    @import "bootstrap/scss/badge";
+    @import "bootstrap/scss/media";
+    @import "bootstrap/scss/list-group";
+    @import "bootstrap/scss/close";
+    @import "bootstrap/scss/modal";
+    @import "bootstrap/scss/tooltip";
+    @import "bootstrap/scss/popover";
+    @import "bootstrap/scss/utilities";
+}
 @import "../core";
 @import "../core";
+@import "core";
 @import "../chatbox";
 @import "../chatbox";
 @import "chatbox";
 @import "chatbox";
 @import "../controlbox";
 @import "../controlbox";

+ 13 - 0
sass/inverse/_chatbox.scss

@@ -85,3 +85,16 @@
         }
         }
     }
     }
 }
 }
+
+@media screen and (max-width: 767px) {
+    #conversejs.fullscreen  {
+        > .chatbox {
+            width: calc(100% - 50px);
+        }
+        .chatbox {
+            .row {
+                width: calc(100% - 50px);
+            }
+        }
+    }
+}

+ 0 - 2
sass/inverse/_controlbox.scss

@@ -1,8 +1,6 @@
 #conversejs.fullscreen {
 #conversejs.fullscreen {
 
 
     #controlbox {
     #controlbox {
-        width: 100%;
-        float: left;
         margin: 0;
         margin: 0;
 
 
         #login-dialog {
         #login-dialog {

+ 1 - 14
sass/inverse/_core.scss

@@ -1,7 +1,4 @@
 body {
 body {
-    width: 100%;
-    height: 100%;
-	height: 100vh;
     font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
     color: #ffffff;
     color: #ffffff;
     background-color: $global-background-color;
     background-color: $global-background-color;
@@ -38,8 +35,7 @@ body {
 }
 }
 
 
 #conversejs.fullscreen {
 #conversejs.fullscreen {
-    width: 100vw;
-    height: 100vh;
+    height: auto;
     bottom: 0;
     bottom: 0;
     left: 0;
     left: 0;
     right: 0;
     right: 0;
@@ -68,12 +64,3 @@ body {
         }
         }
     }
     }
 }
 }
-
-@media screen and (max-width: 767px) {
-    #conversejs.fullscreen {
-        background-color: white;
-        margin: 0;
-        width: 100%;
-        height: 100%;
-    }
-}

+ 29 - 1
sass/inverse/inverse.scss

@@ -6,11 +6,39 @@
  * Licensed under the Mozilla Public License
  * Licensed under the Mozilla Public License
  */
  */
 
 
-@import "bootstrap";
 @import "bourbon";
 @import "bourbon";
 @import "variables";
 @import "variables";
+
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+
 @import "../fonts";
 @import "../fonts";
 @import "../normalize";
 @import "../normalize";
+#conversejs {
+    @import "bootstrap/scss/root";
+    @import "bootstrap/scss/reboot";
+    @import "bootstrap/scss/type";
+    @import "bootstrap/scss/images";
+    @import "bootstrap/scss/grid";
+    @import "bootstrap/scss/forms";
+    @import "bootstrap/scss/buttons";
+    @import "bootstrap/scss/transitions";
+    @import "bootstrap/scss/dropdown";
+    @import "bootstrap/scss/button-group";
+    @import "bootstrap/scss/input-group";
+    @import "bootstrap/scss/custom-forms";
+    @import "bootstrap/scss/card";
+    @import "bootstrap/scss/breadcrumb";
+    @import "bootstrap/scss/badge";
+    @import "bootstrap/scss/media";
+    @import "bootstrap/scss/list-group";
+    @import "bootstrap/scss/close";
+    @import "bootstrap/scss/modal";
+    @import "bootstrap/scss/tooltip";
+    @import "bootstrap/scss/popover";
+    @import "bootstrap/scss/utilities";
+}
 @import "../core";
 @import "../core";
 @import "core";
 @import "core";
 @import "../chatbox";
 @import "../chatbox";

部分文件因为文件数量过多而无法显示