From aef3915dde43f4aa80461cf0874f9071b05a20b9 Mon Sep 17 00:00:00 2001 From: egortriston Date: Sat, 12 Jul 2025 22:39:47 +0300 Subject: [PATCH] fix1207 --- src/components/CoreProductCard.tsx | 312 ++++++++++++++------------- src/styles/my.css | 93 +++++++- src/styles/protekproject.webflow.css | 56 +---- 3 files changed, 254 insertions(+), 207 deletions(-) diff --git a/src/components/CoreProductCard.tsx b/src/components/CoreProductCard.tsx index ffcedaf..64ede6f 100644 --- a/src/components/CoreProductCard.tsx +++ b/src/components/CoreProductCard.tsx @@ -272,175 +272,179 @@ const CoreProductCard: React.FC = ({ return ( <>
-
-
-
- info -
-
-
-

{brand}

-

{article}

-
- - - +
+
+
+
+
+ info +
+
+
+

{brand}

+

{article}

+
+ + + +
+
+
{name}
-
{name}
-
-
- {image && ( -
- {name} - {partsIndexPowered && ( -
- powered by Parts Index + {image && ( +
+ {name} + {partsIndexPowered && ( +
+ powered by Parts Index +
+ )}
)}
- )} -
-
-
-
-
Наличие
-
Доставка
-
-
Цена
-
-
- {displayedOffers.map((offer, idx) => { - const isLast = idx === displayedOffers.length - 1; - const maxCount = parseStock(offer.pcs); - return ( -
-
-
-
{offer.pcs}
-
{offer.days}
-
-
- {offer.recommended && ( - <> -
- -
-
Рекомендуем
- - )} -
-
{offer.price}
+
+
+
+
+
Наличие
+
Доставка
-
-
-
-
handleMinus(idx)} - style={{ cursor: 'pointer' }} - aria-label="Уменьшить количество" - tabIndex={0} - onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handleMinus(idx)} - role="button" - > -
- - - -
+
Цена
+
+ {displayedOffers.map((offer, idx) => { + const isLast = idx === displayedOffers.length - 1; + const maxCount = parseStock(offer.pcs); + return ( +
+
+
+
{offer.pcs}
+
{offer.days}
-
- handleInputChange(idx, e.target.value)} - onBlur={() => handleInputBlur(idx)} - className="text-block-26 w-full text-center outline-none" - aria-label="Количество" - /> +
+ {offer.recommended && ( + <> +
+ +
+
Рекомендуем
+ + )}
-
handlePlus(idx, maxCount)} - style={{ cursor: 'pointer' }} - aria-label="Увеличить количество" - tabIndex={0} - onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handlePlus(idx, maxCount)} - role="button" - > -
- - - +
{offer.price}
+
+
+
+
+
handleMinus(idx)} + style={{ cursor: 'pointer' }} + aria-label="Уменьшить количество" + tabIndex={0} + onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handleMinus(idx)} + role="button" + > +
+ + + +
+
+
+ handleInputChange(idx, e.target.value)} + onBlur={() => handleInputBlur(idx)} + className="text-block-26 w-full text-center outline-none" + aria-label="Количество" + /> +
+
handlePlus(idx, maxCount)} + style={{ cursor: 'pointer' }} + aria-label="Увеличить количество" + tabIndex={0} + onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handlePlus(idx, maxCount)} + role="button" + > +
+ + + +
+
+
-
+ ); + })} + {hasMoreOffers || visibleOffersCount > INITIAL_OFFERS_LIMIT ? ( +
{ + if (hasMoreOffers) { + setVisibleOffersCount(prev => Math.min(prev + 10, offers.length)); + } else { + setVisibleOffersCount(INITIAL_OFFERS_LIMIT); + } + }} + style={{ cursor: 'pointer' }} + tabIndex={0} + role="button" + aria-label={hasMoreOffers ? `Еще ${offers.length - visibleOffersCount} предложений` : 'Скрыть предложения'} + onKeyDown={e => { + if (e.key === 'Enter' || e.key === ' ') { + if (hasMoreOffers) { + setVisibleOffersCount(prev => Math.min(prev + 10, offers.length)); + } else { + setVisibleOffersCount(INITIAL_OFFERS_LIMIT); + } + } + }} + > +
+ {hasMoreOffers ? `Еще ${offers.length - visibleOffersCount} предложений` : 'Скрыть'} +
+
-
- ); - })} -
- {hasMoreOffers || visibleOffersCount > INITIAL_OFFERS_LIMIT ? ( -
{ - if (hasMoreOffers) { - setVisibleOffersCount(prev => Math.min(prev + 10, offers.length)); - } else { - setVisibleOffersCount(INITIAL_OFFERS_LIMIT); - } - }} - style={{ cursor: 'pointer' }} - tabIndex={0} - role="button" - aria-label={hasMoreOffers ? `Еще ${offers.length - visibleOffersCount} предложений` : 'Скрыть предложения'} - onKeyDown={e => { - if (e.key === 'Enter' || e.key === ' ') { - if (hasMoreOffers) { - setVisibleOffersCount(prev => Math.min(prev + 10, offers.length)); - } else { - setVisibleOffersCount(INITIAL_OFFERS_LIMIT); - } - } - }} - > -
- {hasMoreOffers ? `Еще ${offers.length - visibleOffersCount} предложений` : 'Скрыть'} + ) : null}
-
- ) : null} +
diff --git a/src/styles/my.css b/src/styles/my.css index f872d7c..6281b4a 100644 --- a/src/styles/my.css +++ b/src/styles/my.css @@ -51,7 +51,9 @@ } - +.flex-block-40 { + background-color: #fff; +} input.text-block-31 { background: none !important; @@ -406,8 +408,15 @@ input.input-receiver:focus { } -.core-product-s1 { - max-width: 320px ; +.core-product-s1{ + width: 100% !important; +} + +.heading-10 { + width: auto !important; + min-width: 0 !important; + + white-space: nowrap; /* если хотите, чтобы текст не переносился */ } .flex-block-112 { @@ -743,7 +752,7 @@ a.link-block-2.w-inline-block { height: 140px; } } -@media screen and (max-width: 767px) { +@media (max-width: 767px) { .div-block-128 { height: 100px; } @@ -836,10 +845,57 @@ a.link-block-2.w-inline-block { max-width: 33%; } +.flex-block-44 { + grid-column-gap: 0px; + grid-row-gap: 0px; + flex: 1; +} + +.sort-list-s1 { + padding-top: 6px; + padding-bottom: 6px; +} +.show-more-search { + padding: 6px 20px; + +} + + + + + +.flex-block-37 { + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.w-layout-vflex.flex-block-40 { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.flex-block-47 { + display: flex !important; + flex-direction: row !important; + align-items: center !important; + justify-content: center !important; /* по центру по горизонтали */ + gap: 16px !important; +} +.flex-block-50 { + display: flex !important; + flex-direction: row !important; + align-items: center !important; + gap: 16px !important; + width: 100% !important; +} +.flex-block-79 { + display: flex !important; + flex-direction: row !important; + align-items: center !important; + gap: 8px !important; +} + .text-block-21 { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + } .flex-block-45 { @@ -1046,4 +1102,27 @@ a.link-block-2.w-inline-block { .hide-on-991 { display: none !important; } +} +@media (max-width: 767px) { + .flex-block-50 { + flex-direction: column !important; + align-items: flex-start !important; + justify-content: flex-start !important; + gap: 8px !important; + padding-left: 10px !important; + padding-right: 10px !important; + } +} +@media (max-width: 767px) { + .div-block-19 { + display: none !important; + } +} + +@media (max-width: 767px) { + .core-product-s1 { + flex-direction: row !important; /* или column, если нужно вертикально */ + justify-content: flex-start !important; + align-items: flex-start !important; + } } \ No newline at end of file diff --git a/src/styles/protekproject.webflow.css b/src/styles/protekproject.webflow.css index e0575b6..6e812fb 100644 --- a/src/styles/protekproject.webflow.css +++ b/src/styles/protekproject.webflow.css @@ -2324,8 +2324,7 @@ body { .text-block-21 { color: var(--_fonts---color--light-blue-grey); font-size: var(--_fonts---font-size--small-font-size); - align-self: stretch; - overflow: hidden; + } .text-block-22 { @@ -2396,13 +2395,7 @@ body { margin-right: 5px; } -.flex-block-47 { - grid-column-gap: 15px; - grid-row-gap: 15px; - flex-flow: row; - flex: 1; - align-self: auto; -} + .image-10 { object-fit: contain; @@ -3716,9 +3709,7 @@ body { align-items: center; } -.flex-block-79 { - align-self: stretch; -} + .flex-block-80 { grid-column-gap: 20px; @@ -4491,16 +4482,7 @@ body { max-width: 100%; } -.core-product-s1 { - grid-column-gap: 10px; - grid-row-gap: 10px; - flex-flow: row-reverse; - flex: 1; - justify-content: flex-end; - align-self: stretch; - align-items: center; - max-width: 100%; -} + .flex-block-48-copy { grid-column-gap: 16px; @@ -6767,14 +6749,7 @@ body { flex: 0 auto; } - .core-product-s1 { - flex-flow: column; - flex: 1; - justify-content: flex-start; - align-self: stretch; - align-items: flex-start; - min-width: 270px; - } + .core-product-search-s2 { flex-flow: row; @@ -7037,10 +7012,7 @@ body { flex: 1; } - .core-product-s1 { - flex-flow: column; - max-width: 320px; - } + .core-product-search-s2 { flex-flow: row; @@ -7869,9 +7841,7 @@ body { flex-flow: column; } - .core-product-s1 { - flex-flow: row-reverse; - } + .sort-list-s1 { padding-right: 210px; @@ -9498,9 +9468,9 @@ body { margin-top: 0; } - .text-block-21 { + /* .text-block-21 { line-height: 140%; - } + } */ .flex-block-45 { display: flex; @@ -10057,13 +10027,7 @@ body { max-width: 100%; } - .core-product-s1 { - grid-column-gap: 10px; - grid-row-gap: 10px; - flex-flow: column-reverse wrap; - justify-content: flex-start; - align-items: flex-start; - } + .flex-block-48-copy { max-width: 100%;