Good-Production
/
template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

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

Browse Source
fitness
Kirill Pet 8 months ago
parent 6bc4c7213c
commit b155852f9c
4 changed files with 265 additions and 141 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 7
      assets/css/gp-style-desktop.css
  2. 75
      assets/css/gp-style-tablet.css
  3. 122
      assets/js/main.js
  4. 164
      index.html

7
assets/css/gp-style-desktop.css
Unescape View File

@ -364,6 +364,8 @@
/* projects */ /* projects */
.projects{ .projects{
}
.projects .swiper-wrapper{
margin: 37px -20px -20px -20px; margin: 37px -20px -20px -20px;
display: flex; display: flex;
@ -372,7 +374,7 @@
.projects__item{ .projects__item{
margin: 20px; margin: 20px;
width: calc(50% - 40px); width: calc(50% - 40px) !important;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -425,6 +427,9 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.projects__counter{
display: none;
}
/* projects */ /* projects */
/* how */ /* how */

75
assets/css/gp-style-tablet.css
Unescape View File

@ -330,3 +330,78 @@ main{
} }
} }
/* gym */ /* 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 */

122
assets/js/main.js
Unescape View File

@ -42,65 +42,99 @@ 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 // how
let itemButtons = document.querySelectorAll('.how-control__item');
itemButtons.forEach((button) => {
let num = button.dataset.num;
function howPc() { button.onclick = function name(params, index) {
let itemButtons = document.querySelectorAll('.how-control__item');
itemButtons.forEach((button) => { let activeContent = document.querySelector('.how__content').querySelector('.active'),
let num = button.dataset.num; activeButton = document.querySelector('.how__control').querySelector('.active');
button.onclick = function name(params, index) { if (activeContent.dataset.num == button.dataset.num) return;
let activeContent = document.querySelector('.how__content').querySelector('.active'), activeContent.style.height = '0px';
activeButton = document.querySelector('.how__control').querySelector('.active'); activeContent.classList.remove('active');
activeButton.classList.remove('active');
if (activeContent.dataset.num == button.dataset.num) return; let newActive = document.querySelector(`.how-content__item-block[data-num='${num}']`),
newButton = document.querySelector(`.how-control__item[data-num='${num}']`);
activeContent.style.height = '0px';
activeContent.classList.remove('active');
activeButton.classList.remove('active');
let newActive = document.querySelector(`.how-content__item-block[data-num='${num}']`), setTimeout(() => {
newButton = document.querySelector(`.how-control__item[data-num='${num}']`); let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px';
newActive.style.height = newHeight;
newActive.classList.add('active');
newButton.classList.add('active');
}, 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');
setTimeout(() => { blocks.forEach(block => {
let newHeight = newActive.querySelector('.how-content__item').offsetHeight + 'px'; content.appendChild(block)
newActive.style.height = newHeight; });
newActive.classList.add('active');
newButton.classList.add('active');
}, 300);
}
})
} }
function howPhone() {
if (!document.querySelector('.how__content').querySelector('.how-content__item-block')) {
return;
}
howPc(); let buttons = document.querySelectorAll('.how-control__item');
// function howPc() { buttons.forEach(button => {
// let itemButtons = document.querySelectorAll('.how-control__item'), let num = button.dataset.num,
// itemBlocks = document.querySelectorAll('.how-content__item-block'); block = document.querySelector(`.how-content__item-block[data-num='${num}']`);
// itemButtons.forEach((button, index) => { button.after(block);
// 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'; // resize
// activeContent.classList.remove('active'); window.addEventListener('resize', () => {
// activeButton.classList.remove('active'); let screenWidth = window.screen.width;
// setTimeout(() => { if (screenWidth <= 992) {
// let newHeight = block.querySelector('.how-content__item').offsetHeight + 'px'; howPhone();
// block.style.height = newHeight; }else{
// block.classList.add('active'); howPc();
// button.classList.add('active'); }
// }, 300); });
// }
// })
// }

164
index.html
Unescape View File

@ -297,121 +297,131 @@
</div> </div>
</div> </div>
</article> </article>
</div> </div> -->
<div class="main__item"> <div class="main__item">
<p class="title-1"> <p class="title-1">
Разработанные проекты Разработанные проекты
</p> </p>
<article class="projects"> <article class="projects projects-swiper">
<div class="projects__item"> <div class="swiper-wrapper">
<img src="/assets/img/photo/projects-1.png" alt="" class="projects-item__img"> <div class="projects__item swiper-slide">
<img src="/assets/img/photo/projects-1.png" alt="" class="projects-item__img">
<div class="projects-item__content"> <div class="projects-item__content">
<div class="projects-item__tags"> <div class="projects-item__tags">
<div class="projects-item__tag"> <div class="projects-item__tag">
<img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon"> <img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Локация</p> <p class="projects-item-tag__name text-2">Локация</p>
</div> </div>
<div class="projects-item__tag"> <div class="projects-item__tag">
<img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon"> <img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Площадь</p> <p class="projects-item-tag__name text-2">Площадь</p>
</div>
</div> </div>
</div>
<div class="projects-item__text"> <div class="projects-item__text">
<p class="text-1">Название проекта</p> <p class="text-1">Название проекта</p>
<p class="text-2"> <p class="text-2">
Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
</p> </p>
</div>
</div> </div>
</div> </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"> <img src="/assets/img/photo/projects-2.png" alt="" class="projects-item__img">
<div class="projects-item__content"> <div class="projects-item__content">
<div class="projects-item__tags"> <div class="projects-item__tags">
<div class="projects-item__tag"> <div class="projects-item__tag">
<img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon"> <img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Локация</p> <p class="projects-item-tag__name text-2">Локация</p>
</div> </div>
<div class="projects-item__tag"> <div class="projects-item__tag">
<img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon"> <img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Площадь</p> <p class="projects-item-tag__name text-2">Площадь</p>
</div>
</div> </div>
</div>
<div class="projects-item__text"> <div class="projects-item__text">
<p class="text-1">Название проекта</p> <p class="text-1">Название проекта</p>
<p class="text-2"> <p class="text-2">
Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
</p> </p>
</div>
</div> </div>
</div> </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"> <img src="/assets/img/photo/projects-3.png" alt="" class="projects-item__img">
<div class="projects-item__content"> <div class="projects-item__content">
<div class="projects-item__tags"> <div class="projects-item__tags">
<div class="projects-item__tag"> <div class="projects-item__tag">
<img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon"> <img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Локация</p> <p class="projects-item-tag__name text-2">Локация</p>
</div> </div>
<div class="projects-item__tag"> <div class="projects-item__tag">
<img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon"> <img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Площадь</p> <p class="projects-item-tag__name text-2">Площадь</p>
</div>
</div> </div>
</div>
<div class="projects-item__text"> <div class="projects-item__text">
<p class="text-1">Название проекта</p> <p class="text-1">Название проекта</p>
<p class="text-2"> <p class="text-2">
Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
</p> </p>
</div>
</div> </div>
</div> </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"> <img src="/assets/img/photo/projects-4.png" alt="" class="projects-item__img">
<div class="projects-item__content"> <div class="projects-item__content">
<div class="projects-item__tags"> <div class="projects-item__tags">
<div class="projects-item__tag"> <div class="projects-item__tag">
<img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon"> <img src="/assets/img/icon/pin.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Локация</p> <p class="projects-item-tag__name text-2">Локация</p>
</div> </div>
<div class="projects-item__tag"> <div class="projects-item__tag">
<img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon"> <img src="/assets/img/icon/square.svg" alt="" class="projects-item-tag__icon">
<p class="projects-item-tag__name text-2">Площадь</p> <p class="projects-item-tag__name text-2">Площадь</p>
</div>
</div> </div>
</div>
<div class="projects-item__text"> <div class="projects-item__text">
<p class="text-1">Название проекта</p> <p class="text-1">Название проекта</p>
<p class="text-2"> <p class="text-2">
Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект Описание про проект
</p> </p>
</div>
</div> </div>
</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> </article>
<div class="projects__next"> <div class="projects__next">
@ -419,14 +429,14 @@
все проекты все проекты
</a> </a>
</div> </div>
</div> --> </div>
<div class="main__item"> <!-- <div class="main__item">
<p class="title-1"> <p class="title-1">
Как мы это делаем? Не так просто, как кажется! Как мы это делаем? Не так просто, как кажется!
</p> </p>
<article class="how"> <article class="how pc">
<div class="how__control"> <div class="how__control">
<div class="how-control__item active" data-num="1"> <div class="how-control__item active" data-num="1">
<div class="how-control-item__number title-3"> <div class="how-control-item__number title-3">
@ -539,7 +549,7 @@
</div> </div>
</div> </div>
</article> </article>
</div> </div> -->
<!-- <div class="main__item"> <!-- <div class="main__item">
<article class="free"> <article class="free">

Write Preview
Loading…
Cancel
Save