diff --git a/frontend/src/components/MovieInfos.vue b/frontend/src/components/MovieInfos.vue index 15cd8a71e78619b53acf250e277bbe6497b42eb5..611d76f4812028b763e7a1a820aefa13f3d0ea53 100644 --- a/frontend/src/components/MovieInfos.vue +++ b/frontend/src/components/MovieInfos.vue @@ -1,9 +1,13 @@ <template> <div class="parent"> - <h1>{{ movieTitle }}</h1> - <h4>{{ movieVoteAverage }}</h4> - <h4>{{ genreArray }}</h4> - <h4>{{ movieOverview }} {{ movieOverview }} {{ movieOverview }}</h4> + <div class="child"> + <h1>{{ movieTitle }}</h1> + <div class="mark"> + <h2>{{ movieVoteAverage }} ★</h2> + </div> + </div> + <h4>Genres : {{ genreArray.join(", ") }}</h4> + <h4>{{ movieOverview }}</h4> </div> </template> @@ -27,12 +31,9 @@ export default { methods: { developGenre: async function (genreId) { try { - console.log("g"); const response = await axios .get(backendURL + "/genres/genre/id/" + genreId) .then(); - console.log("oi"); - console.log(response.data); return response.data; } catch (error) { console.log(error); @@ -40,10 +41,6 @@ export default { }, developGenres: function (genreIdArray) { try { - var res = []; - console.log("f"); - console.log(genreIdArray); - // console.log([12, 16].map(this.developGenre)); const genreArray = genreIdArray.map(this.developGenre); return Promise.all(genreArray); } catch (error) { @@ -53,11 +50,7 @@ export default { }, }, created() { - console.log("a"); - console.log(); - - console.log("b"); - this.genreArray = this.developGenres([12, 16]).then((results) => { + this.developGenres(this.movieGenres).then((results) => { this.genreArray = results; }); }, @@ -70,4 +63,17 @@ export default { flex-direction: column; height: 100%; } +.child { + display: flex; + justify-content: flex-start; +} +.mark { + text-align: center; + vertical-align: center; + width: 10%; + height: auto; + background-color: #912f56; + border-radius: 25%; + margin-left: auto; +} </style>