Skip to content

B
bobcat-su_full
Commit 43f90bf7 authored by Sergey's avatar Sergey
Browse files
Options

Add new block detail

parent 0190f2ef
Expand all Show whitespace changes
Inline Side-by-side
Showing with 384 additions and 8 deletions
src/item.html
View file @ 43f90bf7
...@@ -10,4 +10,6 @@ ...@@ -10,4 +10,6 @@
//= template/product-info/index.html //= template/product-info/index.html
//= template/product-slider-detal/index.html
//= template/common/footer.html //= template/common/footer.html
\ No newline at end of file
src/js/gallery-slider.js
View file @ 43f90bf7
'use strict'; 'use strict';
(function () { (function () {
function checkGallery(list, current) {
list.forEach(function (item) {
if(item.classList.contains('active') && item !== current){
item.classList.remove('active');
}
})
}
var gallery = document.querySelectorAll('.product__gallery-item'); var gallery = document.querySelectorAll('.product__gallery-item');
if(gallery.length){ if(gallery.length){
var mainImage = document.querySelector('.product__main-image img');
gallery.forEach(function (item) { gallery.forEach(function (item) {
item.addEventListener('click', function () { item.addEventListener('click', function () {
item.classList.toggle('active'); item.classList.add('active');
checkGallery(gallery, item);
mainImage.setAttribute('src', item.getAttribute('data-url'));
}) })
}) })
} }
...@@ -13,6 +24,7 @@ ...@@ -13,6 +24,7 @@
var mySwiperProduct = new Swiper ('.product__gallery', { var mySwiperProduct = new Swiper ('.product__gallery', {
direction: 'horizontal', direction: 'horizontal',
slidesPerView: 3, slidesPerView: 3,
slidesPerGroup: 3,
loop: false, loop: false,
simulateTouch: false, simulateTouch: false,
spaceBetween: 4, spaceBetween: 4,
......
src/js/hint-dop.js 0 → 100644
View file @ 43f90bf7
'use strict';
(function () {
var dopU = document.querySelector('.product__dop-list');
if(dopU){
var dopItem = dopU.querySelectorAll('.product__dop-bl');
dopItem.forEach(function (dopHint) {
if(dopHint.querySelector('.product__dop-hint')){
dopHint.addEventListener('mouseover', function (evt) {
dopHint.querySelector('.product__dop-hint').classList.add('active');
});
dopHint.addEventListener('mouseout', function () {
dopHint.querySelector('.product__dop-hint').classList.remove('active');
})
}
})
}
})();
\ No newline at end of file
src/js/product-tabs.js
View file @ 43f90bf7
...@@ -22,4 +22,14 @@ ...@@ -22,4 +22,14 @@
}) })
}) })
} }
var accordion = document.querySelectorAll('.product__info-tit');
if(accordion.length){
accordion.forEach(function (itemAccordion) {
itemAccordion.addEventListener('click', function () {
itemAccordion.parentElement.classList.toggle('active');
console.log(itemAccordion.parentElement);
checkTab(tabs, itemAccordion.parentElement);
})
})
}
})(); })();
\ No newline at end of file
src/js/slider-dop.js 0 → 100644
View file @ 43f90bf7
'use strict';
(function () {
document.addEventListener('DOMContentLoaded', function () {
var mySwiperDop = new Swiper ('.product__dop', {
direction: 'horizontal',
slidesPerView: 5,
loop: false,
simulateTouch: false,
spaceBetween: 4,
slidesPerGroup: 5,
pagination: {
el: '.swiper-pagination-gallery',
clickable: true
}
});
});
})();
\ No newline at end of file
src/scss/product-info/product-info.scss
View file @ 43f90bf7
...@@ -2,12 +2,15 @@ ...@@ -2,12 +2,15 @@
.product__tabs{ .product__tabs{
width: 100%; width: 100%;
background: rgba($color-tab,.3); background: rgba($color-tab,.3);
display: flex;
justify-content: space-between;
} }
.product__tabs-list{ .product__tabs-list{
display: flex; display: flex;
list-style-type: none; list-style-type: none;
padding-left: 0; padding-left: 0;
margin: 0;
} }
.product__tabs-item{ .product__tabs-item{
...@@ -26,10 +29,131 @@ ...@@ -26,10 +29,131 @@
background: $grey-text; background: $grey-text;
} }
.product__info-item{ .product__info-body{
display: none; display: none;
} }
.product__info-item.active{ .product__info-item.active .product__info-body{
display: block;
}
.characteristic__list{
list-style-type: none;
display: flex;
padding-left: 0;
flex-wrap: wrap;
}
.characteristic__item{
width: 50%;
padding: 15px 0;
position: relative;
&:nth-child(even){
padding-left: 10px;
}
&:nth-child(odd){
padding-right: 10px;
}
&:after{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 50%;
width: 90%;
height: 1px;
background: $grey-text;
transform: translateX(-50%);
}
}
.characteristic__table{
width: 100%;
color: $grey-text;
}
.characteristic__table-val{
text-align: right;
}
.characteristic__tit{
text-transform: uppercase;
font-style: italic;
font-weight: bold;
color: $grey-text;
}
.product-slider-detail{
background: $grey-product;
}
.check-price{
padding: 0 20px;
text-transform: uppercase;
background: $red-color;
border: none;
color: white;
font-size: 18px;
transition: .2s;
cursor: pointer;
border-left: 2px solid white;
&:hover{
background: rgba($red-color, .8);
}
}
.product__info-tit{
visibility: hidden;
height: 0;
margin: 0;
}
@media screen and (max-width: 704px){
.product__tabs{
display: none;
}
.product__info-item.active .product__info-tit{
position: relative;
background: $grey-text;
&:after{
content: "";
display: block; display: block;
position: absolute;
width: 20px;
height: 20px;
background: url("../img/down-arrow.svg");
background-size: contain;
right: 0;
top: 50%;
transform: translate(-100%,-50%) rotate(180deg);
transition: .2s;
}
}
.product__info-tit{
position: relative;
visibility: visible;
height: auto;
background: rgba($grey-text, .6);
color: white;
font-weight: normal;
padding: 7px 5px;
&:after{
content: "";
display: block;
position: absolute;
width: 20px;
height: 20px;
background: url("../img/down-arrow.svg");
background-size: contain;
right: 0;
top: 50%;
transform: translate(-100%,-50%);
transition: .2s;
}
}
}
@media screen and (max-width: 810px){
.characteristic__item{
width: 100%;
}
} }
\ No newline at end of file
src/scss/product-main/product-main.scss
View file @ 43f90bf7
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
} }
} }
.product__gallery-item.active{ .product__gallery-item.active{
border: 1px solid black; border: 1px solid $red-color;
} }
.swiper-pagination-gallery{ .swiper-pagination-gallery{
...@@ -55,3 +55,80 @@ ...@@ -55,3 +55,80 @@
.swiper-pagination-bullet-active{ .swiper-pagination-bullet-active{
background: $red-color; background: $red-color;
} }
.product__dop{
overflow: hidden;
}
.product__dop-list{
display: flex;
list-style-type: none;
padding-left: 0;
justify-content: space-between;
}
.product__dop-item{
position: relative;
}
.product__dop-bl{
width: 65px;
height: 65px;
}
.product__dop-bl-link{
width: 100%;
height: 100%;
overflow: hidden;
img{
width: 100%;
}
}
.product__dop-hint{
visibility: hidden;
width: 0;
margin: 0;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
}
/*.product__dop-hint.active{
visibility: visible;
z-index: 10;
font-size: 12px;
white-space: pre;
background: rgba(black, .7);
color: white;
width: auto;
height: auto;
padding: 2px 3px;
border-radius: 5px;
&:after{
content: "";
display: block;
position: absolute;
bottom: 0;
left: 50%;
border: 20px solid transparent;
border-top: 20px solid green;
}
}
*/
.product__dop-bl-link{
display: flex;
position: relative;
&:after{
content: "";
display: block;
width: 1px;
height: 80%;
background: rgb(220, 220, 220);
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
}
}
src/scss/product-title/product-title.scss
View file @ 43f90bf7
...@@ -2,4 +2,5 @@ ...@@ -2,4 +2,5 @@
text-align: center; text-align: center;
padding-top: 20px; padding-top: 20px;
padding-bottom: 50px; padding-bottom: 50px;
overflow: hidden;
} }
\ No newline at end of file
src/template/product-info/index.html
View file @ 43f90bf7
This diff is collapsed.
src/template/product-main/index.html
View file @ 43f90bf7
...@@ -3,16 +3,22 @@ ...@@ -3,16 +3,22 @@
<div class="product__gallery-title product__grey-title">Фото</div> <div class="product__gallery-title product__grey-title">Фото</div>
<div class="product__gallery"> <div class="product__gallery">
<ul class="product__gallery-list swiper-wrapper"> <ul class="product__gallery-list swiper-wrapper">
<li class="product__gallery-item swiper-slide"> <li class="product__gallery-item swiper-slide active" data-url="img/product-main.png">
<img src="img/galley-item.png"> <img src="img/galley-item.png">
</li> </li>
<li class="product__gallery-item swiper-slide"> <li class="product__gallery-item swiper-slide" data-url="img/about-main.png">
<img src="img/galley-item.png"> <img src="img/galley-item.png">
</li> </li>
<li class="product__gallery-item swiper-slide"> <li class="product__gallery-item swiper-slide" data-url="img/product-main.png">
<img src="img/galley-item.png"> <img src="img/galley-item.png">
</li> </li>
<li class="product__gallery-item swiper-slide"> <li class="product__gallery-item swiper-slide" data-url="img/about-main.png">
<img src="img/galley-item.png">
</li>
<li class="product__gallery-item swiper-slide" data-url="img/product-main.png">
<img src="img/galley-item.png">
</li>
<li class="product__gallery-item swiper-slide" data-url="img/about-main.png">
<img src="img/galley-item.png"> <img src="img/galley-item.png">
</li> </li>
</ul> </ul>
...@@ -24,5 +30,106 @@ ...@@ -24,5 +30,106 @@
</div> </div>
<div class="product__main-bl"> <div class="product__main-bl">
<div class="product__dop-title product__grey-title">Навесное оборудование</div> <div class="product__dop-title product__grey-title">Навесное оборудование</div>
<div class="product__dop">
<ul class="product__dop-list swiper-wrapper">
<li class="product__dop-item swiper-slide">
<div class="product__dop-top product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img class="product__dop-img" src="img/shetka.png" alt="Супер щетка" title="Супер щетка">
</a>
</div>
<div class="product__dop-bottom product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/shetka.png">
</a>
</div>
</li>
<li class="product__dop-item swiper-slide">
<div class="product__dop-top product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/covsh-dop.png">
</a>
</div>
<div class="product__dop-bottom product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/covsh-dop.png">
</a>
</div>
</li>
<li class="product__dop-item swiper-slide">
<div class="product__dop-top product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/shetka.png">
</a>
</div>
<div class="product__dop-bottom product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/shetka.png">
</a>
</div>
</li>
<li class="product__dop-item swiper-slide">
<div class="product__dop-top product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/covsh-dop.png">
</a>
</div>
<div class="product__dop-bottom product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/covsh-dop.png">
</a>
</div>
</li>
<li class="product__dop-item swiper-slide">
<div class="product__dop-top product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/shetka.png">
</a>
</div>
<div class="product__dop-bottom product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/shetka.png">
</a>
</div>
</li>
<li class="product__dop-item swiper-slide">
<div class="product__dop-top product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/covsh-dop.png">
</a>
</div>
<div class="product__dop-bottom product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/covsh-dop.png">
</a>
</div>
</li>
<li class="product__dop-item swiper-slide">
<div class="product__dop-top product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/covsh-dop.png">
</a>
</div>
<div class="product__dop-bottom product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/covsh-dop.png">
</a>
</div>
</li>
<li class="product__dop-item swiper-slide">
<div class="product__dop-top product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/covsh-dop.png">
</a>
</div>
<div class="product__dop-bottom product__dop-bl">
<a class="product__dop-bl-link" href="#">
<img src="img/covsh-dop.png">
</a>
</div>
</li>
</ul>
<div class="swiper-pagination-gallery"></div>
</div>
</div> </div>
</div> </div>
\ No newline at end of file
src/template/product-slider-detal/index.html 0 → 100644
View file @ 43f90bf7
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment