movie page : first results

frontend/src/components/MovieInfos.vue

 <template>
-  <img
-    :src="'https://image.tmdb.org/t/p/original/' + posterPath"
-    hightd="100%"
-  />
+  <div class="parent">
+    <h1>{{ movieTitle }}</h1>
+    <h4>{{ movieVoteAverage }}</h4>
+    <h4>{{ movieGenres }}</h4>
+    <h4>{{ movieOverview }} {{ movieOverview }} {{ movieOverview }}</h4>
+  </div>
 </template>
 
 <script>
 export default {
   props: {
-    posterPath: String,
+    movieTitle: String,
+    movieDate: String,
+    movieGenres: Array,
+    movieOverview: String,
+    movieVoteAverage: Number,
   },
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.parent {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+</style>

frontend/src/components/MoviePoster.vue

 <template>
+  <div class="posterParent">
     <img
+      class="poster"
       :src="'https://image.tmdb.org/t/p/original/' + posterPath"
-    hightd="100%"
     />
+  </div>
 </template>
 
 <script>
@@ -13,4 +15,14 @@ export default {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.poster {
+  height: 100%;
+}
+.posterParent {
+  display: flex;
+  margin-left: auto;
+  margin-right: auto;
+  align-items: center;
+}
+</style>

frontend/src/global.css

 body {
   margin: 0;
-  background-color: #EAF2EF;
+  background-color: #eaf2ef;
 }
 
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
+  height: 100vh;
+  overflow-y: auto;
 }

frontend/src/views/MoviePage.vue

 <template>
   <div class="home">
     <h1>Bienvenue sur la page film</h1>
-    <p class="movie-title">
-      {{ moviesInfos.title }}
-    </p>
-    <div>
-      <MoviePoster :posterPath="moviesInfos.poster_path" />
-      <MovieInfos :infos="moviesInfos.poster_path" />
+    <div class="parent">
+      <MoviePoster class="child" :posterPath="moviesInfos.poster_path" />
+      <MovieInfos
+        class="child"
+        :movieTitle="moviesInfos.title"
+        :movieDate="moviesInfos.release_date"
+        :movieGenres="moviesInfos.genre_ids"
+        :movieOverview="moviesInfos.overview"
+        :movieVoteAverage="moviesInfos.vote_average"
+      />
     </div>
   </div>
 </template>
@@ -14,12 +18,14 @@
 <script>
 import axios from "axios";
 import MoviePoster from "@/components/MoviePoster.vue";
+import MovieInfos from "@/components/MovieInfos.vue";
 const backendURL = process.env.VUE_APP_BACKEND_BASE_URL;
 
 export default {
   name: "Home",
   components: {
     MoviePoster,
+    MovieInfos,
   },
   data: function () {
     return {
@@ -58,28 +64,15 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .home {
-  text-align: center;
+  height: 100%;
 }
-
-.logo {
-  max-width: 100px;
-}
-
-h3 {
-  margin: 40px 0 0;
-}
-
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-li {
-  display: inline-block;
-  margin: 0 10px;
+.parent {
+  display: flex;
+  height: 80%;
 }
-
-a {
-  color: #ff68ad;
+.child {
+  width: 45%;
+  margin-left: auto;
+  margin-right: auto;
 }
 </style>