From 03a19840fb63940d15550f977835991dbd73d03a Mon Sep 17 00:00:00 2001 From: Alex Grsm Date: Wed, 23 Nov 2022 12:47:30 +0200 Subject: [PATCH] responsive breadcrumbs --- src/img/angle-down.svg | 3 + src/img/svg/icon.svg | 74 ---------------- src/js/_components.js | 2 + src/js/components/breadcrumbs.js | 17 ++++ src/partials/breadcrumbs.html | 14 +++- src/scss/components/_brands-catalog.scss | 2 + src/scss/components/_breadcrumbs.scss | 98 +++++++++++++++++++++- src/scss/components/_products-catalog.scss | 1 + 8 files changed, 131 insertions(+), 80 deletions(-) create mode 100644 src/img/angle-down.svg delete mode 100644 src/img/svg/icon.svg create mode 100644 src/js/components/breadcrumbs.js diff --git a/src/img/angle-down.svg b/src/img/angle-down.svg new file mode 100644 index 0000000..89a5293 --- /dev/null +++ b/src/img/angle-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/svg/icon.svg b/src/img/svg/icon.svg deleted file mode 100644 index e2b7c28..0000000 --- a/src/img/svg/icon.svg +++ /dev/null @@ -1,74 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/js/_components.js b/src/js/_components.js index 93d730d..027a9f5 100644 --- a/src/js/_components.js +++ b/src/js/_components.js @@ -8,6 +8,7 @@ import brandSwiper from './components/brandswiper'; import scrolling from './components/scrolling'; import showMoreBtn from './components/show-more'; import mobileMenu from './components/mobmenu'; +import breadCrumbs from './components/breadcrumbs'; import './components/validation'; import './components/modals'; @@ -24,6 +25,7 @@ window.addEventListener('DOMContentLoaded', () => { scrolling('.pageup'); showMoreBtn(); mobileMenu(); + breadCrumbs(); /** Current year */ document.querySelector('#year').innerHTML = new Date().getFullYear(); diff --git a/src/js/components/breadcrumbs.js b/src/js/components/breadcrumbs.js new file mode 100644 index 0000000..b01a10c --- /dev/null +++ b/src/js/components/breadcrumbs.js @@ -0,0 +1,17 @@ +const breadCrumbs = () => { + if (window.matchMedia('(max-width: 575.98px)').matches) { + const breadcrumbs = document.querySelector('#breadcrumbs'), + breadCrumbsBtn = document.querySelector('.bread-home__btn'), + breadCrumbsLi = document.querySelectorAll('.breadcrumbs li:not(:first-child)'); + + breadCrumbsBtn.addEventListener('click', () => { + breadcrumbs.classList.toggle('is-show'); + + breadCrumbsLi.forEach(li => { + li.classList.toggle('fadeIn'); + }); + }); + } +}; + +export default breadCrumbs; diff --git a/src/partials/breadcrumbs.html b/src/partials/breadcrumbs.html index 015540f..b2c1782 100644 --- a/src/partials/breadcrumbs.html +++ b/src/partials/breadcrumbs.html @@ -1,8 +1,14 @@
diff --git a/src/scss/components/_brands-catalog.scss b/src/scss/components/_brands-catalog.scss index bd9bb03..f668cb5 100644 --- a/src/scss/components/_brands-catalog.scss +++ b/src/scss/components/_brands-catalog.scss @@ -29,6 +29,7 @@ @media (max-width: 575.98px) { grid-column: 12 span; max-width: 294px; + min-width: 294px; margin: auto; } @@ -44,6 +45,7 @@ .image { min-height: 214px; width: 100%; + margin: auto; } } diff --git a/src/scss/components/_breadcrumbs.scss b/src/scss/components/_breadcrumbs.scss index 66f08ff..4ae7d3a 100644 --- a/src/scss/components/_breadcrumbs.scss +++ b/src/scss/components/_breadcrumbs.scss @@ -1,15 +1,42 @@ +@media (max-width: 575.98px) { + .breadcrumbs__container { + display: flex; + justify-content: center; + } +} + .breadcrumbs { display: inline-flex; align-items: center; background-color: #fff; padding: 15px; border-radius: 13px; + @media (max-width: 575.98px) { + flex-direction: column; + width: 100%; + max-width: 294px; + min-width: 294px; + align-items: flex-start; + gap: 15px; + box-shadow: 0px 13px 33px -5px rgb(0 0 0 / 13%); + } li { font-size: 16px; line-height: 1; + @media (max-width: 575.98px) { + &:not(:first-child) { + display: none; + width: 100%; + position: relative; + > a { + padding: 5px 0; + width: 100%; + display: inline-flex; + padding-left: 33px; + } + } + } .image { - position: relative; - top: 2px; min-width: 24px; min-height: 25px; } @@ -21,6 +48,11 @@ position: relative; left: 2px; font-weight: 700; + @media (max-width: 575.98px) { + padding-left: 5px; + position: absolute; + top: 5px; + } } } a { @@ -33,4 +65,66 @@ &__container { margin-bottom: 50px; } + + .bread-home { + position: relative; + width: 100%; + a { + display: flex; + align-items: center; + padding-right: 25px; + > span { + padding-left: 10px; + display: none; + @media (max-width: 575.98px) { + display: block; + } + } + } + + &__btn { + position: absolute; + right: 0; + top: 0; + width: 25px; + height: 25px; + display: flex; + justify-content: flex-end; + align-items: center; + z-index: 5; + display: none; + @media (max-width: 575.98px) { + display: flex; + } + .b-icon { + transition: all 0.25s ease-in-out; + position: absolute; + display: flex; + align-items: center; + justify-content: center; + } + &--open { + min-width: 12px; + min-height: 8px; + opacity: 1; + } + &--close { + min-width: 12px; + min-height: 12px; + opacity: 0; + } + } + } + + &.is-show { + .bread-home__btn--open { + opacity: 0; + } + .bread-home__btn--close { + opacity: 1; + } + li:not(:first-child) { + display: block; + } + } } diff --git a/src/scss/components/_products-catalog.scss b/src/scss/components/_products-catalog.scss index d29d999..f355e37 100644 --- a/src/scss/components/_products-catalog.scss +++ b/src/scss/components/_products-catalog.scss @@ -35,6 +35,7 @@ @media (max-width: 575.98px) { grid-column: 12 span; max-width: 294px; + min-width: 294px; margin: auto; }