From c2bafd108f57b2b4d4b2424ba5db0f363183ceb8 Mon Sep 17 00:00:00 2001
From: Theophyl Hoguet <theophyl.hoguet@etu.u-bordeaux.fr>
Date: Sun, 12 Mar 2023 02:11:32 +0100
Subject: [PATCH] add label + animation

---
 frontend/src/components/Gallery.vue | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Gallery.vue b/frontend/src/components/Gallery.vue
index 8dfa691..51a592f 100644
--- a/frontend/src/components/Gallery.vue
+++ b/frontend/src/components/Gallery.vue
@@ -17,7 +17,10 @@ export default defineComponent({
 
 <template>
 	<div class="flex" v-if="images.keys !== null">
-		<Image v-for="[id, image] in images" :key="id" :id="id" />
+		<div v-for="[id, image] in images" :key="id" class="image">
+			<label>{{ image.name }}</label>
+			<Image class="gallery" :id="id" />
+		</div>
 	</div>
 	<h1 v-else>No image found</h1>
 </template>
@@ -30,12 +33,23 @@ export default defineComponent({
 	flex-wrap: wrap;
 }
 
-.flex>img {
-	margin: 5px;
+.image {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 }
 
-img {
-	max-width: 25%;
-	max-height: 25%;
+label {
+	font-size: 1.5em;
+	color: white;
+}
+</style>
+<style>
+.gallery>img {
+	margin: 5px;
+	max-width: max(33vw, calc(90vw/v-bind('images.size')));
+	max-height: max(33vh, calc(90vh/v-bind('images.size')));
+	margin: 2vw;
 }
 </style>
\ No newline at end of file