Intégration de la banniére "mode édition"

abdesselam62 · Jul 6, 2023 · 35c7c34 · 35c7c34
1 parent e8d23f4
commit 35c7c34
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 44 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5504
+    "liveServer.settings.port": 5505
 }
diff --git a/FrontEnd/Javascript/editMod.js b/FrontEnd/Javascript/editMod.js
@@ -1,43 +1,59 @@
 // Fonction, "Mode édition"
   export function editMode() {
-    // Récupération de l'état de connexion
-    const authState = sessionStorage.getItem("authState");    
-
-    // Si connecté, alors
-    if (authState === "true") {
-      console.log("Vous êtes connecté"); // Message dans la console pour vérifier que vous êtes connecté
-
-      // Fonction qui retire les filtres
-      function noFilter(state) {
-      const filtersWorks = document.querySelector(".filter");
-      filtersWorks.style.display = state;
-    }
-      //   Masque les filtres
-      noFilter("none");
-      // Ancre "login" qui passe en "none"
-      document.getElementById("login").style.display = "none";
+  // Récupération de l'état de connexion
+  const authState = sessionStorage.getItem("authState");    
 
-      // Sinon si déconnecté alors,
-    } else {
-      // Ancre "logout" qui passe en "none"
-      document.getElementById("logout").style.display = "none";
-      console.log("Vous êtes déconnecté"); // Message dans la console pour vérifier que vous êtes dèconnecté
-    }
+  // Si connecté, alors
+  if (authState === "true") {
+    console.log("Vous êtes connecté"); // Message dans la console pour vérifier que vous êtes connecté
+
+    // Affiche "editMod"
+  editModeActivation("flex");
+
+    // Fonction qui retire les filtres
+    function noFilter(state) {
+    const filtersWorks = document.querySelector(".filter");
+    filtersWorks.style.display = state;
+  }
+    // Masque les filtres
+    noFilter("none");
+    // Ancre "login" qui passe en "none"
+    document.getElementById("login").style.display = "none";
+
+    // Sinon si déconnecté alors,
+  } else {
+    // Ancre "logout" qui passe en "none"
+    document.getElementById("logout").style.display = "none";
+    // Masque "editMod"
+    editModeActivation("none");
+    console.log("Vous êtes déconnecté"); // Message dans la console pour vérifier que vous êtes dèconnecté
+  }
+}
+  // Fonction, activation du mode édition "editMod"
+  function editModeActivation(state) {
+  // Récupération de tout les class "edit-mode"
+  const editMod = document.querySelectorAll(".editMod");
+  // Parcours tout les class "editMod"
+  for (let i = 0; i < editMod.length; i++) {
+    //   Pour chaque "editMod"
+    editMod[i].style.display = state;
   }
-
-    //Récupération de l'ancre "logout"
-    const logoutButton = document.querySelector("#logout");
-    // Au click du bouton "Logout"
-    logoutButton.addEventListener("click", function () {
-    // Récupération du token
-    const authToken = sessionStorage.getItem("authToken");
-    // Récupération de l'état de connexion
-    const authState = sessionStorage.getItem("authState");
-    // Retire le token
-    sessionStorage.removeItem("authToken");
-    // Retire l'état de connexion
-    sessionStorage.removeItem("authState");    
-    // Ancre "login" qui passe en "flex"
-    document.getElementById("login").style.display = "flex";
-  });
-
+}
+  // Récupération de l'ancre "logout"
+  const logoutButton = document.querySelector("#logout");
+  // Au click du bouton "Logout"
+  logoutButton.addEventListener("click", function () {
+  // Récupération du token
+  const authToken = sessionStorage.getItem("authToken");
+  // Récupération de l'état de connexion
+  const authState = sessionStorage.getItem("authState");
+  // Retire le token
+  sessionStorage.removeItem("authToken");
+  // Retire l'état de connexion
+  sessionStorage.removeItem("authState");  
+  // Masque "editMod"
+  editModeActivation("none");  
+  // Ancre "login" qui passe en "flex"
+  document.getElementById("login").style.display = "flex";
+});
+
diff --git a/FrontEnd/assets/style.css b/FrontEnd/assets/style.css
@@ -48,18 +48,20 @@ table {
 }
 /** end reset css**/
 body {
-	max-width: 1140px;
+	max-width: 100%;
 	margin:auto;
 	font-family: 'Work Sans' ;
 	font-size: 14px;
 }
 header {
 	display: flex;
 	justify-content: space-between;
-	margin: 50px 0
+	margin: 50px auto;
+  	max-width: 1140px;
 }
 section {
-	margin: 50px 0
+	max-width: 1140px;
+  	margin: 50px auto;
 }
 
 h1{
@@ -75,7 +77,6 @@ h1 > span {
 	font-family: 'Work Sans';
 	font-size:10px;
 	letter-spacing: 0.1em;
-;
 }
 
 h2{
@@ -95,6 +96,12 @@ nav li {
 	font-size: 1.2em;
 }
 
+nav li a {
+	text-decoration: none;
+	cursor: pointer;
+	color: black;
+}
+
 li:hover {
 	color: #B1663C;
 }
@@ -216,3 +223,37 @@ footer nav ul {
 	margin: 2em
 }
 
+/* ----EditMode---- */
+
+.editMod {
+	display: none;
+  }
+
+  /* Début top banner */
+  .adminBanner {
+	width: 100%;
+	height: 59px;
+	justify-content: center;
+	align-items: center;
+	gap: 1%;
+	background-color: #000000;
+	color: #ffffff;
+  }
+
+  .adminBanner i {
+	margin-right: -7px;
+	font-size: 16px;
+  }
+
+  .adminBanner .btnPostChanges {
+	color: #000;
+	text-align: center;
+	font-size: 14px;
+	font-family: Work Sans;
+	font-weight: 500;
+	border-radius: 60px;
+	background: #fff;
+	width: 216px;
+	height: 38px;
+	cursor: pointer;
+  }
diff --git a/FrontEnd/index.html b/FrontEnd/index.html
@@ -12,6 +12,13 @@
 	<script type="module" src="./Javascript/gallery.js"></script>
 </head>
 <body>
+	<!-- "editMode" top banner -->
+	<div class="adminBanner editMod">
+		<i class="fa-regular fa-pen-to-square"></i>
+		<p>Mode édition</p>
+		<button class="btnPostChanges">publier les changements</button>
+		</div>
+		<!-- Fin -->
 <header>
 	<h1>Sophie Bluel <span>Architecte d'inteérieur</span></h1>
 	<nav>