Skip to content
Snippets Groups Projects
Commit 31e84844 authored by Juliette Kalflèche's avatar Juliette Kalflèche
Browse files

begin the menu with movies type

parent b2740584
No related branches found
No related tags found
1 merge request!14Changes for the search bar
Pipeline #42567 passed
<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
......@@ -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
......@@ -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>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment