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

56
sass/_core.scss
View File

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

2
sass/_variables.scss
View File

@ -22,7 +22,9 @@
$roster-height: 194px !default; $roster-height: 194px !default;
$controlbox-dropdown-height: 25px !default; $controlbox-dropdown-height: 25px !default;
$chatbox-border-radius: 4px !default;
$bottom-gutter-height: 35px !default; $bottom-gutter-height: 35px !default;
$chatbox-hover-height: 6px !default;
$mobile_landscape_length: 480px !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-top"></div>
<div class="dragresize dragresize-topleft"></div> <div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></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-top"></div>
<div class="dragresize dragresize-topleft"></div> <div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></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-top"></div>
<div class="dragresize dragresize-topleft"></div> <div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></div> <div class="dragresize dragresize-left"></div>