Merge pull request 'адаптация мобилок от 1743' (#16) from adapt into main

Reviewed-on: #16
2025-07-07 17:44:12 +03:00
parent 391d47ed2b aeff49ae78
commit ea097d9df8
5 changed files with 131 additions and 32 deletions
--- a/public/images/union.svg
+++ b/public/images/union.svg
@ -0,0 +1,3 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 7C12.2091 7 14 8.79086 14 11C14 13.2091 12.2091 15 10 15C7.79086 15 6 13.2091 6 11C6 8.79086 7.79086 7 10 7ZM11 0C11.5523 0 12 0.447715 12 1V6.41602C11.3875 6.14842 10.7111 6 10 6C8.36426 6 6.91221 6.78565 6 8H2.55859C2.28262 8.0002 2.05859 8.22398 2.05859 8.5C2.05859 8.77602 2.28262 8.9998 2.55859 9H5.41699C5.1493 9.61255 5 10.2888 5 11H2.5C2.22386 11 2 11.2239 2 11.5C2 11.7761 2.22386 12 2.5 12H5.10059C5.25067 12.7388 5.56324 13.4186 6 14H1C0.447715 14 2.41598e-08 13.5523 0 13V1C1.93278e-07 0.447715 0.447715 1.61064e-08 1 0H11ZM10 8.5C9.72386 8.5 9.5 8.72386 9.5 9V10.5H8.5C8.22386 10.5 8 10.7239 8 11C8.00005 11.2761 8.22389 11.5 8.5 11.5H10L10.1006 11.4902C10.3284 11.4437 10.5 11.2416 10.5 11V9C10.5 8.72391 10.2761 8.50009 10 8.5ZM2.5 5C2.22386 5 2 5.22386 2 5.5C2 5.77614 2.22386 6 2.5 6H9.5C9.77614 6 10 5.77614 10 5.5C10 5.22386 9.77614 5 9.5 5H2.5ZM2.5 2C2.22386 2 2 2.22386 2 2.5C2 2.77614 2.22386 3 2.5 3H9.5C9.77614 3 10 2.77614 10 2.5C10 2.22386 9.77614 2 9.5 2H2.5Z" fill="white"/>
+</svg>
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@ -734,6 +734,11 @@ const Header: React.FC<HeaderProps> = ({ onOpenAuthModal = () => console.log('Au
                </div>
              </div>
              <div className="w-layout-hflex flex-block-76">
+                <Link href="/profile-history" className="button_h w-inline-block">
+                
+    <img src="/images/union.svg" alt="История заказов" width={22} height={10} />
+
+                </Link>
                <Link href="/profile-gar" className="button_h w-inline-block">
                    <div className="code-embed-7 w-embed"><svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M27 10.8V24H24.6V13.2H5.4V24H3V10.8L15 6L27 10.8ZM23.4 14.4H6.6V16.8H23.4V14.4ZM23.4 18H6.6V20.4H23.4V18Z" fill="currentColor" /><path d="M6.6 21.6H23.4V24H6.6V21.6Z" fill="currentColor" /></svg></div>
                    <div className="text-block-2">Добавить в гараж</div>
--- a/src/components/profile/ProfileHistoryTabs.tsx
+++ b/src/components/profile/ProfileHistoryTabs.tsx
@ -69,7 +69,7 @@ const ProfileHistoryTabs: React.FC<ProfileHistoryTabsProps> = ({
      {tabs.map((tab) => (
        <div
          key={tab}
-          className={`flex flex-1 shrink gap-5 items-center h-full text-center rounded-xl basis-12 min-w-[240px] ${
+          className={`flex flex-1 shrink gap-5 items-center h-full text-center rounded-xl basis-12 min-w-[200px] ${
            activeTab === tab
              ? "text-white"
              : "bg-slate-200 text-gray-950"
@ -78,7 +78,7 @@ const ProfileHistoryTabs: React.FC<ProfileHistoryTabsProps> = ({
          onClick={() => onTabChange(tab)}
        >
          <div
-            className={`flex-1 shrink gap-5 self-stretch px-6 py-3.5 my-auto w-full rounded-xl basis-0 min-w-[240px] max-md:px-5 ${
+            className={`flex-1 shrink gap-5 self-stretch px-6 py-3.5 my-auto w-full rounded-xl basis-0 min-w-[200px] max-md:px-5 ${
              activeTab === tab
                ? "text-white bg-red-600"
                : "bg-slate-200 text-gray-950"
@ -89,12 +89,12 @@ const ProfileHistoryTabs: React.FC<ProfileHistoryTabsProps> = ({
        </div>
      ))}
      <div
-        className="relative w-[240px] max-w-full max-sm:w-full"
+        className="relative w-[300px] max-w-full max-sm:w-full"
        ref={dropdownRef}
        tabIndex={0}
      >
        <div
-          className="flex justify-between items-center px-6 py-4 text-sm leading-snug bg-white rounded border border-solid border-stone-300 text-neutral-500 cursor-pointer select-none w-full"
+          className="flex justify-between items-center px-6 py-4 text-sm leading-snug bg-white rounded border border-solid border-stone-300 text-neutral-500 cursor-pointer select-none w-full min-w-[200px]"
          onClick={() => setIsDropdownOpen((prev) => !prev)}
        >
          <span className="truncate">{selectedManufacturer}</span>
@ -111,21 +111,21 @@ const ProfileHistoryTabs: React.FC<ProfileHistoryTabsProps> = ({
          </span>
        </div>
        {isDropdownOpen && (
-          <ul className="absolute left-0 top-full z-10 bg-white border-x border-b border-stone-300 rounded-b-lg shadow-lg w-full max-h-60 overflow-y-auto">
+          <ul className="absolute px-0 pb-2 pl-0 list-none left-0 top-full z-10 bg-white border-x border-b border-stone-300 rounded-b-lg shadow-lg w-full max-h-60 overflow-y-auto dropdown-scroll-invisible">
            {manufacturers.length === 0 ? (
-              <li className="px-6 py-4 text-gray-400 text-center">
+              <li className="py-2 text-xs text-gray-400 text-center">
                Нет данных
              </li>
            ) : (
              manufacturers.map((manufacturer) => (
                <li
                  key={manufacturer}
-                  className={`px-6 py-4 cursor-pointer hover:bg-blue-100 transition-colors ${manufacturer === selectedManufacturer ? 'bg-blue-50 font-semibold text-blue-600' : ''}`}
+                  className={`py-2 px-5 text-sm cursor-pointer hover:bg-blue-100 transition-colors ${manufacturer === selectedManufacturer ? 'bg-blue-50 text-red-600 font-normal' : 'text-neutral-500 font-medium'}`}
                  onMouseDown={() => handleManufacturerSelect(manufacturer)}
                >
                  {manufacturer}
                  {manufacturer !== "Все" && (
-                    <span className="ml-2 text-xs text-gray-400">
+                    <span className="ml-2 text-[10px] text-gray-400">
                      ({historyItems.filter(item => 
                        item.brand === manufacturer || item.vehicleInfo?.brand === manufacturer
                      ).length})
--- a/src/styles/my.css
+++ b/src/styles/my.css
@ -3,6 +3,32 @@
  margin-left: 0 !important;
 } 

+.dropdown-scroll-invisible {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE и Edge */
+}
+.dropdown-scroll-invisible::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+.dropdown-scroll-invisible {
+  padding-left: 0 !important;
+  list-style: none !important;
+}
+
+.bottom_head {
+  background-color: var(--back);
+  flex-flow: column;
+  justify-content: center;
+  align-items: flex-start;
+  width: 100%;
+  height: auto;
+  margin-top: -15px;
+  padding-left: 60px;
+  padding-right: 60px;
+  display: flex;
+}
+
 .bottom_head{
  z-index: 60;
 }
@ -538,10 +564,13 @@ input#VinSearchInput {
  margin-top: 0;
  margin-bottom: 60px;
 }
+
+@media screen and (max-width: 991px) {
 .bottom_head {
  padding-left: 30px;
  padding-right: 30px;
 }
+}

@media screen and (max-width: 479px) {
  .bottom_head {
@ -550,18 +579,7 @@ input#VinSearchInput {
  }
 }

-.bottom_head {
-  background-color: var(--back);
-  flex-flow: column;
-  justify-content: center;
-  align-items: flex-start;
-  width: 100%;
-  height: auto;
-  margin-top: -15px;
-  padding-left: 60px;
-  padding-right: 60px;
-  display: flex;
-}
+
 body {
  background-color: var(--background);
  --_fonts---font-family: Onest, sans-serif;
@ -617,13 +635,52 @@ body {
  position: absolute;
 }
 .mobile-menu-buttom-section {
-  z-index: 1900;
+  z-index: 1900 !important;
  background-color: var(--white);
  display: none;
  position: fixed;
  inset: auto 0% 0%;
 }

+
+@media screen and (max-width: 991px) {
+  .flex-block-108 {
+    flex-flow: column;
+    justify-content: space-between;
+    
+  }
+
+} 
+@media screen and (max-width: 991px) {
+  .flex-block-118 {
+    flex-direction: column !important;
+    align-items: stretch; /* или center, если нужно по центру */
+    gap: 20px; /* если нужен отступ между блоками */
+  }
+  .flex-block-119 {
+    width: 100%;
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .mobile-menu-buttom-section {
+    display: block;
+  }
+}
+@media screen and (max-width: 991px) {
+.div-block-128 {
+ height: 140px;
+}
+}
+@media screen and (max-width: 767px) {
+  .div-block-128 {
+   height: 100px;
+  }
+  }
+
+
+
+
 .nav-menu-3 {
  z-index: 1900;
  background-color: #0000;
@ -727,17 +784,51 @@ body {
  
 }

-@media screen and (max-width: 767px) {
+
 .flex-block-15-copy {
-  grid-column-gap: 5px;
-  grid-row-gap: 5px;
-  width: 160px;
-  padding: 15px;
+  width: 235px!important;
+  min-width: 235px!important;
+
 }
+@media screen and (max-width: 991px) {
+  .flex-block-15-copy {
+    grid-column-gap: 5px;
+    grid-row-gap: 5px;
+    width: 160px !important;
+    min-width: 160px !important;
+    padding: 15px;
+  }
 }


-.flex-block-15-copy {
-  width: 235px;

-}
+
+@media screen and (max-width: 479px) {
+  .flex-block-15-copy {
+    grid-column-gap: 5px;
+    grid-row-gap: 5px;
+    width: 160px !important;
+    min-width: 160px !important;
+    padding: 15px;
+  }
+}
+
+
+
+
+@media (max-width: 767px) {
+  .topmenub {
+    display: none !important;
+  }
+}
+
+@media screen and (max-width: 479px) {
+  .bestpriceitem {
+    grid-column-gap: 5px;
+    grid-row-gap: 5px;
+    min-width: 160px;
+    max-width: 190px;
+    padding: 15px;
+  }
+}
+
--- a/src/styles/protekproject.webflow.css
+++ b/src/styles/protekproject.webflow.css
@ -10095,13 +10095,13 @@ body {
    display: flex;
  }

-  .flex-block-15-copy {
+  /* .flex-block-15-copy {
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    min-width: 135px;
    max-width: 190px;
    padding: 15px;
-  }
+  } */

  .flex-block-14-copy-copy {
    grid-column-gap: 10px;
@ -10521,7 +10521,7 @@ body {
  .brandsortb {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
-    padding-top: 0;
+
    overflow: hidden;
  }