diff --git a/src/pages/menu/components/MenuList/MenuList.module.css b/src/pages/menu/components/MenuList/MenuList.module.css index f253526..1680b7b 100644 --- a/src/pages/menu/components/MenuList/MenuList.module.css +++ b/src/pages/menu/components/MenuList/MenuList.module.css @@ -54,13 +54,17 @@ } @media (min-width: 1025px) { + .menuSections{ + padding: 0; + } + .menuSection h3 { margin: 50px 0px 25px 0px; font-size: 28px; } .menuItemsGrid { - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 24px; } @@ -69,6 +73,7 @@ /* Enhanced responsive menu items grid */ @media (min-width: 1280px) { .menuItemsGrid { + display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 28px; @@ -185,13 +190,13 @@ /* Enhanced responsive page container */ @media (min-width: 769px) and (max-width: 1024px) { .pageContainer { - padding: 24px; + padding: 0 24px; } } @media (min-width: 1025px) { .pageContainer { - padding: 32px; + padding: 0 32px; max-width: 1200px; margin: 0 auto; } diff --git a/src/pages/menu/menu.module.css b/src/pages/menu/menu.module.css index 97e431c..8fb6962 100644 --- a/src/pages/menu/menu.module.css +++ b/src/pages/menu/menu.module.css @@ -109,55 +109,6 @@ } */ /* Enhanced responsive item description */ -@media (min-width: 769px) and (max-width: 1024px) { - .itemDescription { - font-size: 14px !important; - } - .logo { - left: 40px; - width: 80px !important; - height: 80px !important; - } - - .cover { - width: 100%; - height: "auto"; - object-fit: cover; - } - .restaurantHeader { - margin-bottom: 0px; - } - - .leftShape { - top: 170px; - left: -3px; - - } - - .rightShape { - top: 170px; - left:116px - } -} - -@media (min-width: 1025px) { - .itemDescription { - font-size: 16px !important; - } - /* .logo { - display: none !important; - } */ - .restaurantHeader { - margin-bottom: 0px; - } -} - -/* Responsive adjustments */ -@media (max-width: 768px) { -} - -@media (min-width: 769px) and (max-width: 1024px) { -} .pageContainer { padding: 0; @@ -165,21 +116,6 @@ background-color: "#F7F7F7"; } -/* Enhanced responsive page container */ -@media (min-width: 769px) and (max-width: 1024px) { - .pageContainer { - padding: 16px; - } -} - -@media (min-width: 1025px) { - .pageContainer { - padding: 32px; - max-width: 1200px; - margin: 0 auto; - } -} - /* Sidebar state adjustments */ .sidebarCollapsed .pageContainer { margin-left: 80px; @@ -189,13 +125,6 @@ margin-left: 200px; } -@media (max-width: 768px) { - .sidebarCollapsed .pageContainer, - .sidebarExpanded .pageContainer { - margin-left: 0; - } -} - :global(.darkApp) .restaurantHeader path { fill: none !important; stroke: #ffffff !important; @@ -428,72 +357,12 @@ border-radius: 0 0 16px 16px; } -@media (min-width: 769px) and (max-width: 1024px) { - .restaurantHeader { - border-radius: 0 0 20px 20px; - /* box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); */ - } -} - -@media (min-width: 1025px) { - .restaurantHeader { - border-radius: 0 0 24px 24px; - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); - } -} - -/* Enhanced responsive restaurant logo */ -/* .restaurantLogo { - transition: all 0.3s ease; -} */ - -@media (min-width: 769px) and (max-width: 1024px) { - .restaurantLogo { - width: 96px !important; - height: 96px !important; - border-radius: 12px !important; - } -} - -@media (min-width: 1025px) { - .restaurantLogo { - width: 120px !important; - height: 120px !important; - border-radius: 16px !important; - } -} - /* Enhanced responsive navigation buttons */ .navButton { transition: all 0.3s ease; } -@media (min-width: 769px) and (max-width: 1024px) { - .navButton { - width: 40px !important; - height: 40px !important; - border-radius: 12px !important; - } -} - -@media (min-width: 1025px) { - .navButton { - width: 48px !important; - height: 48px !important; - border-radius: 16px !important; - } -} - /* Enhanced responsive animations */ -@media (prefers-reduced-motion: no-preference) { - .pageContainer { - animation: fadeInUp 0.6s ease-out; - } - - /* .restaurantHeader { - animation: fadeInDown 0.8s ease-out; - } */ -} @keyframes fadeInUp { from { @@ -525,30 +394,7 @@ outline-offset: 2px; } -@media (min-width: 768px) { - .pageContainer:focus, - .restaurantHeader:focus, - .navButton:focus { - outline-offset: 4px; - } -} - /* Enhanced responsive print styles */ -@media print { - .pageContainer { - background-color: white !important; - color: black !important; - } - - .restaurantHeader { - box-shadow: none !important; - border: 1px solid #ccc !important; - } - - .navButton { - display: none !important; - } -} .dineInIcon { position: relative; @@ -665,3 +511,149 @@ .restaurantDescriptionSkeleton .ant-skeleton-content .ant-skeleton-paragraph { margin-block-start: 8px !important; } + +/* ===== AGGREGATED MEDIA QUERIES ===== */ + +/* Mobile devices (max-width: 768px) */ +@media (max-width: 768px) { + .sidebarCollapsed .pageContainer, + .sidebarExpanded .pageContainer { + margin-left: 0; + } +} + +/* Tablet devices (min-width: 769px and max-width: 1024px) */ +@media (min-width: 769px) and (max-width: 1024px) { + .itemDescription { + font-size: 14px !important; + } + + .logo { + left: 40px; + width: 80px !important; + height: 80px !important; + } + + .cover { + width: 100%; + height: "auto"; + object-fit: cover; + } + + .restaurantHeader { + margin-bottom: 0px; + border-radius: 0 0 20px 20px; + } + + .leftShape { + top: 170px; + left: -3px; + } + + .rightShape { + top: 170px; + left: 116px; + } + + .pageContainer { + padding: 16px; + } + + .restaurantLogo { + width: 96px !important; + height: 96px !important; + border-radius: 12px !important; + } + + .navButton { + width: 40px !important; + height: 40px !important; + border-radius: 12px !important; + } +} + +/* Desktop devices (min-width: 1025px) */ +@media (min-width: 1025px) { + .contentWrapper { + max-width: 1164px; + } + + .itemDescription { + font-size: 16px !important; + } + + .restaurantHeader { + margin-bottom: 0px; + border-radius: 0 0 24px 24px; + } + + .pageContainer { + padding: 16px 32px; + max-width: 1200px; + margin: 0 auto; + } + + .logo { + position: absolute; + left: 33px; + top: -95px; + border-radius: 50%; + z-index: 10; + border: 3px solid var(--background); + width: 150px !important; + height: 150px !important; + } + + .navButton { + width: 48px !important; + height: 48px !important; + border-radius: 16px !important; + } + + .leftShape { + top: 170px; + left: -10px; + } + + .rightShape { + top: 170px; + left: 179px; + } +} + +/* Large screens (min-width: 768px) */ +@media (min-width: 768px) { + .pageContainer:focus, + .restaurantHeader:focus, + .navButton:focus { + outline-offset: 4px; + } +} + +/* Reduced motion preference */ +@media (prefers-reduced-motion: no-preference) { + .pageContainer { + animation: fadeInUp 0.6s ease-out; + } + + /* .restaurantHeader { + animation: fadeInDown 0.8s ease-out; + } */ +} + +/* Print styles */ +@media print { + .pageContainer { + background-color: white !important; + color: black !important; + } + + .restaurantHeader { + box-shadow: none !important; + border: 1px solid #ccc !important; + } + + .navButton { + display: none !important; + } +}