Fix CSS for minimized chats (broken after recent refactoring)

css/converse.css

@@ -1215,6 +1215,41 @@
     margin: 0;
     padding: 0; }
 
+#conversejs .flyout {
+  border-radius: 4px;
+  bottom: 6px;
+  display: block;
+  position: absolute; }
+#conversejs .chat-head {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  color: #ffffff;
+  font-size: 100%;
+  height: 44px;
+  margin: 0;
+  padding: 5px;
+  position: relative; }
+  #conversejs .chat-head .avatar {
+    float: left; }
+  #conversejs .chat-head.chat-head-chatbox {
+    background-color: #436F64; }
+#conversejs .chatbox-btn {
+  border-radius: 5px;
+  border: 1px solid #888;
+  color: white;
+  cursor: pointer;
+  display: inline-block;
+  float: right;
+  font-size: 10px;
+  margin: 0 0 0 3px;
+  padding-bottom: 4px;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 4px;
+  text-decoration: none; }
+  #conversejs .chatbox-btn:active {
+    position: relative;
+    top: 1px; }
 #conversejs .chatbox {
   display: block;
   float: right;
@@ -1225,11 +1260,6 @@
     #conversejs .chatbox {
       margin: 0;
       width: 100%; } }
-  #conversejs .chatbox .flyout {
-    border-radius: 4px;
-    bottom: 6px;
-    display: block;
-    position: absolute; }
   #conversejs .chatbox .box-flyout {
     box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
     height: 450px;
@@ -1241,19 +1271,6 @@
       #conversejs .chatbox .box-flyout {
         height: 400px;
         width: 100%; } }
-  #conversejs .chatbox .chat-head {
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    color: #ffffff;
-    font-size: 100%;
-    height: 44px;
-    margin: 0;
-    padding: 5px;
-    position: relative; }
-    #conversejs .chatbox .chat-head .avatar {
-      float: left; }
-  #conversejs .chatbox .chat-head-chatbox {
-    background-color: #436F64; }
   #conversejs .chatbox .chat-title a {
     color: white;
     width: 100%;
@@ -1443,23 +1460,6 @@
       height: 15px;
       top: 0;
       left: 0; }
-  #conversejs .chatbox .chatbox-btn {
-    border-radius: 5px;
-    border: 1px solid #888;
-    color: white;
-    cursor: pointer;
-    display: inline-block;
-    float: right;
-    font-size: 10px;
-    margin: 0 0 0 3px;
-    padding-bottom: 4px;
-    padding-left: 4px;
-    padding-right: 4px;
-    padding-top: 4px;
-    text-decoration: none; }
-    #conversejs .chatbox .chatbox-btn:active {
-      position: relative;
-      top: 1px; }
 
 #conversejs #controlbox {
   display: none; }
@@ -1863,6 +1863,8 @@
     width: 69%;
     padding: 0; }
 
+#conversejs .chat-head-chatroom {
+  background-color: #346121; }
 #conversejs .chatroom {
   width: 300px; }
   @media screen and (max-width: 480px) {
@@ -1934,8 +1936,6 @@
         height: calc(100% - 44px);
         overflow-y: auto;
         position: absolute; }
-  #conversejs .chatroom .chat-head-chatroom {
-    background-color: #346121; }
   #conversejs .chatroom .chat-textarea {
     border-bottom-right-radius: 0; }
   #conversejs .chatroom .invited-contact {
@@ -1959,7 +1959,8 @@
   #conversejs #minimized-chats #toggle-minimized-chats {
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
-    background-color: ivory;
+    background-color: #436F64;
+    color: white;
     position: relative;
     padding: 10px 0 0 0;
     display: block;
@@ -1968,14 +1969,14 @@
     text-align: center; }
   #conversejs #minimized-chats .minimized-chats-flyout {
     height: auto;
-    width: 130px;
     bottom: 35px; }
-    #conversejs #minimized-chats .minimized-chats-flyout .chat-head-chatroom,
     #conversejs #minimized-chats .minimized-chats-flyout .chat-head {
+      padding: 0.3em;
       border-radius: 4px;
       width: 130px;
       height: 35px;
-      margin-bottom: 0.2em; }
+      margin-bottom: 0.2em;
+      box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); }
     #conversejs #minimized-chats .minimized-chats-flyout.minimized {
       height: auto; }
   #conversejs #minimized-chats .unread-message-count,
@@ -1994,19 +1995,5 @@
     position: absolute;
     right: 116px;
     bottom: 10px; }
-  #conversejs #minimized-chats .box-flyout {
-    position: absolute;
-    display: block;
-    height: auto;
-    bottom: 35px;
-    margin-left: 0; }
-    #conversejs #minimized-chats .box-flyout .chat-head {
-      font-size: 100%;
-      border-radius: 4px;
-      padding: 3px 0 0 5px;
-      margin: 0 0 1px 0;
-      box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
-      height: 24px;
-      width: 130px; }
 
 /*# sourceMappingURL=converse.css.map */

mockup/minimal.html

@@ -9,7 +9,7 @@
     <link type="text/css" href="../css/converse.css" rel="stylesheet" media="screen" />
     <script src="../components/jquery/dist/jquery.min.js"></script>
 </head>
-<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
+<body id="page-top" data-spy="scroll" data-target=".navbar-custom" style="background-color: white">
 
 <!-- HEADER -->
 <div id="header_wrap" class="outer">
@@ -24,27 +24,6 @@
         <span class="conn-feedback">Toggle Chat</span>
         <span id="online-count">(0)</span>
     </a>
-
-    <div id="controlbox" class="chatbox" style="display: none;">
-        <div class="flyout box-flyout">
-            <div class="dragresize"></div>
-            <div class="chat-head controlbox-head">
-                <ul id="controlbox-tabs">
-                    <li><a class="current" href="#login">Sign in</a></li>
-                </ul>
-                <a class="close-chatbox-button icon-close"></a>
-            </div>
-            <div id="login-dialog">
-                <form id="converse-login">
-                    <label>XMPP/Jabber Username:</label><input type="text" id="jid">
-                    <label>Password:</label><input type="password" id="password">
-                    <input class="login-submit" type="submit" value="Log In">
-                </form>
-            </div>
-        </div>
-    </div>
-
-
     <div id="minimized-chats" style="display: block">
         <a id="toggle-minimized-chats" href="#">
             <span>Minimized <span id="minimized-count">(0)</span>
@@ -52,7 +31,7 @@
         </a>
         <div class="flyout minimized-chats-flyout">
             <div class="chat-head chat-head-chatroom">
-                <a class="close-chatbox-button icon-close"></a>
+                <a class="chatbox-btn close-chatbox-button icon-close"></a>
                 <a class="chat-head-message-count" href="#">3</a>
                 <div class="chat-title">
                     <a href="#" class="restore-chat" title="Click to maximize this chat">
@@ -61,7 +40,7 @@
                 </div>
             </div>
             <div class="chat-head chat-head-chatbox">
-                <a class="close-chatbox-button icon-close"></a>
+                <a class="chatbox-btn close-chatbox-button icon-close"></a>
                 <a class="chat-head-message-count" href="#">42</a>
                 <div class="chat-title">
                     <a href="#" class="restore-chat" title="Click to maximize this chat">
@@ -70,14 +49,15 @@
                 </div>
             </div>
             <div class="chat-head chat-head-chatroom">
-                <a class="close-chatbox-button icon-close"></a>
+                <a class="chatbox-btn close-chatbox-button icon-close"></a>
                 <div class="chat-title">
                     <a href="#" class="restore-chat" title="Click to maximize this chat">
                         My Chatroom
                     </a>
                 </div>
             </div>
-            <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+            <div class="chat-head chat-head-chatbox">
+                <a class="chatbox-btn close-chatbox-button icon-close"></a>
                 <div class="chat-title">
                     <a href="#" class="restore-chat" title="Click to maximize this chat">
                         Annegreet Gomez
@@ -85,7 +65,7 @@
                 </div>
             </div>
             <div class="chat-head chat-head-chatbox">
-                <a class="close-chatbox-button icon-close"></a>
+                <a class="chatbox-btn close-chatbox-button icon-close"></a>
                 <a class="chat-head-message-count" href="#">842</a>
                 <div class="chat-title">
                     <a href="#" class="restore-chat" title="Click to maximize this chat">
@@ -93,21 +73,24 @@
                     </a>
                 </div>
             </div>
-            <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+            <div class="chat-head chat-head-chatbox">
+                <a class="chatbox-btn close-chatbox-button icon-close"></a>
                 <div class="chat-title">
                     <a href="#" class="restore-chat" title="Click to maximize this chat">
                         Candice van der Knijff
                     </a>
                 </div>
             </div>
-            <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+            <div class="chat-head chat-head-chatbox">
+                <a class="chatbox-btn close-chatbox-button icon-close"></a>
                 <div class="chat-title">
                     <a href="#" class="restore-chat" title="Click to maximize this chat">
                         Laura Grunewald
                     </a>
                 </div>
             </div>
-            <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+            <div class="chat-head chat-head-chatbox">
+                <a class="chatbox-btn close-chatbox-button icon-close"></a>
                 <div class="chat-title">
                     <a href="#" class="restore-chat">
                         Lena Grunewald

sass/_chatbox.scss

@@ -1,4 +1,45 @@
 #conversejs {
+    .flyout {
+        border-radius: $chatbox-border-radius;
+        bottom: $chatbox-hover-height;
+        display: block;
+        position: absolute;
+    }
+    .chat-head {
+        border-top-left-radius: $chatbox-border-radius;
+        border-top-right-radius: $chatbox-border-radius;
+        color: #ffffff;
+        font-size: 100%;
+        height: $chat-head-height;
+        margin: 0;
+        padding: 5px;
+        position: relative;
+        .avatar {
+            float: left;
+        }
+        &.chat-head-chatbox {
+            background-color: $chat-head-color;
+        }
+    }
+    .chatbox-btn {
+        border-radius: 5px;
+        border: 1px solid #888;
+        color: white;
+        cursor: pointer;
+        display: inline-block;
+        float: right;
+        font-size: $box-close-font-size;
+        margin: 0 0 0 3px;
+        padding-bottom: $box-close-button-padding-bottom;
+        padding-left: $box-close-button-padding-left;
+        padding-right: $box-close-button-padding-right;
+        padding-top: $box-close-button-padding-top;
+        text-decoration: none;
+        &:active {
+            position: relative;
+            top: 1px;
+        }
+    }
     .chatbox {
         display: block;
         float: right;
@@ -9,12 +50,6 @@
             margin: 0;
             width: $mobile-chat-width;
         }
-        .flyout {
-            border-radius: $chatbox-border-radius;
-            bottom: $chatbox-hover-height;
-            display: block;
-            position: absolute;
-        }
         .box-flyout {
             box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
             height: $chat-height;
@@ -27,23 +62,6 @@
                 width: $mobile-chat-width;
             }
         }
-
-        .chat-head {
-            border-top-left-radius: $chatbox-border-radius;
-            border-top-right-radius: $chatbox-border-radius;
-            color: #ffffff;
-            font-size: 100%;
-            height: $chat-head-height;
-            margin: 0;
-            padding: 5px;
-            position: relative;
-            .avatar {
-                float: left;
-            }
-        }
-        .chat-head-chatbox {
-            background-color: $chat-head-color;
-        }
         .chat-title {
             a {
                 color: $chat-head-text-color;
@@ -282,25 +300,6 @@
                 left: 0;
             }
         }
-        .chatbox-btn {
-            border-radius: 5px;
-            border: 1px solid #888;
-            color: white;
-            cursor: pointer;
-            display: inline-block;
-            float: right;
-            font-size: $box-close-font-size;
-            margin: 0 0 0 3px;
-            padding-bottom: $box-close-button-padding-bottom;
-            padding-left: $box-close-button-padding-left;
-            padding-right: $box-close-button-padding-right;
-            padding-top: $box-close-button-padding-top;
-            text-decoration: none;
-            &:active {
-                position: relative;
-                top: 1px;
-            }
-        }
     }
 }
 

sass/_chatrooms.scss

@@ -1,4 +1,8 @@
 #conversejs {
+    .chat-head-chatroom {
+        background-color: $chatroom-head-color;
+    }
+
     .chatroom {
         width: $chatroom-width;
         @media screen and (max-width: $mobile-landscape-length) {
@@ -82,10 +86,6 @@
             }
         }
 
-        .chat-head-chatroom {
-            background-color: $chatroom-head-color;
-        }
-
         .chat-textarea {
             border-bottom-right-radius: 0;
         }

sass/_minimized_chats.scss

@@ -14,7 +14,8 @@
         #toggle-minimized-chats {
             border-top-left-radius: $chatbox-border-radius;
             border-top-right-radius: $chatbox-border-radius;
-            background-color: ivory;
+            background-color: $link-color;
+            color: white;
             position: relative;
             padding: 10px 0 0 0;
             display: block;
@@ -25,14 +26,14 @@
 
         .minimized-chats-flyout {
             height: auto;
-            width: $minimized-chats-width;
             bottom: $bottom-gutter-height;
-            .chat-head-chatroom,
             .chat-head {
+                padding: 0.3em;
                 border-radius: $chatbox-border-radius;
                 width: $minimized-chats-width;
                 height: 35px;
                 margin-bottom: 0.2em;
+                box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
             }
             &.minimized {
                 height: auto;
@@ -54,23 +55,5 @@
             right: 116px;
             bottom: 10px;
         }
-
-        .box-flyout {
-            position: absolute;
-            display: block;
-            height: auto;
-            bottom: $bottom-gutter-height;
-            margin-left: 0;
-
-            .chat-head {
-                font-size: 100%;
-                border-radius: $chatbox-border-radius;
-                padding: 3px 0 0 5px;
-                margin: 0 0 1px 0;
-                box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
-                height: 24px;
-                width: 130px;
-            }
-        }
     }
 }

src/templates/trimmed_chat.html

@@ -1,4 +1,4 @@
-<a class="close-chatbox-button icon-close"></a>
+<a class="chatbox-btn close-chatbox-button icon-close"></a>
 <a class="chat-head-message-count" 
     {[ if (!num_unread) { ]} style="display: none" {[ } ]}
     href="#">{{num_unread}}</a>