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

View File

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