diff --git a/frontend/src/assets/loupe.png b/frontend/src/assets/loupe.png new file mode 100644 index 0000000000000000000000000000000000000000..1111b47095f0e4a1f01132dc777ea48b86b9461c Binary files /dev/null and b/frontend/src/assets/loupe.png differ diff --git a/frontend/src/components/Banner.vue b/frontend/src/components/Banner.vue index c317a04450eb9814b479e9de083206a38d653ae3..20a6368c3be0bd7d499eb61aa7b2d0a7aae3cb2d 100644 --- a/frontend/src/components/Banner.vue +++ b/frontend/src/components/Banner.vue @@ -4,6 +4,7 @@ <img class="logo" alt="Vue logo" src="../assets/logo.png" /> <h1 class="text" >CaCaoCritics</h1> </div> + <SearchBar /> <div class="menu"> <BurgerMenu /> </div> @@ -12,12 +13,14 @@ <script> import BurgerMenu from "@/components/BurgerMenu.vue"; +import SearchBar from "./SearchBar.vue"; export default { name: "Banner", components: { BurgerMenu, - }, + SearchBar +}, }; </script> diff --git a/frontend/src/components/MovieType.vue b/frontend/src/components/MovieType.vue index 0e3e68f8dedbbbbcf9a635bffc6ee120e4aa8890..9638fad16d3fad66a3c67fd966d48aaffb75d264 100644 --- a/frontend/src/components/MovieType.vue +++ b/frontend/src/components/MovieType.vue @@ -1,11 +1,18 @@ <template> <div class="box"> <h1>Genre</h1> +<div class="check"> <input type="checkbox" id="action" value="Action" v-model="genre"> <label for="Action">Action</label> -<br> +</div> +<div class="check"> <input type="checkbox" id="horreur" value="Horreur" v-model="genre"> <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> </div> </template> @@ -16,13 +23,14 @@ <style scoped> .box { + display: flex; + flex-direction: column; margin-left: 20px; background-color: #912F56; width: 200px; border-radius: 20px; color:white; - justify-content: space-between; - + justify-content: center; } </style> \ No newline at end of file diff --git a/frontend/src/components/SearchBar.vue b/frontend/src/components/SearchBar.vue index cff3df5fc3289afafab95099d13288616986ed19..c19602212384c12f0b50a81e109aec22aac45e67 100644 --- a/frontend/src/components/SearchBar.vue +++ b/frontend/src/components/SearchBar.vue @@ -1,158 +1,67 @@ <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> + <input type="text" v-model="input" placeholder="Search movies..." /> </template> <script> -export default { - data: function() { - return { - closed: false - } +export default { + data: function () { + return { + moviename: "", + movies: [], + moviesLoadingError: "", + }; + }, + methods: { + fetchMovies: function () { + 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); + }); }, -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; -} +@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap"); input { - box-sizing: border-box; - width: 50px; - height: 50px; - border: 4px solid #000000; - border-radius: 50%; - background: none; - color: #fff; + display: block; + width: 350px; + margin: 20px auto; + padding: 10px 45px; + background: white url("../assets/loupe.png") no-repeat 15px center; + background-size: 15px 15px; 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%); + border: none; + border-radius: 5px; + box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, + rgba(0, 0, 0, 0.3) 0px 1px 3px -1px; } -.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%); - +.item { + width: 350px; + margin: 0 auto 10px auto; + padding: 10px 20px; + color: white; + border-radius: 5px; + box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, + rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; } -.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; +.movie { + background-color: rgb(97, 62, 252); 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%); */ +.error { + background-color: tomato; } </style> \ No newline at end of file diff --git a/frontend/src/components/SearchBar1.vue b/frontend/src/components/SearchBar1.vue new file mode 100644 index 0000000000000000000000000000000000000000..cff3df5fc3289afafab95099d13288616986ed19 --- /dev/null +++ b/frontend/src/components/SearchBar1.vue @@ -0,0 +1,158 @@ +<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 diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue index d6a1e9094cc27a663c316d3712df645cda123b62..aa64bae9fddee0afda85264ab33de48dfbf0a9b9 100644 --- a/frontend/src/views/Home.vue +++ b/frontend/src/views/Home.vue @@ -18,7 +18,6 @@ <br /> <div class="search"> <MovieType /> - <SearchBar /> </div> <div class="film-name">Le film est : {{ moviename }}</div> <li v-for="movie in movies" :key="movie.id"> @@ -111,11 +110,7 @@ a { margin-right: 5px; } .film { - text-align: center; -} -.search { - display: flex; - flex-direction: row; - justify-content: space-between; + display:flex; + align-self: center; } </style>