diff --git a/frontend/src/components/Movie.vue b/frontend/src/components/Movie.vue index d3681d5048ac055287d730ccb286bd42e20df510..4c840145caad84401187dc3c1af5701d6437dea3 100644 --- a/frontend/src/components/Movie.vue +++ b/frontend/src/components/Movie.vue @@ -1,13 +1,11 @@ <template> - <div> - <p> - <img - height="400" - :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path" - /> - </p> - <p>{{ movie.title }}</p> - <p>{{ movie.release_date }}</p> + <div class="child"> + <img + height="400" + :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path" + /> + <h2>{{ movie.title }}</h2> + <h3>{{ movie.release_date }}</h3> </div> </template> @@ -20,7 +18,7 @@ export default { </script> <style scoped> -.center { +.child { margin-left: auto; margin-right: auto; } diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue index b83fe080c62969e5c60fcf7877a26af32e9d0627..a1aaf331d186737bdc8caa587d27c2d9b352581a 100644 --- a/frontend/src/views/Home.vue +++ b/frontend/src/views/Home.vue @@ -2,7 +2,7 @@ <div class="home"> <img alt="Vue logo" src="../assets/logo.png" /> <h1>Welcome to Movie Website</h1> - <p> + <!-- <p> For a guide and recipes on how to configure / customize this project,<br /> check out the <a href="https://cli.vuejs.org" target="_blank">vue-cli documentation</a>. @@ -14,7 +14,7 @@ type="text" /> </p> - <div>Nom du film: {{ movieName }}</div> + <div>Nom du film: {{ movieName }}</div> --> <div class="parent"> <tr v-for="movie in movies" :key="movie.id"> <Movie class="child" :movie="movie" /> @@ -86,13 +86,15 @@ export default { .parent { display: flex; - flex-flow: row nowrap; + flex-flow: column wrap; height: 250px; } .child { width: 40%; height: 40%; + margin-left: auto; + margin-right: auto; } h3 {