martyn
/
townsquare
mirror of https://github.com/bra1n/townsquare.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

tweaking styles and adding pronouns icon to name bar if the player has pronouns set, made the name bar slighlty wider to allow for the same number of charachtersfor this and moved the player menu slightly to account for it.

This commit is contained in:
Dave 2021-03-03 22:23:22 +00:00
parent 992841a45b
commit 4d2225c994
2 changed files with 35 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Player.vue
View File

@ -102,6 +102,10 @@
@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 !== ''"> <div class="pronouns" v-if="player.pronouns && player.pronouns !== ''">
<span>{{ player.pronouns }}</span> <span>{{ player.pronouns }}</span>
@ -652,13 +656,14 @@ li.move:not(.from) .player .overlay svg.move {
/***** Player name *****/ /***** Player name *****/
.player > .name { .player > .name {
display: inline-flex; right: 10%;
display: flex;
justify-content: center; justify-content: center;
font-size: 120%; font-size: 120%;
line-height: 120%; line-height: 120%;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
width: 100%; width: 120%;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
border: 3px solid black; border: 3px solid black;
border-radius: 10px; border-radius: 10px;
@ -666,6 +671,11 @@ li.move:not(.from) .player .overlay svg.move {
box-shadow: 0 0 5px black; box-shadow: 0 0 5px black;
padding: 0 4px; padding: 0 4px;
svg {
top: 3px;
margin-right: 10px;
}
span { span {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -683,9 +693,9 @@ li.move:not(.from) .player .overlay svg.move {
} }
.pronouns { .pronouns {
display: inline-flex; display: flex;
position: absolute; position: absolute;
right: 120%; right: 110%;
max-width: 250px; max-width: 250px;
z-index: 25; z-index: 25;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
@ -696,6 +706,8 @@ li.move:not(.from) .player .overlay svg.move {
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out;
padding: 0 4px;
bottom: -3px;
&:before { &:before {
content: " "; content: " ";
@ -717,7 +729,7 @@ li.move:not(.from) .player .overlay svg.move {
/***** Player menu *****/ /***** Player menu *****/
.player > .menu { .player > .menu {
position: absolute; position: absolute;
left: 100%; left: 110%;
bottom: -5px; bottom: -5px;
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;

27
src/components/TownSquare.vue
View File

@ -264,7 +264,7 @@ export default {
// open menu on the left // open menu on the left
.player > .menu { .player > .menu {
left: auto; left: auto;
right: 100%; right: 110%;
margin-right: 15px; margin-right: 15px;
&:before { &:before {
border-left-color: black; border-left-color: black;
@ -293,14 +293,23 @@ export default {
} }
} }
.pronouns { .name {
left: 120%; 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 {