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

36
src/components/Player.vue
View File

@ -42,6 +42,7 @@
/> />
<!-- Overlay icons --> <!-- Overlay icons -->
<div class="overlay">
<font-awesome-icon <font-awesome-icon
icon="skull" icon="skull"
class="vote" class="vote"
@ -78,6 +79,7 @@
@click="nominatePlayer(player)" @click="nominatePlayer(player)"
title="Nominate this 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;