fixing styles

WildCodeSchool · Jan 10, 2024 · 090f128 · 090f128
1 parent ee41701
commit 090f128
Show file tree

Hide file tree

Showing 14 changed files with 67 additions and 9 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,13 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link
       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
       rel="stylesheet"
     />
-    <title>Vite App</title>
+    <title>La banque de tutos</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/frontend/src/components/SlidingNavbar.jsx b/frontend/src/components/SlidingNavbar.jsx
@@ -68,6 +68,7 @@ export default function SlidingNavbar() {
             )}
           </div>
         )}
+        <h4 className="title-site">La Banque de Tutos</h4>
       </div>
       {mobileMode && (
         <div className="navbar-burger">

diff --git a/frontend/src/pages/Admin.jsx b/frontend/src/pages/Admin.jsx
@@ -1,8 +1,11 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useUserContext } from "../context/UserContext";
 
 function Admin() {
   const { user } = useUserContext();
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
   return (
     <div className="admin_container">
       <p>

diff --git a/frontend/src/pages/Connexion.jsx b/frontend/src/pages/Connexion.jsx
@@ -26,6 +26,7 @@ export default function Connexion() {
   }
   useEffect(() => {
     setMessageUser("");
+    window.scrollTo(0, 0);
   }, []);
   return (
     <div className="inscription_container">

diff --git a/frontend/src/pages/ForgotPassword.jsx b/frontend/src/pages/ForgotPassword.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
 import InputField from "../components/InputField";
@@ -41,6 +41,9 @@ export default function ForgotPassword() {
       });
     }
   }
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
 
   return (
     <div className="inscription_container">

diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
@@ -13,6 +13,7 @@ function Home() {
   };
   useEffect(() => {
     enableBodyScroll();
+    window.scrollTo(0, 0);
   });
   return (
     <div>

diff --git a/frontend/src/pages/PageUser.jsx b/frontend/src/pages/PageUser.jsx
@@ -29,6 +29,7 @@ export default function PageUser() {
   }
   const bannerImage = `./src/assets/banner.png`;
   useEffect(() => {
+    window.scrollTo(0, 0);
     if (!user.isConnected) {
       navigate("/");
     }

diff --git a/frontend/src/pages/Register.jsx b/frontend/src/pages/Register.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useUserContext } from "../context/UserContext";
 
@@ -48,6 +48,7 @@ function Register() {
       });
     }
   }
+  useEffect(() => {}, []);
 
   function checkError() {
     register({

diff --git a/frontend/src/pages/RegisterCoord.jsx b/frontend/src/pages/RegisterCoord.jsx
@@ -23,6 +23,7 @@ export default function RegisterCoord() {
       setNext(true);
     }
   }
+
   return !next ? (
     <div className="inscription_container">
       <div className="banner" />

diff --git a/frontend/src/pages/RegisterUser.jsx b/frontend/src/pages/RegisterUser.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useUserContext } from "../context/UserContext";
 import InputField from "../components/InputField";
 import RegisterCoord from "./RegisterCoord";
@@ -20,6 +20,9 @@ export default function RegisterUser() {
       setNext(true);
     }
   }
+  useEffect(() => {
+    window.scrollTo(0, 250);
+  }, []);
   return !next ? (
     <div className="inscription_container">
       <div className="banner" />

diff --git a/frontend/src/pages/SingleVideoPage.jsx b/frontend/src/pages/SingleVideoPage.jsx
@@ -1,6 +1,10 @@
+import { useEffect } from "react";
 import OneVideo from "./OneVideo";
 
 export default function SingleVideoPage() {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
   return (
     <div className="singleVideoPage">
       <OneVideo />

diff --git a/frontend/src/pages/Upload.jsx b/frontend/src/pages/Upload.jsx
@@ -1,6 +1,9 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 function Upload() {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
   return (
     <div className="upload_container">
       <h2>Importer une vidéo</h2>

diff --git a/frontend/src/styles/_crf.scss b/frontend/src/styles/_crf.scss
@@ -4,7 +4,7 @@
   border-radius: 20%;
   display: flex;
   width: 100%;
-  height: 50vh;
+  height: 40vh;
   align-items: center;
   justify-content: center;
   background: {
@@ -16,6 +16,14 @@
     size: cover;
   }
 }
+@media screen and (max-width: 600px) {
+  .center {
+    height: 25vh;
+  }
+  h2.center-text {
+    font-size: 40px;
+  }
+}
 
 .center-text {
   margin: auto;
@@ -106,3 +114,14 @@
     clip: rect(31px, 9999px, 149px, 0);
   }
 }
+
+.title-site {
+  position: absolute;
+  right: 20px;
+  color: var(--font-light-grey);
+  transition: all 0.2s ease;
+}
+.title-site:hover {
+  color: var(--font-light);
+  transition: all 0.2s ease;
+}
diff --git a/frontend/src/styles/_inscription.scss b/frontend/src/styles/_inscription.scss
@@ -1,5 +1,4 @@
 .inscription_container {
-  // background-color: #354d67;
   margin: 0 auto;
   width: 100%;
   text-align: center;
@@ -138,3 +137,21 @@
     align-items: start;
   }
 }
+
+@keyframes slidein {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0%);
+  }
+}
+
+.slideIn {
+  animation: slidein 1000ms;
+}
+.slideOut {
+  animation-direction: reverse;
+  animation: slidein 1000ms;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -68,6 +68,7 @@ export default function SlidingNavbar() { @@
                 )}
               </div>
             )}
+            <h4 className="title-site">La Banque de Tutos</h4>
           </div>
           {mobileMode && (
             <div className="navbar-burger">
@@ Expand Down @@