Fix CSS for minimized chats (broken after recent refactoring)
This commit is contained in:
parent
bb670e2053
commit
aaa8ea36ee
@ -1215,6 +1215,41 @@
|
||||
margin: 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 {
|
||||
display: block;
|
||||
float: right;
|
||||
@ -1225,11 +1260,6 @@
|
||||
#conversejs .chatbox {
|
||||
margin: 0;
|
||||
width: 100%; } }
|
||||
#conversejs .chatbox .flyout {
|
||||
border-radius: 4px;
|
||||
bottom: 6px;
|
||||
display: block;
|
||||
position: absolute; }
|
||||
#conversejs .chatbox .box-flyout {
|
||||
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
|
||||
height: 450px;
|
||||
@ -1241,19 +1271,6 @@
|
||||
#conversejs .chatbox .box-flyout {
|
||||
height: 400px;
|
||||
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 {
|
||||
color: white;
|
||||
width: 100%;
|
||||
@ -1443,23 +1460,6 @@
|
||||
height: 15px;
|
||||
top: 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 {
|
||||
display: none; }
|
||||
@ -1863,6 +1863,8 @@
|
||||
width: 69%;
|
||||
padding: 0; }
|
||||
|
||||
#conversejs .chat-head-chatroom {
|
||||
background-color: #346121; }
|
||||
#conversejs .chatroom {
|
||||
width: 300px; }
|
||||
@media screen and (max-width: 480px) {
|
||||
@ -1934,8 +1936,6 @@
|
||||
height: calc(100% - 44px);
|
||||
overflow-y: auto;
|
||||
position: absolute; }
|
||||
#conversejs .chatroom .chat-head-chatroom {
|
||||
background-color: #346121; }
|
||||
#conversejs .chatroom .chat-textarea {
|
||||
border-bottom-right-radius: 0; }
|
||||
#conversejs .chatroom .invited-contact {
|
||||
@ -1959,7 +1959,8 @@
|
||||
#conversejs #minimized-chats #toggle-minimized-chats {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
background-color: ivory;
|
||||
background-color: #436F64;
|
||||
color: white;
|
||||
position: relative;
|
||||
padding: 10px 0 0 0;
|
||||
display: block;
|
||||
@ -1968,14 +1969,14 @@
|
||||
text-align: center; }
|
||||
#conversejs #minimized-chats .minimized-chats-flyout {
|
||||
height: auto;
|
||||
width: 130px;
|
||||
bottom: 35px; }
|
||||
#conversejs #minimized-chats .minimized-chats-flyout .chat-head-chatroom,
|
||||
#conversejs #minimized-chats .minimized-chats-flyout .chat-head {
|
||||
padding: 0.3em;
|
||||
border-radius: 4px;
|
||||
width: 130px;
|
||||
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 {
|
||||
height: auto; }
|
||||
#conversejs #minimized-chats .unread-message-count,
|
||||
@ -1994,19 +1995,5 @@
|
||||
position: absolute;
|
||||
right: 116px;
|
||||
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 */
|
||||
|
@ -9,7 +9,7 @@
|
||||
<link type="text/css" href="../css/converse.css" rel="stylesheet" media="screen" />
|
||||
<script src="../components/jquery/dist/jquery.min.js"></script>
|
||||
</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 -->
|
||||
<div id="header_wrap" class="outer">
|
||||
@ -24,27 +24,6 @@
|
||||
<span class="conn-feedback">Toggle Chat</span>
|
||||
<span id="online-count">(0)</span>
|
||||
</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">
|
||||
<a id="toggle-minimized-chats" href="#">
|
||||
<span>Minimized <span id="minimized-count">(0)</span>
|
||||
@ -52,7 +31,7 @@
|
||||
</a>
|
||||
<div class="flyout minimized-chats-flyout">
|
||||
<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>
|
||||
<div class="chat-title">
|
||||
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
||||
@ -61,7 +40,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="chat-title">
|
||||
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
||||
@ -70,14 +49,15 @@
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
||||
My Chatroom
|
||||
</a>
|
||||
</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">
|
||||
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
||||
Annegreet Gomez
|
||||
@ -85,7 +65,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="chat-title">
|
||||
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
||||
@ -93,21 +73,24 @@
|
||||
</a>
|
||||
</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">
|
||||
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
||||
Candice van der Knijff
|
||||
</a>
|
||||
</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">
|
||||
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
||||
Laura Grunewald
|
||||
</a>
|
||||
</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">
|
||||
<a href="#" class="restore-chat">
|
||||
Lena Grunewald
|
||||
|
@ -1,33 +1,10 @@
|
||||
#conversejs {
|
||||
.chatbox {
|
||||
display: block;
|
||||
float: right;
|
||||
height: $bottom-gutter-height;
|
||||
margin: 0 $chat-gutter;
|
||||
width: $chat-width;
|
||||
@media screen and (max-width: $mobile-landscape-length) {
|
||||
margin: 0;
|
||||
width: $mobile-chat-width;
|
||||
}
|
||||
.flyout {
|
||||
border-radius: $chatbox-border-radius;
|
||||
bottom: $chatbox-hover-height;
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
.box-flyout {
|
||||
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
|
||||
height: $chat-height;
|
||||
min-height: $chat-height/2;
|
||||
min-width: $chat-width;
|
||||
width: $chat-width;
|
||||
z-index: 1;
|
||||
@media screen and (max-width: $mobile-landscape-length) {
|
||||
height: $mobile-chat-height;
|
||||
width: $mobile-chat-width;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-head {
|
||||
border-top-left-radius: $chatbox-border-radius;
|
||||
border-top-right-radius: $chatbox-border-radius;
|
||||
@ -40,10 +17,51 @@
|
||||
.avatar {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.chat-head-chatbox {
|
||||
&.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 {
|
||||
display: block;
|
||||
float: right;
|
||||
height: $bottom-gutter-height;
|
||||
margin: 0 $chat-gutter;
|
||||
width: $chat-width;
|
||||
@media screen and (max-width: $mobile-landscape-length) {
|
||||
margin: 0;
|
||||
width: $mobile-chat-width;
|
||||
}
|
||||
.box-flyout {
|
||||
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
|
||||
height: $chat-height;
|
||||
min-height: $chat-height/2;
|
||||
min-width: $chat-width;
|
||||
width: $chat-width;
|
||||
z-index: 1;
|
||||
@media screen and (max-width: $mobile-landscape-length) {
|
||||
height: $mobile-chat-height;
|
||||
width: $mobile-chat-width;
|
||||
}
|
||||
}
|
||||
.chat-title {
|
||||
a {
|
||||
color: $chat-head-text-color;
|
||||
@ -282,25 +300,6 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,4 +1,8 @@
|
||||
#conversejs {
|
||||
.chat-head-chatroom {
|
||||
background-color: $chatroom-head-color;
|
||||
}
|
||||
|
||||
.chatroom {
|
||||
width: $chatroom-width;
|
||||
@media screen and (max-width: $mobile-landscape-length) {
|
||||
@ -82,10 +86,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.chat-head-chatroom {
|
||||
background-color: $chatroom-head-color;
|
||||
}
|
||||
|
||||
.chat-textarea {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
@ -14,7 +14,8 @@
|
||||
#toggle-minimized-chats {
|
||||
border-top-left-radius: $chatbox-border-radius;
|
||||
border-top-right-radius: $chatbox-border-radius;
|
||||
background-color: ivory;
|
||||
background-color: $link-color;
|
||||
color: white;
|
||||
position: relative;
|
||||
padding: 10px 0 0 0;
|
||||
display: block;
|
||||
@ -25,14 +26,14 @@
|
||||
|
||||
.minimized-chats-flyout {
|
||||
height: auto;
|
||||
width: $minimized-chats-width;
|
||||
bottom: $bottom-gutter-height;
|
||||
.chat-head-chatroom,
|
||||
.chat-head {
|
||||
padding: 0.3em;
|
||||
border-radius: $chatbox-border-radius;
|
||||
width: $minimized-chats-width;
|
||||
height: 35px;
|
||||
margin-bottom: 0.2em;
|
||||
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
&.minimized {
|
||||
height: auto;
|
||||
@ -54,23 +55,5 @@
|
||||
right: 116px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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"
|
||||
{[ if (!num_unread) { ]} style="display: none" {[ } ]}
|
||||
href="#">{{num_unread}}</a>
|
||||
|
Loading…
Reference in New Issue
Block a user