Sass and CSS fixes for landscape mobile views.

css/converse.css

@@ -1006,6 +1006,12 @@
       right: 10px;
       left: 10px;
       bottom: 5px; } }
+  @media screen and (max-height: 450px) {
+    #conversejs {
+      margin: 0;
+      right: 10px;
+      left: 10px;
+      bottom: 5px; } }
   #conversejs ul li {
     height: auto; }
   #conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
@@ -1051,7 +1057,11 @@
   left: 0;
   right: 0;
   width: auto;
-  z-index: 30; }
+  z-index: 1031; }
+  @media screen and (max-height: 450px) {
+    #conversejs {
+      width: 100%;
+      width: 100vw; } }
   @media screen and (max-width: 480px) {
     #conversejs {
       width: 100%;
@@ -1202,6 +1212,18 @@
   bottom: 6px;
   display: block;
   position: absolute; }
+  @media screen and (max-height: 450px) {
+    #conversejs .flyout {
+      border-radius: 0; } }
+  @media screen and (max-width: 480px) {
+    #conversejs .flyout {
+      border-radius: 0; } }
+  @media screen and (max-height: 450px) {
+    #conversejs .flyout {
+      bottom: 0; } }
+  @media screen and (max-width: 480px) {
+    #conversejs .flyout {
+      bottom: 0; } }
 #conversejs .chat-head {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
@@ -1211,6 +1233,14 @@
   margin: 0;
   padding: 5px;
   position: relative; }
+  @media screen and (max-height: 450px) {
+    #conversejs .chat-head {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0; } }
+  @media screen and (max-width: 480px) {
+    #conversejs .chat-head {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0; } }
   #conversejs .chat-head .avatar {
     margin-right: 0.5em;
     border-radius: 50%;
@@ -1249,6 +1279,10 @@
   height: 35px;
   margin: 0 0.5em;
   width: 200px; }
+  @media screen and (max-height: 450px) {
+    #conversejs .chatbox {
+      margin: 0;
+      width: 100%; } }
   @media screen and (max-width: 480px) {
     #conversejs .chatbox {
       margin: 0;
@@ -1261,11 +1295,16 @@
     min-width: 200px;
     width: 200px;
     z-index: 1; }
+    @media screen and (max-height: 450px) {
+      #conversejs .chatbox .box-flyout {
+        height: 400px;
+        width: 100%;
+        height: 100vh; } }
     @media screen and (max-width: 480px) {
       #conversejs .chatbox .box-flyout {
         height: 400px;
         width: 100%;
-        height: 99vh; } }
+        height: 100vh; } }
   #conversejs .chatbox .chat-title {
     color: white;
     line-height: 15px;
@@ -1284,6 +1323,14 @@
     height: 289px;
     height: -webkit-calc(100% - 55px);
     height: calc(100% - 55px); }
+    @media screen and (max-height: 450px) {
+      #conversejs .chatbox .chat-body {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0; } }
+    @media screen and (max-width: 480px) {
+      #conversejs .chatbox .chat-body {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0; } }
     #conversejs .chatbox .chat-body p {
       color: #818479;
       font-size: 14px;
@@ -1355,6 +1402,9 @@
     position: relative;
     height: 95px;
     min-width: 200px; }
+    @media screen and (max-height: 450px) {
+      #conversejs .chatbox form.sendXMPPMessage {
+        width: 100%; } }
     @media screen and (max-width: 480px) {
       #conversejs .chatbox form.sendXMPPMessage {
         width: 100%; } }
@@ -1467,6 +1517,9 @@
   @media screen and (max-width: 480px) {
     #conversejs #controlbox {
       margin: 0; } }
+  @media screen and (max-height: 450px) {
+    #conversejs #controlbox {
+      margin: 0; } }
   #conversejs #controlbox .controlbox-head {
     background-color: #577BDD;
     border-top-left-radius: 4px;
@@ -1475,6 +1528,14 @@
     height: 55px;
     margin: 0;
     padding: 6px 6px 6px 0; }
+    @media screen and (max-height: 450px) {
+      #conversejs #controlbox .controlbox-head {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0; } }
+    @media screen and (max-width: 480px) {
+      #conversejs #controlbox .controlbox-head {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0; } }
   #conversejs #controlbox form.search-xmpp-contact {
     margin: 0;
     padding-left: 5px;
@@ -1881,17 +1942,25 @@
     margin-top: 0.3em; }
 #conversejs .chatroom {
   width: 300px; }
+  @media screen and (max-height: 450px) {
+    #conversejs .chatroom {
+      width: 100%; } }
   @media screen and (max-width: 480px) {
     #conversejs .chatroom {
       width: 100%; } }
   #conversejs .chatroom .box-flyout {
     min-width: 300px;
     width: 300px; }
+    @media screen and (max-height: 450px) {
+      #conversejs .chatroom .box-flyout {
+        height: 400px;
+        width: 100%;
+        height: 100vh; } }
     @media screen and (max-width: 480px) {
       #conversejs .chatroom .box-flyout {
         height: 400px;
         width: 100%;
-        height: 99vh; } }
+        height: 100vh; } }
     #conversejs .chatroom .box-flyout .chatroom-body {
       height: 289px;
       border-bottom-left-radius: 4px;

docs/CHANGES.md

@@ -2,6 +2,7 @@
 
 ## 1.0.0 (Unreleased)
 
+- Better Sass/CSS for responsive/mobile views. [jcbrand]
 - Split converse.js up into different plugin modules. [jcbrand]
 - Add support for messages with type `headline`, often used for notifications
   from the server. [jcbrand]

sass/_chatbox.scss

@@ -1,13 +1,33 @@
 #conversejs {
     .flyout {
         border-radius: $chatbox-border-radius;
+        @media screen and (max-height: $mobile-landscape-height) {
+            border-radius: 0;
+        }
+        @media screen and (max-width: $mobile-portrait-length) {
+            border-radius: 0;
+        }
         bottom: $chatbox-hover-height;
         display: block;
         position: absolute;
+        @media screen and (max-height: $mobile-landscape-height) {
+            bottom: 0;
+        }
+        @media screen and (max-width: $mobile-portrait-length) {
+            bottom: 0;
+        }
     }
     .chat-head {
         border-top-left-radius: $chatbox-border-radius;
         border-top-right-radius: $chatbox-border-radius;
+        @media screen and (max-height: $mobile-landscape-height) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
+        @media screen and (max-width: $mobile-portrait-length) {
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+        }
         color: #ffffff;
         font-size: 100%;
         height: $chat-head-height;
@@ -58,7 +78,11 @@
         height: $bottom-gutter-height;
         margin: 0 $chat-gutter;
         width: $chat-width;
-        @media screen and (max-width: $mobile-landscape-length) {
+        @media screen and (max-height: $mobile-landscape-height) {
+            margin: 0;
+            width: $mobile-chat-width;
+        }
+        @media screen and (max-width: $mobile-portrait-length) {
             margin: 0;
             width: $mobile-chat-width;
         }
@@ -70,10 +94,15 @@
             min-width: $chat-width;
             width: $chat-width;
             z-index: 1;
-            @media screen and (max-width: $mobile-landscape-length) {
+            @media screen and (max-height: $mobile-landscape-height) {
+                height: $mobile-chat-height;
+                width: $mobile-chat-width;
+                height: 100vh;
+            }
+            @media screen and (max-width: $mobile-portrait-length) {
                 height: $mobile-chat-height;
                 width: $mobile-chat-width;
-                height: 99vh;
+                height: 100vh;
             }
         }
         .chat-title {
@@ -92,6 +121,14 @@
             background-color: white;
             border-bottom-left-radius: $chatbox-border-radius;
             border-bottom-right-radius: $chatbox-border-radius;
+            @media screen and (max-height: $mobile-landscape-height) {
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+            @media screen and (max-width: $mobile-portrait-length) {
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+            }
             border-top: 0;
             height: 289px;
             @include calc(height, '100% - #{$chat-head-height}');
@@ -184,7 +221,10 @@
             position: relative;
             height: #{$chat-textarea-height + $toolbar-height};
             min-width: $chat-width;
-            @media screen and (max-width: $mobile-landscape-length) {
+            @media screen and (max-height: $mobile-landscape-height) {
+                width: 100%;
+            }
+            @media screen and (max-width: $mobile-portrait-length) {
                 width: 100%;
             }
             .chat-textarea {

sass/_chatrooms.scss

@@ -17,16 +17,24 @@
 
     .chatroom {
         width: $chatroom-width;
-        @media screen and (max-width: $mobile-landscape-length) {
+        @media screen and (max-height: $mobile-landscape-height){
+            width: $mobile-chat-width;
+        }
+        @media screen and (max-width: $mobile-portrait-length) {
             width: $mobile-chat-width;
         }
         .box-flyout {
             min-width: $chatroom-width;
             width: $chatroom-width;
-            @media screen and (max-width: $mobile-landscape-length) {
+            @media screen and (max-height: $mobile-landscape-height) {
+                height: $mobile-chat-height;
+                width: $mobile-chat-width;
+                height: 100vh;
+            }
+            @media screen and (max-width: $mobile-portrait-length) {
                 height: $mobile-chat-height;
                 width: $mobile-chat-width;
-                height: 99vh;
+                height: 100vh;
             }
             .chatroom-body {
                 height: 289px;

sass/_controlbox.scss

@@ -2,13 +2,24 @@
     #controlbox {
         display: none;
         margin-right: 2*$chat-gutter;
-        @media screen and (max-width: $mobile-landscape-length) {
+        @media screen and (max-width: $mobile-portrait-length) {
+            margin: 0;
+        }
+        @media screen and (max-height: $mobile-landscape-height) {
             margin: 0;
         }
         .controlbox-head {
             background-color: $controlbox-head-color;
             border-top-left-radius: $chatbox-border-radius;
             border-top-right-radius: $chatbox-border-radius;
+            @media screen and (max-height: $mobile-landscape-height) {
+                border-top-left-radius: 0;
+                border-top-right-radius: 0;
+            }
+            @media screen and (max-width: $mobile-portrait-length) {
+                border-top-left-radius: 0;
+                border-top-right-radius: 0;
+            }
             color: $chat-head-inverse-text-color;
             height: $chat-head-height;
             margin: 0;

sass/_core.scss

@@ -9,8 +9,12 @@
     left: 0;
     right: 0;
     width: auto;
-    z-index: 30;
-    @media screen and (max-width: $mobile-landscape-length) {
+    z-index: 1031; // One more than bootstrap navbar
+    @media screen and (max-height: $mobile-landscape-height) {
+        width: 100%;
+        width: 100vw;
+    }
+    @media screen and (max-width: $mobile-portrait-length) {
         width: 100%;
         width: 100vw;
     }

sass/_normalize.scss

@@ -8,7 +8,13 @@
         @include box-sizing(border-box);
     }
 
-    @media screen and (max-width: $mobile-landscape-length) {
+    @media screen and (max-width: $mobile-portrait-length) {
+        margin: 0;
+        right: 10px;
+        left: 10px;
+        bottom: 5px;
+    }
+    @media screen and (max-height: $mobile-landscape-height) {
         margin: 0;
         right: 10px;
         left: 10px;

sass/_variables.scss

@@ -42,7 +42,8 @@ $chatbox-border-radius: 4px !default;
 $bottom-gutter-height: 35px !default;
 $chatbox-hover-height: 6px !default;
 
-$mobile_landscape_length: 480px !default;
+$mobile_landscape_height: 450px !default;
+$mobile_portrait_length: 480px !default;
 
 $font-size: 14px !default;
 $legend-font-size: 16px !default;