Compare commits
6 Commits
c4fcf438a4
...
36fda393f6
| Author | SHA1 | Date |
|---|---|---|
 Максим Максимов
|
36fda393f6 | 2 weeks ago |
|
Максим Максимов
|
b241ce250b | 2 weeks ago |
|
Максим Максимов
|
1f2bfa9fbb | 2 weeks ago |
|
Максим Максимов
|
1fa876ba0a | 2 weeks ago |
|
Максим Максимов
|
e196205d2a | 2 weeks ago |
|
Максим Максимов
|
f49c8e2741 | 2 weeks ago |
@ -0,0 +1,334 @@ |
|||||||
|
.main-food_reviews { |
||||||
|
border-radius: 40px; |
||||||
|
padding: 24px; |
||||||
|
max-width: 395px; |
||||||
|
height: 672px; |
||||||
|
flex-grow: 1; |
||||||
|
position: relative; |
||||||
|
box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.12); |
||||||
|
background: #fff; |
||||||
|
} |
||||||
|
.main-food_reviews-title { |
||||||
|
font-weight: 700; |
||||||
|
font-size: 32px; |
||||||
|
text-transform: uppercase; |
||||||
|
color: #121212; |
||||||
|
} |
||||||
|
.main-food_reviews-slider { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.main-food_reviews-slide { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
padding: 20px; |
||||||
|
border-radius: 8px; |
||||||
|
min-height: 580px; |
||||||
|
} |
||||||
|
.main-food_reviews-slide-img { |
||||||
|
border: 2px solid #fff; |
||||||
|
border-radius: 32px; |
||||||
|
object-fit: cover; |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
.main-food_reviews-slide-name { |
||||||
|
font-weight: 700; |
||||||
|
font-size: 16px; |
||||||
|
text-transform: uppercase; |
||||||
|
color: #121212; |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
.main-food_reviews-slide-position { |
||||||
|
font-weight: 500; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 140%; |
||||||
|
color: #121212; |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
.main-food_reviews-slide-position:not(.--no-min-height){ |
||||||
|
min-height: 60px; |
||||||
|
} |
||||||
|
.main-food_reviews-slide-text { |
||||||
|
font-weight: 500; |
||||||
|
font-size: 16px; |
||||||
|
line-height: 140%; |
||||||
|
color: #121212; |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
.main-food_reviews-slide-text a{ |
||||||
|
color: #569ef0; |
||||||
|
font-weight: 600; |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
.main-food_reviews-slide-head, .main-food_reviews-slide-position{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.main-food_reviews-slide-text p { |
||||||
|
margin-bottom: .5em; |
||||||
|
} |
||||||
|
.main-food_reviews-slider { |
||||||
|
position: relative; |
||||||
|
height: 97%; |
||||||
|
} |
||||||
|
.main-food_reviews-slider-index { |
||||||
|
position: absolute; |
||||||
|
left: 40%; |
||||||
|
transform: translateX(-50%); |
||||||
|
bottom: 30px; |
||||||
|
z-index: 100; |
||||||
|
font-weight: 500; |
||||||
|
font-size: 16px; |
||||||
|
line-height: 140%; |
||||||
|
color: #121212; |
||||||
|
} |
||||||
|
|
||||||
|
.main-food_products-card-img{ |
||||||
|
padding-bottom: 20px; |
||||||
|
} |
||||||
|
.main-food_arrows .swiper-button-next{ |
||||||
|
right: var(--swiper-navigation-sides-offset, -65px)!important; |
||||||
|
left: auto; |
||||||
|
} |
||||||
|
.main-food_arrows .swiper-button-prev{ |
||||||
|
left: var(--swiper-navigation-sides-offset, -65px)!important; |
||||||
|
right: auto; |
||||||
|
} |
||||||
|
.main-food_reviews-star { |
||||||
|
position: absolute; |
||||||
|
top: 0%; |
||||||
|
right: 0%; |
||||||
|
z-index: 100; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.main-food_reviews-slide-top { |
||||||
|
display: flex; |
||||||
|
justify-content: flex-start; |
||||||
|
gap: 20px; |
||||||
|
align-items: center; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.main-food_reviews-slide-top img { |
||||||
|
width: 48px; |
||||||
|
height: 48px; |
||||||
|
border-radius: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
@media(max-width: 940px){ |
||||||
|
.main-food_reviews-title{ |
||||||
|
font-size: 24px; |
||||||
|
} |
||||||
|
.main-food_reviews-star{ |
||||||
|
width: 82px; |
||||||
|
top: -20px; |
||||||
|
} |
||||||
|
.main-reviews_title{ |
||||||
|
font-size: 32px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width: 767px) { |
||||||
|
.main-food_reviews { |
||||||
|
padding: 16px 24px; |
||||||
|
border-radius: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.main-food_reviews-slide-img { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.main-food_reviews-slide-name { |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
.main-food_reviews-slide-position{ |
||||||
|
font-weight: 500; |
||||||
|
font-size: 14px; |
||||||
|
background: radial-gradient(278.91% 196.13% at 128.36% -48.29%, rgb(238, 104, 104) 0%, rgb(86, 158, 240) 57.692307233810425%); |
||||||
|
background-clip: text; |
||||||
|
-webkit-background-clip: text; |
||||||
|
-webkit-text-fill-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.main-food_reviews-slide-text { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
.main-food_reviews-slider-index { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
.main-food_reviews-slide{ |
||||||
|
padding-left: 0; |
||||||
|
padding-right: 0; |
||||||
|
} |
||||||
|
.main-reviews_title{ |
||||||
|
font-size: 32px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* Main Reviews */ |
||||||
|
|
||||||
|
|
||||||
|
.main-food_reviews-slide-head{ |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.main-food_reviews-slide-photo{ |
||||||
|
height: 48px; |
||||||
|
width: 48px; |
||||||
|
flex-shrink: 0; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
border-radius: 50%; |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
|
||||||
|
.main-food_reviews-slide-name, .main-food_reviews-slide-position{ |
||||||
|
padding-left: 64px; |
||||||
|
} |
||||||
|
|
||||||
|
.main-food_reviews-slide-name.--no-padding-left, .main-food_reviews-slide-position.--no-padding-left{ |
||||||
|
padding-left: 0; |
||||||
|
} |
||||||
|
.main-food_reviews-slide-name, .main-food_reviews-slide-position, .main-food_reviews-slide-head{ |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.main-food_reviews-slide-media_file{ |
||||||
|
height: 220px; |
||||||
|
width: 100%; |
||||||
|
border-radius: 32px; |
||||||
|
margin-bottom: 1rem; |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
.main-food_reviews-slide-media_file-wrap{ |
||||||
|
width: 100%; |
||||||
|
display: block; |
||||||
|
} |
||||||
|
@media (max-width: 640px) { |
||||||
|
.main-food_reviews-slide-name{ |
||||||
|
min-height: 48px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.main-food_reviews-slide-position{ |
||||||
|
padding-left: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.main-food_reviews-slide-media_main{ |
||||||
|
border-radius: 25px; |
||||||
|
width: 168px; |
||||||
|
height: 115px; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
.main-food_reviews-slide-media_main img{ |
||||||
|
width: 168px; |
||||||
|
height: 115px; |
||||||
|
} |
||||||
|
.main-food_reviews-slide-media_mini{ |
||||||
|
width: 56px; |
||||||
|
height: 70px; |
||||||
|
border-radius: 16px; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.main-food_reviews-slide-media_wrap{ |
||||||
|
display: flex; |
||||||
|
gap: 6px; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 20px; |
||||||
|
|
||||||
|
} |
||||||
|
.main-food_reviews-slide-media_wrap img{ |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
.main-food_reviews-slide-media_mini img{ |
||||||
|
width: 56px; |
||||||
|
height: 70px; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.mform__review{ |
||||||
|
|
||||||
|
max-height: 90vh; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
.mform__review-wrap{ |
||||||
|
background-color: #fff; |
||||||
|
max-width: 1200px; |
||||||
|
width: calc(100% - 20px); |
||||||
|
border-radius: 32px; |
||||||
|
padding: 40px; |
||||||
|
margin: auto; |
||||||
|
max-width: 1200px; |
||||||
|
width: calc(100% - 20px); position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.read-more{ |
||||||
|
font-weight: 500; |
||||||
|
font-size: 16px; |
||||||
|
line-height: 140%; |
||||||
|
text-decoration: underline; |
||||||
|
text-decoration-skip-ink: none; |
||||||
|
background: radial-gradient(278.91% 196.13% at 128.36% -48.29%, rgb(238, 104, 104) 0%, rgb(86, 158, 240) 57.692307233810425%); |
||||||
|
background-clip: text; |
||||||
|
-webkit-background-clip: text; |
||||||
|
-webkit-text-fill-color: transparent; |
||||||
|
margin-top: 2rem; |
||||||
|
border-bottom: 1px rgb(86, 158, 240) solid; |
||||||
|
display: block; |
||||||
|
width: max-content; |
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width: 640px) { |
||||||
|
.mform__review-wrap{ |
||||||
|
padding: 24px; |
||||||
|
padding-top: 60px; |
||||||
|
padding-right: 10px; |
||||||
|
} |
||||||
|
.mform__review{ |
||||||
|
padding-right: 16px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* Для Chrome, Edge и Safari */ |
||||||
|
.mform__review::-webkit-scrollbar { |
||||||
|
width: 8px; |
||||||
|
height: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.mform__review::-webkit-scrollbar-track { |
||||||
|
background: #f5f5f5; |
||||||
|
border-radius: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.mform__review::-webkit-scrollbar-thumb { |
||||||
|
background-color: #81bafc; |
||||||
|
border-radius: 10px; |
||||||
|
border: 2px solid #f5f5f5; |
||||||
|
} |
||||||
|
|
||||||
|
.mform__review::-webkit-scrollbar-thumb:hover { |
||||||
|
background-color: #63acff; |
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width: 576px) { |
||||||
|
.main-food_reviews { |
||||||
|
min-height: 720px; |
||||||
|
height: 80vh; |
||||||
|
max-height: 850px; |
||||||
|
} |
||||||
|
.main-food_reviews-slide { |
||||||
|
min-height: 640px; |
||||||
|
height: calc(80vh - 80px); |
||||||
|
max-height: 770px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.mform__review__media{ |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
max-width: 350px; |
||||||
|
} |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
jQuery('.main-food_reviews-slide-media_mini').on('click', function(){ |
||||||
|
var main = jQuery(this).closest('.main-food_reviews-slide-media_wrap').find('.main-food_reviews-slide-media_main') |
||||||
|
var src = jQuery(this).attr('src') |
||||||
|
var href = jQuery(this).data('video') |
||||||
|
if (!href){ |
||||||
|
href = src |
||||||
|
} |
||||||
|
jQuery(main).attr('href', href) |
||||||
|
jQuery(main).attr('src', src) |
||||||
|
}) |
||||||
|
jQuery('.main-food_reviews-slide-media_wrap').each(function(){ |
||||||
|
jQuery(this).find('.main-food_reviews-slide-media_mini')[0].click() |
||||||
|
}) |
||||||
@ -0,0 +1,597 @@ |
|||||||
|
/* breadcrumbs */ |
||||||
|
.breadcrumbs{ |
||||||
|
margin: 24px 0px; |
||||||
|
|
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.breadcrumbs__item{ |
||||||
|
display: block; |
||||||
|
|
||||||
|
padding: 0px 16px; |
||||||
|
|
||||||
|
font-family: var(--font-family); |
||||||
|
font-weight: 700; |
||||||
|
font-size: 16px; |
||||||
|
line-height: 125%; |
||||||
|
color: var(--text-6); |
||||||
|
|
||||||
|
text-decoration: none; |
||||||
|
|
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.breadcrumbs__item:first-child{ |
||||||
|
padding-left: 0; |
||||||
|
} |
||||||
|
.breadcrumbs__item:nth-child(n+2)::before{ |
||||||
|
content: ''; |
||||||
|
|
||||||
|
position: absolute; |
||||||
|
top: -2px; |
||||||
|
left: -12px; |
||||||
|
|
||||||
|
width: 24px; |
||||||
|
aspect-ratio: 1; |
||||||
|
|
||||||
|
background-image: url(../img/svg/main/arrow-breadcrumbs.svg); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-size: contain; |
||||||
|
} |
||||||
|
/* breadcrumbs */ |
||||||
|
|
||||||
|
/* product */ |
||||||
|
|
||||||
|
.product_main{ |
||||||
|
display: flex; |
||||||
|
padding: 30px; |
||||||
|
border-radius: 30px; |
||||||
|
min-height: 766px; |
||||||
|
margin-top: 30px; |
||||||
|
justify-content: space-between; |
||||||
|
background-color: var(--bg-color); |
||||||
|
} |
||||||
|
|
||||||
|
.product_main.--fish{ |
||||||
|
--bg-color: #C1DDE6; |
||||||
|
--accent-color: #48c1ed; |
||||||
|
} |
||||||
|
/* product info */ |
||||||
|
.product-info{ |
||||||
|
width: 364px; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
display: flex; |
||||||
|
padding-right: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.product-title{ |
||||||
|
font-weight: 700; |
||||||
|
font-size: 24px; |
||||||
|
text-transform: uppercase; |
||||||
|
color: #121212; |
||||||
|
} |
||||||
|
|
||||||
|
.product-contains{ |
||||||
|
margin-top: 30px; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.product-block-title{ |
||||||
|
font-weight: 700; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 100%; |
||||||
|
color: #121212; |
||||||
|
text-transform: uppercase; |
||||||
|
} |
||||||
|
|
||||||
|
.product-contains-text{ |
||||||
|
font-weight: 400; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 150%; |
||||||
|
color: #121212; |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.product-values{ |
||||||
|
margin-top: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.product-values-list{ |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
margin-top: 10px; |
||||||
|
gap: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.product-values-item{ |
||||||
|
border: 1px solid rgba(18, 18, 18, 0.1); |
||||||
|
border-radius: 100px; |
||||||
|
padding: 4px 4px 4px 10px; |
||||||
|
height: 48px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
font-weight: 700; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 143%; |
||||||
|
color: #121212; |
||||||
|
gap: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.product-values-item-val{ |
||||||
|
border: 1px solid #000; |
||||||
|
border-radius: 100px; |
||||||
|
width: 40px; |
||||||
|
height: 40px; |
||||||
|
flex-shrink: 0; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.product-values-title{ |
||||||
|
font-weight: 700; |
||||||
|
font-size: 16px; |
||||||
|
line-height: 125%; |
||||||
|
color: #121212; |
||||||
|
} |
||||||
|
|
||||||
|
.product-vitamins{ |
||||||
|
border: 1px solid rgba(18, 18, 18, 0.1); |
||||||
|
border-radius: 20px; |
||||||
|
padding: 10px; |
||||||
|
width: 100%; |
||||||
|
font-weight: 700; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 143%; |
||||||
|
color: #121212; |
||||||
|
margin-top: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.product-vitamins-list{ |
||||||
|
margin-top: 10px; |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
gap: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.product-vitamins-item{ |
||||||
|
border: 1px solid #000; |
||||||
|
border-radius: 100px; |
||||||
|
padding: 10px; |
||||||
|
} |
||||||
|
/* product info */ |
||||||
|
|
||||||
|
|
||||||
|
/* product constructor */ |
||||||
|
.product-constructor{ |
||||||
|
width: 395px; |
||||||
|
} |
||||||
|
.product-constructor__block{ |
||||||
|
margin-bottom: 1.5rem; |
||||||
|
} |
||||||
|
.product-constructor__block-title{ |
||||||
|
font-size: 16px; |
||||||
|
line-height: 125%; |
||||||
|
color: #121212; |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
|
||||||
|
.product-constructor__block-list{ |
||||||
|
display: flex; |
||||||
|
margin-top: 10px; |
||||||
|
border-radius: 100px; |
||||||
|
padding: 5px; |
||||||
|
height: 60px; |
||||||
|
width: 100%; |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.product-constructor__block-item{ |
||||||
|
flex-grow: 1; |
||||||
|
padding: 2px 6px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
height: 50px; |
||||||
|
font-weight: 700; |
||||||
|
font-size: 14px; |
||||||
|
color: rgba(18, 18, 18, 0.75); |
||||||
|
border-radius: 100px; |
||||||
|
} |
||||||
|
|
||||||
|
.product-constructor__block-item svg, .product-constructor__block-item path{ |
||||||
|
fill: rgba(18, 18, 18, 0.75); |
||||||
|
} |
||||||
|
.product-constructor__block-item.active{ |
||||||
|
color: #fff; |
||||||
|
background-color: var(--accent-color); |
||||||
|
} |
||||||
|
|
||||||
|
.product-constructor__block-item.active svg, .product-constructor__block-item.active path{ |
||||||
|
fill: #fff; |
||||||
|
} |
||||||
|
.product-constructor__block-item img, .product-constructor__block-item svg{ |
||||||
|
height: 22px; |
||||||
|
width: 22px; |
||||||
|
} |
||||||
|
/* product constructor */ |
||||||
|
/* product price */ |
||||||
|
|
||||||
|
|
||||||
|
.product-price{ |
||||||
|
display: flex; |
||||||
|
gap: 10px; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.product-price-main{ |
||||||
|
border-radius: 100px; |
||||||
|
padding: 14px 15px; |
||||||
|
width: 135px; |
||||||
|
background-color: #fff; |
||||||
|
font-size: 24px; |
||||||
|
text-transform: uppercase; |
||||||
|
text-align: center; |
||||||
|
color: #4d4d4d; |
||||||
|
font-weight: 700; |
||||||
|
} |
||||||
|
|
||||||
|
.product-price-old{ |
||||||
|
font-weight: 700; |
||||||
|
font-size: 16px; |
||||||
|
line-height: 150%; |
||||||
|
text-transform: uppercase; |
||||||
|
text-decoration: line-through; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
.product-price-percent{ |
||||||
|
font-weight: 500; |
||||||
|
font-size: 12px; |
||||||
|
line-height: 133%; |
||||||
|
color: #fa0505; |
||||||
|
margin-top: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.product-btn{ |
||||||
|
border: 2px solid #fff; |
||||||
|
border-radius: 100px; |
||||||
|
padding: 12px 16px; |
||||||
|
width: 100%; |
||||||
|
height: 60px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
font-weight: 900; |
||||||
|
font-size: 12px; |
||||||
|
text-align: center; |
||||||
|
color: #fff; |
||||||
|
margin-top: 20px; |
||||||
|
background-color: var(--accent-color); |
||||||
|
} |
||||||
|
/* product price */ |
||||||
|
|
||||||
|
|
||||||
|
/* product gallery */ |
||||||
|
|
||||||
|
.product-gallery{ |
||||||
|
width: 390px; |
||||||
|
margin-right: 20px; |
||||||
|
border: 2px solid #fff; |
||||||
|
border-radius: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
/* product gallery */ |
||||||
|
|
||||||
|
.product-constructor, .product-gallery, .product-info{ |
||||||
|
flex-grow: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.product-gallery{ |
||||||
|
padding-top: 30px; |
||||||
|
padding-bottom: 10px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.product-gallery-item{ |
||||||
|
|
||||||
|
background-color: #fff; |
||||||
|
border-radius: 24px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
height: auto; |
||||||
|
aspect-ratio: 1/1; |
||||||
|
} |
||||||
|
.product-gallery-slider{ |
||||||
|
margin-left: 10px; |
||||||
|
margin-right: 10px; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.product-gallery-slider .swiper-wrapper{ |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.mySwiper::before{ |
||||||
|
background: linear-gradient(270deg, rgba(193, 221, 230, 0) 0%, var(--bg-color) 100%); |
||||||
|
height: 120%; |
||||||
|
position: absolute; |
||||||
|
left: -10px; |
||||||
|
top: -10%; |
||||||
|
width: 65px; |
||||||
|
content: ''; |
||||||
|
z-index: 2; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
|
||||||
|
.mySwiper::after{ |
||||||
|
background: linear-gradient(270deg, rgba(193, 221, 230, 0) 0%, var(--bg-color) 100%); |
||||||
|
height: 120%; |
||||||
|
position: absolute; |
||||||
|
right: -10px; |
||||||
|
top: -10%; |
||||||
|
width: 65px; |
||||||
|
content: ''; |
||||||
|
transform: scaleX(-1); |
||||||
|
z-index: 2; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
.product-gallery-item img{ |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
object-fit: contain; |
||||||
|
padding: 10px; |
||||||
|
} |
||||||
|
/* product */ |
||||||
|
|
||||||
|
.product-gallery-arrow{ |
||||||
|
border-radius: 100px; |
||||||
|
background-color: var(--accent-color); |
||||||
|
border: 1px solid #fff; |
||||||
|
height: 44px; |
||||||
|
width: 44px; |
||||||
|
pointer-events: all; |
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L1 13' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E"); |
||||||
|
background-position: center; |
||||||
|
background-repeat: no-repeat; |
||||||
|
} |
||||||
|
|
||||||
|
.product-gallery-arrows{ |
||||||
|
width: calc(100% - 10px); |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 5px; |
||||||
|
transform: translateY(-50%); |
||||||
|
justify-content: space-between; |
||||||
|
pointer-events: none; |
||||||
|
z-index: 3; |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
.product-gallery-prev{ |
||||||
|
transform: scaleX(-1); |
||||||
|
} |
||||||
|
|
||||||
|
.swiper-slide-active.product-gallery-item{ |
||||||
|
outline: 4px solid #48c1ed; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.product_main .swiper-slide { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.product_main .swiper-slide img { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
object-fit: contain; |
||||||
|
} |
||||||
|
|
||||||
|
.product_main .swiper { |
||||||
|
width: 100%; |
||||||
|
margin-left: auto; |
||||||
|
margin-right: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.product_main .swiper-slide { |
||||||
|
background-size: cover; |
||||||
|
background-position: center; |
||||||
|
} |
||||||
|
|
||||||
|
.mySwiper2 { |
||||||
|
height: 80%; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.mySwiper { |
||||||
|
height: 20%; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 10px; |
||||||
|
height: 110px; |
||||||
|
} |
||||||
|
|
||||||
|
.mySwiper .swiper-slide { |
||||||
|
width: 90px; |
||||||
|
height: 90px; |
||||||
|
background-color: #fff; |
||||||
|
border-radius: 24px; |
||||||
|
padding: 10px 20px; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.mySwiper .swiper-slide-thumb-active { |
||||||
|
outline: 4px solid var(--accent-color); |
||||||
|
} |
||||||
|
|
||||||
|
.product_main .swiper-slide img { |
||||||
|
display: block; |
||||||
|
width: calc(100% - 10px); |
||||||
|
height: calc(100% - 10px); |
||||||
|
object-fit: contain; |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
left: 50%; |
||||||
|
transform: translate(-50%, -50%); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.product-desc{ |
||||||
|
margin-top: 55px; |
||||||
|
} |
||||||
|
|
||||||
|
.product-desc-text{ |
||||||
|
font-weight: 400; |
||||||
|
font-size: 16px; |
||||||
|
line-height: 150%; |
||||||
|
color: #121212; |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.product-reviews{ |
||||||
|
margin-top: 140px; |
||||||
|
} |
||||||
|
|
||||||
|
.product-similar{ |
||||||
|
margin-top: 140px; |
||||||
|
} |
||||||
|
|
||||||
|
.main-food_reviews-slide{ |
||||||
|
box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.12); |
||||||
|
background: var(--color); |
||||||
|
/* width: 395px; */ |
||||||
|
border-radius: 40px !important; |
||||||
|
} |
||||||
|
|
||||||
|
.product-reviews-slider { |
||||||
|
overflow: visible !important; |
||||||
|
margin-top: 40px; |
||||||
|
padding-left: 20px; |
||||||
|
padding-right: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.product-reviews{ |
||||||
|
overflow: hidden; |
||||||
|
padding-bottom: 60px; |
||||||
|
margin-bottom: -60px; |
||||||
|
} |
||||||
|
|
||||||
|
.product-similar-slider{ |
||||||
|
margin-top: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.main-food_products-card-slider .swiper-slide{ |
||||||
|
align-self: center; |
||||||
|
} |
||||||
|
|
||||||
|
.product-similar{ |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.product-single{ |
||||||
|
padding-bottom: 90px; |
||||||
|
} |
||||||
|
|
||||||
|
.product-similar-slider .swiper-wrapper{ |
||||||
|
align-items: stretch; |
||||||
|
} |
||||||
|
.product-similar-slider .swiper-slide{ |
||||||
|
height: auto; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.product-similar-slider .swiper-slide > div{ |
||||||
|
flex-grow: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.product-title.--m{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width: 1150px) { |
||||||
|
.product_main { |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
.product-gallery{ |
||||||
|
order: 0; |
||||||
|
} |
||||||
|
.product-info{ |
||||||
|
order: 3; |
||||||
|
} |
||||||
|
.product-info, .product-gallery, .product-constructor{ |
||||||
|
width: 100%; |
||||||
|
margin-right: auto; |
||||||
|
margin-left: 0; |
||||||
|
margin-top: 20px; |
||||||
|
} |
||||||
|
.mySwiper{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.mySwiper2{ |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
aspect-ratio: 1 / 1.25; |
||||||
|
max-height: 540px; |
||||||
|
} |
||||||
|
.breadcrumbs{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.product_main{ |
||||||
|
margin-top: -45px; |
||||||
|
width: calc(48px + 100%); |
||||||
|
margin-left: -24px; |
||||||
|
border-radius: 0; |
||||||
|
padding: 5px 20px 40px; |
||||||
|
} |
||||||
|
.product-title.--m{ |
||||||
|
display: block; |
||||||
|
font-size: 18px; |
||||||
|
margin-top: 20px; |
||||||
|
margin-top: 32px; |
||||||
|
margin-bottom: 14px; |
||||||
|
} |
||||||
|
.product-title.--pc{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.product-constructor__block-title{ |
||||||
|
font-size: 14px; |
||||||
|
line-height: 143%; |
||||||
|
} |
||||||
|
.product-constructor__block-item-name{ |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
.product-info{ |
||||||
|
padding-right: 0; |
||||||
|
} |
||||||
|
.product-desc-text{ |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
.product-reviews{ |
||||||
|
margin-top: 66px; |
||||||
|
} |
||||||
|
.main-food_reviews-slide{ |
||||||
|
padding-left: 20px !important; |
||||||
|
padding-right: 20px !important; |
||||||
|
} |
||||||
|
.main-food_products-card{ |
||||||
|
min-width: 0 !important; |
||||||
|
} |
||||||
|
.main-food_products-card-img img{ |
||||||
|
height: 40vw; |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 9.9 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 459 B |
|
After Width: | Height: | Size: 481 B |
|
After Width: | Height: | Size: 456 B |
|
After Width: | Height: | Size: 458 B |
|
After Width: | Height: | Size: 954 B |
|
After Width: | Height: | Size: 455 B |
|
After Width: | Height: | Size: 1.9 KiB |
@ -0,0 +1,94 @@ |
|||||||
|
document.addEventListener('DOMContentLoaded', function() { |
||||||
|
|
||||||
|
|
||||||
|
var swiper = new Swiper(".mySwiper", { |
||||||
|
loop: true, |
||||||
|
spaceBetween: 10, |
||||||
|
slidesPerView: 'auto', |
||||||
|
freeMode: true, |
||||||
|
watchSlidesProgress: true, |
||||||
|
navigation: { |
||||||
|
nextEl: '.product-gallery-next', |
||||||
|
prevEl: '.product-gallery-prev', |
||||||
|
}, |
||||||
|
}); |
||||||
|
var swiper2 = new Swiper(".mySwiper2", { |
||||||
|
loop: true, |
||||||
|
spaceBetween: 10, |
||||||
|
thumbs: { |
||||||
|
swiper: swiper, |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
var reviewsSwiper = new Swiper(".product-reviews-slider", { |
||||||
|
loop: false, |
||||||
|
spaceBetween: 20, |
||||||
|
slidesPerView: 1, |
||||||
|
breakpoints: { |
||||||
|
300: { |
||||||
|
slidesPerView: 1, |
||||||
|
spaceBetween: 20, |
||||||
|
}, |
||||||
|
776: { |
||||||
|
slidesPerView: 2, |
||||||
|
spaceBetween: 40, |
||||||
|
}, |
||||||
|
991: { |
||||||
|
slidesPerView: 3, |
||||||
|
spaceBetween: 40, |
||||||
|
}, |
||||||
|
1440: { |
||||||
|
slidesPerView: 4, |
||||||
|
spaceBetween: 40, |
||||||
|
}, |
||||||
|
} |
||||||
|
}); |
||||||
|
var productsRelatedSwiper = new Swiper(".product-similar-slider", { |
||||||
|
loop: false, |
||||||
|
spaceBetween: 20, |
||||||
|
slidesPerView: 1, |
||||||
|
breakpoints: { |
||||||
|
300: { |
||||||
|
slidesPerView: 1.8, |
||||||
|
spaceBetween: 10, |
||||||
|
}, |
||||||
|
776: { |
||||||
|
slidesPerView: 2, |
||||||
|
spaceBetween: 20, |
||||||
|
}, |
||||||
|
991: { |
||||||
|
slidesPerView: 3, |
||||||
|
spaceBetween: 20, |
||||||
|
}, |
||||||
|
1440: { |
||||||
|
slidesPerView: 4, |
||||||
|
spaceBetween: 20, |
||||||
|
}, |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
jQuery('img.svg').each(function(){ |
||||||
|
var $img = jQuery(this); |
||||||
|
var imgID = $img.attr('id'); |
||||||
|
var imgClass = $img.attr('class'); |
||||||
|
var imgURL = $img.attr('src'); |
||||||
|
jQuery.get(imgURL, function(data) { |
||||||
|
var $svg = jQuery(data).find('svg'); |
||||||
|
|
||||||
|
if(typeof imgID !== 'undefined') { |
||||||
|
$svg = $svg.attr('id', imgID); |
||||||
|
} |
||||||
|
if(typeof imgClass !== 'undefined') { |
||||||
|
$svg = $svg.attr('class', imgClass+' replaced-svg'); |
||||||
|
} |
||||||
|
$svg = $svg.removeAttr('xmlns:a'); |
||||||
|
if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) { |
||||||
|
$svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width')) |
||||||
|
} |
||||||
|
$img.replaceWith($svg); |
||||||
|
|
||||||
|
}, 'xml'); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$context = Timber::get_context(); |
||||||
|
|
||||||
|
include_component('shop', 'reviews'); |
||||||
|
include_component('shop', 'product-card'); |
||||||
|
|
||||||
|
$reviews = get_posts(array( |
||||||
|
'post_type' => 'p_reviews', |
||||||
|
'numberposts' => -1, |
||||||
|
)); |
||||||
|
|
||||||
|
$product_id = get_the_ID(); |
||||||
|
$product = wc_get_product($product_id); |
||||||
|
$context['related_products'] = array(); |
||||||
|
$related_products_ids = $product->get_upsell_ids(); |
||||||
|
if ($related_products_ids) { |
||||||
|
foreach ($related_products_ids as $related_id) { |
||||||
|
$related_product = wc_get_product($related_id); |
||||||
|
if ($related_product) { |
||||||
|
$context['related_products'][] = $related_product; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
$context['reviews'] = $reviews; |
||||||
|
Timber::render('shop/single-product_page.twig', $context); |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
<div class="main-food_reviews-slide swiper-slide"> |
||||||
|
{% if fn('get_field', 'media_file', slide) %} |
||||||
|
<a class="main-food_reviews-slide-media_file-wrap" href="{{fn('get_field', 'media_file', slide)}}" data-fancybox><img class="main-food_reviews-slide-media_file" src="{{fn('get_field', 'media_file', slide)}}"></a> |
||||||
|
{% endif %} |
||||||
|
{% if fn('get_field', 'media', slide) %} |
||||||
|
<div class="main-food_reviews-slide-media_wrap"> |
||||||
|
<a href="{{fn('get_field', 'media_file', slide)}}" data-fancybox><img class="main-food_reviews-slide-media_main" src="{{fn('get_field', 'media_file', slide)}}"></a> |
||||||
|
|
||||||
|
{% for file in fn('get_field', 'media', slide) %} |
||||||
|
<img {% if file.video %}data-video="{{file.video}}"{% endif %} class="main-food_reviews-slide-media_mini {% if file.video %}--video{% endif %}" src="{{file.img}}"> |
||||||
|
{% endfor %} |
||||||
|
</div> |
||||||
|
{% endif %} |
||||||
|
<div class="main-food_reviews-slide-head"> |
||||||
|
{% if fn('get_field', 'photo', slide) %} |
||||||
|
<img class="main-food_reviews-slide-photo" src="{{fn('get_field', 'photo', slide)}}"> |
||||||
|
{% endif %} |
||||||
|
<p class="main-food_reviews-slide-name {% if not fn('get_field', 'photo', slide) %}--no-padding-left{% endif %}">{{fn('get_the_title', slide)}}</p> |
||||||
|
</div> |
||||||
|
<p class="main-food_reviews-slide-position {% if not fn('get_field', 'photo', slide) %}--no-padding-left{% endif %} {% if fn('get_field', 'type', slide) == 'media' %}--no-min-height{% endif %}">{{fn('get_field', 'desc', slide)}}</p> |
||||||
|
{% if fn('get_field', 'text', slide) %} |
||||||
|
{% if fn('get_field', 'type', slide) == 'media' %} |
||||||
|
{% set maxLength = 160 %} |
||||||
|
{% else %} |
||||||
|
{% set maxLength = 350 %} |
||||||
|
{% endif %} |
||||||
|
{% set content = fn('get_field', 'text', slide) %} |
||||||
|
|
||||||
|
{% if content|length > maxLength %} |
||||||
|
<div class="main-food_reviews-slide-text">{{ content[:maxLength] ~ '...' }} |
||||||
|
<button class="read-more" onclick="showModal('modal-rev_{{slide.ID}}')"> |
||||||
|
Читать полностью |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
{% else %} |
||||||
|
<div class="main-food_reviews-slide-text">{{ content }}</div> |
||||||
|
{% endif %} |
||||||
|
|
||||||
|
{% endif %} |
||||||
|
</div> |
||||||
Loading…
Reference in new issue