From 31e848447ba4e50c54ad2ad9361db1ae80b27790 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juliette=20Kalfl=C3=A8che?=
<juliette.kalfleche@student-cs.fr>
Date: Thu, 9 Jun 2022 11:21:53 +0200
Subject: [PATCH] begin the menu with movies type
---
frontend/src/components/MovieType.vue | 28 +++++++++++++++++++++++++++
frontend/src/components/SearchBar.vue | 9 ++++-----
frontend/src/views/Home.vue | 8 ++++++++
3 files changed, 40 insertions(+), 5 deletions(-)
create mode 100644 frontend/src/components/MovieType.vue
diff --git a/frontend/src/components/MovieType.vue b/frontend/src/components/MovieType.vue
new file mode 100644
index 0000000..0e3e68f
--- /dev/null
+++ b/frontend/src/components/MovieType.vue
@@ -0,0 +1,28 @@
+<template>
+<div class="box">
+<h1>Genre</h1>
+<input type="checkbox" id="action" value="Action" v-model="genre">
+<label for="Action">Action</label>
+<br>
+<input type="checkbox" id="horreur" value="Horreur" v-model="genre">
+<label for="horreur">Horreur</label>
+<br>
+</div>
+</template>
+
+<script>
+
+</script>
+
+<style scoped>
+.box {
+ margin-left: 20px;
+ background-color: #912F56;
+ width: 200px;
+ border-radius: 20px;
+ color:white;
+ justify-content: space-between;
+
+}
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/SearchBar.vue b/frontend/src/components/SearchBar.vue
index c302247..cff3df5 100644
--- a/frontend/src/components/SearchBar.vue
+++ b/frontend/src/components/SearchBar.vue
@@ -26,10 +26,8 @@ methods: {
#content {
height: 50px;
width: 300px;
- margin-left: 500px;
- top: 50%;
- left: 50%;
transform: translate(-50%, -50%);
+ margin-top: 20px;
}
#content.on {
@@ -82,6 +80,7 @@ input {
-webkit-transform: translate(-100%, -50%);
-ms-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
+
}
.search:before {
@@ -152,8 +151,8 @@ input {
transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
-webkit-transition-delay: 0.4s, 0s, 0.4s;
transition-delay: 0.4s, 0s, 0.4s;
- -webkit-transform: translate(-100%, -50%);
+ /* -webkit-transform: translate(-100%, -50%);
-ms-transform: translate(-100%, -50%);
- transform: translate(-100%, -50%);
+ transform: translate(-100%, -50%); */
}
</style>
\ No newline at end of file
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index b4dfad9..d6a1e90 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -17,6 +17,7 @@
</div>
<br />
<div class="search">
+ <MovieType />
<SearchBar />
</div>
<div class="film-name">Le film est : {{ moviename }}</div>
@@ -40,6 +41,7 @@ import axios from "axios";
import 'vue3-carousel/dist/carousel.css';
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';
import SearchBar from "../components/SearchBar.vue";
+import MovieType from "../components/MovieType.vue";
export default {
name: "Home",
@@ -49,6 +51,7 @@ export default {
Pagination,
Navigation,
SearchBar,
+ MovieType,
},
data: function () {
return {
@@ -110,4 +113,9 @@ a {
.film {
text-align: center;
}
+.search {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
</style>
--
GitLab