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

MenuSkeleton: fix desktop size

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-10-06 01:44:09 +03:00
parent 8df4477ac5
commit b385d40913
2 changed files with 267 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css
View File

@@ -18,6 +18,24 @@
gap: 16px; 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 { .leftShape {
position: absolute; position: absolute;
top: 133px; top: 133px;
@@ -49,6 +67,12 @@
/* Enhanced responsive categories container */ /* Enhanced responsive categories container */
@media (min-width: 769px) and (max-width: 1024px) { @media (min-width: 769px) and (max-width: 1024px) {
.logo {
left: 40px;
width: 80px;
height: 80px;
}
.categoriesContainer { .categoriesContainer {
height: 160px; height: 160px;
padding: 0 24px; padding: 0 24px;
@@ -65,17 +89,23 @@
} }
.leftShape { .leftShape {
top: 170px; top: 150px;
left: -3px; left: -3px;
} }
.rightShape { .rightShape {
top: 170px; top: 150px;
left: 116px; left: 116px;
} }
} }
@media (min-width: 1025px) { @media (min-width: 1025px) {
.logo {
left: 33px;
top: 141px;
width: 150px !important;
height: 150px !important;
}
.categoriesContainer { .categoriesContainer {
height: 180px; height: 180px;
padding: 0 24px; padding: 0 24px;
@@ -94,6 +124,16 @@
max-width: 100vw !important; max-width: 100vw !important;
margin: 0 !important; margin: 0 !important;
} }
.leftShape {
top: 170px;
left: -10px;
}
.rightShape {
top: 170px;
left: 185px;
}
} }
.menuSection:first-child h3 { .menuSection:first-child h3 {

459
src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx
View File

@@ -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"; import styles from "./MenuSkeleton.module.css";
interface MenuSkeletonProps { interface MenuSkeletonProps {
@@ -12,17 +13,12 @@ interface MenuSkeletonProps {
| "menu-only"; | "menu-only";
} }
const { useBreakpoint } = Grid;
const MenuSkeleton = ({ const MenuSkeleton = ({
categoryCount = 6, categoryCount = 8,
itemCount = 8, itemCount = 8,
variant = "default", variant = "default",
}: MenuSkeletonProps) => { }: MenuSkeletonProps) => {
const { xs, md } = useBreakpoint(); const { isMobile, isTablet } = useBreakPoint();
const isMobile = xs;
const isTablet = !xs && !md;
// const isDesktop = md;
const getCategoryCardStyle = () => { const getCategoryCardStyle = () => {
if (isMobile) { 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 ( return (
<div className={`${styles.pageContainer} ${styles.skeletonContainer}`}> <>
{/* Restaurant Header Skeleton */} {/* Restaurant Header Skeleton */}
<div className={styles.restaurantHeader}> <div className={styles.restaurantHeader}>
{/* Cover Image Skeleton */} {/* Cover Image Skeleton */}
<Skeleton.Image <Skeleton.Image
active active
className={styles.cover}
style={{ style={{
width: "100vw", width: "100vw",
height: isMobile ? 182 : isTablet ? 200 : 220, height: isMobile ? 182 : isTablet ? 200 : 220,
borderRadius: 0, borderRadius: 0,
}} }}
/> />
{/* Logo Skeleton */} {/* Logo Skeleton */}
<Skeleton.Image <Skeleton.Image
active active
style={{ style={{
position: "absolute", position: "absolute",
left: isMobile ? "33px" : "40px", left: isMobile ? "33px" : isTablet ? "40px" : "36px",
top: isMobile ? "133px" : isTablet ? "170px" : "170px", top: isMobile ? "133px" : isTablet ? "150px" : "130px",
borderRadius: "50%", borderRadius: "50%",
width: isMobile ? "72px" : isTablet ? "80px" : "80px", width: isMobile ? "72px" : isTablet ? "80px" : "150px",
height: isMobile ? "72px" : isTablet ? "80px" : "80px", height: isMobile ? "72px" : isTablet ? "80px" : "150px",
border: "3px solid var(--background)", border: "3px solid var(--background)",
zIndex: 10, zIndex: 10,
overflow: "hidden", overflow: "hidden",
}} }}
/> />
{/* Decorative Shapes Skeleton */} {/* Decorative Shap es Skeleton */}
<div className={styles.leftShape}></div> <div className={styles.leftShape}></div>
<div className={styles.rightShape}></div> <div className={styles.rightShape}></div>
</div> </div>
<div className={`${styles.pageContainer} ${styles.skeletonContainer}`}>
{/* Restaurant Info Skeleton */} {/* Restaurant Info Skeleton */}
<div className={styles.restaurantInfoSkeleton}> <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 <div
style={{ className={
display: "flex", styles.restaurantDescriptionSkeleton +
justifyContent: "space-between", " " +
alignItems: "center", "restaurant-description-skeleton"
marginBottom: "0.5rem", }
}}
> >
<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 <Skeleton.Image
active active
style={{ style={{
@@ -190,150 +194,134 @@ const MenuSkeleton = ({
borderRadius: "4px", 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 active
style={{ style={{
width: "120px", width: "80px",
height: "16px", height: "32px",
borderRadius: "16px",
}} }}
/> />
</div> </div>
<Skeleton.Image </Card>
active </div>
style={{
width: "24px", {/* Categories Skeleton */}
height: "24px", {(variant === "default" ||
borderRadius: "4px", variant === "minimal" ||
}} variant === "detailed" ||
/> variant === "categories-only") && (
</div>
<br />
<div <div
style={{ style={{
padding: isMobile ? "0 1rem" : isTablet ? "0 24px" : "0 24px",
display: "flex", display: "flex",
justifyContent: "space-between", gap: 8,
alignItems: "center", overflow: "hidden",
marginBottom: isMobile ? "4rem" : isTablet ? "8px" : "16px",
}} }}
> >
<div style={{ display: "flex", gap: "4px" }}> {Array.from({
{Array.from({ length: 5 }).map((_, index) => ( length:
<Skeleton.Image variant === "minimal"
key={index} ? Math.min(categoryCount, 4)
active : categoryCount,
style={{ }).map((_, index) => (
width: "32px", <div
height: "32px", key={index}
borderRadius: "50%", style={{
}} marginRight: isMobile ? "3px" : "8px",
/>
))}
</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,
},
}} }}
> >
<div <Card
style={{ style={{ borderRadius: 8 }}
display: "flex", styles={{
flexDirection: "column", body: {
alignItems: "center", ...getCategoryCardStyle(),
justifyContent: "space-between", padding: 0,
gap: "0px", },
width: "100%",
height: "100%",
}} }}
> >
<Skeleton.Image
active
style={{
...getCategoryImageStyle(),
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
}}
/>
<div <div
style={{ style={{
flex: 1, display: "flex",
padding: isMobile ? "4px" : "8px", flexDirection: "column",
textAlign: "center", alignItems: "center",
justifyContent: "space-between",
gap: "0px",
width: "100%", width: "100%",
height: "100%",
}} }}
> >
<Skeleton <Skeleton.Image
active active
paragraph={{ rows: 0 }}
style={{ style={{
margin: 0, ...getCategoryImageStyle(),
padding: isMobile ? 3 : 8, 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>
</div> </Card>
</Card> </div>
</div> ))}
))} </div>
</div> )}
)}
{/* Menu Items Skeleton */} {/* Menu Items Skeleton */}
{(variant === "default" || {(variant === "default" ||
variant === "minimal" || variant === "minimal" ||
variant === "detailed" || variant === "detailed" ||
variant === "menu-only") && ( variant === "menu-only") && (
<div <div
className={styles.menuSections} className={styles.menuSections}
style={{ style={{
padding: isMobile ? "0 1rem" : isTablet ? "0 24px" : "0 24px", padding: isMobile ? "0 1rem" : isTablet ? "0 24px" : "0 24px",
}} }}
> >
{Array.from({ length: variant === "minimal" ? 1 : 3 }).map( {Array.from({ length: variant === "minimal" ? 1 : 3 }).map(
(_, sectionIndex) => ( (_, sectionIndex) => (
<div key={sectionIndex} className={styles.menuSection}> <div key={sectionIndex} className={styles.menuSection}>
{/* Section Header Skeleton */} {/* Section Header Skeleton */}
{/* <div {/* <div
style={{ style={{
margin: isMobile ? "20px 0 15px 0" : isTablet ? "30px 0 20px 0" : "40px 0 25px 0", margin: isMobile ? "20px 0 15px 0" : isTablet ? "30px 0 20px 0" : "40px 0 25px 0",
padding: isTablet ? "0 12px" : isDesktop ? "0 16px" : "0" padding: isTablet ? "0 12px" : isDesktop ? "0 16px" : "0"
@@ -349,78 +337,81 @@ const MenuSkeleton = ({
/> />
</div> */} </div> */}
<div className={`${styles.menuItemsGrid} ${getGridClass()}`}> <div
{Array.from({ className={`${styles.menuItemsGrid} ${styles.menuItemsGrid}`}
length: >
variant === "minimal" {Array.from({
? Math.min(itemCount, 4) length:
: itemCount, variant === "minimal"
}).map((_, itemIndex) => ( ? Math.min(itemCount, 4)
<Card : itemCount,
key={itemIndex} }).map((_, itemIndex) => (
className="responsive-card" <Card
style={{ borderRadius: 8 }} key={itemIndex}
styles={{ className="responsive-card"
body: { style={{ borderRadius: 8 }}
...getMenuItemCardStyle(), styles={{
display: "flex", body: {
flexDirection: "column", ...getMenuItemCardStyle(),
justifyContent: "space-between", display: "flex",
}, flexDirection: "column",
}} justifyContent: "space-between",
> },
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-around",
gap: isMobile ? 12 : 16,
position: "relative",
}} }}
> >
<div <div
style={{ style={{
lineHeight: 1,
height: "100%",
flex: 1,
display: "flex", display: "flex",
flexDirection: "column", alignItems: "center",
justifyContent: "center", justifyContent: "space-around",
gap: isMobile ? 12 : 16,
position: "relative",
}} }}
> >
{/* Item Description Skeleton */} <div
<Skeleton
active
paragraph={{
rows: isMobile ? 1 : 2,
width: ["100%", "90%", "70%"],
}}
style={{ style={{
marginBottom: isMobile ? 8 : isTablet ? 16 : 20, lineHeight: 1,
height: "100%",
flex: 1,
display: "flex",
flexDirection: "column",
justifyContent: "center",
}} }}
/> >
{/* Action Icons Skeleton */} {/* Item Description Skeleton */}
</div> <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" }}> <div style={{ position: "relative" }}>
{/* Item Image Skeleton */} {/* Item Image Skeleton */}
<Skeleton.Image <Skeleton.Image
active active
style={{ style={{
...getMenuItemImageStyle(), ...getMenuItemImageStyle(),
}} }}
/>{" "} />{" "}
</div>
</div> </div>
</div> </Card>
</Card> ))}
))} </div>
</div> </div>
</div> ),
) )}
)} </div>
</div> )}
)} </div>
</div> </>
); );
}; };