Properly align user name and talking indicator

This commit is contained in:
Jonas Herzig 2018-09-24 13:20:57 +02:00
parent ca83780109
commit 2b7f7c1625
2 changed files with 10 additions and 4 deletions

View file

@ -304,14 +304,15 @@
<div data-bind="if: comment"> <div data-bind="if: comment">
<div class="user-comment tooltip" data-bind="html: comment"></div> <div class="user-comment tooltip" data-bind="html: comment"></div>
</div> </div>
<img class="user-talk-off" data-bind="visible: talking() == 'off'" <img class="user-talk user-talk-off" data-bind="visible: talking() == 'off'"
alt="talk off" src="/svg/talking_off.svg"> alt="talk off" src="/svg/talking_off.svg">
<img class="user-talk-on" data-bind="visible: talking() == 'on'" <img class="user-talk user-talk-on" data-bind="visible: talking() == 'on'"
alt="talk on" src="/svg/talking_on.svg"> alt="talk on" src="/svg/talking_on.svg">
<img class="user-talk-whisper" data-bind="visible: talking() == 'whisper'" <img class="user-talk user-talk-whisper" data-bind="visible: talking() == 'whisper'"
alt="whisper" src="/svg/talking_whisper.svg"> alt="whisper" src="/svg/talking_whisper.svg">
<img class="user-talk-shout" data-bind="visible: talking() == 'shout'" <img class="user-talk user-talk-shout" data-bind="visible: talking() == 'shout'"
alt="shout" src="/svg/talking_alt.svg"> alt="shout" src="/svg/talking_alt.svg">
<!-- /ko -->
<div class="user-name" data-bind="text: name"></div> <div class="user-name" data-bind="text: name"></div>
</div> </div>
</div> </div>

View file

@ -144,11 +144,15 @@ html, body {
.user { .user {
margin-left: 9px; margin-left: 9px;
} }
.user-talk {
vertical-align: middle;
}
.user-status, .channel-status { .user-status, .channel-status {
float: right; float: right;
} }
.user,.channel{ .user,.channel{
height: 23px; height: 23px;
line-height: 23px;
padding: 2px; padding: 2px;
border: 1px solid transparent; border: 1px solid transparent;
} }
@ -461,6 +465,7 @@ form {
padding-bottom: 0px; padding-bottom: 0px;
border: none; border: none;
height: 19px; height: 19px;
line-height: 19px;
} }
.minimal .user-status { .minimal .user-status {
height: 19px; height: 19px;