From aa38cc293a5e7d7c584eddd1373fc71e390fba50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juliette=20Kalfl=C3=A8che?=
<juliette.kalfleche@student-cs.fr>
Date: Fri, 10 Jun 2022 11:28:39 +0200
Subject: [PATCH] add flex
---
.vscode/settings.json | 3 ++
frontend/src/views/Home.vue | 77 +++++++++++++++++++++----------------
2 files changed, 46 insertions(+), 34 deletions(-)
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6378fc8..6953856 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -10,5 +10,8 @@
},
"[javascript][vue]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
+ },
+ "[vue]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index e40d143..10eb82a 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,45 +1,52 @@
<template>
<div class="home">
- <div class="carousel">
- <carousel :items-to-show="5.5" autoplay=1300>
- <slide v-for="movie in movies" :key="movie.id" autoplay='True' transition="100" >
- <img
- :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
- withd="100"
- height="300"
- />
- </slide>
- <template #addons>
- <navigation />
- <pagination />
- </template>
- </carousel>
- </div>
+ <div class="carousel">
+ <carousel :items-to-show="5.5" autoplay="1300">
+ <slide
+ v-for="movie in movies"
+ :key="movie.id"
+ autoplay="True"
+ transition="100"
+ >
+ <img
+ :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
+ withd="100"
+ height="300"
+ />
+ </slide>
+ <template #addons>
+ <navigation />
+ <pagination />
+ </template>
+ </carousel>
+ </div>
<br />
<div class="corps">
- <div class="type">
- <MovieType />
- </div>
- <li v-for="movie in movies" :key="movie.id">
- <p class="movie-title">
- {{ movie.title }}
- </p>
- <p class="film">
- <img
- :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
- withd="100"
- height="300"
- />
- </p>
- </li>
+ <div class="type">
+ <MovieType />
+ </div>
+ <div>
+ <li v-for="movie in movies" :key="movie.id">
+ <p class="movie-title">
+ {{ movie.title }}
+ </p>
+ <p class="film">
+ <img
+ :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
+ withd="100"
+ height="300"
+ />
+ </p>
+ </li>
+ </div>
</div>
</div>
</template>
<script>
import axios from "axios";
-import 'vue3-carousel/dist/carousel.css';
-import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';
+import "vue3-carousel/dist/carousel.css";
+import { Carousel, Slide, Pagination, Navigation } from "vue3-carousel";
import MovieType from "../components/MovieType.vue";
export default {
@@ -81,7 +88,6 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-
.logo {
max-width: 100px;
}
@@ -105,7 +111,10 @@ li {
margin-right: 5px;
}
.film {
- display:flex;
+ display: flex;
align-self: center;
}
+.corps {
+ display: flex;
+}
</style>
--
GitLab