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

css: Titles for available chat rooms were cut off too soon

Browse Source
This commit is contained in:
JC Brand 2017-07-21 18:08:29 +02:00
parent de7a1f7545
commit 75342b066e
4 changed files with 68 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
css/converse.css
View File

@ -2002,7 +2002,8 @@
padding: 0; padding: 0;
padding-bottom: 0.5em; padding-bottom: 0.5em;
text-shadow: 0 1px 0 #FAFAFA; } text-shadow: 0 1px 0 #FAFAFA; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom {
border: none; border: none;
clear: both; clear: both;
color: #777; color: #777;
@ -2011,40 +2012,56 @@
padding: 0.3em 0; padding: 0.3em 0;
text-shadow: 0 1px 0 #FAFAFA; text-shadow: 0 1px 0 #FAFAFA;
word-wrap: break-word; } word-wrap: break-word; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a:hover { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a:hover,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a:hover {
color: #206485; } color: #206485; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom.unread-msgs .open-room { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom.unread-msgs .open-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom.unread-msgs .open-room {
max-width: 55%; max-width: 55%;
width: auto; width: auto;
font-weight: bold; } font-weight: bold; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a.room-info:before { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.room-info:before,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.room-info:before {
font-size: 15px; } font-size: 15px; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a.open-room { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.open-room,
float: left; #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.open-room {
width: 68%; width: 68%;
float: left;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
padding-right: 0.5em; } padding-right: 0.5em; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.available-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.available-room {
width: 85%; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark {
color: #A8ABA1; } color: #A8ABA1; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark.button-on { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark.button-on {
color: #578EA9; } color: #578EA9; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark.button-on:hover { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark.button-on:hover {
color: #206485; } color: #206485; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .room-info { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .room-info,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .room-info {
font-size: 12px; font-size: 12px;
font-style: normal; font-style: normal;
font-weight: normal; } font-weight: normal; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom li.room-info { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom li.room-info,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom li.room-info {
display: block; display: block;
margin-left: 5px; } margin-left: 5px; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom p.room-info { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom p.room-info,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom p.room-info {
line-height: 16px; line-height: 16px;
margin: 0; margin: 0;
display: block; display: block;
white-space: normal; } white-space: normal; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom div.room-info { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom div.room-info,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom div.room-info {
padding: 0.3em 0; padding: 0.3em 0;
clear: left; clear: left;
width: 100%; } width: 100%; }

43
css/inverse.css
View File

@ -2068,7 +2068,8 @@ body {
padding: 0; padding: 0;
padding-bottom: 0.5em; padding-bottom: 0.5em;
text-shadow: 0 1px 0 #FAFAFA; } text-shadow: 0 1px 0 #FAFAFA; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom {
border: none; border: none;
clear: both; clear: both;
color: #777; color: #777;
@ -2077,40 +2078,56 @@ body {
padding: 0.3em 0; padding: 0.3em 0;
text-shadow: 0 1px 0 #FAFAFA; text-shadow: 0 1px 0 #FAFAFA;
word-wrap: break-word; } word-wrap: break-word; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a:hover { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a:hover,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a:hover {
color: #206485; } color: #206485; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom.unread-msgs .open-room { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom.unread-msgs .open-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom.unread-msgs .available-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom.unread-msgs .open-room {
max-width: 55%; max-width: 55%;
width: auto; width: auto;
font-weight: bold; } font-weight: bold; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a.room-info:before { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.room-info:before,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.room-info:before {
font-size: 15px; } font-size: 15px; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a.open-room { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.open-room,
float: left; #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.open-room {
width: 68%; width: 68%;
float: left;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
padding-right: 0.5em; } padding-right: 0.5em; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom a.available-room,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom a.available-room {
width: 85%; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark {
color: #A8ABA1; } color: #A8ABA1; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark.button-on { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark.button-on,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark.button-on {
color: #578EA9; } color: #578EA9; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark.button-on:hover { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .remove-bookmark.button-on:hover,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .remove-bookmark.button-on:hover {
color: #206485; } color: #206485; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .room-info { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom .room-info,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom .room-info {
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
font-weight: normal; } font-weight: normal; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom li.room-info { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom li.room-info,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom li.room-info {
display: block; display: block;
margin-left: 5px; } margin-left: 5px; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom p.room-info { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom p.room-info,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom p.room-info {
line-height: 22px; line-height: 22px;
margin: 0; margin: 0;
display: block; display: block;
white-space: normal; } white-space: normal; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom div.room-info { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .available-chatroom div.room-info,
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list .open-chatroom div.room-info {
padding: 0.3em 0; padding: 0.3em 0;
clear: left; clear: left;
width: 100%; } width: 100%; }

9
sass/_controlbox.scss
View File

@ -152,7 +152,8 @@
padding-bottom: 0.5em; padding-bottom: 0.5em;
text-shadow: 0 1px 0 $text-shadow-color; text-shadow: 0 1px 0 $text-shadow-color;
} }
dd.available-chatroom { .available-chatroom,
.open-chatroom {
border: none; border: none;
clear: both; clear: both;
color: $text-color; color: $text-color;
@ -165,6 +166,7 @@
color: $dark-link-color; color: $dark-link-color;
} }
&.unread-msgs { &.unread-msgs {
.available-room,
.open-room { .open-room {
max-width: 55%; max-width: 55%;
width: auto; width: auto;
@ -178,13 +180,16 @@
} }
} }
&.open-room { &.open-room {
float: left;
width: 68%; width: 68%;
float: left;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
padding-right: 0.5em; padding-right: 0.5em;
} }
&.available-room {
width: 85%;
}
} }
.remove-bookmark { .remove-bookmark {
&.button-on { &.button-on {

2
src/templates/room_item.html
View File

@ -1,5 +1,5 @@
<dd class="available-chatroom"> <dd class="available-chatroom">
<a class="open-room" <a class="open-room available-room"
data-room-jid="{{{jid}}}" data-room-jid="{{{jid}}}"
title="{{{open_title}}}" title="{{{open_title}}}"
href="#">{{{name}}}</a> href="#">{{{name}}}</a>