better layout in desktop

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

View File

@ -1,5 +1,6 @@
<template> <template>
<div> <div class="lobby">
<div style="flex-grow: 4;">
<h1>Lobby: {{ lobbyName }}</h1> <h1>Lobby: {{ lobbyName }}</h1>
<h3>Giocatori (tu sei {{username}})</h3> <h3>Giocatori (tu sei {{username}})</h3>
<div class="players-table"> <div class="players-table">
@ -19,6 +20,7 @@
<deck/> <deck/>
<player :chooseCardFromPlayer="choose"/> <player :chooseCardFromPlayer="choose"/>
</div> </div>
</div>
<chat/> <chat/>
<transition name="bounce"> <transition name="bounce">
<Chooser v-if="showChooser" text="Scegli il tuo personaggio" :cards="availableCharacters" :select="setCharacter"/> <Chooser v-if="showChooser" text="Scegli il tuo personaggio" :cards="availableCharacters" :select="setCharacter"/>
@ -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>