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

Some tweaks for better mobile/responsive behavior.

Browse Source
This commit is contained in:
JC Brand 2015-11-04 18:32:08 +00:00
parent ea701f3865
commit 7c70452bb4
5 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
css/converse.css
View File

@ -1047,11 +1047,15 @@
display: block;
font-size: 14px;
height: 35px;
left: auto;
position: fixed;
right: 15px;
left: 0;
right: 0;
width: auto;
z-index: 30; }
@media screen and (max-width: 480px) {
#conversejs {
width: 100%;
width: 100vw; } }
#conversejs ::selection {
background-color: #DCF9F6; }
#conversejs ::-moz-selection {
@ -1243,7 +1247,7 @@
display: block;
float: right;
height: 35px;
margin: 0 7px;
margin: 0 0.5em;
width: 200px; }
@media screen and (max-width: 480px) {
#conversejs .chatbox {
@ -1260,7 +1264,8 @@
@media screen and (max-width: 480px) {
#conversejs .chatbox .box-flyout {
height: 400px;
width: 100%; } }
width: 100%;
height: 88vh; } }
#conversejs .chatbox .chat-title {
color: white;
line-height: 15px;
@ -1457,7 +1462,11 @@
left: 0; }
#conversejs #controlbox {
display: none; }
display: none;
margin-right: 1em; }
@media screen and (max-width: 480px) {
#conversejs #controlbox {
margin: 0; } }
#conversejs #controlbox .controlbox-head {
background-color: #577BDD;
border-top-left-radius: 4px;
@ -1739,7 +1748,7 @@
color: #0a0a0a;
float: right;
height: 100%;
margin: 0 7px;
margin: 0 0.5em;
padding: 10px 8px 0 8px; }
#conversejs .toggle-controlbox span {
color: white; }
@ -1986,7 +1995,7 @@
float: right;
font-weight: bold;
height: 100%;
margin: 0 7px;
margin: 0 0.5em;
padding: 0;
width: 130px; }
#conversejs #minimized-chats #toggle-minimized-chats {

1
sass/_chatbox.scss
View File

@ -73,6 +73,7 @@
@media screen and (max-width: $mobile-landscape-length) {
height: $mobile-chat-height;
width: $mobile-chat-width;
height: 88vh;
}
}
.chat-title {

4
sass/_controlbox.scss
View File

@ -1,6 +1,10 @@
#conversejs {
#controlbox {
display: none;
margin-right: 2*$chat-gutter;
@media screen and (max-width: $mobile-landscape-length) {
margin: 0;
}
.controlbox-head {
background-color: $controlbox-head-color;
border-top-left-radius: $chatbox-border-radius;

8
sass/_core.scss
View File

@ -5,11 +5,15 @@
display: block;
font-size: $font-size;
height: $bottom-gutter-height;
left: auto;
position: fixed;
right: 15px;
left: 0;
right: 0;
width: auto;
z-index: 30;
@media screen and (max-width: $mobile-landscape-length) {
width: 100%;
width: 100vw;
}
::selection {
background-color: $highlight-color;

2
sass/_variables.scss
View File

@ -49,7 +49,7 @@ $legend-font-size: 16px !default;
$chat-width: 200px !default;
$chat-height: 450px !default;
$chat-gutter: 7px !default;
$chat-gutter: 0.5em !default;
$minimized-chats-width: 130px !default;
$mobile-chat-width: 100% !default;