Merge remote-tracking branch 'origin/main'
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -18,6 +18,24 @@
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 100%;
|
||||
height: "auto";
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
left: 33px;
|
||||
top: -64px;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid var(--background);
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.leftShape {
|
||||
position: absolute;
|
||||
top: 133px;
|
||||
@@ -49,6 +67,12 @@
|
||||
|
||||
/* Enhanced responsive categories container */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.logo {
|
||||
left: 40px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.categoriesContainer {
|
||||
height: 160px;
|
||||
padding: 0 24px;
|
||||
@@ -65,17 +89,23 @@
|
||||
}
|
||||
|
||||
.leftShape {
|
||||
top: 170px;
|
||||
top: 150px;
|
||||
left: -3px;
|
||||
}
|
||||
|
||||
.rightShape {
|
||||
top: 170px;
|
||||
top: 150px;
|
||||
left: 116px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.logo {
|
||||
left: 33px;
|
||||
top: 141px;
|
||||
width: 150px !important;
|
||||
height: 150px !important;
|
||||
}
|
||||
.categoriesContainer {
|
||||
height: 180px;
|
||||
padding: 0 24px;
|
||||
@@ -94,6 +124,16 @@
|
||||
max-width: 100vw !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.leftShape {
|
||||
top: 170px;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.rightShape {
|
||||
top: 170px;
|
||||
left: 185px;
|
||||
}
|
||||
}
|
||||
|
||||
.menuSection:first-child h3 {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { Card, Grid, Skeleton } from "antd";
|
||||
import { Card, Skeleton } from "antd";
|
||||
import useBreakPoint from "hooks/useBreakPoint";
|
||||
import styles from "./MenuSkeleton.module.css";
|
||||
|
||||
interface MenuSkeletonProps {
|
||||
@@ -12,17 +13,12 @@ interface MenuSkeletonProps {
|
||||
| "menu-only";
|
||||
}
|
||||
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
const MenuSkeleton = ({
|
||||
categoryCount = 6,
|
||||
categoryCount = 8,
|
||||
itemCount = 8,
|
||||
variant = "default",
|
||||
}: MenuSkeletonProps) => {
|
||||
const { xs, md } = useBreakpoint();
|
||||
const isMobile = xs;
|
||||
const isTablet = !xs && !md;
|
||||
// const isDesktop = md;
|
||||
const { isMobile, isTablet } = useBreakPoint();
|
||||
|
||||
const getCategoryCardStyle = () => {
|
||||
if (isMobile) {
|
||||
@@ -106,82 +102,90 @@ const MenuSkeleton = ({
|
||||
}
|
||||
};
|
||||
|
||||
const getGridClass = () => {
|
||||
if (isMobile) {
|
||||
return styles.menuItemsGridMobile;
|
||||
} else if (isTablet) {
|
||||
return styles.menuItemsGridTablet;
|
||||
} else {
|
||||
return styles.menuItemsGridDesktop;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`${styles.pageContainer} ${styles.skeletonContainer}`}>
|
||||
<>
|
||||
{/* Restaurant Header Skeleton */}
|
||||
<div className={styles.restaurantHeader}>
|
||||
{/* Cover Image Skeleton */}
|
||||
<Skeleton.Image
|
||||
active
|
||||
className={styles.cover}
|
||||
style={{
|
||||
width: "100vw",
|
||||
height: isMobile ? 182 : isTablet ? 200 : 220,
|
||||
borderRadius: 0,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Logo Skeleton */}
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: isMobile ? "33px" : "40px",
|
||||
top: isMobile ? "133px" : isTablet ? "170px" : "170px",
|
||||
left: isMobile ? "33px" : isTablet ? "40px" : "36px",
|
||||
top: isMobile ? "133px" : isTablet ? "150px" : "130px",
|
||||
borderRadius: "50%",
|
||||
width: isMobile ? "72px" : isTablet ? "80px" : "80px",
|
||||
height: isMobile ? "72px" : isTablet ? "80px" : "80px",
|
||||
width: isMobile ? "72px" : isTablet ? "80px" : "150px",
|
||||
height: isMobile ? "72px" : isTablet ? "80px" : "150px",
|
||||
border: "3px solid var(--background)",
|
||||
zIndex: 10,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Decorative Shapes Skeleton */}
|
||||
{/* Decorative Shap es Skeleton */}
|
||||
<div className={styles.leftShape}></div>
|
||||
<div className={styles.rightShape}></div>
|
||||
</div>
|
||||
|
||||
{/* Restaurant Info Skeleton */}
|
||||
<div className={styles.restaurantInfoSkeleton}>
|
||||
<div
|
||||
className={
|
||||
styles.restaurantDescriptionSkeleton +
|
||||
" " +
|
||||
"restaurant-description-skeleton"
|
||||
}
|
||||
>
|
||||
<Skeleton
|
||||
active
|
||||
paragraph={{
|
||||
rows: 1,
|
||||
width: ["100%"],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loyalty Card Skeleton */}
|
||||
<div className={styles.loyaltySkeleton}>
|
||||
<Card className={styles.loyaltyCardSkeleton}>
|
||||
<div className={`${styles.pageContainer} ${styles.skeletonContainer}`}>
|
||||
{/* Restaurant Info Skeleton */}
|
||||
<div className={styles.restaurantInfoSkeleton}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: "0.5rem",
|
||||
}}
|
||||
className={
|
||||
styles.restaurantDescriptionSkeleton +
|
||||
" " +
|
||||
"restaurant-description-skeleton"
|
||||
}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
|
||||
<Skeleton
|
||||
active
|
||||
paragraph={{
|
||||
rows: 1,
|
||||
width: ["100%"],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loyalty Card Skeleton */}
|
||||
<div className={styles.loyaltySkeleton}>
|
||||
<Card className={styles.loyaltyCardSkeleton}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{ display: "flex", alignItems: "center", gap: "8px" }}
|
||||
>
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
/>
|
||||
<Skeleton.Input
|
||||
active
|
||||
style={{
|
||||
width: "120px",
|
||||
height: "16px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
@@ -190,150 +194,134 @@ const MenuSkeleton = ({
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
/>
|
||||
<Skeleton.Input
|
||||
</div>
|
||||
<br />
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", gap: "4px" }}>
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<Skeleton.Image
|
||||
key={index}
|
||||
active
|
||||
style={{
|
||||
width: "32px",
|
||||
height: "32px",
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Skeleton.Button
|
||||
active
|
||||
style={{
|
||||
width: "120px",
|
||||
height: "16px",
|
||||
width: "80px",
|
||||
height: "32px",
|
||||
borderRadius: "16px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Categories Skeleton */}
|
||||
{(variant === "default" ||
|
||||
variant === "minimal" ||
|
||||
variant === "detailed" ||
|
||||
variant === "categories-only") && (
|
||||
<div
|
||||
style={{
|
||||
padding: isMobile ? "0 1rem" : isTablet ? "0 24px" : "0 24px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
overflow: "hidden",
|
||||
marginBottom: isMobile ? "4rem" : isTablet ? "8px" : "16px",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", gap: "4px" }}>
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<Skeleton.Image
|
||||
key={index}
|
||||
active
|
||||
style={{
|
||||
width: "32px",
|
||||
height: "32px",
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Skeleton.Button
|
||||
active
|
||||
style={{
|
||||
width: "80px",
|
||||
height: "32px",
|
||||
borderRadius: "16px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Categories Skeleton */}
|
||||
{(variant === "default" ||
|
||||
variant === "minimal" ||
|
||||
variant === "detailed" ||
|
||||
variant === "categories-only") && (
|
||||
<div
|
||||
style={{
|
||||
padding: isMobile ? "0 1rem" : isTablet ? "0 24px" : "0 24px",
|
||||
display: "flex",
|
||||
gap: 8,
|
||||
overflow: "hidden",
|
||||
marginBottom: isMobile ? "4rem" : isTablet ? "8px" : "16px",
|
||||
}}
|
||||
>
|
||||
{Array.from({
|
||||
length:
|
||||
variant === "minimal"
|
||||
? Math.min(categoryCount, 4)
|
||||
: categoryCount,
|
||||
}).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
marginRight: isMobile ? "3px" : "8px",
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
style={{ borderRadius: 8 }}
|
||||
styles={{
|
||||
body: {
|
||||
...getCategoryCardStyle(),
|
||||
padding: 0,
|
||||
},
|
||||
{Array.from({
|
||||
length:
|
||||
variant === "minimal"
|
||||
? Math.min(categoryCount, 4)
|
||||
: categoryCount,
|
||||
}).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
marginRight: isMobile ? "3px" : "8px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
gap: "0px",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
<Card
|
||||
style={{ borderRadius: 8 }}
|
||||
styles={{
|
||||
body: {
|
||||
...getCategoryCardStyle(),
|
||||
padding: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
...getCategoryImageStyle(),
|
||||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: isMobile ? "4px" : "8px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
gap: "0px",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Skeleton
|
||||
<Skeleton.Image
|
||||
active
|
||||
paragraph={{ rows: 0 }}
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: isMobile ? 3 : 8,
|
||||
...getCategoryImageStyle(),
|
||||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: isMobile ? "4px" : "8px",
|
||||
textAlign: "center",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Skeleton
|
||||
active
|
||||
paragraph={{ rows: 0 }}
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: isMobile ? 3 : 8,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Menu Items Skeleton */}
|
||||
{(variant === "default" ||
|
||||
variant === "minimal" ||
|
||||
variant === "detailed" ||
|
||||
variant === "menu-only") && (
|
||||
<div
|
||||
className={styles.menuSections}
|
||||
style={{
|
||||
padding: isMobile ? "0 1rem" : isTablet ? "0 24px" : "0 24px",
|
||||
}}
|
||||
>
|
||||
{Array.from({ length: variant === "minimal" ? 1 : 3 }).map(
|
||||
(_, sectionIndex) => (
|
||||
<div key={sectionIndex} className={styles.menuSection}>
|
||||
{/* Section Header Skeleton */}
|
||||
{/* <div
|
||||
{/* Menu Items Skeleton */}
|
||||
{(variant === "default" ||
|
||||
variant === "minimal" ||
|
||||
variant === "detailed" ||
|
||||
variant === "menu-only") && (
|
||||
<div
|
||||
className={styles.menuSections}
|
||||
style={{
|
||||
padding: isMobile ? "0 1rem" : isTablet ? "0 24px" : "0 24px",
|
||||
}}
|
||||
>
|
||||
{Array.from({ length: variant === "minimal" ? 1 : 3 }).map(
|
||||
(_, sectionIndex) => (
|
||||
<div key={sectionIndex} className={styles.menuSection}>
|
||||
{/* Section Header Skeleton */}
|
||||
{/* <div
|
||||
style={{
|
||||
margin: isMobile ? "20px 0 15px 0" : isTablet ? "30px 0 20px 0" : "40px 0 25px 0",
|
||||
padding: isTablet ? "0 12px" : isDesktop ? "0 16px" : "0"
|
||||
@@ -349,78 +337,81 @@ const MenuSkeleton = ({
|
||||
/>
|
||||
</div> */}
|
||||
|
||||
<div className={`${styles.menuItemsGrid} ${getGridClass()}`}>
|
||||
{Array.from({
|
||||
length:
|
||||
variant === "minimal"
|
||||
? Math.min(itemCount, 4)
|
||||
: itemCount,
|
||||
}).map((_, itemIndex) => (
|
||||
<Card
|
||||
key={itemIndex}
|
||||
className="responsive-card"
|
||||
style={{ borderRadius: 8 }}
|
||||
styles={{
|
||||
body: {
|
||||
...getMenuItemCardStyle(),
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-around",
|
||||
gap: isMobile ? 12 : 16,
|
||||
position: "relative",
|
||||
<div
|
||||
className={`${styles.menuItemsGrid} ${styles.menuItemsGrid}`}
|
||||
>
|
||||
{Array.from({
|
||||
length:
|
||||
variant === "minimal"
|
||||
? Math.min(itemCount, 4)
|
||||
: itemCount,
|
||||
}).map((_, itemIndex) => (
|
||||
<Card
|
||||
key={itemIndex}
|
||||
className="responsive-card"
|
||||
style={{ borderRadius: 8 }}
|
||||
styles={{
|
||||
body: {
|
||||
...getMenuItemCardStyle(),
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
lineHeight: 1,
|
||||
height: "100%",
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-around",
|
||||
gap: isMobile ? 12 : 16,
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
{/* Item Description Skeleton */}
|
||||
<Skeleton
|
||||
active
|
||||
paragraph={{
|
||||
rows: isMobile ? 1 : 2,
|
||||
width: ["100%", "90%", "70%"],
|
||||
}}
|
||||
<div
|
||||
style={{
|
||||
marginBottom: isMobile ? 8 : isTablet ? 16 : 20,
|
||||
lineHeight: 1,
|
||||
height: "100%",
|
||||
flex: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
/>
|
||||
{/* Action Icons Skeleton */}
|
||||
</div>
|
||||
>
|
||||
{/* Item Description Skeleton */}
|
||||
<Skeleton
|
||||
active
|
||||
paragraph={{
|
||||
rows: isMobile ? 1 : 2,
|
||||
width: ["100%", "90%", "70%"],
|
||||
}}
|
||||
style={{
|
||||
marginBottom: isMobile ? 8 : isTablet ? 16 : 20,
|
||||
}}
|
||||
/>
|
||||
{/* Action Icons Skeleton */}
|
||||
</div>
|
||||
|
||||
<div style={{ position: "relative" }}>
|
||||
{/* Item Image Skeleton */}
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
...getMenuItemImageStyle(),
|
||||
}}
|
||||
/>{" "}
|
||||
<div style={{ position: "relative" }}>
|
||||
{/* Item Image Skeleton */}
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
...getMenuItemImageStyle(),
|
||||
}}
|
||||
/>{" "}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -570,6 +570,10 @@
|
||||
height: 40px !important;
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
.contentWrapper{
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop devices (min-width: 1025px) */
|
||||
|
||||
@@ -41,7 +41,7 @@ function MenuPage() {
|
||||
restaurantDetails?.restaurant.id,
|
||||
{
|
||||
skip: !restaurantDetails?.restaurant.id,
|
||||
}
|
||||
},
|
||||
);
|
||||
const { categoryRefs } = useScrollHandler();
|
||||
const { xs, md } = useBreakpoint();
|
||||
@@ -58,7 +58,7 @@ function MenuPage() {
|
||||
/>
|
||||
|
||||
{isLoading ? (
|
||||
<MenuSkeleton categoryCount={6} itemCount={8} variant="default" />
|
||||
<MenuSkeleton categoryCount={10} itemCount={8} variant="default" />
|
||||
) : (
|
||||
<div className={styles.menuContainer}>
|
||||
<div className={styles.restaurantHeader}>
|
||||
|
||||
Reference in New Issue
Block a user