Update room features markup to use font awesome

This commit is contained in:
JC Brand 2018-03-06 18:33:59 +01:00
parent 181b1836b0
commit d04a7df295
4 changed files with 39 additions and 40 deletions

View File

@ -6249,10 +6249,6 @@ body.reset {
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
padding: 0.3em 0;
font-weight: bold; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
font-size: 12px;
width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
width: 100%; }
@ -6284,6 +6280,12 @@ body.reset {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
padding-top: 0; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature {
width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa {
color: #777; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li {
cursor: default;
@ -6293,10 +6295,9 @@ body.reset {
padding: 0.2em 0.5em 0.2em 0;
text-overflow: ellipsis;
white-space: nowrap; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class^="icon-"], #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class*=" icon-"],
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li [class^="icon-"],
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li [class*=" icon-"] {
padding-right: 0.5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li .fa,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li .fa {
margin-right: 0.5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
font-size: 10px; }

View File

@ -6366,10 +6366,6 @@ body {
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
padding: 0.3em 0;
font-weight: bold; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
font-size: 14px;
width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
width: 100%; }
@ -6401,6 +6397,12 @@ body {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
padding-top: 0; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature {
width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa {
color: #777; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li {
cursor: default;
@ -6410,10 +6412,9 @@ body {
padding: 0.2em 0.5em 0.2em 0;
text-overflow: ellipsis;
white-space: nowrap; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class^="icon-"], #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li [class*=" icon-"],
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li [class^="icon-"],
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li [class*=" icon-"] {
padding-right: 0.5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li .fa,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li .fa {
margin-right: 0.5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
font-size: 10px; }

View File

@ -153,15 +153,6 @@
font-weight: bold;
}
ul {
li {
&.feature {
font-size: $font-size-small;
width: 100%;
}
}
}
.chatroom-features {
width: 100%;
.feature {
@ -194,6 +185,12 @@
}
&.features-list {
padding-top: 0;
.feature {
width: 100%;
.fa {
color: $text-color;
}
}
}
li {
cursor: default;
@ -203,8 +200,8 @@
padding: 0.2em 0.5em 0.2em 0;
text-overflow: ellipsis;
white-space: nowrap;
[class^="icon-"], [class*=" icon-"] {
padding-right: 0.5em;
.fa {
margin-right: 0.5em;
}
&.feature {
font-size: $font-size-tiny;

View File

@ -3,42 +3,42 @@
{[ } ]}
<ul class="features-list">
{[ if (o.passwordprotected) { ]}
<li class="feature" title="{{{ o.tt_passwordprotected }}}"><span class="icon-lock"></span>{{{ o.label_passwordprotected }}}</li>
<li class="feature" title="{{{ o.tt_passwordprotected }}}"><span class="fa fa-lock"></span>{{{ o.label_passwordprotected }}}</li>
{[ } ]}
{[ if (o.unsecured) { ]}
<li class="feature" title="{{{ o.tt_unsecured }}}"><span class="icon-unlocked"></span>{{{ o.label_unsecured }}}</li>
<li class="feature" title="{{{ o.tt_unsecured }}}"><span class="fa fa-unlock"></span>{{{ o.label_unsecured }}}</li>
{[ } ]}
{[ if (o.hidden) { ]}
<li class="feature" title="{{{ o.tt_hidden }}}"><span class="icon-eye-blocked"></span>{{{ o.label_hidden }}}</li>
<li class="feature" title="{{{ o.tt_hidden }}}"><span class="fa fa-eye-slash"></span>{{{ o.label_hidden }}}</li>
{[ } ]}
{[ if (o.public_room) { ]}
<li class="feature" title="{{{ o.tt_public }}}"><span class="icon-eye"></span>{{{ o.label_public }}}</li>
<li class="feature" title="{{{ o.tt_public }}}"><span class="fa fa-eye"></span>{{{ o.label_public }}}</li>
{[ } ]}
{[ if (o.membersonly) { ]}
<li class="feature" title="{{{ o.tt_membersonly }}}"><span class="icon-address-book"></span>{{{ o.label_membersonly }}}</li>
<li class="feature" title="{{{ o.tt_membersonly }}}"><span class="fa fa-address-book"></span>{{{ o.label_membersonly }}}</li>
{[ } ]}
{[ if (o.open) { ]}
<li class="feature" title="{{{ o.tt_open }}}"><span class="icon-globe"></span>{{{ o.label_open }}}</li>
<li class="feature" title="{{{ o.tt_open }}}"><span class="fa fa-globe"></span>{{{ o.label_open }}}</li>
{[ } ]}
{[ if (o.persistent) { ]}
<li class="feature" title="{{{ o.tt_persistent }}}"><span class="icon-save"></span>{{{ o.label_persistent }}}</li>
<li class="feature" title="{{{ o.tt_persistent }}}"><span class="fa fa-save"></span>{{{ o.label_persistent }}}</li>
{[ } ]}
{[ if (o.temporary) { ]}
<li class="feature" title="{{{ o.tt_temporary }}}"><span class="icon-snowflake"></span>{{{ o.label_temporary }}}</li>
<li class="feature" title="{{{ o.tt_temporary }}}"><span class="fa fa-snowflake"></span>{{{ o.label_temporary }}}</li>
{[ } ]}
{[ if (o.nonanonymous) { ]}
<li class="feature" title="{{{ o.tt_nonanonymous }}}"><span class="icon-idcard-dark"></span>{{{ o.label_nonanonymous }}}</li>
<li class="feature" title="{{{ o.tt_nonanonymous }}}"><span class="fa fa-idcard-dark"></span>{{{ o.label_nonanonymous }}}</li>
{[ } ]}
{[ if (o.semianonymous) { ]}
<li class="feature" title="{{{ o.tt_semianonymous }}}"><span class="icon-info"></span>{{{ o.label_semianonymous }}}</li>
<li class="feature" title="{{{ o.tt_semianonymous }}}"><span class="fa fa-user-secret"></span>{{{ o.label_semianonymous }}}</li>
{[ } ]}
{[ if (o.moderated) { ]}
<li class="feature" title="{{{ o.tt_moderated }}}"><span class="icon-legal"></span>{{{ o.label_moderated }}}</li>
<li class="feature" title="{{{ o.tt_moderated }}}"><span class="fa fa-gavel"></span>{{{ o.label_moderated }}}</li>
{[ } ]}
{[ if (o.unmoderated) { ]}
<li class="feature" title="{{{ o.tt_unmoderated }}}"><span class="icon-info"></span>{{{ o.label_unmoderated }}}</li>
<li class="feature" title="{{{ o.tt_unmoderated }}}"><span class="fa fa-info-circle"></span>{{{ o.label_unmoderated }}}</li>
{[ } ]}
{[ if (o.mam_enabled) { ]}
<li class="feature" title="{{{ o.tt_mam_enabled }}}"><span class="icon-database"></span>{{{ o.label_mam_enabled }}}</li>
<li class="feature" title="{{{ o.tt_mam_enabled }}}"><span class="fa fa-database"></span>{{{ o.label_mam_enabled }}}</li>
{[ } ]}
</ul>