сделал адаптивность для projects

2024-12-19 01:03:13 +03:00
parent 6bc4c7213c
commit b155852f9c
4 changed files with 279 additions and 155 deletions
--- a/assets/css/gp-style-desktop.css
+++ b/assets/css/gp-style-desktop.css
@@ -364,6 +364,8 @@

 /* projects */
 .projects{
+}
+.projects .swiper-wrapper{
    margin: 37px -20px -20px -20px;

    display: flex;
@@ -372,7 +374,7 @@
 .projects__item{
    margin: 20px;

-    width: calc(50% - 40px);
+    width: calc(50% - 40px) !important;

    display: flex;
    flex-direction: column;
@@ -425,6 +427,9 @@
    display: flex;
    justify-content: center;
 }
+.projects__counter{
+    display: none;
+}
 /* projects */

 /* how */
--- a/assets/css/gp-style-tablet.css
+++ b/assets/css/gp-style-tablet.css
@@ -330,3 +330,78 @@ main{
 }
 }
 /* gym */
+
+/* projects */
+@media only screen and (max-width: 992px) {
+.projects{
+    overflow: hidden;
+}
+.projects .swiper-wrapper{
+    margin: 40px 0 0 0;
+
+    flex-wrap: nowrap;
+}
+.projects__item{
+    margin: 0;
+
+    width: 100% !important;
+}
+.projects-item__img{
+    height: 200px;
+}
+.projects-item__content{
+    padding: 16px;
+
+    min-height: auto;
+}
+.projects-item__tag{
+    margin-left: 24px;
+}
+.projects-item__text{
+    margin-top: 16px;
+}
+.projects-item__text .text-1{
+    font-size: 20px;
+}
+.projects__next{
+    display: none;
+}
+.projects__counter{
+    margin-top: 40px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-weight: 400;
+    font-size: 18px;
+    color: var(--text-white);
+}
+
+.projects .swiper-button-next::after, .projects .swiper-button-prev::after{
+    position: static;
+
+    font-size: 0;
+}
+.projects .swiper-button-next, .projects .swiper-button-prev{
+    position: static;
+
+    margin-top: 0;
+
+    width: 32px;
+    height: 32px;
+}
+.projects .swiper-button-next{
+    margin-left: 40px;
+
+    background-image: url(/assets/img/icon/slider-righ.svg);
+    background-repeat: no-repeat;
+}
+.projects .swiper-button-prev{
+    margin-right: 40px;
+
+    background-image: url(/assets/img/icon/slider-left.svg);
+    background-repeat: no-repeat;
+}
+}
+/* projects */
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -42,13 +42,38 @@ const reviewsSwiper = new Swiper('.reviews-swiper', {
    }
 })

-// gymSwiper.destroy();
+
+const projectsSwiper = new Swiper('.projects-swiper', {
+    direction: 'horizontal',
+    breakpoints: {
+        320:{
+            slidesPerView: 1,
+            spaceBetween: 24,
+        },
+        996: {
+            slidesPerView: 1
+        },
+    },
+    // Navigation arrows
+    navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+    },    
+    runCallbacksOnInit: true,
+    // === new change
+    on: {
+        slideChange: function(){
+            let offer = document.querySelector('#numberProjects');
+            offer.innerHTML = (this.activeIndex +  1);
+        }
+    }
+});
+
+
+

 // how
-
-function howPc() {
 let itemButtons = document.querySelectorAll('.how-control__item');
-
 itemButtons.forEach((button) => {
    let num = button.dataset.num;

@@ -75,32 +100,41 @@ function howPc() {
        }, 300);
    }        
 })
+function howPc() {
+    if (document.querySelector('.how__content').querySelector('.how-content__item-block')) {
+        return;
    }

+    let blocks =  document.querySelectorAll('.how-content__item-block'),
+        content = document.querySelector('.how__content');
+
+    blocks.forEach(block => {
+        content.appendChild(block)
+    });
+}
+function howPhone() {
+    if (!document.querySelector('.how__content').querySelector('.how-content__item-block')) {
+        return;
+    }
+    
+    let buttons =  document.querySelectorAll('.how-control__item');
+
+    buttons.forEach(button => {
+        let num = button.dataset.num,
+            block = document.querySelector(`.how-content__item-block[data-num='${num}']`);
+            
+            button.after(block);
+    });
+}
+
+
+// resize
+window.addEventListener('resize', () => {
+    let screenWidth = window.screen.width;
+    
+    if (screenWidth <= 992) {
+        howPhone();
+    }else{
        howPc();
-
-
-// function howPc() {
-//     let itemButtons = document.querySelectorAll('.how-control__item'),
-//         itemBlocks = document.querySelectorAll('.how-content__item-block');
-
-//     itemButtons.forEach((button, index) => {
-//         let block = itemBlocks[index];
-
-//         button.onclick = function () {
-//             let activeContent = document.querySelector('.how__content').querySelector('.active'),
-//                 activeButton = document.querySelector('.how__control').querySelector('.active');
-            
-//             activeContent.style.height = '0px';
-//             activeContent.classList.remove('active');
-//             activeButton.classList.remove('active');
-
-//             setTimeout(() => {
-//                 let newHeight = block.querySelector('.how-content__item').offsetHeight + 'px';
-//                 block.style.height = newHeight;
-//                 block.classList.add('active');
-//                 button.classList.add('active');
-//             }, 300);
-//         }
-//     })
-// }
+    }
+});
--- a/index.html
+++ b/index.html
@@ -297,15 +297,16 @@
                        </div>
                    </div>
                </article>
-            </div>
+            </div> -->

            <div class="main__item">
                <p class="title-1">
                    Разработанные проекты
                </p>

-                <article class="projects">
-                    <div class="projects__item">
+                <article class="projects projects-swiper">
+                    <div class="swiper-wrapper">
+                        <div class="projects__item swiper-slide">
                            <img src="/assets/img/photo/projects-1.png" alt="" class="projects-item__img">
    
                            <div class="projects-item__content">
@@ -332,7 +333,7 @@
                            </div>
                        </div>
    
-                    <div class="projects__item">
+                        <div class="projects__item swiper-slide">
                            <img src="/assets/img/photo/projects-2.png" alt="" class="projects-item__img">
    
                            <div class="projects-item__content">
@@ -359,7 +360,7 @@
                            </div>
                        </div>
    
-                    <div class="projects__item">
+                        <div class="projects__item swiper-slide">
                            <img src="/assets/img/photo/projects-3.png" alt="" class="projects-item__img">
    
                            <div class="projects-item__content">
@@ -386,7 +387,7 @@
                            </div>
                        </div>
    
-                    <div class="projects__item">
+                        <div class="projects__item swiper-slide">
                            <img src="/assets/img/photo/projects-4.png" alt="" class="projects-item__img">
    
                            <div class="projects-item__content">
@@ -412,6 +413,15 @@
                                </div>
                            </div>
                        </div>
+                    </div>
+
+                    <div class="swiper-pagination"></div>
+
+                    <div class="projects__counter">
+                        <div class="swiper-button-prev"></div>
+                        <span id="numberProjects">1</span>/<span class="reviews__counter--grey">4</span>
+                        <div class="swiper-button-next"></div> 
+                    </div>
                </article>

                <div class="projects__next">
@@ -419,14 +429,14 @@
                        все проекты
                    </a>
                </div>
-            </div> -->
+            </div>

-            <div class="main__item">
+            <!-- <div class="main__item">
                <p class="title-1">
                    Как мы это делаем? Не так просто, как кажется!
                </p>

-                <article class="how">
+                <article class="how pc">
                    <div class="how__control">
                        <div class="how-control__item active" data-num="1">
                            <div class="how-control-item__number title-3">
@@ -539,7 +549,7 @@
                        </div>
                    </div>
                </article>
-            </div>
+            </div> -->

            <!-- <div class="main__item">
                <article class="free">