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

overlay fixes

This commit is contained in:
Steffen 2020-06-07 23:53:00 +02:00
parent 20b95e4a61
commit ef4a7ad3d2
No known key found for this signature in database
GPG Key ID: 764D74E98267DFC6
1 changed files with 61 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/components/Player.vue
View File

@ -42,42 +42,44 @@
/> />
<!-- Overlay icons --> <!-- Overlay icons -->
<font-awesome-icon <div class="overlay">
icon="skull" <font-awesome-icon
class="vote" icon="skull"
title="Voted YES" class="vote"
@click="vote()" title="Voted YES"
/> @click="vote()"
<font-awesome-icon />
icon="times" <font-awesome-icon
class="vote" icon="times"
title="Voted NO" class="vote"
@click="vote()" title="Voted NO"
/> @click="vote()"
<font-awesome-icon />
icon="times-circle" <font-awesome-icon
class="cancel" icon="times-circle"
title="Cancel" class="cancel"
@click="cancel()" title="Cancel"
/> @click="cancel()"
<font-awesome-icon />
icon="exchange-alt" <font-awesome-icon
class="swap" icon="exchange-alt"
@click="swapPlayer(player)" class="swap"
title="Swap seats with this player" @click="swapPlayer(player)"
/> title="Swap seats with this player"
<font-awesome-icon />
icon="redo-alt" <font-awesome-icon
class="move" icon="redo-alt"
@click="movePlayer(player)" class="move"
title="Move player to this seat" @click="movePlayer(player)"
/> title="Move player to this seat"
<font-awesome-icon />
icon="hand-point-right" <font-awesome-icon
class="nominate" icon="hand-point-right"
@click="nominatePlayer(player)" class="nominate"
title="Nominate this player" @click="nominatePlayer(player)"
/> title="Nominate this player"
/>
</div>
<!-- Claimed seat icon --> <!-- Claimed seat icon -->
<font-awesome-icon icon="chair" v-if="player.id" class="seat" /> <font-awesome-icon icon="chair" v-if="player.id" class="seat" />
@ -433,7 +435,21 @@ export default {
} }
/****** Player choice icons *******/ /****** Player choice icons *******/
.player > svg { .player .overlay {
width: 100%;
position: absolute;
pointer-events: none;
top: 0;
display: flex;
align-items: center;
justify-content: center;
&:after {
content: " ";
display: block;
padding-top: 100%;
}
}
.player .overlay svg {
position: absolute; position: absolute;
filter: drop-shadow(0 0 3px black); filter: drop-shadow(0 0 3px black);
z-index: 2; z-index: 2;
@ -443,8 +459,6 @@ export default {
&.nominate, &.nominate,
&.vote, &.vote,
&.cancel { &.cancel {
top: 9%;
left: 25%;
width: 50%; width: 50%;
height: 60%; height: 60%;
opacity: 0; opacity: 0;
@ -466,27 +480,27 @@ export default {
} }
} }
#townsquare.vote .player.vote-yes > svg.vote.fa-skull { #townsquare.vote .player.vote-yes .overlay svg.vote.fa-skull {
opacity: 0.5; opacity: 0.5;
transform: scale(1); transform: scale(1);
} }
#townsquare.vote .player.you.vote-yes > svg.vote.fa-skull, #townsquare.vote .player.you.vote-yes .overlay svg.vote.fa-skull,
#townsquare.vote .player.vote-lock.vote-yes > svg.vote.fa-skull, #townsquare.vote .player.vote-lock.vote-yes .overlay svg.vote.fa-skull,
#townsquare.vote .player.vote-lock:not(.vote-yes) > svg.vote.fa-times { #townsquare.vote .player.vote-lock:not(.vote-yes) .overlay svg.vote.fa-times {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
} }
li.from:not(.nominate) .player > svg.cancel { li.from:not(.nominate) .player .overlay svg.cancel {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
pointer-events: all; pointer-events: all;
} }
li.swap:not(.from) .player > svg.swap, li.swap:not(.from) .player .overlay svg.swap,
li.nominate .player > svg.nominate, li.nominate .player .overlay svg.nominate,
li.move:not(.from) .player > svg.move { li.move:not(.from) .player .overlay svg.move {
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
pointer-events: all; pointer-events: all;