Fix issues around chatroom textarea height and responsiveness
This commit is contained in:
JC Brand
parent
d1b1433e69
commit
b5a43f8177
|
|
@ -5347,10 +5347,7 @@
|
|||
background: #818479; }
|
||||
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
|
||||
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden; }
|
||||
font-weight: bold; }
|
||||
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-them,
|
||||
#conversejs .chatbox .chat-body .chat-message .chat-msg-them {
|
||||
color: #3AA569; }
|
||||
|
|
@ -6292,11 +6289,8 @@
|
|||
height: 100vh; } }
|
||||
#converse-embedded-chat .chatroom .box-flyout .chatroom-body,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body {
|
||||
height: 289px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
height: -webkit-calc(100% - 55px);
|
||||
height: calc(100% - 55px);
|
||||
background-color: white;
|
||||
border-top: 0;
|
||||
width: 100%;
|
||||
|
|
@ -6330,8 +6324,7 @@
|
|||
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chat-area {
|
||||
word-wrap: break-word;
|
||||
min-width: 200px;
|
||||
height: calc(100% - 95px); }
|
||||
min-width: 200px; }
|
||||
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
|
||||
background-color: #E77051;
|
||||
|
|
@ -6480,9 +6473,6 @@
|
|||
width: 100%;
|
||||
border: 1px solid #999; }
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#conversejs .chatbox .box-flyout .chatroom-body .chat-area {
|
||||
height: calc(100vh - 55px); } }
|
||||
#conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
|
||||
background-color: #E7A151; }
|
||||
#conversejs .chatbox.headlines .chat-body {
|
||||
|
|
|
|||
|
|
@ -5403,10 +5403,7 @@ body {
|
|||
background: #818479; }
|
||||
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
|
||||
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden; }
|
||||
font-weight: bold; }
|
||||
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-them,
|
||||
#conversejs .chatbox .chat-body .chat-message .chat-msg-them {
|
||||
color: #3AA569; }
|
||||
|
|
@ -6422,11 +6419,8 @@ body {
|
|||
height: 100vh; } }
|
||||
#converse-embedded-chat .chatroom .box-flyout .chatroom-body,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body {
|
||||
height: 289px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
height: -webkit-calc(100% - 62px);
|
||||
height: calc(100% - 62px);
|
||||
background-color: white;
|
||||
border-top: 0;
|
||||
width: 100%;
|
||||
|
|
@ -6460,8 +6454,7 @@ body {
|
|||
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chat-area {
|
||||
word-wrap: break-word;
|
||||
min-width: 100%;
|
||||
height: calc(100% - 95px); }
|
||||
min-width: 100%; }
|
||||
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
|
||||
background-color: #E77051;
|
||||
|
|
@ -6610,9 +6603,6 @@ body {
|
|||
width: 100%;
|
||||
border: 1px solid #999; }
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#conversejs .chatbox .box-flyout .chatroom-body .chat-area {
|
||||
height: calc(100vh - 55px); } }
|
||||
#conversejs.fullscreen .chat-head-chatroom {
|
||||
height: 62px;
|
||||
font-size: 20px; }
|
||||
|
|
|
|||
|
|
@ -100,7 +100,6 @@
|
|||
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
|
||||
</ul>
|
||||
|
||||
<div class="chatroom-features">
|
||||
<p class="occupants-heading">Features</p>
|
||||
<ul class="features-list">
|
||||
|
|
|
|||
|
|
@ -51,9 +51,8 @@
|
|||
</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-them">19:25
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-them">Benedict-John: </span>
|
||||
<span class="chat-msg-author chat-msg-them">
|
||||
19:25 <canvas height="24" width="24" class="avatar"></canvas> Benedict-John:
|
||||
</span>
|
||||
<span class="chat-msg-content">Dagsê</span>
|
||||
</div>
|
||||
|
|
@ -122,86 +121,83 @@
|
|||
<a class="chatbox-btn fa fa-close"></a>
|
||||
</div>
|
||||
|
||||
<div class="chat-body chatroom-body">
|
||||
<div class="row no-gutters">
|
||||
<div class="chat-area col-md-9 col-8">
|
||||
<div class="chat-content">
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">18:50
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">luke: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">leia: hi :)</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:40
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">leia: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:40
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">Obi-wan Kenobi, Jedi Master: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:42
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:43
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
<div class="chat-body chatroom-body row no-gutters">
|
||||
<div class="chat-area col-md-9 col-8">
|
||||
<div class="chat-content">
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">18:50
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">luke: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">leia: hi :)</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:40
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">leia: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:40
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-room">Obi-wan Kenobi, Jedi Master: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-me">19:42
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-me">me: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
|
||||
</div>
|
||||
<div class="chat-message">
|
||||
<span class="chat-msg-author chat-msg-room">19:43
|
||||
<canvas height="24" width="24" class="avatar"></canvas>
|
||||
<span class="chat-msg-roomme">Obi-wan Kenobi, Jedi Master: </span>
|
||||
</span>
|
||||
<span class="chat-msg-content">Another message to check that scrolling works.</span>
|
||||
</div>
|
||||
<form class="sendXMPPMessage">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
|
||||
<li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
|
||||
<li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
|
||||
</ul>
|
||||
<textarea class="chat-textarea form-control" placeholder="Message"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="occupants col-md-3 col-4">
|
||||
<p class="occupants-heading">Occupants:</p>
|
||||
<form class="pure-form room-invite">
|
||||
<input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
|
||||
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
|
||||
</form>
|
||||
|
||||
<ul class="occupant-list">
|
||||
<li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
|
||||
<li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
|
||||
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
|
||||
<form class="sendXMPPMessage">
|
||||
<ul class="chat-toolbar no-text-select">
|
||||
<li class="toggle-smiley fa fa-smile-o" title="Insert a smiley"></li>
|
||||
<li class="toggle-occupants"><a class="fa fa-user-times" title="Hide the list of occupants"></a></li>
|
||||
<li class="toggle-clear"><a class="fa fa-times" title="Clear all messages"></a></li>
|
||||
</ul>
|
||||
<textarea class="chat-textarea form-control" placeholder="Message"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="chatroom-features">
|
||||
<p class="occupants-heading">Features</p>
|
||||
<ul class="features-list">
|
||||
<li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span> </li>
|
||||
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span> </li>
|
||||
<li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span> </li>
|
||||
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span> </li>
|
||||
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span> </li>
|
||||
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span> </li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="occupants col-md-3 col-4">
|
||||
<p class="occupants-heading">Occupants:</p>
|
||||
<form class="pure-form room-invite">
|
||||
<input class="form-control" placeholder="Invite..." type="text" autocomplete="off" spellcheck="false" dir="auto">
|
||||
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre;"></pre>
|
||||
</form>
|
||||
|
||||
<ul class="occupant-list">
|
||||
<li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
|
||||
<li class="participant occupant" title="Click to mention leia in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
|
||||
<li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
|
||||
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
|
||||
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
|
||||
</ul>
|
||||
<div class="chatroom-features">
|
||||
<p class="occupants-heading">Features</p>
|
||||
<ul class="features-list">
|
||||
<li class="feature" title="Unsecured: This room requires a password before entry"><span class="fa fa-unlock"></span> </li>
|
||||
<li class="feature" title="Public: This room is publicly searchable"><span class="fa fa-eye"></span> </li>
|
||||
<li class="feature" title="Open: Anyone can join this roo"><span class="fa fa-globe"></span> </li>
|
||||
<li class="feature" title="Persistent: This room persists even if it's unoccupied"><span class="fa fa-save"></span> </li>
|
||||
<li class="feature" title="Non-anonymous: All other room occupants can see your XMPP username"><span class="fa fa-vcard"></span> </li>
|
||||
<li class="feature" title="Unmoderated: This room is not being moderated"><span class="fa fa-info-circle"></span> </li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -171,9 +171,6 @@
|
|||
|
||||
.chat-msg-author {
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.chat-msg-them {
|
||||
color: $message-them-color;
|
||||
|
|
|
|||
|
|
@ -61,9 +61,7 @@
|
|||
height: 100vh;
|
||||
}
|
||||
.chatroom-body {
|
||||
height: 289px;
|
||||
@include border-bottom-radius($chatbox-border-radius);
|
||||
@include calc(height, '100% - #{$chat-head-height}');
|
||||
background-color: white;
|
||||
border-top: 0;
|
||||
width: 100%;
|
||||
|
|
@ -103,8 +101,6 @@
|
|||
.chat-area {
|
||||
word-wrap: break-word;
|
||||
min-width: $chat-width;
|
||||
height: calc(100% - 95px);
|
||||
|
||||
.new-msgs-indicator {
|
||||
background-color: $chatroom-head-color;
|
||||
max-width: 70%;
|
||||
|
|
@ -272,7 +268,6 @@
|
|||
.box-flyout {
|
||||
.chatroom-body {
|
||||
.chat-area {
|
||||
height: calc(100vh - 55px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user