Skip to content

B
bobcat-su_full
Commit 8f9209b8 authored by Sergey's avatar Sergey
Browse files
Options

Add adaptive catalog

parent f7f9e64c
Show whitespace changes
Inline Side-by-side
Showing with 107 additions and 18 deletions
src/catalog.html
View file @ 8f9209b8
......@@ -4,8 +4,6 @@
//= template/breadcrumb/index.html
//= template/catalog-filter/index.html
//= template/catalog-products-list/index.html
//= template/catalog-description/index.html
......
src/img/nosprite/rastr/down-arrow.svg 0 → 100644
View file @ 8f9209b8
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 129 129" enable-background="new 0 0 129 129" width="512px" height="512px">
<g>
<path d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z" fill="#FFFFFF"/>
</g>
</svg>
src/js/catalog-menu.js 0 → 100644
View file @ 8f9209b8
'use strict';
(function () {
var menuItemAc = document.querySelector('.menu-list__catalog .menu-list__link.active');
if(menuItemAc){
var getOtherItem = document.querySelectorAll('.menu-list__catalog .menu-list__link:not(.active)');
menuItemAc.addEventListener('click', function (evt) {
//TODO: desctop
evt.preventDefault();
menuItemAc.classList.toggle('open');
if(menuItemAc.classList.contains('open')){
getOtherItem.forEach(function (item) {
item.classList.add('visible');
})
}else {
getOtherItem.forEach(function (item) {
item.classList.remove('visible');
})
}
})
}
})();
src/scss/catalog-products-list/catalog-products-list.scss
View file @ 8f9209b8
......@@ -70,11 +70,24 @@
transform: translateY(-10px);
}
}
@media screen and (max-width: 425px){
@media screen and (max-width: 1024px){
.products-list__list{
flex-wrap: wrap;
}
.product-item{
width: 33%;
}
}
@media screen and (max-width: 768px){
.products-list__list{
flex-wrap: wrap;
}
.product-item{
width: 50%;
}
}
@media screen and (max-width: 425px){
.product-item{
width: 100%;
}
......
src/scss/menu-list/menu-list-main.scss
View file @ 8f9209b8
......@@ -78,9 +78,58 @@
display: none;
}
}
.menu-list__list{
.menu-list__catalog .menu-list__list{
flex-wrap: wrap;
}
.menu-list__catalog .menu-list__item{
width: 100%;
}
.menu-list__catalog .menu-list__wrapper{
padding: 0;
}
.menu-list__catalog .menu-list__link{
flex-direction: row;
visibility: hidden;
height: 0;
padding: 0;
transition: none;
}
.menu-list__catalog .menu-list__link.active{
position: relative;
visibility: visible;
height: auto;
padding: 10px 20px 20px;
.menu-list__tit{
margin-right: 15px;
}
&: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;
}
}
.menu-list__catalog .menu-list__link.active.open{
&:after {
transform: translate(-100%, -50%) rotate(180deg);
}
}
.menu-list__catalog .menu-list__link.visible{
visibility: visible;
height: auto;
padding: 10px 20px 20px;
}
.menu-list__catalog .menu-list__tit{
flex-grow: 1;
}
}
@media screen and (max-width: 425px){
.menu-list__item {
......
src/template/menu-list-catalog/index.html
View file @ 8f9209b8
......@@ -2,38 +2,38 @@
<div class="wrapper menu-list__wrapper">
<ul class="menu-list__list">
<li class="menu-list__item">
<a href="#" class="menu-list__link active">
<img src="img/icon-test.png" alt="" class="menu-list__ico">
<a href="/build/catalog.html" class="menu-list__link active">
<img src="img/kolesnie-cat.png" alt="Колесные мини-погрузчики" class="menu-list__ico">
<p class="menu-list__tit">Колесные мини-погрузчики</p>
</a>
</li>
<li class="menu-list__item">
<a href="#" class="menu-list__link">
<img src="img/icon-test.png" alt="" class="menu-list__ico">
<a href="/build/catalog.html" class="menu-list__link">
<img src="img/gusen-cat.png" alt="" class="menu-list__ico">
<p class="menu-list__tit">Колесные мини-погрузчики</p>
</a>
</li>
<li class="menu-list__item">
<a href="#" class="menu-list__link">
<img src="img/icon-test.png" alt="" class="menu-list__ico">
<a href="/build/catalog.html" class="menu-list__link">
<img src="img/mini-cat.png" alt="" class="menu-list__ico">
<p class="menu-list__tit">Колесные мини-погрузчики</p>
</a>
</li>
<li class="menu-list__item">
<a href="#" class="menu-list__link">
<img src="img/icon-test.png" alt="" class="menu-list__ico">
<a href="/build/catalog.html" class="menu-list__link">
<img src="img/tele-cat.png" alt="" class="menu-list__ico">
<p class="menu-list__tit">Колесные мини-погрузчики</p>
</a>
</li>
<li class="menu-list__item">
<a href="#" class="menu-list__link">
<img src="img/icon-test.png" alt="" class="menu-list__ico">
<a href="/build/catalog.html" class="menu-list__link">
<img src="img/ecscat-cat.png" alt="" class="menu-list__ico">
<p class="menu-list__tit">Колесные мини-погрузчики</p>
</a>
</li>
<li class="menu-list__item">
<a href="#" class="menu-list__link">
<img src="img/icon-test.png" alt="" class="menu-list__ico">
<a href="/build/catalog.html" class="menu-list__link">
<img src="img/naves-cat.png" alt="" class="menu-list__ico">
<p class="menu-list__tit">Колесные мини-погрузчики</p>
</a>
</li>
......
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