Refactoring Header Footer

DemiGGV · Jul 20, 2024 · c27567b · c27567b
1 parent 6463789
commit c27567b
Show file tree

Hide file tree

Showing 9 changed files with 189 additions and 225 deletions.
diff --git a/src/index.html b/src/index.html
@@ -14,7 +14,7 @@
 <body>
   <include src="./partials/header.html"></include>
   <include src="./partials/auth-modal.html"></include>
-  <div class="align-home-sect">
+  <!-- <div class="align-home-sect">
     <div class="align-left">
       <include src="./partials/categories.html"></include>
       <div class="div-support">
@@ -23,7 +23,7 @@
     </div>
     <include src="./partials/gallery-categories.html"></include>
   </div>
-  <include src="./partials/modal-item-home.html"></include>
+  <include src="./partials/modal-item-home.html"></include> -->
   <include src="./partials/footer.html"></include>
   <script type="module" src="./index.js"></script>
 </body>

diff --git a/src/js/auth-modal.js b/src/js/auth-modal.js
@@ -75,9 +75,6 @@ function isUserSet() {
 
 //-------------------------------------------------------------------
 
-// set vars after login
-// function setUserVar(uid) {}
-
 // sign up user
 async function createUser({ email } = user, password) {
   await createUserWithEmailAndPassword(auth, email, password)
@@ -151,7 +148,6 @@ function signOutUser() {
       menusToggleOnAuth();
       removeLS(LOGINKEY);
       removeLS(LOCALKEY);
-      Notify.success(`Sign-out successful`, notifyOptions);
       return true;
     })
     .catch(error => {

diff --git a/src/js/header.js b/src/js/header.js
@@ -38,7 +38,7 @@ toggleMenuBtnHeader.addEventListener('click', function () {
 });
 
 //список элементов меню, которые появляются при авторизации
-const toggleHeaderMenuAuth = document.querySelector('.page-nav'); // header menu
+const toggleHeaderMenuAuth = document.querySelector('.js-nav'); // header menu
 const togglemobileMenuAuth = document.querySelector('.js-mobile-menu-logedin'); // mobile menu items
 const toggleHeaderSignUp = document.querySelector('.js-header-signup'); // header signUp btn
 const togglemobileSignUp = document.querySelector('.js-mobile-signup'); // header signUp btn
@@ -55,7 +55,7 @@ signOutMobile.addEventListener('click', onClickSignOutUser);
 headerInfoBtn.addEventListener('click', onClickInfoButton);
 // переключение видимости по условиям
 function onClickInfoButton() {
-  headerInfoBtn.classList.toggle('is-visible');
+  // headerInfoBtn.classList.toggle('is-visible');
   headerInfoBtn.nextElementSibling.classList.toggle('is-visible');
 }
 function menusToggleOnAuth() {
@@ -170,28 +170,33 @@ function onSubmitAuthForm(event) {
   authForm.reset();
   backDropClosing();
 }
+
 //LogOut function
 function onClickSignOutUser() {
-  signOutUser(user);
   authForm.reset();
+  signOutUser(user);
 }
+
 //LogOUT from header desktop button
 function onClickHeaderSignOutUser() {
-  headerInfoBtn.classList.toggle('is-visible');
   headerInfoBtn.nextElementSibling.classList.toggle('is-visible');
+  headerInfoBtn.classList.toggle('is-visible');
+
   signOutUser(user);
   authForm.reset();
 
-  setTimeout(() => {
-    window.location.href = './index.html';
-  }, 500);
+  window.location.href = './index.html';
+  // setTimeout(() => {
+  //   window.location.href = './index.html';
+  // }, 500);
 }
 
 //==================================================================
 // Открытие и закрытие модального окна авторизации.
 // Закрытие по клику на бэкдропе, на "крестике", нажатию "ESC"
 // и отправке формы.
 //==================================================================
+
 const refs = {
   backDropAuth: document.querySelector('.js-overlay-modal'),
   authModalClose: document.querySelector('.js-modal-close'),
@@ -208,24 +213,29 @@ function onClickOpenAuthModal() {
   refs.backDropAuth.addEventListener('click', onBackDropClickClose);
   document.addEventListener('keydown', exitViaEsc);
 }
+
 function onCrossAuthClose() {
   backDropClosing();
 }
+
 function onBackDropClickClose(event) {
   if (event.target.classList.contains('js-overlay-modal')) {
     backDropClosing();
   }
 }
+
 function exitViaEsc(event) {
   if (event.key === 'Escape') {
     backDropClosing();
   }
 }
+
 function backDropClosing() {
   document.body.style.position = '';
   refs.backDropAuth.classList.toggle('is-hidden');
   refs.backDropAuth.removeEventListener('click', onBackDropClickClose);
   document.removeEventListener('keydown', exitViaEsc);
+
   // Reseting Authentication form to SignUp state
   buttonChooseForm.firstElementChild.classList.add('button-selected');
   buttonChooseForm.lastElementChild.classList.remove('button-selected');

diff --git a/src/partials/footer.html b/src/partials/footer.html
@@ -8,8 +8,8 @@
   <div class="footer-modal"></div>
 </div>
 <!-- footer -->
+<div class="container">
 <footer class="footer">
-  <div class="container">
     <div class="footer__wrapper">
       <p class="footer__text footer__text--left">
         &#169; 2023 | All Rights Reserved |
@@ -25,5 +25,5 @@
         >
       </p>
     </div>
-  </div>
-</footer>
+  </footer>
+</div>
diff --git a/src/partials/header.html b/src/partials/header.html
@@ -1,12 +1,12 @@
+<div class="container">
 <header class="header">
-  <div class="header-container container">
-    <a class="header-logo" href="./index.html">
-      <svg class="logo-header" width="20" height="20">
+    <a class="header__logo" href="./index.html">
+      <svg class="header__logo-icon" width="30" height="30">
         <use href="./images/svg-sprite/symbol-defs.svg#booklogo-icon"></use>
       </svg>
-      <span class="web">Book</span>shelf
+      <span class="header__logo-text">Bookshelf</span>
     </a>
-    <nav class="page-nav is-visible">
+    <nav class="header__navigation js-nav is-visible">
       <ul class="header-list">
         <li class="header-list-item">
           <a class="active" href="./index.html">Home</a>
@@ -22,8 +22,9 @@
       </ul>
     </nav>
 
-    <div class="header-buttons">
+    <div class="header__buttons">
       <include src="./partials/tumbler-theme.html"></include>
+
       <button type="button" class="menu-burger-open js-open-menu">
         <svg class="header-menu-mob" width="28" heigth="28">
           <use
@@ -32,14 +33,14 @@
             href="./images/svg-sprite/symbol-defs.svg#icon-burger"
           ></use>
         </svg>
-        <svg
-          class="header-menu-mob-close burger-toggle-hidden"
+        <svg class="header-menu-mob-close burger-toggle-hidden"
           width="28"
           height="28"
         >
           <use href="./images/svg-sprite/symbol-defs.svg#icon-x-close"></use>
         </svg>
       </button>
+
       <div class="mobile-menu-burger js-menu-container">
         <div class="modal is-hidden mobile-menu-container">
           <button type="button" class="btn-mob-signUp js-mobile-signup">
@@ -77,8 +78,7 @@
               </ul>
             </nav>
             <button
-              type="button"
-              class="btn-header-mob-logout js-mobile-logout"
+              type="button" class="btn-header-mob-logout js-mobile-logout"
             >
               Log out<svg class="sign-up-icon" width="20" height="20">
                 <use
@@ -89,6 +89,7 @@
           </div>
         </div>
       </div>
+
       <div class="js-sign-toggle-group">
         <button type="button" class="btn-header js-header-signup">
           Sign up
@@ -109,9 +110,7 @@
             ></use>
           </svg>
         </button>
-        <button
-          type="button"
-          class="btn-header-logout is-visible js-header-logout"
+        <button type="button" class="btn-header-logout is-visible js-header-logout"
         >
           Log out<svg class="sign-up-icon" width="20" height="20">
             <use
@@ -121,5 +120,5 @@
         </button>
       </div>
     </div>
-  </div>
 </header>
+</div>
diff --git a/src/sass/_common.scss b/src/sass/_common.scss
@@ -52,36 +52,21 @@ button {
   cursor: pointer;
 }
 
-// mobile screen
+// Container box
 
-@media screen and (max-width: 375px) {
-  .container {
-    padding-left: 20px;
-    padding-right: 20px;
-    width: 100%;
+.container {
+  width: 100%;
+  margin: 0 auto;
+
+  @media screen and (min-width: 375px){
+    max-width: 375px;
   }
-}
 
-// tablet screen
-@media screen and (max-width: 768.98px) {
-  .container {
-    padding-right: 32px;
-    padding-left: 32px;
-    width: 768px;
+  @media screen and (min-width: 768px){
+    max-width: 768px;
   }
-}
 
-// desktop screen
-.container {
-  padding-right: 24px;
-  padding-left: 24px;
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
-}
-
-@media screen and (min-width: 768px) and (max-width: 1440px) {
-  .container {
-    width: auto;
+  @media screen and (min-width: 1440px){
+    max-width: 1440px;
   }
-}
+}
diff --git a/src/sass/footer.scss b/src/sass/footer.scss
@@ -415,20 +415,24 @@ body.modal-open {
 }
 
 .footer {
-  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 30px;
+  // width: 100%;
+
   background: $bck-clr-home;
   color: $dark-clr-1;
-  padding: 30px;
-  font-size: 16px;
+
   border: 1.5px solid $dark-clr-1;
   border-radius: 8px 8px 0px 0px;
+
+  font-size: 16px;
   line-height: 1.19;
+  text-align: center;
+
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-left: auto;
-  margin-right: auto;
-  width: 100%;
 }
 
 .footer-title {
@@ -437,20 +441,20 @@ body.modal-open {
   padding-top: 8px;
 }
 
-@media screen and (max-width: 1440px) {
-  .footer {
-    width: 1440px;
-  }
-}
+// @media screen and (max-width: 1440px) {
+//   .footer {
+//     width: 1440px;
+//   }
+// }
 
-@media screen and (max-width: 768px) {
-  .footer {
-    width: 100%;
-  }
-}
+// @media screen and (max-width: 768px) {
+//   .footer {
+//     width: 100%;
+//   }
+// }
 
-@media screen and (max-width: 320px) {
-  .footer {
-    width: 100%;
-  }
-}
+// @media screen and (max-width: 320px) {
+//   .footer {
+//     width: 100%;
+//   }
+// }