diff --git a/frontend/src/components/Movie.vue b/frontend/src/components/Movie.vue index 4c840145caad84401187dc3c1af5701d6437dea3..54bad72ffa16f775b445b1ee8b5ed31c5911bb6c 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 a1aaf331d186737bdc8caa587d27c2d9b352581a..a9c940f3269a7cac2826ba23bde83b608829921a 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 {