Some initial work on making the UI responsive.
This commit is contained in:
parent
b176545605
commit
adc6fde404
@ -46,6 +46,9 @@
|
|||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
box-sizing: border-box; }
|
box-sizing: border-box; }
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
#conversejs {
|
||||||
|
margin: 5px 10px; } }
|
||||||
#conversejs a, #conversejs a:visited {
|
#conversejs a, #conversejs a:visited {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #436F64;
|
color: #436F64;
|
||||||
@ -814,12 +817,22 @@
|
|||||||
#conversejs .chatroom {
|
#conversejs .chatroom {
|
||||||
height: 25px;
|
height: 25px;
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: 15px;
|
margin: 0 7px;
|
||||||
display: block; }
|
display: block; }
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
#conversejs .chatbox,
|
||||||
|
#conversejs .chatroom {
|
||||||
|
margin: 0; } }
|
||||||
#conversejs .chatbox {
|
#conversejs .chatbox {
|
||||||
width: 200px; }
|
width: 200px; }
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
#conversejs .chatbox {
|
||||||
|
width: 100%; } }
|
||||||
#conversejs .chatbox .box-flyout {
|
#conversejs .chatbox .box-flyout {
|
||||||
width: 200px; }
|
width: 200px; }
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
#conversejs .chatbox .box-flyout {
|
||||||
|
width: 100%; } }
|
||||||
#conversejs .chatbox .dropdown a {
|
#conversejs .chatbox .dropdown a {
|
||||||
width: 148px;
|
width: 148px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -847,11 +860,16 @@
|
|||||||
padding: 4px 7px 0 5px; }
|
padding: 4px 7px 0 5px; }
|
||||||
#conversejs .chatroom {
|
#conversejs .chatroom {
|
||||||
width: 300px; }
|
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 {
|
#conversejs .chatroom label {
|
||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
font-size: 12px; }
|
font-size: 12px; }
|
||||||
#conversejs .chatroom .box-flyout {
|
|
||||||
width: 300px; }
|
|
||||||
#conversejs .chatroom .participant-list {
|
#conversejs .chatroom .participant-list {
|
||||||
list-style: none; }
|
list-style: none; }
|
||||||
#conversejs .chatroom .participant-list li {
|
#conversejs .chatroom .participant-list li {
|
||||||
@ -1193,6 +1211,10 @@
|
|||||||
display: block;
|
display: block;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
position: absolute; }
|
position: absolute; }
|
||||||
|
@media screen and (max-width: 480px) {
|
||||||
|
#conversejs .minimized-chats-flyout,
|
||||||
|
#conversejs .box-flyout {
|
||||||
|
height: 400px; } }
|
||||||
#conversejs .minimized-chats-flyout {
|
#conversejs .minimized-chats-flyout {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
bottom: 25px;
|
bottom: 25px;
|
||||||
@ -1219,3 +1241,5 @@
|
|||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
cursor: n-resize;
|
cursor: n-resize;
|
||||||
z-index: 20; }
|
z-index: 20; }
|
||||||
|
|
||||||
|
/*# sourceMappingURL=converse.css.map */
|
||||||
|
File diff suppressed because one or more lines are too long
@ -50,6 +50,10 @@
|
|||||||
@include box-sizing(border-box);
|
@include box-sizing(border-box);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $mobile_landscape_length) {
|
||||||
|
margin: 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
a, a:visited {
|
a, a:visited {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: $link-color;
|
color: $link-color;
|
||||||
@ -907,14 +911,23 @@
|
|||||||
.chatroom {
|
.chatroom {
|
||||||
height: 25px;
|
height: 25px;
|
||||||
float: right;
|
float: right;
|
||||||
margin-right: 15px;
|
margin: 0 $chat-gutter;
|
||||||
|
@media screen and (max-width: $mobile_landscape_length) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chatbox {
|
.chatbox {
|
||||||
width: $chat-width;
|
width: $chat-width;
|
||||||
|
@media screen and (max-width: $mobile_landscape_length) {
|
||||||
|
width: $mobile-chat-width;
|
||||||
|
}
|
||||||
.box-flyout {
|
.box-flyout {
|
||||||
width: $chat-width;
|
width: $chat-width;
|
||||||
|
@media screen and (max-width: $mobile_landscape_length) {
|
||||||
|
width: $mobile-chat-width;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.dropdown {
|
.dropdown {
|
||||||
a {
|
a {
|
||||||
@ -954,14 +967,21 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.chatroom {
|
.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 {
|
label {
|
||||||
margin-left: 2px;
|
margin-left: 2px;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
.box-flyout {
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
.participant-list {
|
.participant-list {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
li {
|
li {
|
||||||
@ -1438,6 +1458,9 @@
|
|||||||
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
|
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
|
||||||
display: block;
|
display: block;
|
||||||
height: $chat-height;
|
height: $chat-height;
|
||||||
|
@media screen and (max-width: $mobile_landscape_length) {
|
||||||
|
height: $mobile-chat-height;
|
||||||
|
}
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -22,8 +22,16 @@
|
|||||||
$roster-height: 194px;
|
$roster-height: 194px;
|
||||||
$controlbox-dropdown-height: 25px;
|
$controlbox-dropdown-height: 25px;
|
||||||
|
|
||||||
|
$mobile_landscape_length: 480px;
|
||||||
|
|
||||||
$font-size: 14px;
|
$font-size: 14px;
|
||||||
$legend-font-size: 16px;
|
$legend-font-size: 16px;
|
||||||
|
|
||||||
|
$chatroom-width: 300px;
|
||||||
$chat-width: 200px;
|
$chat-width: 200px;
|
||||||
$chat-height: 400px;
|
$chat-height: 400px;
|
||||||
|
$chat-gutter: 7px;
|
||||||
|
|
||||||
|
$mobile-chat-width: 100%;
|
||||||
|
$mobile-chat-height: 400px;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user