techwire/bang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix for smaller screen devices

Browse Source
This commit is contained in:
Alberto Xamin 2020-11-29 21:32:51 +01:00
parent e8f97df249
commit dc0c6230ea
No known key found for this signature in database
GPG Key ID: 4F026F48309500A2
2 changed files with 5 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/Lobby.vue
View File

@ -19,7 +19,7 @@
<Card :card="p.card" :class="{is_my_turn:p.is_my_turn}"/> <Card :card="p.card" :class="{is_my_turn:p.is_my_turn}"/>
<Card v-if="p.character" :card="p.character" class="character tiny-character" @click.native="selectedInfo = [p.character]"/> <Card v-if="p.character" :card="p.character" class="character tiny-character" @click.native="selectedInfo = [p.character]"/>
<tiny-hand :ncards="p.ncards" @click.native="drawFromPlayer(p.name)"/> <tiny-hand :ncards="p.ncards" @click.native="drawFromPlayer(p.name)"/>
<span style="position:absolute;top:0;" class="center-stuff">{{getActionEmoji(p)}}</span> <span style="position:absolute;top:10pt;" class="center-stuff">{{getActionEmoji(p)}}</span>
<div class="tiny-equipment"> <div class="tiny-equipment">
<Card v-for="card in p.equipment" v-bind:key="card.name+card.number" :card="card" @click.native="selectedInfo = p.equipment"/> <Card v-for="card in p.equipment" v-bind:key="card.name+card.number" :card="card" @click.native="selectedInfo = p.equipment"/>
</div> </div>
@ -239,24 +239,22 @@ export default {
top: 0; top: 0;
} }
.tiny-health { .tiny-health {
position: absolute;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
top: -16pt;
transform: scale(0.8); transform: scale(0.8);
right: 0; margin-bottom: -4pt;
left: 0;
} }
.tiny-equipment .card:nth-child(n+2) { .tiny-equipment .card:nth-child(n+2) {
margin-top: -60pt; margin-top: -60pt;
} }
.tiny-character { .tiny-character {
position: absolute; position: absolute;
transform: scale(0.6) translate(-80px, -50px); transform: scale(0.5) translate(-80px, -40px);
top: 0; top: 0;
} }
.players-table { .players-table {
display: flex; display: flex;
flex-wrap: wrap;
justify-content: space-evenly; justify-content: space-evenly;
margin-bottom: 12pt; margin-bottom: 12pt;
} }

2
frontend/src/components/TinyHand.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div style="position:absolute;transform:scale(0.45);bottom:50pt;"> <div style="position:absolute;transform:scale(0.4);bottom:52pt;">
<div class="card back" v-for="(n, i) in ncards" :style="`position:absolute; transform:rotate(${(i-ncards/2)*2}deg) translate(${i*15}px,0);`" v-bind:key="n" :alt="i"> <div class="card back" v-for="(n, i) in ncards" :style="`position:absolute; transform:rotate(${(i-ncards/2)*2}deg) translate(${i*15}px,0);`" v-bind:key="n" :alt="i">
<h4 v-if="n==ncards">PewPew!</h4> <h4 v-if="n==ncards">PewPew!</h4>
<div class="emoji" v-if="n==ncards">💥</div> <div class="emoji" v-if="n==ncards">💥</div>