From 9e5adbc02f3aac153ff185d3e023803c33d8dccb Mon Sep 17 00:00:00 2001
From: Alberto Xamin <alberto@xamin.it>
Date: Mon, 25 Jan 2021 12:57:34 +0100
Subject: [PATCH] better equipment display and fix for safari

---
 frontend/src/components/Lobby.vue  | 7 +++----
 frontend/src/components/Player.vue | 7 +++++++
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/Lobby.vue b/frontend/src/components/Lobby.vue
index a6691d7..2a557f3 100644
--- a/frontend/src/components/Lobby.vue
+++ b/frontend/src/components/Lobby.vue
@@ -29,7 +29,9 @@
 					<tiny-hand :ncards="p.ncards" @click.native="drawFromPlayer(p.name)" :ismyturn="p.pending_action === 2"/>
 					<span style="position:absolute;top:10pt;" class="center-stuff">{{getActionEmoji(p)}}</span>
 					<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, i) in p.equipment" v-bind:key="card.name+card.number"
+									:card="card" @click.native="selectedInfo = p.equipment"
+									:style="`margin-top: ${i<1?10:-(Math.min((p.equipment.length+1)*12,80))}pt`"/>
 					</div>
 					<div v-if="p.is_bot" style="position:absolute;bottom:57%;" class="center-stuff">
 						<span>🤖</span>
@@ -356,9 +358,6 @@ export default {
 	transform: scale(0.8);
 	margin-bottom: -4pt;
 }
-.tiny-equipment .card:nth-child(n+2) {
-	margin-top: -60pt;
-}
 .tiny-equipment .card:hover {
 	transform: translateY(10px) scale(1.1);
 	z-index: 1;
diff --git a/frontend/src/components/Player.vue b/frontend/src/components/Player.vue
index 0e7d4d3..6d8a8ee 100644
--- a/frontend/src/components/Player.vue
+++ b/frontend/src/components/Player.vue
@@ -423,6 +423,13 @@ export default {
 	border-radius: 4pt;
 	min-height: 40pt;
 }
+@media not all and (min-resolution:.001dpcm)
+{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
+	.hand {
+		border-radius: 0;
+	}
+}}
+
 .hand>.card{
 	margin-left: -30pt;
 }