From 979528fdce11e7a5e5d83b3049ec44a4add67754 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juliette=20Kalfl=C3=A8che?=
<juliette.kalfleche@student-cs.fr>
Date: Wed, 8 Jun 2022 17:12:59 +0200
Subject: [PATCH] add searchbar
---
frontend/src/components/SearchBar.vue | 159 ++++++++++++++++++++++++++
frontend/src/views/Home.vue | 20 ++--
2 files changed, 172 insertions(+), 7 deletions(-)
create mode 100644 frontend/src/components/SearchBar.vue
diff --git a/frontend/src/components/SearchBar.vue b/frontend/src/components/SearchBar.vue
new file mode 100644
index 0000000..3db4bc3
--- /dev/null
+++ b/frontend/src/components/SearchBar.vue
@@ -0,0 +1,159 @@
+<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;
+ margin-left: 500px;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+
+#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 #FFFFFF;
+ 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: #fff;
+ -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: #fff;
+ -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: #fff;
+ 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 #FFFFFF;
+ border-radius: 0;
+ background: none;
+ color: #fff;
+ 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 59c1aa3..b4dfad9 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,7 +1,7 @@
<template>
<div class="home">
<div class="carousel">
- <carousel :items-to-show="5.5" autoplay=1300 >
+ <carousel :items-to-show="5.5" autoplay=1300>
<slide v-for="movie in movies" :key="movie.id" autoplay='True' transition="100" >
<img
:src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
@@ -16,13 +16,15 @@
</carousel>
</div>
<br />
- <input type="text" v-model="moviename" placeholder="enter a movie name" />
+ <div class="search">
+ <SearchBar />
+ </div>
<div class="film-name">Le film est : {{ moviename }}</div>
<li v-for="movie in movies" :key="movie.id">
<p class="movie-title">
{{ movie.title }}
</p>
- <p>
+ <p class="film">
<img
:src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
withd="100"
@@ -37,6 +39,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";
export default {
name: "Home",
@@ -45,6 +48,7 @@ export default {
Slide,
Pagination,
Navigation,
+ SearchBar,
},
data: function () {
return {
@@ -63,7 +67,7 @@ export default {
this.movies = response.data.results;
})
.catch((error) => {
- this.moviesLoadingError = "An error occured while fetching movies.";
+ this.moviesLoadingError = "An error occured while e ing movies.";
console.error(error);
});
},
@@ -76,9 +80,6 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-.home {
- text-align: center;
-}
.logo {
max-width: 100px;
@@ -103,5 +104,10 @@ a {
}
.carousel {
margin-top: 30px;
+ margin-left: 5px;
+ margin-right: 5px;
+}
+.film {
+ text-align: center;
}
</style>
--
GitLab