final styling changes, making pronouns icon always appear on the same side.

This commit is contained in:
Dave 2021-03-06 09:34:18 +00:00
parent b932ce2a15
commit 9e249765de
2 changed files with 13 additions and 24 deletions

View File

@ -102,12 +102,9 @@
@click="isMenuOpen = !isMenuOpen"
:class="{ active: isMenuOpen }"
>
<font-awesome-icon
icon="venus-mars"
v-if="player.pronouns && player.pronouns !== ''"
/>
<span>{{ player.name }}</span>
<div class="pronouns" v-if="player.pronouns && player.pronouns !== ''">
<font-awesome-icon icon="venus-mars" v-if="player.pronouns" />
<div class="pronouns" v-if="player.pronouns">
<span>{{ player.pronouns }}</span>
</div>
</div>
@ -675,13 +672,15 @@ li.move:not(.from) .player .overlay svg.move {
svg {
top: 3px;
margin-right: 10px;
margin-right: 2px;
}
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
flex-grow: 1;
}
#townsquare:not(.spectator) &:hover,

View File

@ -292,24 +292,14 @@ export default {
left: 100%;
}
}
.name {
flex-direction: row-reverse;
svg {
margin-left: 10px;
margin-right: 2px;
}
.pronouns {
left: 110%;
right: auto;
&:before {
border-left-color: transparent;
border-right-color: black;
left: auto;
right: 100%;
}
.pronouns {
left: 110%;
right: auto;
&:before {
border-left-color: transparent;
border-right-color: black;
left: auto;
right: 100%;
}
}
} @else {