From 115946393ecb0e06d7658f76fd0570b19d59df60 Mon Sep 17 00:00:00 2001
From: El Yaagoubi Bilel <bilel.el-yaagoubi@student-cs.fr>
Date: Thu, 9 Jun 2022 09:48:56 +0200
Subject: [PATCH] movie page : first results
---
frontend/src/components/MovieInfos.vue | 24 +++++++++----
frontend/src/components/MoviePoster.vue | 22 +++++++++---
frontend/src/global.css | 4 ++-
frontend/src/views/MoviePage.vue | 47 +++++++++++--------------
4 files changed, 58 insertions(+), 39 deletions(-)
diff --git a/frontend/src/components/MovieInfos.vue b/frontend/src/components/MovieInfos.vue
index 6a244de..1f1f55e 100644
--- a/frontend/src/components/MovieInfos.vue
+++ b/frontend/src/components/MovieInfos.vue
@@ -1,16 +1,28 @@
<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>
diff --git a/frontend/src/components/MoviePoster.vue b/frontend/src/components/MoviePoster.vue
index 6a244de..402bfc9 100644
--- a/frontend/src/components/MoviePoster.vue
+++ b/frontend/src/components/MoviePoster.vue
@@ -1,8 +1,10 @@
<template>
- <img
- :src="'https://image.tmdb.org/t/p/original/' + posterPath"
- hightd="100%"
- />
+ <div class="posterParent">
+ <img
+ class="poster"
+ :src="'https://image.tmdb.org/t/p/original/' + posterPath"
+ />
+ </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>
diff --git a/frontend/src/global.css b/frontend/src/global.css
index 9f34d64..07bb832 100644
--- a/frontend/src/global.css
+++ b/frontend/src/global.css
@@ -1,8 +1,10 @@
body {
margin: 0;
- background-color: #EAF2EF;
+ background-color: #eaf2ef;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
+ height: 100vh;
+ overflow-y: auto;
}
diff --git a/frontend/src/views/MoviePage.vue b/frontend/src/views/MoviePage.vue
index 6214fd6..d088ecc 100644
--- a/frontend/src/views/MoviePage.vue
+++ b/frontend/src/views/MoviePage.vue
@@ -1,12 +1,16 @@
<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>
--
GitLab