fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add Header for cart page

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-10-06 01:45:23 +03:00
parent b385d40913
commit 7dd0857ea3
9 changed files with 162 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/pages/menu/components/MenuList/MenuList.module.css
View File

@@ -54,7 +54,7 @@
}
@media (min-width: 1025px) {
.menuSections{
.menuSections {
padding: 0;
}
@@ -630,28 +630,6 @@
}
}
/* Skeleton Loading Styles */
.skeletonContainer {
animation: skeletonPulse 1.5s ease-in-out infinite;
}
.skeletonContainer .ant-skeleton {
transition: all 0.3s ease;
}
.skeletonContainer .ant-skeleton-image {
border-radius: 8px;
overflow: hidden;
}
.skeletonContainer .ant-skeleton-input {
border-radius: 6px;
}
.skeletonContainer .ant-skeleton-button {
border-radius: 20px;
}
@keyframes skeletonPulse {
0% {
opacity: 1;
@@ -673,72 +651,6 @@
}
}
.skeletonContainer .ant-skeleton-active .ant-skeleton-input,
.skeletonContainer .ant-skeleton-active .ant-skeleton-image,
.skeletonContainer .ant-skeleton-active .ant-skeleton-button {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200px 100%;
animation: skeletonShimmer 1.5s infinite;
}
/* Mobile-specific skeleton styles */
@media (max-width: 768px) {
.skeletonContainer .ant-skeleton {
margin-bottom: 12px;
}
.skeletonContainer .ant-skeleton-image {
border-radius: 4px;
}
.skeletonContainer .ant-skeleton-input {
border-radius: 4px;
}
.skeletonContainer .ant-skeleton-button {
border-radius: 16px;
}
}
/* Dark theme skeleton styles */
:global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-input,
:global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-image,
:global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-button {
background: linear-gradient(90deg, #181818 25%, #363636 50%, #181818 75%);
background-size: 200px 100%;
animation: skeletonShimmer 1.5s infinite;
}
:global(.darkApp) .skeletonContainer .ant-skeleton-input,
:global(.darkApp) .skeletonContainer .ant-skeleton-image,
:global(.darkApp) .skeletonContainer .ant-skeleton-button {
background-color: #181818;
border-color: #363636;
}
/* Tablet-specific skeleton styles */
@media (min-width: 769px) and (max-width: 1024px) {
.skeletonContainer {
padding: 24px;
}
.skeletonContainer .ant-skeleton {
margin-bottom: 16px;
}
.skeletonContainer .ant-skeleton-image {
border-radius: 6px;
}
.skeletonContainer .ant-skeleton-input {
border-radius: 5px;
}
.skeletonContainer .ant-skeleton-button {
border-radius: 18px;
}
}
.menuItemsGridSticky {
height: 60;
}

27
src/pages/menu/components/MenuList/MenuList.tsx
View File

@@ -48,13 +48,16 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
}
// Group products by category
const productsByCategory = products?.reduce((acc, product) => {
if (product.categoryId && !acc[product?.categoryId]) {
acc[product?.categoryId] = [];
}
acc[product?.categoryId || 0].push(product);
return acc;
}, {} as Record<number, Product[]>);
const productsByCategory = products?.reduce(
(acc, product) => {
if (product.categoryId && !acc[product?.categoryId]) {
acc[product?.categoryId] = [];
}
acc[product?.categoryId || 0].push(product);
return acc;
},
{} as Record<number, Product[]>,
);
return (
<>
@@ -170,14 +173,14 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
style={{
display: "-webkit-box",
WebkitBoxOrient: "vertical",
WebkitLineClamp: xs ? 2 : 4,
WebkitLineClamp: 2,
overflow: "hidden",
textOverflow: "ellipsis",
wordWrap: "break-word",
overflowWrap: "break-word",
lineHeight: "1.5rem",
maxHeight: xs ? "3em" : "6.6em",
fontSize: xs ? "1rem" : 18,
maxHeight: "3em",
fontSize: "1rem",
letterSpacing: "0.01em",
}}
>
@@ -231,8 +234,8 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
xs
? styles.popularMenuItemImageMobile
: md
? styles.popularMenuItemImageTablet
: styles.popularMenuItemImageDesktop
? styles.popularMenuItemImageTablet
: styles.popularMenuItemImageDesktop
}`}
width={90}
height={90}