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

Tweak chatroom headings

Browse Source
This commit is contained in:
JC Brand 2018-04-27 14:16:34 +02:00
parent 56e4e8b8ee
commit 36ccb4618f
5 changed files with 25 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
css/converse.css
View File

@ -8065,12 +8065,15 @@ body.reset {
#conversejs.converse-embedded .chat-head-chatroom,
#conversejs .chat-head-chatroom {
background-color: #E77051; }
#conversejs.converse-embedded .chat-head-chatroom .chatroom-topic,
#conversejs .chat-head-chatroom .chatroom-topic {
white-space: nowrap;
#conversejs.converse-embedded .chat-head-chatroom .chatroom-description,
#conversejs .chat-head-chatroom .chatroom-description {
color: white;
font-size: 16px;
font-size: 80%;
overflow-y: hidden;
overflow: hidden;
text-overflow: ellipsis;
font-size: 16px; }
white-space: nowrap; }
#conversejs.converse-embedded .chat-head-chatroom a.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:visited.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:hover.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
#conversejs .chat-head-chatroom a.chatbox-btn.fa,
#conversejs .chat-head-chatroom a:visited.chatbox-btn.fa,
@ -8095,15 +8098,6 @@ body.reset {
#conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
#conversejs .chat-head-chatroom .chat-title .chatroom-jid {
font-size: 12px; }
#conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-description,
#conversejs .chat-head-chatroom .chat-title .chatroom-description {
color: white;
font-size: 80%;
font-style: italic;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0.3em 0; }
#conversejs.converse-embedded .chatroom,
#conversejs .chatroom {
width: 400px; }

20
css/inverse.css
View File

@ -8207,12 +8207,15 @@ body {
#conversejs.converse-embedded .chat-head-chatroom,
#conversejs .chat-head-chatroom {
background-color: #E77051; }
#conversejs.converse-embedded .chat-head-chatroom .chatroom-topic,
#conversejs .chat-head-chatroom .chatroom-topic {
white-space: nowrap;
#conversejs.converse-embedded .chat-head-chatroom .chatroom-description,
#conversejs .chat-head-chatroom .chatroom-description {
color: white;
font-size: 18px;
font-size: 80%;
overflow-y: hidden;
overflow: hidden;
text-overflow: ellipsis;
font-size: 18px; }
white-space: nowrap; }
#conversejs.converse-embedded .chat-head-chatroom a.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:visited.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:hover.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
#conversejs .chat-head-chatroom a.chatbox-btn.fa,
#conversejs .chat-head-chatroom a:visited.chatbox-btn.fa,
@ -8237,15 +8240,6 @@ body {
#conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
#conversejs .chat-head-chatroom .chat-title .chatroom-jid {
font-size: 14px; }
#conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-description,
#conversejs .chat-head-chatroom .chat-title .chatroom-description {
color: white;
font-size: 80%;
font-style: italic;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0.3em 0; }
#conversejs.converse-embedded .chatroom,
#conversejs .chatroom {
width: 300px; }

2
mockup/chatroom.html
View File

@ -25,7 +25,7 @@
<div class="chat-head chat-head-chatroom row no-gutters">
<div class="col col-9">
<div class="chat-title">Capulet's orchard</div>
<p class="chatroom-topic">Two households, both alike in dignity, In fair Verona, where we lay our scene.</p>
<p class="chatroom-description">Two households, both alike in dignity, In fair Verona, where we lay our scene.</p>
</div>
<div class="chatbox-buttons row no-gutters">
<a class="chatbox-btn fa fa-minus"></a>

20
sass/_chatrooms.scss
View File

@ -10,11 +10,14 @@
.chat-head-chatroom {
background-color: $chatroom-head-color;
.chatroom-topic {
white-space: nowrap;
overflow-y: hidden;
text-overflow: ellipsis;
.chatroom-description {
color: white;
font-size: $font-size-large;
font-size: 80%;
overflow-y: hidden;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
a, a:visited, a:hover, a:not([href]):not([tabindex]) {
@ -41,15 +44,6 @@
.chatroom-jid {
font-size: $font-size-small;
}
.chatroom-description {
color: white;
font-size: 80%;
font-style: italic;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0.3em 0;
}
}
}

6
src/templates/chatroom_head.html
View File

@ -1,12 +1,12 @@
<div class="col col-9">
<div class="chat-title" title="{{{o.jid}}}">
{[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
<span class="chatroom-name">{{{ o.name }}}</span>
{{{ o.name }}}
{[ } else { ]}
<span class="chatroom-name">{{{ o.Strophe.getNodeFromJid(o.jid) }}}</span>@{{{ o.Strophe.getDomainFromJid(o.jid) }}}
{{{ o.Strophe.getNodeFromJid(o.jid) }}}@{{{ o.Strophe.getDomainFromJid(o.jid) }}}
{[ } ]}
<p class="chatroom-description">{{{ o.description }}}<p/>
</div>
<p class="chatroom-description">{{{ o.description }}}<p/>
</div>
<div class="chatbox-buttons row no-gutters">
<a class="chatbox-btn close-chatbox-button fa fa-sign-out" title="{{{o.info_close}}}"></a>