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

Fix CSS for minimized chats (broken after recent refactoring)

Browse Source
This commit is contained in:
JC Brand 2015-10-29 08:12:40 +00:00
parent bb670e2053
commit aaa8ea36ee
6 changed files with 105 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
css/converse.css
View File

@ -1215,6 +1215,41 @@
margin: 0; margin: 0;
padding: 0; } padding: 0; }
#conversejs .flyout {
border-radius: 4px;
bottom: 6px;
display: block;
position: absolute; }
#conversejs .chat-head {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #ffffff;
font-size: 100%;
height: 44px;
margin: 0;
padding: 5px;
position: relative; }
#conversejs .chat-head .avatar {
float: left; }
#conversejs .chat-head.chat-head-chatbox {
background-color: #436F64; }
#conversejs .chatbox-btn {
border-radius: 5px;
border: 1px solid #888;
color: white;
cursor: pointer;
display: inline-block;
float: right;
font-size: 10px;
margin: 0 0 0 3px;
padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
padding-top: 4px;
text-decoration: none; }
#conversejs .chatbox-btn:active {
position: relative;
top: 1px; }
#conversejs .chatbox { #conversejs .chatbox {
display: block; display: block;
float: right; float: right;
@ -1225,11 +1260,6 @@
#conversejs .chatbox { #conversejs .chatbox {
margin: 0; margin: 0;
width: 100%; } } width: 100%; } }
#conversejs .chatbox .flyout {
border-radius: 4px;
bottom: 6px;
display: block;
position: absolute; }
#conversejs .chatbox .box-flyout { #conversejs .chatbox .box-flyout {
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: 450px; height: 450px;
@ -1241,19 +1271,6 @@
#conversejs .chatbox .box-flyout { #conversejs .chatbox .box-flyout {
height: 400px; height: 400px;
width: 100%; } } width: 100%; } }
#conversejs .chatbox .chat-head {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #ffffff;
font-size: 100%;
height: 44px;
margin: 0;
padding: 5px;
position: relative; }
#conversejs .chatbox .chat-head .avatar {
float: left; }
#conversejs .chatbox .chat-head-chatbox {
background-color: #436F64; }
#conversejs .chatbox .chat-title a { #conversejs .chatbox .chat-title a {
color: white; color: white;
width: 100%; width: 100%;
@ -1443,23 +1460,6 @@
height: 15px; height: 15px;
top: 0; top: 0;
left: 0; } left: 0; }
#conversejs .chatbox .chatbox-btn {
border-radius: 5px;
border: 1px solid #888;
color: white;
cursor: pointer;
display: inline-block;
float: right;
font-size: 10px;
margin: 0 0 0 3px;
padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
padding-top: 4px;
text-decoration: none; }
#conversejs .chatbox .chatbox-btn:active {
position: relative;
top: 1px; }
#conversejs #controlbox { #conversejs #controlbox {
display: none; } display: none; }
@ -1863,6 +1863,8 @@
width: 69%; width: 69%;
padding: 0; } padding: 0; }
#conversejs .chat-head-chatroom {
background-color: #346121; }
#conversejs .chatroom { #conversejs .chatroom {
width: 300px; } width: 300px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
@ -1934,8 +1936,6 @@
height: calc(100% - 44px); height: calc(100% - 44px);
overflow-y: auto; overflow-y: auto;
position: absolute; } position: absolute; }
#conversejs .chatroom .chat-head-chatroom {
background-color: #346121; }
#conversejs .chatroom .chat-textarea { #conversejs .chatroom .chat-textarea {
border-bottom-right-radius: 0; } border-bottom-right-radius: 0; }
#conversejs .chatroom .invited-contact { #conversejs .chatroom .invited-contact {
@ -1959,7 +1959,8 @@
#conversejs #minimized-chats #toggle-minimized-chats { #conversejs #minimized-chats #toggle-minimized-chats {
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-right-radius: 4px;
background-color: ivory; background-color: #436F64;
color: white;
position: relative; position: relative;
padding: 10px 0 0 0; padding: 10px 0 0 0;
display: block; display: block;
@ -1968,14 +1969,14 @@
text-align: center; } text-align: center; }
#conversejs #minimized-chats .minimized-chats-flyout { #conversejs #minimized-chats .minimized-chats-flyout {
height: auto; height: auto;
width: 130px;
bottom: 35px; } bottom: 35px; }
#conversejs #minimized-chats .minimized-chats-flyout .chat-head-chatroom,
#conversejs #minimized-chats .minimized-chats-flyout .chat-head { #conversejs #minimized-chats .minimized-chats-flyout .chat-head {
padding: 0.3em;
border-radius: 4px; border-radius: 4px;
width: 130px; width: 130px;
height: 35px; height: 35px;
margin-bottom: 0.2em; } margin-bottom: 0.2em;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); }
#conversejs #minimized-chats .minimized-chats-flyout.minimized { #conversejs #minimized-chats .minimized-chats-flyout.minimized {
height: auto; } height: auto; }
#conversejs #minimized-chats .unread-message-count, #conversejs #minimized-chats .unread-message-count,
@ -1994,19 +1995,5 @@
position: absolute; position: absolute;
right: 116px; right: 116px;
bottom: 10px; } bottom: 10px; }
#conversejs #minimized-chats .box-flyout {
position: absolute;
display: block;
height: auto;
bottom: 35px;
margin-left: 0; }
#conversejs #minimized-chats .box-flyout .chat-head {
font-size: 100%;
border-radius: 4px;
padding: 3px 0 0 5px;
margin: 0 0 1px 0;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: 24px;
width: 130px; }
/*# sourceMappingURL=converse.css.map */ /*# sourceMappingURL=converse.css.map */

43
mockup/minimal.html
View File

@ -9,7 +9,7 @@
<link type="text/css" href="../css/converse.css" rel="stylesheet" media="screen" /> <link type="text/css" href="../css/converse.css" rel="stylesheet" media="screen" />
<script src="../components/jquery/dist/jquery.min.js"></script> <script src="../components/jquery/dist/jquery.min.js"></script>
</head> </head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom"> <body id="page-top" data-spy="scroll" data-target=".navbar-custom" style="background-color: white">
<!-- HEADER --> <!-- HEADER -->
<div id="header_wrap" class="outer"> <div id="header_wrap" class="outer">
@ -24,27 +24,6 @@
<span class="conn-feedback">Toggle Chat</span> <span class="conn-feedback">Toggle Chat</span>
<span id="online-count">(0)</span> <span id="online-count">(0)</span>
</a> </a>
<div id="controlbox" class="chatbox" style="display: none;">
<div class="flyout box-flyout">
<div class="dragresize"></div>
<div class="chat-head controlbox-head">
<ul id="controlbox-tabs">
<li><a class="current" href="#login">Sign in</a></li>
</ul>
<a class="close-chatbox-button icon-close"></a>
</div>
<div id="login-dialog">
<form id="converse-login">
<label>XMPP/Jabber Username:</label><input type="text" id="jid">
<label>Password:</label><input type="password" id="password">
<input class="login-submit" type="submit" value="Log In">
</form>
</div>
</div>
</div>
<div id="minimized-chats" style="display: block"> <div id="minimized-chats" style="display: block">
<a id="toggle-minimized-chats" href="#"> <a id="toggle-minimized-chats" href="#">
<span>Minimized <span id="minimized-count">(0)</span> <span>Minimized <span id="minimized-count">(0)</span>
@ -52,7 +31,7 @@
</a> </a>
<div class="flyout minimized-chats-flyout"> <div class="flyout minimized-chats-flyout">
<div class="chat-head chat-head-chatroom"> <div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a> <a class="chatbox-btn close-chatbox-button icon-close"></a>
<a class="chat-head-message-count" href="#">3</a> <a class="chat-head-message-count" href="#">3</a>
<div class="chat-title"> <div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat"> <a href="#" class="restore-chat" title="Click to maximize this chat">
@ -61,7 +40,7 @@
</div> </div>
</div> </div>
<div class="chat-head chat-head-chatbox"> <div class="chat-head chat-head-chatbox">
<a class="close-chatbox-button icon-close"></a> <a class="chatbox-btn close-chatbox-button icon-close"></a>
<a class="chat-head-message-count" href="#">42</a> <a class="chat-head-message-count" href="#">42</a>
<div class="chat-title"> <div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat"> <a href="#" class="restore-chat" title="Click to maximize this chat">
@ -70,14 +49,15 @@
</div> </div>
</div> </div>
<div class="chat-head chat-head-chatroom"> <div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a> <a class="chatbox-btn close-chatbox-button icon-close"></a>
<div class="chat-title"> <div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat"> <a href="#" class="restore-chat" title="Click to maximize this chat">
My Chatroom My Chatroom
</a> </a>
</div> </div>
</div> </div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a> <div class="chat-head chat-head-chatbox">
<a class="chatbox-btn close-chatbox-button icon-close"></a>
<div class="chat-title"> <div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat"> <a href="#" class="restore-chat" title="Click to maximize this chat">
Annegreet Gomez Annegreet Gomez
@ -85,7 +65,7 @@
</div> </div>
</div> </div>
<div class="chat-head chat-head-chatbox"> <div class="chat-head chat-head-chatbox">
<a class="close-chatbox-button icon-close"></a> <a class="chatbox-btn close-chatbox-button icon-close"></a>
<a class="chat-head-message-count" href="#">842</a> <a class="chat-head-message-count" href="#">842</a>
<div class="chat-title"> <div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat"> <a href="#" class="restore-chat" title="Click to maximize this chat">
@ -93,21 +73,24 @@
</a> </a>
</div> </div>
</div> </div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a> <div class="chat-head chat-head-chatbox">
<a class="chatbox-btn close-chatbox-button icon-close"></a>
<div class="chat-title"> <div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat"> <a href="#" class="restore-chat" title="Click to maximize this chat">
Candice van der Knijff Candice van der Knijff
</a> </a>
</div> </div>
</div> </div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a> <div class="chat-head chat-head-chatbox">
<a class="chatbox-btn close-chatbox-button icon-close"></a>
<div class="chat-title"> <div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat"> <a href="#" class="restore-chat" title="Click to maximize this chat">
Laura Grunewald Laura Grunewald
</a> </a>
</div> </div>
</div> </div>
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a> <div class="chat-head chat-head-chatbox">
<a class="chatbox-btn close-chatbox-button icon-close"></a>
<div class="chat-title"> <div class="chat-title">
<a href="#" class="restore-chat"> <a href="#" class="restore-chat">
Lena Grunewald Lena Grunewald

83
sass/_chatbox.scss
View File

@ -1,4 +1,45 @@
#conversejs { #conversejs {
.flyout {
border-radius: $chatbox-border-radius;
bottom: $chatbox-hover-height;
display: block;
position: absolute;
}
.chat-head {
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
color: #ffffff;
font-size: 100%;
height: $chat-head-height;
margin: 0;
padding: 5px;
position: relative;
.avatar {
float: left;
}
&.chat-head-chatbox {
background-color: $chat-head-color;
}
}
.chatbox-btn {
border-radius: 5px;
border: 1px solid #888;
color: white;
cursor: pointer;
display: inline-block;
float: right;
font-size: $box-close-font-size;
margin: 0 0 0 3px;
padding-bottom: $box-close-button-padding-bottom;
padding-left: $box-close-button-padding-left;
padding-right: $box-close-button-padding-right;
padding-top: $box-close-button-padding-top;
text-decoration: none;
&:active {
position: relative;
top: 1px;
}
}
.chatbox { .chatbox {
display: block; display: block;
float: right; float: right;
@ -9,12 +50,6 @@
margin: 0; margin: 0;
width: $mobile-chat-width; width: $mobile-chat-width;
} }
.flyout {
border-radius: $chatbox-border-radius;
bottom: $chatbox-hover-height;
display: block;
position: absolute;
}
.box-flyout { .box-flyout {
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: $chat-height; height: $chat-height;
@ -27,23 +62,6 @@
width: $mobile-chat-width; width: $mobile-chat-width;
} }
} }
.chat-head {
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
color: #ffffff;
font-size: 100%;
height: $chat-head-height;
margin: 0;
padding: 5px;
position: relative;
.avatar {
float: left;
}
}
.chat-head-chatbox {
background-color: $chat-head-color;
}
.chat-title { .chat-title {
a { a {
color: $chat-head-text-color; color: $chat-head-text-color;
@ -282,25 +300,6 @@
left: 0; left: 0;
} }
} }
.chatbox-btn {
border-radius: 5px;
border: 1px solid #888;
color: white;
cursor: pointer;
display: inline-block;
float: right;
font-size: $box-close-font-size;
margin: 0 0 0 3px;
padding-bottom: $box-close-button-padding-bottom;
padding-left: $box-close-button-padding-left;
padding-right: $box-close-button-padding-right;
padding-top: $box-close-button-padding-top;
text-decoration: none;
&:active {
position: relative;
top: 1px;
}
}
} }
} }

8
sass/_chatrooms.scss
View File

@ -1,4 +1,8 @@
#conversejs { #conversejs {
.chat-head-chatroom {
background-color: $chatroom-head-color;
}
.chatroom { .chatroom {
width: $chatroom-width; width: $chatroom-width;
@media screen and (max-width: $mobile-landscape-length) { @media screen and (max-width: $mobile-landscape-length) {
@ -82,10 +86,6 @@
} }
} }
.chat-head-chatroom {
background-color: $chatroom-head-color;
}
.chat-textarea { .chat-textarea {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }

25
sass/_minimized_chats.scss
View File

@ -14,7 +14,8 @@
#toggle-minimized-chats { #toggle-minimized-chats {
border-top-left-radius: $chatbox-border-radius; border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius; border-top-right-radius: $chatbox-border-radius;
background-color: ivory; background-color: $link-color;
color: white;
position: relative; position: relative;
padding: 10px 0 0 0; padding: 10px 0 0 0;
display: block; display: block;
@ -25,14 +26,14 @@
.minimized-chats-flyout { .minimized-chats-flyout {
height: auto; height: auto;
width: $minimized-chats-width;
bottom: $bottom-gutter-height; bottom: $bottom-gutter-height;
.chat-head-chatroom,
.chat-head { .chat-head {
padding: 0.3em;
border-radius: $chatbox-border-radius; border-radius: $chatbox-border-radius;
width: $minimized-chats-width; width: $minimized-chats-width;
height: 35px; height: 35px;
margin-bottom: 0.2em; margin-bottom: 0.2em;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
} }
&.minimized { &.minimized {
height: auto; height: auto;
@ -54,23 +55,5 @@
right: 116px; right: 116px;
bottom: 10px; bottom: 10px;
} }
.box-flyout {
position: absolute;
display: block;
height: auto;
bottom: $bottom-gutter-height;
margin-left: 0;
.chat-head {
font-size: 100%;
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);
height: 24px;
width: 130px;
}
}
} }
} }

2
src/templates/trimmed_chat.html
View File

@ -1,4 +1,4 @@
<a class="close-chatbox-button icon-close"></a> <a class="chatbox-btn close-chatbox-button icon-close"></a>
<a class="chat-head-message-count" <a class="chat-head-message-count"
{[ if (!num_unread) { ]} style="display: none" {[ } ]} {[ if (!num_unread) { ]} style="display: none" {[ } ]}
href="#">{{num_unread}}</a> href="#">{{num_unread}}</a>