From 760cdbfbabfbd5d2c67b6524e128bae5bf09bcaa Mon Sep 17 00:00:00 2001
From: El Yaagoubi Bilel <bilel.el-yaagoubi@student-cs.fr>
Date: Fri, 3 Jun 2022 18:11:41 +0200
Subject: [PATCH] hop
---
frontend/src/components/Movie.vue | 5 ++++-
frontend/src/views/Home.vue | 19 ++++++++++---------
2 files changed, 14 insertions(+), 10 deletions(-)
diff --git a/frontend/src/components/Movie.vue b/frontend/src/components/Movie.vue
index 4c84014..54bad72 100644
--- a/frontend/src/components/Movie.vue
+++ b/frontend/src/components/Movie.vue
@@ -1,7 +1,7 @@
<template>
<div class="child">
<img
- height="400"
+ class="movieImage"
:src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
/>
<h2>{{ movie.title }}</h2>
@@ -18,6 +18,9 @@ export default {
</script>
<style scoped>
+.movieImage {
+ width: 50%;
+}
.child {
margin-left: auto;
margin-right: auto;
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index a1aaf33..a9c940f 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -16,9 +16,12 @@
</p>
<div>Nom du film: {{ movieName }}</div> -->
<div class="parent">
- <tr v-for="movie in movies" :key="movie.id">
- <Movie class="child" :movie="movie" />
- </tr>
+ <Movie
+ class="child"
+ :movie="movie"
+ v-for="movie in movies"
+ :key="movie.id"
+ />
</div>
</div>
</template>
@@ -86,15 +89,13 @@ export default {
.parent {
display: flex;
- flex-flow: column wrap;
- height: 250px;
+ flex-wrap: wrap;
+ width: 100%;
+ justify-content: space-evenly;
}
.child {
- width: 40%;
- height: 40%;
- margin-left: auto;
- margin-right: auto;
+ width: 20%;
}
h3 {
--
GitLab