Skip to content
Snippets Groups Projects
Commit 11594639 authored by Bilel El Yaagoubi's avatar Bilel El Yaagoubi
Browse files

movie page : first results

parent 24e8488b
Branches
No related tags found
1 merge request!8Movie page
<template> <template>
<img <div class="parent">
:src="'https://image.tmdb.org/t/p/original/' + posterPath" <h1>{{ movieTitle }}</h1>
hightd="100%" <h4>{{ movieVoteAverage }}</h4>
/> <h4>{{ movieGenres }}</h4>
<h4>{{ movieOverview }} {{ movieOverview }} {{ movieOverview }}</h4>
</div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
posterPath: String, movieTitle: String,
movieDate: String,
movieGenres: Array,
movieOverview: String,
movieVoteAverage: Number,
}, },
}; };
</script> </script>
<style scoped></style> <style scoped>
.parent {
display: flex;
flex-direction: column;
height: 100%;
}
</style>
<template> <template>
<div class="posterParent">
<img <img
class="poster"
:src="'https://image.tmdb.org/t/p/original/' + posterPath" :src="'https://image.tmdb.org/t/p/original/' + posterPath"
hightd="100%"
/> />
</div>
</template> </template>
<script> <script>
...@@ -13,4 +15,14 @@ export default { ...@@ -13,4 +15,14 @@ export default {
}; };
</script> </script>
<style scoped></style> <style scoped>
.poster {
height: 100%;
}
.posterParent {
display: flex;
margin-left: auto;
margin-right: auto;
align-items: center;
}
</style>
body { body {
margin: 0; margin: 0;
background-color: #EAF2EF; background-color: #eaf2ef;
} }
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
height: 100vh;
overflow-y: auto;
} }
<template> <template>
<div class="home"> <div class="home">
<h1>Bienvenue sur la page film</h1> <h1>Bienvenue sur la page film</h1>
<p class="movie-title"> <div class="parent">
{{ moviesInfos.title }} <MoviePoster class="child" :posterPath="moviesInfos.poster_path" />
</p> <MovieInfos
<div> class="child"
<MoviePoster :posterPath="moviesInfos.poster_path" /> :movieTitle="moviesInfos.title"
<MovieInfos :infos="moviesInfos.poster_path" /> :movieDate="moviesInfos.release_date"
:movieGenres="moviesInfos.genre_ids"
:movieOverview="moviesInfos.overview"
:movieVoteAverage="moviesInfos.vote_average"
/>
</div> </div>
</div> </div>
</template> </template>
...@@ -14,12 +18,14 @@ ...@@ -14,12 +18,14 @@
<script> <script>
import axios from "axios"; import axios from "axios";
import MoviePoster from "@/components/MoviePoster.vue"; import MoviePoster from "@/components/MoviePoster.vue";
import MovieInfos from "@/components/MovieInfos.vue";
const backendURL = process.env.VUE_APP_BACKEND_BASE_URL; const backendURL = process.env.VUE_APP_BACKEND_BASE_URL;
export default { export default {
name: "Home", name: "Home",
components: { components: {
MoviePoster, MoviePoster,
MovieInfos,
}, },
data: function () { data: function () {
return { return {
...@@ -58,28 +64,15 @@ export default { ...@@ -58,28 +64,15 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped> <style scoped>
.home { .home {
text-align: center; height: 100%;
} }
.parent {
.logo { display: flex;
max-width: 100px; height: 80%;
}
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
} }
.child {
a { width: 45%;
color: #ff68ad; margin-left: auto;
margin-right: auto;
} }
</style> </style>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment