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
Branches
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