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

better layout in desktop

Browse Source
This commit is contained in:
Alberto Xamin 2020-11-21 17:28:53 +01:00
parent badc9565da
commit 863725914c
No known key found for this signature in database
GPG Key ID: 4F026F48309500A2
1 changed files with 28 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,23 +1,25 @@
<template>
<div>
<h1>Lobby: {{ lobbyName }}</h1>
<h3>Giocatori (tu sei {{username}})</h3>
<div class="players-table">
<Card v-if="startGameCard" :card="startGameCard" @click.native="startGame"/>
<!-- <div style="position: relative;width:260pt;height:400pt;"> -->
<div v-for="p in playersTable" v-bind:key="p.card.name" style="position:relative;">
<Card :card="p.card" :class="{is_my_turn:p.is_my_turn}"/>
<tiny-hand :ncards="p.ncards"/>
<div class="tiny-equipment">
<Card v-for="card in p.equipment" v-bind:key="card.name+card.number" :card="card" />
<div class="lobby">
<div style="flex-grow: 4;">
<h1>Lobby: {{ lobbyName }}</h1>
<h3>Giocatori (tu sei {{username}})</h3>
<div class="players-table">
<Card v-if="startGameCard" :card="startGameCard" @click.native="startGame"/>
<!-- <div style="position: relative;width:260pt;height:400pt;"> -->
<div v-for="p in playersTable" v-bind:key="p.card.name" style="position:relative;">
<Card :card="p.card" :class="{is_my_turn:p.is_my_turn}"/>
<tiny-hand :ncards="p.ncards"/>
<div class="tiny-equipment">
<Card v-for="card in p.equipment" v-bind:key="card.name+card.number" :card="card" />
</div>
</div>
<!-- :style="p.style"/> -->
<!-- </div> -->
</div>
<div v-if="started">
<deck/>
<player :chooseCardFromPlayer="choose"/>
</div>
<!-- :style="p.style"/> -->
<!-- </div> -->
</div>
<div v-if="started">
<deck/>
<player :chooseCardFromPlayer="choose"/>
</div>
<chat/>
<transition name="bounce">
@ -197,4 +199,13 @@ export default {
justify-content: space-evenly;
margin-bottom: 12pt;
}
.lobby {
display: flex;
flex-direction: column;
}
@media only screen and (min-width:1000px) {
.lobby {
flex-direction: row;
}
}
</style>