Merge pull request #23 from elrouss/headerPopup

fix: кнопка и адаптив
elrouss · Jan 19, 2023 · 693ef4e · 693ef4e
2 parents a8823c6 + 0aa3f58
commit 693ef4e
Show file tree

Hide file tree

Showing 20 changed files with 94 additions and 76 deletions.
diff --git a/blocks/bicycles/__title/bicycles__title.css b/blocks/bicycles/__title/bicycles__title.css
@@ -5,6 +5,7 @@
 
 @media screen and (max-width: 770px) {
   .bicycles__title {
-    margin-top: 39px;
+    padding-top: 39px;
+    border-top: 1px solid #e3e3e3;
   }
 }
diff --git a/blocks/bicycles/bicycles.css b/blocks/bicycles/bicycles.css
@@ -14,12 +14,11 @@
 
 @media screen and (max-width: 770px) {
   .bicycles {
-    margin-top: 80px;
+    margin-top: 0;
     margin-left: calc(18/320 * 100%);
     margin-bottom: 40px;
     margin-right: calc(18/320 * 100%);
-    padding-top: 0;
-    border-top: 1px solid #e3e3e3;
+    padding-top: 37px;
     grid-template-columns: 1fr;
     grid-template-areas:
     'title'

diff --git a/blocks/footer/__icon/footer__icon.css b/blocks/footer/__icon/footer__icon.css
@@ -8,7 +8,7 @@
   stroke: var(--basic-second-tint-color_theme_light);
 }
 
-@media screen and (max-width: 770px) {
+@media screen and (max-width: 561px) {
   .footer__icon {
     display: block;
   }

diff --git a/blocks/header/__burger/header__burger.css b/blocks/header/__burger/header__burger.css
@@ -14,7 +14,7 @@
     margin-right: 10px;
     position: absolute;
     top: 10px;
-    right: 13px;
+    right: calc(18 / 320 * 100%);
   }
 }
 
diff --git a/blocks/header/__menu/header__menu.css b/blocks/header/__menu/header__menu.css
@@ -3,13 +3,22 @@
   text-decoration: none;
   display: flex;
   justify-content: end;
-  padding: 28px 120px 28px 0;
+  padding-top: 28px;
+  padding-bottom: 28px;
+  padding-right: calc(120 / 1440 * 100%);
+}
+
+@media screen and (max-width: 770px) {
+  .header__menu {
+    padding-right: calc(18 / 320 * 100%);
+  }
 }
 
 @media screen and (max-width: 560px) {
   .header__menu {
     display: none;
   }
+
   .header__menu_active {
     display: flex;
     align-items: center;

diff --git a/blocks/header/__switcher-color-theme/header__switcher-color-theme.css b/blocks/header/__switcher-color-theme/header__switcher-color-theme.css
@@ -0,0 +1,9 @@
+.header__switcher-color-theme {
+  display: flex;
+}
+
+@media screen and (min-width: 561px) {
+  .header__switcher-color-theme {
+    display: none;
+  }
+}
diff --git a/blocks/intro/__pictures/intro__pictures.css b/blocks/intro/__pictures/intro__pictures.css
@@ -20,7 +20,7 @@
   }
  }
 
- @media screen and (max-width: 320px) {
+ @media screen and (max-width: 385px) {
   .intro__pictures {
     max-width: 334px;
     height: 348px;

diff --git a/blocks/intro/__road/intro__road.css b/blocks/intro/__road/intro__road.css
@@ -17,7 +17,7 @@
     max-width: 391px;
   }
 }
-@media screen and (max-width: 320px) {
+@media screen and (max-width: 385px) {
   .intro__road {
     max-width: 254px;
     max-height: 348px;

diff --git a/blocks/intro/__title/intro__title.css b/blocks/intro/__title/intro__title.css
@@ -15,7 +15,7 @@
   }
 }
 
-@media screen and (max-width: 320px) {
+@media screen and (max-width: 385px) {
   .intro__title {
     max-width: 284px;
   }

diff --git a/blocks/intro/intro.css b/blocks/intro/intro.css
@@ -26,7 +26,7 @@
     margin-left: calc(18/320 * 100%);
     margin-right: calc(18/320 * 100%);
     grid-template-columns: 1fr;
-    justify-items: center;
+    justify-items: end;
   }
 }
 

diff --git a/blocks/roads/__slider-arrow/roads__slider-arrow.css b/blocks/roads/__slider-arrow/roads__slider-arrow.css
@@ -35,7 +35,7 @@
     width: calc(24px + (26 + 26 * .7) * (100vw - 320px) / 770);
     height: calc(24px + (26 + 26 * .7) * (100vw - 320px) / 770);
     background-size: 6px 11px;
-    top: calc(58px + (12 + 12 * .7) * (100vw - 320px) / 770);
+    top: calc(140px + (12 + 12 * .7) * (100vw - 320px) / 770);
   }
 
   .roads__slider-arrow:nth-child(1) {

diff --git a/blocks/roads/__title/roads__title.css b/blocks/roads/__title/roads__title.css
@@ -5,6 +5,7 @@
 
 @media screen and (max-width: 770px) {
   .roads__title {
-    margin-top: 39px;
+    border-top: 1px solid #e3e3e3;
+    padding-top: 47px;
   }
 }
diff --git a/blocks/roads/roads.css b/blocks/roads/roads.css
@@ -14,11 +14,8 @@
 
 @media screen and (max-width: 770px) {
   .roads {
-    padding-top: 0;
-    margin-top: 80px;
     margin-left: calc(18/320 * 100%);
     margin-right: calc(18/320 * 100%);
-    border-top: 1px solid #e3e3e3;
     grid-template-areas:
     'title'
     'slider'

diff --git a/blocks/section-title/section-title.css b/blocks/section-title/section-title.css
@@ -12,7 +12,7 @@
   .section-title {
     font-size: calc(32px + (23 + 23 * .7) * (100vw - 320px) / 770);
     line-height: calc(40 / 32 * 100%);
-    max-width: 284px;
+    max-width: 100%;
     margin-top: 39px;
   }
 }
diff --git a/blocks/switcher-color-theme/switcher-color-theme.css b/blocks/switcher-color-theme/switcher-color-theme.css
@@ -4,10 +4,8 @@
   gap: 22px;
 }
 
-/* @media screen and (max-width: 770px) {
+@media screen and (max-width: 561px) {
   .switcher-color-theme {
     display: none;
   }
-} */
-
-
+}
diff --git a/blocks/workout/workout.css b/blocks/workout/workout.css
@@ -31,16 +31,16 @@
       'paragraph'
       'apps';
     padding-bottom: 53px;
-    margin-left: calc(18/320 * 100%);
-    margin-right: calc(18/320 * 100%);
+    margin-right: calc(120/1440 * 100%);
   }
 }
 
-/* @media screen and (max-width: 770px) {
+@media screen and (max-width: 720px) {
   .workout {
-    border-top: 1px solid #e3e3e3;
+    margin-left: calc(18/320 * 100%);
+    margin-right: calc(18/320 * 100%);
   }
-} */
+}
 
 @media screen and (max-width: 320px) {
   .workout {

diff --git a/index.html b/index.html
diff --git a/pages/index.css b/pages/index.css
@@ -29,6 +29,7 @@
 @import url(../blocks/header/__item/header__item.css);
 @import url(../blocks/header/__link/header__link.css);
 @import url(../blocks/header/__burger/header__burger.css);
+@import url(../blocks/header/__switcher-color-theme/header__switcher-color-theme.css);
 
 /* INTRO */
 @import url(../blocks/intro/intro.css);

diff --git a/scripts/pages/index.js b/scripts/pages/index.js
@@ -103,7 +103,6 @@ function handleDescriptionSlide() {
   }
 }
 
-
 // Секция "Bicycles"
 // Рендеринг переключателей карточек
 function createLinksCardsBicycles(link) {
@@ -232,18 +231,6 @@ function resetFormEmailAttributes() {
   };
 }
 
-//рендеринг переключателя светлой/темной темы
-if (window.innerWidth  > 562) {
-  const gi = document.querySelector('.footer-switcher-color-theme');
-  gi.append(tmpl.content.cloneNode(true));
-} else if(window.innerWidth  < 561) {
-  const hi = document.querySelector('.header-switcher-color-theme');
-  hi.append(tmpl.content.cloneNode(true));
-}
-
-const themeBtnContainer = document.querySelector('.switcher-color-theme__btn-container');
-const themeBtn = document.querySelector('.switcher-color-theme__btn');
-
 // Переключение светлой/темной темы
 function getCurrentTheme() {
   let theme = window.matchMedia('(prefers-color-scheme: dark').matches
@@ -263,19 +250,23 @@ function loadTheme(theme) {
 }
 
 function considerStartPositionBtnTheme(theme) {
-  theme === 'light'
-  ? themeBtn.classList.add('switcher-color-theme__btn_movement_light')
-  : themeBtn.classList.add('switcher-color-theme__btn_movement_dark');
+  themeBtn.forEach(btn=> {
+    theme === 'light'
+    ? btn.classList.add('switcher-color-theme__btn_movement_light')
+    : btn.classList.add('switcher-color-theme__btn_movement_dark');
+  });
 }
 
 function moveThemeBtn() {
-  if (themeBtn.classList.contains('switcher-color-theme__btn_movement_light')) {
-    themeBtn.classList.remove('switcher-color-theme__btn_movement_light');
-    themeBtn.classList.add('switcher-color-theme__btn_movement_dark');
-  } else {
-    themeBtn.classList.remove('switcher-color-theme__btn_movement_dark');
-    themeBtn.classList.add('switcher-color-theme__btn_movement_light');
-  };
+  themeBtn.forEach(btn=> {
+    if (btn.classList.contains('switcher-color-theme__btn_movement_light')) {
+      btn.classList.remove('switcher-color-theme__btn_movement_light');
+      btn.classList.add('switcher-color-theme__btn_movement_dark');
+    } else {
+      btn.classList.remove('switcher-color-theme__btn_movement_dark');
+      btn.classList.add('switcher-color-theme__btn_movement_light');
+    };
+  });
 }
 
 function changeSliderArrows(theme) {
@@ -321,7 +312,6 @@ function closeOnClick() {
 }
 
 // ОБРАБОТЧИКИ СОБЫТИЙ
-
 burgerButton.addEventListener('click', openPopupBurger);
 
 arrowNextSliderSectionRoads.addEventListener('click', handleIncrementClick);
@@ -341,7 +331,10 @@ inputEmail.addEventListener('blur', () => {
 inputEmail.addEventListener('keydown', hideSubmitFormMsgSuccess);
 formEmail.addEventListener('submit', submitFormEmail);
 
-themeBtnContainer.addEventListener('click', toggleTheme);
+themeBtnContainer.forEach(function(btn) {
+  // Вешаем событие клик
+  btn.addEventListener('click', toggleTheme)
+})
 
 window.addEventListener('DOMContentLoaded', () => {
   loadTheme(getCurrentTheme());

diff --git a/scripts/utils/constants.js b/scripts/utils/constants.js
@@ -33,8 +33,8 @@ const formSubmitBtn = document.querySelector('.form__submit-btn');
 const formSubmitMsgSuccess = document.querySelector('.form__submit-msg');
 
 // Переключение светлой/темной темы
-// const themeBtnContainer = document.querySelector('.switcher-color-theme__btn-container');
-// const themeBtn = document.querySelector('.switcher-color-theme__btn');
+const themeBtnContainer = document.querySelectorAll('.switcher-color-theme__btn-container');
+const themeBtn = document.querySelectorAll('.switcher-color-theme__btn');
 
 // Бургер меню
 const burgerButton = document.querySelector('.header__burger');