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

Add .flyout class to templates. Declare more vars in Sass.

Browse Source
This commit is contained in:
JC Brand 2015-09-25 20:09:19 +00:00
parent 7c5441053c
commit c421c0fef3
6 changed files with 56 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
css/converse.css
View File

@ -903,7 +903,7 @@
#conversejs .chatroom .chat-area {
float: left;
height: 100%;
width: 200px; }
min-width: 200px; }
#conversejs .chatroom .invited-contact {
margin: -1px 0 0 -1px;
width: 100px;
@ -1111,7 +1111,7 @@
padding: 0;
position: relative;
height: 87px;
width: 200px; }
min-width: 200px; }
@media screen and (max-width: 480px) {
#conversejs form.sendXMPPMessage {
width: 100%; } }
@ -1250,24 +1250,18 @@
padding: 0.75em 0.5em 0.5em 0.5em; }
#conversejs .set-xmpp-status .dropdown dd ul {
z-index: 22; }
#conversejs .minimized-chats-flyout,
#conversejs .box-flyout {
#conversejs .flyout {
border-radius: 4px;
bottom: 6px;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
display: block;
height: 400px;
position: absolute; }
#conversejs .box-flyout {
height: 400px; }
@media screen and (max-width: 480px) {
#conversejs .minimized-chats-flyout,
#conversejs .box-flyout {
height: 400px; } }
#conversejs .minimized-chats-flyout {
border-radius: 4px;
bottom: 35px;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
display: block;
position: absolute;
height: auto;
width: 130px; }
#conversejs .minimized-chats-flyout .chat-head-chatroom,
@ -1276,33 +1270,29 @@
width: 130px;
height: 35px;
margin-bottom: 1px; }
#conversejs .minimized-chats-flyout.minimized {
height: auto; }
#conversejs .minimized-chats-flyout.minimized {
height: auto; }
#conversejs .dragresize {
background: transparent;
border: 0;
margin: 0;
position: absolute;
top: 0;
z-index: 20;
}
#conversejs .dragresize-top {
cursor: n-resize;
height: 5px;
width: 100%;
}
#conversejs .dragresize-left {
cursor: w-resize;
width: 5px;
height: 100%;
left: 0;
}
#conversejs .dragresize-topleft {
cursor: nw-resize;
width: 15px;
height: 15px;
top: 0;
left: 0;
}
z-index: 20; }
#conversejs .dragresize-top {
cursor: n-resize;
height: 5px;
width: 100%; }
#conversejs .dragresize-left {
cursor: w-resize;
width: 5px;
height: 100%;
left: 0; }
#conversejs .dragresize-topleft {
cursor: nw-resize;
width: 15px;
height: 15px;
top: 0;
left: 0; }
/*# sourceMappingURL=converse.css.map */

56
sass/_core.scss
View File

@ -297,8 +297,8 @@
.toggle-controlbox,
#minimized-chats {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
float: right;
margin: 0 $chat-gutter;
font-weight: bold;
@ -334,8 +334,8 @@
width: 130px;
#toggle-minimized-chats {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
background-color: ivory;
position: relative;
padding: 10px 0 0 0;
@ -370,7 +370,7 @@
.chat-head {
font-size: 100%;
border-radius: 4px;
border-radius: $chatbox-border-radius;
padding: 3px 0 0 5px;
margin: 0 0 1px 0;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
@ -382,8 +382,8 @@
.chat-body {
background-color: white;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: $chatbox-border-radius;
border-bottom-left-radius: $chatbox-border-radius;
height: 289px;
@include calc(height, '100% - #{$chat-head-height}');
border-top: 0;
@ -423,8 +423,8 @@
overflow-y: auto;
text-overflow: ellipsis;
background: #27774A;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: $chatbox-border-radius;
border-bottom-left-radius: $chatbox-border-radius;
}
.chat-blink {
@ -686,8 +686,8 @@
height: 100%;
color: $text-color;
overflow-y: auto;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: $chatbox-border-radius;
border-bottom-left-radius: $chatbox-border-radius;
}
.chatroom-form {
@ -1027,7 +1027,7 @@
.chat-area {
float: left;
height: 100%;
width: $chat-width;
min-width: $chat-width;
}
.invited-contact {
margin: -1px 0 0 -1px;
@ -1043,7 +1043,7 @@
overflow-y: auto;
overflow-x: hidden;
border-left: 1px solid #AAA;
border-bottom-right-radius: 4px;
border-bottom-right-radius: $chatbox-border-radius;
width: 100px;
height: 100%;
label {
@ -1058,8 +1058,8 @@
.chatroom-form,
.controlbox-pane {
background-color: white;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: $chatbox-border-radius;
border-bottom-right-radius: $chatbox-border-radius;
border: 0;
font-size: $font-size;
overflow-y: auto;
@ -1214,16 +1214,16 @@
/* @group Tabs */
.chat-head {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
color: #ffffff;
font-size: 100%;
margin: 0;
padding: 6px;
&.controlbox-head {
background-color: $chat-head-color;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
color: $chat-head-inverse-text-color;
height: $chat-head-height;
margin: 0;
@ -1259,8 +1259,8 @@
a {
background-color: white;
border-bottom: 1px solid $border-color;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
box-shadow: inset 2px -2px 20px rgba(0, 0, 0, 0.3);
color: #888;
display: block;
@ -1284,12 +1284,12 @@
form.sendXMPPMessage {
-moz-background-clip: padding;
-moz-border-radius: 4px;
-moz-border-radius: $chatbox-border-radius;
-webkit-background-clip: padding-box;
-webkit-border-radius: 4px;
-webkit-border-radius: $chatbox-border-radius;
background-clip: padding-box;
background: white;
border-radius: 4px;
border-radius: $chatbox-border-radius;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top: 1px solid #BBB;
@ -1298,7 +1298,7 @@
padding: 0;
position: relative;
height: #{$chat-textarea-height + $toolbar-height};
width: $chat-width;
min-width: $chat-width;
@media screen and (max-width: $mobile-landscape-length) {
width: 100%;
}
@ -1505,8 +1505,8 @@
}
.flyout {
border-radius: 4px;
bottom: $bottom-gutter-height;
border-radius: $chatbox-border-radius;
bottom: $chatbox-hover-height;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
display: block;
position: absolute;
@ -1524,7 +1524,7 @@
width: $minimized-chats-width;;
.chat-head-chatroom,
.chat-head {
border-radius: 4px;
border-radius: $chatbox-border-radius;
width: $minimized-chats-width;
height: 35px;
margin-bottom: 1px;

2
sass/_variables.scss
View File

@ -22,7 +22,9 @@
$roster-height: 194px !default;
$controlbox-dropdown-height: 25px !default;
$chatbox-border-radius: 4px !default;
$bottom-gutter-height: 35px !default;
$chatbox-hover-height: 6px !default;
$mobile_landscape_length: 480px !default;

2
src/templates/chatbox.html
View File

@ -1,4 +1,4 @@
<div class="box-flyout" style="{[ if (height) { ]} height: {{height}}px; {[ } ]} {[ if (width) { ]} width: {{width}}px; {[ } ]}">
<div class="flyout box-flyout" style="{[ if (height) { ]} height: {{height}}px; {[ } ]} {[ if (width) { ]} width: {{width}}px; {[ } ]}">
<div class="dragresize dragresize-top"></div>
<div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></div>

2
src/templates/chatroom.html
View File

@ -1,4 +1,4 @@
<div class="box-flyout" style="{[ if (height) { ]} height: {{height}}px; {[ } ]} {[ if (width) { ]} width: {{width}}px; {[ } ]}">
<div class="flyout box-flyout" style="{[ if (height) { ]} height: {{height}}px; {[ } ]} {[ if (width) { ]} width: {{width}}px; {[ } ]}">
<div class="dragresize dragresize-top"></div>
<div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></div>

2
src/templates/controlbox.html
View File

@ -1,4 +1,4 @@
<div class="box-flyout" style="{[ if (height) { ]} height: {{height}}px; {[ } ]} {[ if (width) { ]} width: {{width}}px; {[ } ]}">
<div class="flyout box-flyout" style="{[ if (height) { ]} height: {{height}}px; {[ } ]} {[ if (width) { ]} width: {{width}}px; {[ } ]}">
<div class="dragresize dragresize-top"></div>
<div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></div>