From 723fbdb01177b91a24e5a0df1b5271bc51684e6c Mon Sep 17 00:00:00 2001 From: El Yaagoubi Bilel <bilel.el-yaagoubi@student-cs.fr> Date: Fri, 10 Jun 2022 13:05:22 +0200 Subject: [PATCH] hop --- frontend/src/components/Banner.vue | 38 +++++++---- frontend/src/components/BurgerMenu.vue | 92 +++++++++++++++----------- frontend/src/views/Home.vue | 6 +- 3 files changed, 81 insertions(+), 55 deletions(-) diff --git a/frontend/src/components/Banner.vue b/frontend/src/components/Banner.vue index 02d0111..b2636c9 100644 --- a/frontend/src/components/Banner.vue +++ b/frontend/src/components/Banner.vue @@ -1,13 +1,15 @@ <template> <div class="banner"> - <div class="name"> - <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> + <div class="name"> + <router-link :to="'/?uid=' + userId" + ><img class="logo" alt="Vue logo" src="../assets/logo.png" + /></router-link> + <h1 class="text">CaCaoCritics</h1> + </div> + <SearchBar /> + <div class="menu"> + <BurgerMenu /> + </div> </div> </template> @@ -19,14 +21,25 @@ export default { name: "Banner", components: { BurgerMenu, - SearchBar -}, + SearchBar, + }, + data: function () { + return { + userId: "", + }; + }, + created() { + this.userId = this.$route.query.uid; + console.log("a"); + console.log(this.$route.query.uid); + console.log("a"); + }, }; </script> <style> .banner { - background-color: #912F56; + background-color: #912f56; flex-direction: row; vertical-align: middle; display: flex; @@ -35,11 +48,10 @@ export default { } .name { text-align: left; - background-color: #912F56; + background-color: #912f56; flex-direction: row; vertical-align: middle; display: flex; - } .logo { max-width: 70px; diff --git a/frontend/src/components/BurgerMenu.vue b/frontend/src/components/BurgerMenu.vue index e8dd1f3..74b01da 100644 --- a/frontend/src/components/BurgerMenu.vue +++ b/frontend/src/components/BurgerMenu.vue @@ -1,61 +1,73 @@ <template> -<div id="root"> - <div id="topnav" class="topnav"> - <a id="home_link" class="topnav_link" href="/">HOME</a> - - <!-- Classic Menu --> - <nav role="navigation" id="topnav_menu"> - <a class="topnav_link" href="/addUsers">INSCRIPTION</a> - <a class="topnav_link" href="/Connexion">CONNEXION</a> - <a class="topnav_link" href="/users">USER</a> - </nav> - - <a id="topnav_hamburger_icon" href="javascript:void(0);" onclick="showResponsiveMenu()"> - <!-- Some spans to act as a hamburger --> - <span></span> - <span></span> - <span></span> - </a> - - <!-- Responsive Menu --> - <nav role="navigation" id="topnav_responsive_menu"> - <ul> - <li><a href="/">HOME</a></li> - <li><a href="/addUsers">INSCRIPTION</a></li> - <li><a href="/contact-us">CONTACT</a></li> - <li><a href="/privacy-policy">PRIVACY POLICY</a></li> - <li><a href="/terms-and-conditions">TERMS AND CONDITIONS</a></li> - </ul> - </nav> + <div id="root"> + <div id="topnav" class="topnav"> + <a id="home_link" class="topnav_link" href="/">HOME</a> + + <!-- Classic Menu --> + <nav role="navigation" id="topnav_menu"> + <a class="topnav_link" href="/addUsers">INSCRIPTION</a> + <a class="topnav_link" href="/Connexion">CONNEXION</a> + <a class="topnav_link" href="/users">USER</a> + </nav> + + <a + id="topnav_hamburger_icon" + href="javascript:void(0);" + onclick="showResponsiveMenu()" + > + <!-- Some spans to act as a hamburger --> + <span></span> + <span></span> + <span></span> + </a> + + <!-- Responsive Menu --> + <nav role="navigation" id="topnav_responsive_menu"> + <ul> + <li><a href="/">HOME</a></li> + <li><a href="/addUsers">INSCRIPTION</a></li> + <li><a href="/contact-us">CONTACT</a></li> + <li><a href="/privacy-policy">PRIVACY POLICY</a></li> + <li><a href="/terms-and-conditions">TERMS AND CONDITIONS</a></li> + </ul> + </nav> + </div> </div> -</div> </template> <script> export default { - methods: { + methods: { + data: function () { + return { + userId: "", + }; + }, showResponsiveMenufunction: function () { - var menu = document.getElementById("topnav_responsive_menu"); - var icon = document.getElementById("topnav_hamburger_icon"); - var root = document.getElementById("root"); - if (menu.className === "") { + var menu = document.getElementById("topnav_responsive_menu"); + var icon = document.getElementById("topnav_hamburger_icon"); + var root = document.getElementById("root"); + if (menu.className === "") { menu.className = "open"; icon.className = "open"; root.style.overflowY = "hidden"; - } else { - menu.className = ""; + } else { + menu.className = ""; icon.className = ""; root.style.overflowY = ""; - } -}, -}, + } + }, + }, + created() { + this.userId = this.$route.query.uid; + }, }; </script> <style scoped> /* ******************** NAV BAR ******************** */ .topnav { - background-color: #912F56; + background-color: #912f56; display: flex; align-items: center; width: 100%; diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue index b4e4dce..3de1181 100644 --- a/frontend/src/views/Home.vue +++ b/frontend/src/views/Home.vue @@ -3,7 +3,7 @@ <div class="carousel"> <carousel :items-to-show="5.5" autoplay=1300> <slide v-for="movie in movies" :key="movie.id" autoplay='True' transition="100" > - <router-link :to="'/movie/'+ movie.id"> + <router-link :to="'/movie/'+ movie.id + '?uid=' + userId"> <img :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path" withd="100" @@ -28,7 +28,7 @@ <h5 class="center"> {{ movie.title }}</h5> </p> <p class="film"> - <router-link :to="'/movie/'+ movie.id"> + <router-link :to="'/movie/'+ movie.id + '?uid=' + userId"> <img :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path" withd="100" @@ -64,6 +64,7 @@ export default { moviename: "", movies: [], moviesLoadingError: "", + userId: "", }; }, methods: { @@ -97,6 +98,7 @@ export default { }, }, created() { + this.userId = this.$route.query.uid; this.fetchMovies(); this.fetchGenres(); }, -- GitLab