Merge pull request 'footer' (#25) from footer into main

Reviewed-on: #25

src/components/CoreProductCard.tsx

@@ -272,8 +272,6 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
   return (
     <>
       <div className="w-layout-hflex core-product-search-s1">
-        <div className="w-layout-vflex flex-block-48-copy">
-          <div className="w-layout-vflex product-list-search-s1">
         <div className="w-layout-vflex core-product-s1">
           <div className="w-layout-vflex flex-block-47">
             <div className="div-block-19">
@@ -311,7 +309,6 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
           )}
         </div>
         <div className="w-layout-vflex flex-block-48-copy">
-              <div className="w-layout-vflex product-list-search-s1">
           <div className="w-layout-hflex sort-list-s1">
             <div className="w-layout-hflex flex-block-49">
               <div className="sort-item first">Наличие</div>
@@ -319,6 +316,7 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
             </div>
             <div className="sort-item price">Цена</div>
           </div>
+          <div className="w-layout-vflex product-list-search-s1">
             {displayedOffers.map((offer, idx) => {
               const isLast = idx === displayedOffers.length - 1;
               const maxCount = parseStock(offer.pcs);
@@ -407,6 +405,7 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
                 </div>
               );
             })}
+          </div>
           {hasMoreOffers || visibleOffersCount > INITIAL_OFFERS_LIMIT ? (
             <div 
               className="w-layout-hflex show-more-search"
@@ -444,9 +443,6 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
           ) : null}
         </div>
       </div>
-          </div>
-        </div>
-      </div>
 
     </>
   );

src/styles/my.css

@@ -51,9 +51,7 @@
 
 }
 
-.flex-block-40 {
+
-  background-color: #fff;
-}
 
 input.text-block-31 {
   background: none !important;
@@ -409,14 +407,7 @@ input.input-receiver:focus {
 
 
 .core-product-s1 {
-  width: 100% !important;
+  max-width: 320px ;
-}
-
-.heading-10 {
-  width: auto !important;
-  min-width: 0 !important;
-  
-  white-space: nowrap; /* если хотите, чтобы текст не переносился */
 }
 
 .flex-block-112 {
@@ -752,7 +743,7 @@ a.link-block-2.w-inline-block  {
  height: 140px;
 }
 }
-@media (max-width: 767px) {
+@media screen and (max-width: 767px) {
   .div-block-128 {
    height: 100px;
   }
@@ -845,57 +836,10 @@ 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 {
@@ -1103,26 +1047,3 @@ a.link-block-2.w-inline-block  {
     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;
-  }
-}

src/styles/protekproject.webflow.css

@@ -2324,7 +2324,8 @@ 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 {
@@ -2395,7 +2396,13 @@ 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;
@@ -3709,7 +3716,9 @@ body {
   align-items: center;
 }
 
-
+.flex-block-79 {
+  align-self: stretch;
+}
 
 .flex-block-80 {
   grid-column-gap: 20px;
@@ -4482,7 +4491,16 @@ 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;
@@ -6749,7 +6767,14 @@ 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;
@@ -7012,7 +7037,10 @@ body {
     flex: 1;
   }
 
-
+  .core-product-s1 {
+    flex-flow: column;
+    max-width: 320px;
+  }
 
   .core-product-search-s2 {
     flex-flow: row;
@@ -7841,7 +7869,9 @@ body {
     flex-flow: column;
   }
 
-
+  .core-product-s1 {
+    flex-flow: row-reverse;
+  }
 
   .sort-list-s1 {
     padding-right: 210px;
@@ -9468,9 +9498,9 @@ body {
     margin-top: 0;
   }
 
-  /* .text-block-21 {
+  .text-block-21 {
     line-height: 140%;
-  } */
+  }
 
   .flex-block-45 {
     display: flex;
@@ -10027,7 +10057,13 @@ 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%;