From 863725914c466ec57660b9b499b94174004f4387 Mon Sep 17 00:00:00 2001
From: Alberto Xamin <alberto@xamin.it>
Date: Sat, 21 Nov 2020 17:28:53 +0100
Subject: [PATCH] better layout in desktop

---
 frontend/src/components/Lobby.vue | 45 +++++++++++++++++++------------
 1 file changed, 28 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/Lobby.vue b/frontend/src/components/Lobby.vue
index ef89ac5..7bc70b7 100644
--- a/frontend/src/components/Lobby.vue
+++ b/frontend/src/components/Lobby.vue
@@ -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>