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

Some initial work on making the UI responsive.

Browse Source
This commit is contained in:
JC Brand 2014-12-31 13:08:51 +01:00
parent b176545605
commit adc6fde404
4 changed files with 64 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
css/converse.css
View File

@ -46,6 +46,9 @@
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
@media screen and (max-width: 480px) {
#conversejs {
margin: 5px 10px; } }
#conversejs a, #conversejs a:visited {
text-decoration: none;
color: #436F64;
@ -814,12 +817,22 @@
#conversejs .chatroom {
height: 25px;
float: right;
margin-right: 15px;
margin: 0 7px;
display: block; }
@media screen and (max-width: 480px) {
#conversejs .chatbox,
#conversejs .chatroom {
margin: 0; } }
#conversejs .chatbox {
width: 200px; }
@media screen and (max-width: 480px) {
#conversejs .chatbox {
width: 100%; } }
#conversejs .chatbox .box-flyout {
width: 200px; }
@media screen and (max-width: 480px) {
#conversejs .chatbox .box-flyout {
width: 100%; } }
#conversejs .chatbox .dropdown a {
width: 148px;
display: inline-block;
@ -847,11 +860,16 @@
padding: 4px 7px 0 5px; }
#conversejs .chatroom {
width: 300px; }
#conversejs .chatroom .box-flyout {
width: 300px; }
@media screen and (max-width: 480px) {
#conversejs .chatroom {
width: 100%; }
#conversejs .chatroom .box-flyout {
width: 100%; } }
#conversejs .chatroom label {
margin-left: 2px;
font-size: 12px; }
#conversejs .chatroom .box-flyout {
width: 300px; }
#conversejs .chatroom .participant-list {
list-style: none; }
#conversejs .chatroom .participant-list li {
@ -1193,6 +1211,10 @@
display: block;
height: 400px;
position: absolute; }
@media screen and (max-width: 480px) {
#conversejs .minimized-chats-flyout,
#conversejs .box-flyout {
height: 400px; } }
#conversejs .minimized-chats-flyout {
border-radius: 4px;
bottom: 25px;
@ -1219,3 +1241,5 @@
margin-left: 0;
cursor: n-resize;
z-index: 20; }
/*# sourceMappingURL=converse.css.map */

2
css/converse.css.map
View File

File diff suppressed because one or more lines are too long

33
sass/converse.scss
View File

@ -50,6 +50,10 @@
@include box-sizing(border-box);
}
@media screen and (max-width: $mobile_landscape_length) {
margin: 5px 10px;
}
a, a:visited {
text-decoration: none;
color: $link-color;
@ -907,14 +911,23 @@
.chatroom {
height: 25px;
float: right;
margin-right: 15px;
margin: 0 $chat-gutter;
@media screen and (max-width: $mobile_landscape_length) {
margin: 0;
}
display: block;
}
.chatbox {
width: $chat-width;
@media screen and (max-width: $mobile_landscape_length) {
width: $mobile-chat-width;
}
.box-flyout {
width: $chat-width;
@media screen and (max-width: $mobile_landscape_length) {
width: $mobile-chat-width;
}
}
.dropdown {
a {
@ -954,14 +967,21 @@
}
.chatroom {
width: 300px;
width: $chatroom-width;
.box-flyout {
width: $chatroom-width;
}
@media screen and (max-width: $mobile_landscape_length) {
width: $mobile-chat-width;
.box-flyout {
width: $mobile-chat-width;
}
}
label {
margin-left: 2px;
font-size: 12px;
}
.box-flyout {
width: 300px;
}
.participant-list {
list-style: none;
li {
@ -1438,6 +1458,9 @@
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
display: block;
height: $chat-height;
@media screen and (max-width: $mobile_landscape_length) {
height: $mobile-chat-height;
}
position: absolute;
}

8
sass/variables.scss
View File

@ -22,8 +22,16 @@
$roster-height: 194px;
$controlbox-dropdown-height: 25px;
$mobile_landscape_length: 480px;
$font-size: 14px;
$legend-font-size: 16px;
$chatroom-width: 300px;
$chat-width: 200px;
$chat-height: 400px;
$chat-gutter: 7px;
$mobile-chat-width: 100%;
$mobile-chat-height: 400px;