[project-base] [SSP-2564] fixed responsive design in mobile menu and …

…on cart page (#3324)
shopsys · Aug 14, 2024 · 6d1ac40 · 6d1ac40
2 parents ab3c508 + afe863e
commit 6d1ac40
Show file tree

Hide file tree

Showing 28 changed files with 8 additions and 7 deletions.
diff --git a/storefront/components/Blocks/PromoCode/PromoCode.tsx b/storefront/components/Blocks/PromoCode/PromoCode.tsx
@@ -46,7 +46,7 @@ export const PromoCode: FC = () => {
             ) : (
                 <>
                     <Button
-                        className="text-sm mb-3"
+                        className="max-sm:w-full text-sm mb-3"
                         tid={TIDs.blocks_promocode_add_button}
                         variant="inverted"
                         onClick={() => setIsContentVisible(!isContentVisible)}
@@ -62,7 +62,7 @@ export const PromoCode: FC = () => {
                                     applyPromoCodeToCart(promoCodeFormData.promoCode),
                                 )}
                             >
-                                <div className="flex gap-2 max-w-sm">
+                                <div className="flex max-w-sm">
                                     <TextInputControlled
                                         isWithoutFormLineError
                                         control={formProviderMethods.control}
@@ -72,6 +72,7 @@ export const PromoCode: FC = () => {
                                         textInputProps={{
                                             label: formMeta.fields.promoCode.label,
                                             required: true,
+                                            className: '!rounded-r-none border-r-0',
                                         }}
                                     />
                                     <SubmitButton

diff --git a/storefront/components/Layout/Header/HamburgerMenu/HamburgerMenu.tsx b/storefront/components/Layout/Header/HamburgerMenu/HamburgerMenu.tsx
@@ -9,7 +9,7 @@ type HamburgerMenuProps = {
 export const HamburgerMenu: FC<HamburgerMenuProps> = ({ onClick }) => {
     return (
         <div
-            className={twJoin('flex h-10 w-12 cursor-pointer items-center rounded bg-none text-linkInverted')}
+            className={twJoin('flex h-10 w-8 cursor-pointer items-center rounded bg-none text-linkInverted')}
             onClick={onClick}
         >
             <div className="flex w-7 items-center justify-center">

diff --git a/storefront/components/Pages/Cart/CartSummary.tsx b/storefront/components/Pages/Cart/CartSummary.tsx
@@ -3,14 +3,14 @@ import { PromoCode } from 'components/Blocks/PromoCode/PromoCode';
 import { CartPreview } from 'components/Pages/Cart/CartPreview';
 
 export const CartSummary: FC = () => (
-    <div className="mb-8 flex flex-col vl:flex-row vl:items-baseline">
-        <div className="pr-0 vl:pr-4 w-1/3">
+    <div className="mb-8 flex flex-col lg:flex-row vl:items-baseline flex-wrap gap-2 lg:gap-0">
+        <div className="pr-0 vl:pr-4 lg:w-1/2 vl:w-4/12">
             <PromoCode />
         </div>
-        <div className="ml-auto text-center vl:pr-8 w-1/3">
+        <div className="ml-auto flex justify-end items-center vl:pr-8 lg:w-1/2 vl:w-5/12">
             <FreeTransport />
         </div>
-        <div className="w-1/3 vl:w-80">
+        <div className="lg:w-full vl:w-3/12">
             <CartPreview />
         </div>
     </div>

diff --git a/...vious cart after logging in in order 3rd step (cart page after first login).png b/...vious cart after logging in in order 3rd step (cart page after first login).png
diff --git a/...cart, and empty cart after log out (cart page after adding product to cart).png b/...cart, and empty cart after log out (cart page after adding product to cart).png
diff --git a/...cart, and empty cart after log out (cart page after adding product to cart).png b/...cart, and empty cart after log out (cart page after adding product to cart).png
diff --git a/...lready prefilled cart, and empty cart after log out (cart page after login).png b/...lready prefilled cart, and empty cart after log out (cart page after login).png
diff --git a/... cart for the registered customer) (cart page after adding product to cart).png b/... cart for the registered customer) (cart page after adding product to cart).png
diff --git a/...or the registered customer) (cart page after adding second product to cart).png b/...or the registered customer) (cart page after adding second product to cart).png
diff --git a/...h an empty cart for the registered customer) (cart page after second login).png b/...h an empty cart for the registered customer) (cart page after second login).png
diff --git a/...rt, and then add a different one (cart page after applying first promocode).png b/...rt, and then add a different one (cart page after applying first promocode).png
diff --git a/...rt, and then add a different one (cart page after removing first promocode).png b/...rt, and then add a different one (cart page after removing first promocode).png
diff --git a/...t, and then add a different one (cart page after removing second promocode).png b/...t, and then add a different one (cart page after removing second promocode).png
diff --git a/...t that allows it, and see the promo code removed (after applying promocode).png b/...t that allows it, and see the promo code removed (after applying promocode).png
diff --git a/...d see the promo code removed (after removing product that allows promocode).png b/...d see the promo code removed (after removing product that allows promocode).png
diff --git a/...y using spinbox in cart (multiple times if clicked slowly) (after decrease).png b/...y using spinbox in cart (multiple times if clicked slowly) (after decrease).png
diff --git a/...y using spinbox in cart (multiple times if clicked slowly) (after increase).png b/...y using spinbox in cart (multiple times if clicked slowly) (after increase).png
diff --git a/...duct quantity using spinbox in cart (once if clicked fast) (after decrease).png b/...duct quantity using spinbox in cart (once if clicked fast) (after decrease).png
diff --git a/...duct quantity using spinbox in cart (once if clicked fast) (after increase).png b/...duct quantity using spinbox in cart (once if clicked fast) (after increase).png
diff --git a/.../cart/cartPage.cy.ts/should remove products from cart (after first removal).png b/.../cart/cartPage.cy.ts/should remove products from cart (after first removal).png
diff --git a/...ransport limit (cart page with non-free transport after applying promocode).png b/...ransport limit (cart page with non-free transport after applying promocode).png
diff --git a/...(pre-fill cart) for logged-in user with initially empty cart (after repeat).png b/...(pre-fill cart) for logged-in user with initially empty cart (after repeat).png
diff --git a/...ogged-in user with initially filled cart and allowed merging (after repeat).png b/...ogged-in user with initially filled cart and allowed merging (after repeat).png
diff --git a/...ed-in user with initially filled cart and disallowed merging (after repeat).png b/...ed-in user with initially filled cart and disallowed merging (after repeat).png
diff --git a/... (pre-fill cart) for unlogged user with initially empty cart (after repeat).png b/... (pre-fill cart) for unlogged user with initially empty cart (after repeat).png
diff --git a/...unlogged user with initially filled cart and allowed merging (after repeat).png b/...unlogged user with initially filled cart and allowed merging (after repeat).png
diff --git a/...ogged user with initially filled cart and disallowed merging (after repeat).png b/...ogged user with initially filled cart and disallowed merging (after repeat).png
diff --git a/...t is large enough for transport to be free (cart page with enough products).png b/...t is large enough for transport to be free (cart page with enough products).png