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

new searchbar

parent 31e84844
Branches
No related tags found
1 merge request!14Changes for the search bar
Pipeline #42568 failed
frontend/src/assets/loupe.png

10.9 KiB

...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<img class="logo" alt="Vue logo" src="../assets/logo.png" /> <img class="logo" alt="Vue logo" src="../assets/logo.png" />
<h1 class="text" >CaCaoCritics</h1> <h1 class="text" >CaCaoCritics</h1>
</div> </div>
<SearchBar />
<div class="menu"> <div class="menu">
<BurgerMenu /> <BurgerMenu />
</div> </div>
...@@ -12,11 +13,13 @@ ...@@ -12,11 +13,13 @@
<script> <script>
import BurgerMenu from "@/components/BurgerMenu.vue"; import BurgerMenu from "@/components/BurgerMenu.vue";
import SearchBar from "./SearchBar.vue";
export default { export default {
name: "Banner", name: "Banner",
components: { components: {
BurgerMenu, BurgerMenu,
SearchBar
}, },
}; };
</script> </script>
......
<template> <template>
<div class="box"> <div class="box">
<h1>Genre</h1> <h1>Genre</h1>
<div class="check">
<input type="checkbox" id="action" value="Action" v-model="genre"> <input type="checkbox" id="action" value="Action" v-model="genre">
<label for="Action">Action</label> <label for="Action">Action</label>
<br> </div>
<div class="check">
<input type="checkbox" id="horreur" value="Horreur" v-model="genre"> <input type="checkbox" id="horreur" value="Horreur" v-model="genre">
<label for="horreur">Horreur</label> <label for="horreur">Horreur</label>
</div>
<div class="check">
<input type="checkbox" id="fantastique" value="Fantastique" v-model="genre">
<label for="fantastique">Fantastique</label>
</div>
<br> <br>
</div> </div>
</template> </template>
...@@ -16,13 +23,14 @@ ...@@ -16,13 +23,14 @@
<style scoped> <style scoped>
.box { .box {
display: flex;
flex-direction: column;
margin-left: 20px; margin-left: 20px;
background-color: #912F56; background-color: #912F56;
width: 200px; width: 200px;
border-radius: 20px; border-radius: 20px;
color:white; color:white;
justify-content: space-between; justify-content: center;
} }
</style> </style>
\ No newline at end of file
<template> <template>
<form id="content"> <input type="text" v-model="input" placeholder="Search movies..." />
<input type="text" name="input" class="input" :class="{ square: closed}">
<button @click="toggleClose" type="reset" class="search" :class="{ close: closed }"></button>
</form>
</template> </template>
<script> <script>
export default { export default {
data: function () { data: function () {
return { return {
closed: false moviename: "",
} movies: [],
moviesLoadingError: "",
};
}, },
methods: { methods: {
toggleClose() { fetchMovies: function () {
this.closed = !this.closed axios
} .get(
`https://api.themoviedb.org/3/movie/popular?api_key=522d421671cf75c2cba341597d86403a`
)
.then((response) => {
this.movies = response.data.results;
})
.catch((error) => {
this.moviesLoadingError = "An error occured while e ing movies.";
console.error(error);
});
}, },
} },
};
</script> </script>
<style scoped> <style scoped>
@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
#content {
height: 50px;
width: 300px;
transform: translate(-50%, -50%);
margin-top: 20px;
}
#content.on {
-webkit-animation-name: in-out;
animation-name: in-out;
-webkit-animation-duration: 0.7s;
animation-duration: 0.7s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
input { input {
box-sizing: border-box; display: block;
width: 50px; width: 350px;
height: 50px; margin: 20px auto;
border: 4px solid #000000; padding: 10px 45px;
border-radius: 50%; background: white url("../assets/loupe.png") no-repeat 15px center;
background: none; background-size: 15px 15px;
color: #fff;
font-size: 16px; font-size: 16px;
font-weight: 400; border: none;
font-family: Roboto; border-radius: 5px;
outline: 0; box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
-webkit-transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s; rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
-webkit-transform: translate(-100%, -50%);
-ms-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
} }
.search { .item {
background: none; width: 350px;
position: absolute; margin: 0 auto 10px auto;
top: 0px; padding: 10px 20px;
left: 0; color: white;
height: 50px; border-radius: 5px;
width: 50px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
padding: 0; rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
border-radius: 100%;
outline: 0;
border: 0;
color: inherit;
cursor: pointer;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
-webkit-transform: translate(-100%, -50%);
-ms-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
} }
.search:before { .movie {
content: ""; background-color: rgb(97, 62, 252);
position: absolute;
width: 20px;
height: 4px;
background-color: #000;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: 26px;
margin-left: 17px;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.close {
-webkit-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.close:before {
content: "";
position: absolute;
width: 27px;
height: 4px;
margin-top: -1px;
margin-left: -13px;
background-color: #000;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.close:after {
content: "";
position: absolute;
width: 27px;
height: 4px;
background-color: #000;
margin-top: -1px;
margin-left: -13px;
cursor: pointer; cursor: pointer;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
} }
.square { .error {
box-sizing: border-box; background-color: tomato;
padding: 0 40px 0 10px;
width: 300px;
height: 50px;
border: 4px solid #000000;
border-radius: 0;
background: none;
color: #000;
font-family: Roboto;
font-size: 16px;
font-weight: 400;
outline: 0;
-webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
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%);
-ms-transform: translate(-100%, -50%);
transform: translate(-100%, -50%); */
} }
</style> </style>
\ No newline at end of file
<template>
<form id="content">
<input type="text" name="input" class="input" :class="{ square: closed}">
<button @click="toggleClose" type="reset" class="search" :class="{ close: closed }"></button>
</form>
</template>
<script>
export default {
data: function() {
return {
closed: false
}
},
methods: {
toggleClose() {
this.closed = !this.closed
}
},
}
</script>
<style scoped>
#content {
height: 50px;
width: 300px;
transform: translate(-50%, -50%);
margin-top: 20px;
}
#content.on {
-webkit-animation-name: in-out;
animation-name: in-out;
-webkit-animation-duration: 0.7s;
animation-duration: 0.7s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
input {
box-sizing: border-box;
width: 50px;
height: 50px;
border: 4px solid #000000;
border-radius: 50%;
background: none;
color: #fff;
font-size: 16px;
font-weight: 400;
font-family: Roboto;
outline: 0;
-webkit-transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s;
transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
-webkit-transform: translate(-100%, -50%);
-ms-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
}
.search {
background: none;
position: absolute;
top: 0px;
left: 0;
height: 50px;
width: 50px;
padding: 0;
border-radius: 100%;
outline: 0;
border: 0;
color: inherit;
cursor: pointer;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
-webkit-transform: translate(-100%, -50%);
-ms-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
}
.search:before {
content: "";
position: absolute;
width: 20px;
height: 4px;
background-color: #000;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: 26px;
margin-left: 17px;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.close {
-webkit-transition: 0.4s ease-in-out;
transition: 0.4s ease-in-out;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.close:before {
content: "";
position: absolute;
width: 27px;
height: 4px;
margin-top: -1px;
margin-left: -13px;
background-color: #000;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.close:after {
content: "";
position: absolute;
width: 27px;
height: 4px;
background-color: #000;
margin-top: -1px;
margin-left: -13px;
cursor: pointer;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.square {
box-sizing: border-box;
padding: 0 40px 0 10px;
width: 300px;
height: 50px;
border: 4px solid #000000;
border-radius: 0;
background: none;
color: #000;
font-family: Roboto;
font-size: 16px;
font-weight: 400;
outline: 0;
-webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
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%);
-ms-transform: translate(-100%, -50%);
transform: translate(-100%, -50%); */
}
</style>
\ No newline at end of file
...@@ -18,7 +18,6 @@ ...@@ -18,7 +18,6 @@
<br /> <br />
<div class="search"> <div class="search">
<MovieType /> <MovieType />
<SearchBar />
</div> </div>
<div class="film-name">Le film est : {{ moviename }}</div> <div class="film-name">Le film est : {{ moviename }}</div>
<li v-for="movie in movies" :key="movie.id"> <li v-for="movie in movies" :key="movie.id">
...@@ -111,11 +110,7 @@ a { ...@@ -111,11 +110,7 @@ a {
margin-right: 5px; margin-right: 5px;
} }
.film { .film {
text-align: center;
}
.search {
display:flex; display:flex;
flex-direction: row; align-self: center;
justify-content: space-between;
} }
</style> </style>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment