From 352e1ead99f4b9755f59822efec2d1d0e1ab80b8 Mon Sep 17 00:00:00 2001
From: Kirill Pet <job.mori.1967@gmail.com>
Date: Thu, 19 Dec 2024 01:43:07 +0300
Subject: [PATCH] =?UTF-8?q?=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20=D0=B0?=
 =?UTF-8?q?=D0=B4=D0=B0=D0=BF=D1=82=D0=B8=D0=B2=D0=BD=D0=BE=D1=81=D1=82?=
 =?UTF-8?q?=D1=8C=20=D0=B4=D0=BB=D1=8F=20how?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/gp-style-desktop.css |  9 ++++++
 assets/css/gp-style-tablet.css  | 50 +++++++++++++++++++++++++++++-
 assets/js/main.js               | 54 +++++++++++++++++++++------------
 index.html                      | 10 +++---
 4 files changed, 97 insertions(+), 26 deletions(-)

diff --git a/assets/css/gp-style-desktop.css b/assets/css/gp-style-desktop.css
index 8ed34da..ce76971 100644
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@@ -557,6 +557,15 @@
     width: 336px;
     height: 336px;
 }
+
+@media only screen and (min-width: 992px) and (max-width: 1481px) {
+.how-content-item__img{
+    display: none;
+}
+.how-content-item__text{
+    width: 100%;
+}
+}
 /* how */
 
 /* free */
diff --git a/assets/css/gp-style-tablet.css b/assets/css/gp-style-tablet.css
index ba0f67f..e0b0ec8 100644
--- a/assets/css/gp-style-tablet.css
+++ b/assets/css/gp-style-tablet.css
@@ -404,4 +404,52 @@ main{
     background-repeat: no-repeat;
 }
 }
-/* projects */
\ No newline at end of file
+/* projects */
+
+/* how */
+@media only screen and (max-width: 992px) {
+.how{
+    margin-top: 40px;
+}
+.how__content{
+    display: none;
+}
+.how__control{
+    width: 100%;
+}
+.how-control__item{
+    flex-direction: column;
+    align-items: start;
+}
+.how-control-item__number{
+    width: 40px;
+
+    font-size: 20px;
+}
+.how-control__item__name{
+    margin-top: 16px;
+    margin-left: 0;
+
+    max-width: 100%;
+
+    font-size: 20px;
+}
+.how-content__item-block{
+    position: static;
+}
+.how-content__item-block.active{
+    margin-top: 16px;
+}
+.how-content__item{
+    padding: 16px;
+}
+.how-content-item__text{
+    width: 100%;
+}
+.how-content-item__img{
+    display: none;
+}
+}
+/* how */
+
+@media only screen and (max-width: 992px) {}
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index 09ed547..6af0059 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -13,8 +13,6 @@ const gymSwiper = new Swiper('.gym-swiper', {
     }
 });
 
-
-
 const reviewsSwiper = new Swiper('.reviews-swiper', {
     spaceBetween: 24,
     // If we need pagination
@@ -42,7 +40,6 @@ const reviewsSwiper = new Swiper('.reviews-swiper', {
     }
 })
 
-
 const projectsSwiper = new Swiper('.projects-swiper', {
     direction: 'horizontal',
     breakpoints: {
@@ -79,27 +76,43 @@ itemButtons.forEach((button) => {
 
     button.onclick = function name(params, index) {
 
-        let activeContent = document.querySelector('.how__content').querySelector('.active'),
-            activeButton = document.querySelector('.how__control').querySelector('.active');
+        let activeContent = document.querySelector('.how-content__item-block.active'),
+            activeButton = document.querySelector('.how-control__item.active');
 
         if (activeContent.dataset.num == button.dataset.num) return;
         
-        activeContent.style.height = '0px';
-        activeContent.classList.remove('active');
-        activeButton.classList.remove('active');
-
-        let newActive = document.querySelector(`.how-content__item-block[data-num='${num}']`),
-            newButton = document.querySelector(`.how-control__item[data-num='${num}']`);
+        activeContent.style.height = `${activeContent.offsetHeight}px`;
         
-
         setTimeout(() => {
-            let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px';
-            newActive.style.height = newHeight;
-            newActive.classList.add('active');
-            newButton.classList.add('active');
-        }, 300);
+            activeContent.style.height = '0px';
+            activeContent.classList.remove('active');
+            activeButton.classList.remove('active');
+
+            let newActive = document.querySelector(`.how-content__item-block[data-num='${num}']`),
+                newButton = document.querySelector(`.how-control__item[data-num='${num}']`);
+            
+
+            setTimeout(() => {
+                let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px';
+                newActive.style.height = newHeight;
+                newActive.classList.add('active');
+                newButton.classList.add('active');
+
+                setTimeout(() => {
+                    newActive.style.height = 'auto';
+                }, 300);
+            }, 300);
+        }, 0);
     }        
 })
+
+let screenWidth = window.screen.width;
+if (screenWidth <= 992) {
+    howPhone();
+}else{
+    howPc();
+}
+
 function howPc() {
     if (document.querySelector('.how__content').querySelector('.how-content__item-block')) {
         return;
@@ -113,7 +126,8 @@ function howPc() {
     });
 }
 function howPhone() {
-    if (!document.querySelector('.how__content').querySelector('.how-content__item-block')) {
+    
+    if (!document.querySelector('.how__content').querySelector('.how-content__item-block')) {    
         return;
     }
     
@@ -126,7 +140,7 @@ function howPhone() {
             button.after(block);
     });
 }
-
+// how end
 
 // resize
 window.addEventListener('resize', () => {
@@ -137,4 +151,4 @@ window.addEventListener('resize', () => {
     }else{
         howPc();
     }
-});
\ No newline at end of file
+});
diff --git a/index.html b/index.html
index c8d3b84..f42b653 100644
--- a/index.html
+++ b/index.html
@@ -299,7 +299,7 @@
                 </article>
             </div> -->
 
-            <div class="main__item">
+            <!-- <div class="main__item">
                 <p class="title-1">
                     Разработанные проекты
                 </p>
@@ -429,9 +429,9 @@
                         все проекты
                     </a>
                 </div>
-            </div>
+            </div> -->
 
-            <!-- <div class="main__item">
+            <div class="main__item">
                 <p class="title-1">
                     Как мы это делаем? Не так просто, как кажется!
                 </p>
@@ -470,7 +470,7 @@
                     </div>
 
                     <div class="how__content">
-                        <div class="how-content__item-block active" style="height: 354px;" data-num="1">
+                        <div class="how-content__item-block active" data-num="1" style="height: auto;">
                             <div class="how-content__item">
                                 <p class="text-1">
                                     Проводим экспертизу помещения и определяем рыночный сегмент проекта
@@ -549,7 +549,7 @@
                         </div>
                     </div>
                 </article>
-            </div> -->
+            </div>
 
             <!-- <div class="main__item">
                 <article class="free">