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