Replace `col-` classes with Sass mixins

css/converse.css

@@ -4460,7 +4460,8 @@ body.reset {
   font-family: "Helvetica", "Arial", sans-serif;
   font-size: 14px;
   position: fixed;
-  z-index: 1031; }
+  z-index: 1031;
+  margin-left: -15px; }
   #conversejs ::-webkit-input-placeholder {
     /* Chrome/Opera/Safari */
     color: #A8ABA1; }
@@ -5348,19 +5349,43 @@ body.reset {
     #conversejs:not(.fullscreen) .chat-head {
       border-top-left-radius: 0;
       border-top-right-radius: 0; } }
-#converse-embedded-chat .chatbox .chat-body .chat-message,
-#conversejs:not(.fullscreen) .chatbox .chat-body .chat-message {
-  padding: 0.3em;
-  line-height: 20px; }
-  #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
-  #conversejs:not(.fullscreen) .chatbox .chat-body .chat-message .chat-msg-author {
-    line-height: 20px; }
-  #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content,
-  #conversejs:not(.fullscreen) .chatbox .chat-body .chat-message .chat-msg-content {
+#converse-embedded-chat .chatbox,
+#conversejs:not(.fullscreen) .chatbox {
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px;
+  flex: 0 0 100%;
+  max-width: 100%; }
+  @media (min-width: 576px) {
+    #converse-embedded-chat .chatbox,
+    #conversejs:not(.fullscreen) .chatbox {
+      flex: 0 0 33.3333333333%;
+      max-width: 33.3333333333%; } }
+  @media (min-width: 768px) {
+    #converse-embedded-chat .chatbox,
+    #conversejs:not(.fullscreen) .chatbox {
+      flex: 0 0 25%;
+      max-width: 25%; } }
+  @media (min-width: 992px) {
+    #converse-embedded-chat .chatbox,
+    #conversejs:not(.fullscreen) .chatbox {
+      flex: 0 0 16.6666666667%;
+      max-width: 16.6666666667%; } }
+  #converse-embedded-chat .chatbox .chat-body .chat-message,
+  #conversejs:not(.fullscreen) .chatbox .chat-body .chat-message {
+    padding: 0.3em;
     line-height: 20px; }
-    #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione,
-    #conversejs:not(.fullscreen) .chatbox .chat-body .chat-message .chat-msg-content .emojione {
-      margin-bottom: -5px; }
+    #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
+    #conversejs:not(.fullscreen) .chatbox .chat-body .chat-message .chat-msg-author {
+      line-height: 20px; }
+    #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content,
+    #conversejs:not(.fullscreen) .chatbox .chat-body .chat-message .chat-msg-content {
+      line-height: 20px; }
+      #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione,
+      #conversejs:not(.fullscreen) .chatbox .chat-body .chat-message .chat-msg-content .emojione {
+        margin-bottom: -5px; }
 #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
 #conversejs:not(.fullscreen) .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
   width: 100%; }
@@ -6173,6 +6198,22 @@ body.reset {
     width: 100%;
     border: 1px solid #999; }
 
+#conversejs .chatbox.chatroom {
+  flex: 0 0 100%;
+  max-width: 100%; }
+  @media (min-width: 576px) {
+    #conversejs .chatbox.chatroom {
+      flex: 0 0 66.6666666667%;
+      max-width: 66.6666666667%; } }
+  @media (min-width: 768px) {
+    #conversejs .chatbox.chatroom {
+      flex: 0 0 50%;
+      max-width: 50%; } }
+  @media (min-width: 992px) {
+    #conversejs .chatbox.chatroom {
+      flex: 0 0 33.3333333333%;
+      max-width: 33.3333333333%; } }
+
 #conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
   background-color: #E7A151; }
 #conversejs .chatbox.headlines .chat-body {
@@ -6185,6 +6226,13 @@ body.reset {
   border-radius: 4px; }
 
 #conversejs:not(.fullscreen) #minimized-chats {
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px;
+  flex: 0 0 8.3333333333%;
+  max-width: 8.3333333333%;
   margin-bottom: -1em;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;

css/inverse.css

@@ -4460,7 +4460,8 @@ body.reset {
   font-family: "Helvetica", "Arial", sans-serif;
   font-size: 16px;
   position: fixed;
-  z-index: 1031; }
+  z-index: 1031;
+  margin-left: -15px; }
   #conversejs ::-webkit-input-placeholder {
     /* Chrome/Opera/Safari */
     color: #A8ABA1; }
@@ -5404,7 +5405,20 @@ body {
 #conversejs.fullscreen .chatbox {
   width: 100%;
   height: 100%;
-  margin: 0; }
+  margin: 0;
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  padding-right: 15px;
+  padding-left: 15px; }
+  @media (min-width: 768px) {
+    #conversejs.fullscreen .chatbox {
+      flex: 0 0 75%;
+      max-width: 75%; } }
+  @media (min-width: 1200px) {
+    #conversejs.fullscreen .chatbox {
+      flex: 0 0 75%;
+      max-width: 75%; } }
   #conversejs.fullscreen .chatbox .box-flyout {
     background-color: #3AA569;
     height: 100vh;
@@ -5770,6 +5784,14 @@ body {
     display: block; } }
 #conversejs.fullscreen #controlbox {
   margin: 0; }
+  @media (min-width: 768px) {
+    #conversejs.fullscreen #controlbox {
+      flex: 0 0 25%;
+      max-width: 25%; } }
+  @media (min-width: 1200px) {
+    #conversejs.fullscreen #controlbox {
+      flex: 0 0 16.6666666667%;
+      max-width: 16.6666666667%; } }
   #conversejs.fullscreen #controlbox .controlbox-pane {
     border-radius: 0; }
   #conversejs.fullscreen #controlbox .flyout {

mockup/chatbox.html

@@ -12,7 +12,7 @@
     <div id="conversejs" class="fullscreen">
         <div class="sidebar"></div>
         <div class="row no-gutters">
-            <div id="controlbox" class="chatbox col-xl-2 col-md-3">
+            <div id="controlbox" class="chatbox">
                 <div class="flyout box-flyout">
                     <div class="controlbox-panes">
                         <div class="controlbox-pane"></div>
@@ -20,7 +20,7 @@
                 </div>
             </div>
 
-            <div class="chatbox col-xl-10 col-md-9" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
+            <div class="chatbox" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
                 <div class="flyout box-flyout">
                     <div class="chat-head chat-head-chatbox row no-gutters">
                         <div class="col">

mockup/chatroom.html

@@ -12,7 +12,7 @@
     <div id="conversejs" class="fullscreen">
         <div class="sidebar"></div>
         <div class="row no-gutters">
-            <div id="controlbox" class="chatbox col-xl-2 col-md-3">
+            <div id="controlbox" class="chatbox">
                 <div class="flyout box-flyout">
                     <div class="controlbox-panes">
                         <div class="controlbox-pane"></div>
@@ -20,7 +20,7 @@
                 </div>
             </div>
 
-            <div class="chatbox chatroom col-xl-10 col-md-9" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
+            <div class="chatbox chatroom" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
                 <div class="flyout box-flyout">
                     <div class="chat-head chat-head-chatroom row no-gutters">
                         <div class="col">

mockup/converse.html

@@ -15,7 +15,7 @@
 
      <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 id="controlbox" class="chatbox">
                 <div class="flyout box-flyout">
                     <div class="controlbox-panes">
                         <div class="sidebar"></div>
@@ -24,7 +24,7 @@
                 </div>
             </div>
 
-            <div class="chatbox col col-lg-2 col-md-3 col-sm-4 col-sx-12 w-100" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
+            <div class="chatbox" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
                 <div class="flyout box-flyout">
 
                     <div class="chat-head chat-head-chatbox row no-gutters">
@@ -118,7 +118,7 @@
                 </div>
             </div>
 
-            <div class="chatbox chatroom col col-lg-4 col-md-6 col-sm-8 col-xs-12 w-100" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
+            <div class="chatbox chatroom" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
                 <div class="flyout box-flyout">
                     <div class="chat-head chat-head-chatroom row no-gutters">
                         <div class="col-sm-8 col-lg-10">
@@ -217,7 +217,7 @@
                 </div>
             </div>
 
-            <div id="minimized-chats" class="col col-1 w-100">
+            <div id="minimized-chats">
                 <div class="flyout minimized-chats-flyout row">
                     <a id="toggle-minimized-chats" href="#" class="row no-gutters">
                         <span class="badge badge-light">322</span> Minimized
@@ -227,33 +227,33 @@
                             <span class="badge badge-light">42</span>
                             Restricted Chatroom
                         </a>
-                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
+                        <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
                     </div>
                     <div class="chat-head chat-head-chatbox row no-gutters">
                         <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
                             <span class="badge badge-light">4</span>
                             JC Brand
                         </a>
-                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
+                        <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
                     </div>
                     <div class="chat-head chat-head-chatroom row no-gutters">
                         <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 col col-1"></a>
+                        <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
                     </div>
                     <div class="chat-head chat-head-chatbox row no-gutters">
                         <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 col col-1"></a>
+                        <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
                     </div>
                     <div class="chat-head chat-head-chatbox row no-gutters">
                         <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
                             <span class="badge badge-light">842</span>
                             Asmaa Haakman
                         </a>
-                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
+                        <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
                     </div>
                     <div class="chat-head chat-head-chatbox row no-gutters">
                         <a href="#" class="restore-chat w-100 align-self-center">Lena Grunewald</a>
-                        <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
+                        <a class="chatbox-btn close-chatbox-button fa fa-times"></a>
                     </div>
                 </div>
             </div>

sass/_core.scss

@@ -53,6 +53,8 @@ body.reset {
     position: fixed;
     z-index: 1031; // One more than bootstrap navbar
 
+    margin-left: -15px; // XXX: why is this necessary?
+
     ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
         color: $subdued-color;
     }

sass/converse/_chatbox.scss

@@ -13,6 +13,20 @@
         }
     }
     .chatbox {
+        @include make-col-ready();
+        @include media-breakpoint-up(xs) {
+            @include make-col(12);
+        }
+        @include media-breakpoint-up(sm) {
+            @include make-col(4);
+        }
+        @include media-breakpoint-up(md) {
+            @include make-col(3);
+        }
+        @include media-breakpoint-up(lg) {
+            @include make-col(2);
+        }
+
         .chat-body {
             .chat-message {
                 padding: 0.3em;

sass/converse/_minimized_chats.scss

 #conversejs:not(.fullscreen) {
     #minimized-chats {
+        @include make-col-ready();
+        @include make-col(1);
+
         margin-bottom: -2*$chat-gutter;
         border-top-left-radius: $chatbox-border-radius;
         border-top-right-radius: $chatbox-border-radius;

sass/converse/converse.scss

@@ -48,6 +48,7 @@
 @import "../roomslist";
 @import "../roster";
 @import "../chatrooms";
+@import "chatrooms";
 @import "../headline";
 @import "minimized_chats";
 @import "../bookmarks";

sass/inverse/_chatbox.scss

@@ -27,6 +27,15 @@
         width: 100%;
         height: 100%;
         margin: 0;
+
+        @include make-col-ready();
+        @include media-breakpoint-up(md) {
+            @include make-col(9);
+        }
+        @include media-breakpoint-up(xl) {
+            @include make-col(9);
+        }
+
         .box-flyout {
             background-color: $chat-head-color;
             height: 100vh;

sass/inverse/_chatrooms.scss

@@ -11,7 +11,6 @@
     }
 
     .chatroom {
-
         .box-flyout {
             background-color: $chatroom-head-color;
             border: $flyout-padding solid $chatroom-head-color;

sass/inverse/_controlbox.scss

 #conversejs.fullscreen {
     #controlbox {
+        @include media-breakpoint-up(md) {
+            @include make-col(3);
+        }
+        @include media-breakpoint-up(xl) {
+            @include make-col(2);
+        }
+
         margin: 0;
 
         .controlbox-pane {

src/converse-chatview.js

@@ -305,7 +305,6 @@
                 },
 
                 render () {
-                    this.setClasses();
                     this.el.setAttribute('id', this.model.get('box_id'));
                     this.el.innerHTML = tpl_chatbox(
                         _.extend(this.model.toJSON(), {
@@ -318,20 +317,6 @@
                     return this;
                 },
 
-                setClasses () {
-                    if (_converse.view_mode === 'fullscreen') {
-                        this.el.classList.add('col-xl-10');
-                        this.el.classList.add('col-md-9');
-                    } else {
-                        this.el.classList.add('col');
-                        this.el.classList.add('col-lg-2');
-                        this.el.classList.add('col-md-3');
-                        this.el.classList.add('col-sm-4');
-                        this.el.classList.add('col-sx-12');
-                        this.el.classList.add('w-100');
-                    }
-                },
-
                 renderToolbar (toolbar, options) {
                     if (!_converse.show_toolbar) {
                         return this;

src/converse-muc-views.js

@@ -436,7 +436,6 @@
                 },
 
                 render () {
-                    this.setClasses();
                     this.el.setAttribute('id', this.model.get('box_id'));
                     this.el.innerHTML = tpl_chatroom();
                     this.renderHeading();
@@ -447,20 +446,6 @@
                     return this;
                 },
 
-                setClasses () {
-                    if (_converse.view_mode === 'fullscreen') {
-                        this.el.classList.add('col-xl-10');
-                        this.el.classList.add('col-md-9');
-                    } else {
-                        this.el.classList.add('col');
-                        this.el.classList.add('col-lg-4');
-                        this.el.classList.add('col-md-6');
-                        this.el.classList.add('col-sm-8');
-                        this.el.classList.add('col-sx-12');
-                        this.el.classList.add('w-100');
-                    }
-                },
-
                 renderHeading () {
                     /* Render the heading UI of the chat room. */
                     this.el.querySelector('.chat-head-chatroom').innerHTML = this.generateHeadingHTML();