diff --git a/css/converse.css b/css/converse.css index b8cf415c2..c85ec403d 100644 --- a/css/converse.css +++ b/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; diff --git a/docs/CHANGES.md b/docs/CHANGES.md index b5f42f2cc..154deb535 100755 --- a/docs/CHANGES.md +++ b/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] diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss index 041c9669b..73edbb152 100644 --- a/sass/_chatbox.scss +++ b/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: 99vh; + height: 100vh; + } + @media screen and (max-width: $mobile-portrait-length) { + height: $mobile-chat-height; + width: $mobile-chat-width; + 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 { diff --git a/sass/_chatrooms.scss b/sass/_chatrooms.scss index d5d35bd34..e6136b66d 100644 --- a/sass/_chatrooms.scss +++ b/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: 99vh; + height: 100vh; + } + @media screen and (max-width: $mobile-portrait-length) { + height: $mobile-chat-height; + width: $mobile-chat-width; + height: 100vh; } .chatroom-body { height: 289px; diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss index 84f7dbab6..33770c3a9 100644 --- a/sass/_controlbox.scss +++ b/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; diff --git a/sass/_core.scss b/sass/_core.scss index effd71cb4..844a27dfc 100644 --- a/sass/_core.scss +++ b/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; } diff --git a/sass/_normalize.scss b/sass/_normalize.scss index 46839437f..f760e7f04 100644 --- a/sass/_normalize.scss +++ b/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; diff --git a/sass/_variables.scss b/sass/_variables.scss index 8fdc19de5..b92edd277 100644 --- a/sass/_variables.scss +++ b/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;