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

Merge branch 'suite-front' into 'master' 

Changes for the search bar

See merge request !14
parents 25f32f51 a965a3c7
No related branches found
No related tags found
1 merge request!14Changes for the search bar
Pipeline #42578 passed
Stage: lint
Stage: build
Show whitespace changes
Inline Side-by-side
frontend/src/assets/loupe.png 0 → 100644
+ 0
− 0
View file @ 8e92863c
frontend/src/assets/loupe.png

10.9 KiB

frontend/src/components/Banner.vue
+ 5
− 2
View file @ 8e92863c
<template>
<div class="banner">
<div class="name">
<img class="logo" alt="Vue logo" src="../assets/logo.png" />
<a href="/"><img class="logo" alt="Vue logo" src="../assets/logo.png" /></a>
<h1 class="text" >CaCaoCritics</h1>
</div>
<SearchBar />
<div class="menu">
<BurgerMenu />
</div>
......@@ -12,11 +13,13 @@
<script>
import BurgerMenu from "@/components/BurgerMenu.vue";
import SearchBar from "./SearchBar.vue";
export default {
name: "Banner",
components: {
BurgerMenu,
SearchBar
},
};
</script>
......
frontend/src/components/MovieType.vue 0 → 100644
+ 36
− 0
View file @ 8e92863c
<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>
</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>
<script>
</script>
<style scoped>
.box {
display: flex;
flex-direction: column;
margin-left: 20px;
background-color: #912F56;
width: 200px;
border-radius: 20px;
color:white;
justify-content: center;
}
</style>
\ No newline at end of file
frontend/src/components/SearchBar.vue
+ 49
− 139
View file @ 8e92863c
<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>
import axios from "axios";
export default {
data: function () {
return {
closed: false
}
moviename: "",
movies: [],
moviesLoadingError: "",
};
},
methods: {
toggleClose() {
this.closed = !this.closed
}
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);
});
},
}
},
};
</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;
}
@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
frontend/src/components/SearchBar1.vue 0 → 100644
+ 158
− 0
View file @ 8e92863c
<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
frontend/src/views/Home.vue
+ 8
− 5
View file @ 8e92863c
......@@ -16,8 +16,9 @@
</carousel>
</div>
<br />
<div class="search">
<SearchBar />
<div class="corps">
<div class="type">
<MovieType />
</div>
<div class="film-name">Le film est : {{ moviename }}</div>
<li v-for="movie in movies" :key="movie.id">
......@@ -33,13 +34,14 @@
</p>
</li>
</div>
</div>
</template>
<script>
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",
......@@ -48,7 +50,7 @@ export default {
Slide,
Pagination,
Navigation,
SearchBar,
MovieType,
},
data: function () {
return {
......@@ -108,6 +110,7 @@ a {
margin-right: 5px;
}
.film {
text-align: center;
display:flex;
align-self: center;
}
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment