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,15 +292,6 @@ export default {
left: 100%; left: 100%;
} }
} }
.name {
flex-direction: row-reverse;
svg {
margin-left: 10px;
margin-right: 2px;
}
.pronouns { .pronouns {
left: 110%; left: 110%;
right: auto; right: auto;
@ -311,7 +302,6 @@ export default {
right: 100%; right: 100%;
} }
} }
}
} @else { } @else {
// second half of players // second half of players
z-index: $i - 1; z-index: $i - 1;