Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Sass and CSS fixes for landscape mobile views.

Browse Source
This commit is contained in:
JC Brand 2016-04-01 10:53:15 +00:00
parent 9c78883b2f
commit 332a0d920d
8 changed files with 155 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
css/converse.css
View File

@ -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;

1
docs/CHANGES.md
View File

@ -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]

48
sass/_chatbox.scss
View File

@ -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 {

14
sass/_chatrooms.scss
View File

@ -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;

13
sass/_controlbox.scss
View File

@ -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;

8
sass/_core.scss
View File

@ -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;
}

8
sass/_normalize.scss
View File

@ -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;

3
sass/_variables.scss
View File

@ -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;