fix skeleton styles

2025-10-04 18:16:26 +03:00
parent 2852c2c054
commit 28bad2de5f
6 changed files with 126 additions and 115 deletions
--- a/src/pages/menu/components/MenuList/MenuList.module.css
+++ b/src/pages/menu/components/MenuList/MenuList.module.css
@@ -49,10 +49,9 @@
 }

 .menuItemsGrid {
-  display: grid;
-  gap: 12px;
-  grid-template-columns: 1fr;
-  margin-bottom: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
 }

 .menuItemsGridMobile {
--- a/src/pages/menu/components/MenuList/MenuList.tsx
+++ b/src/pages/menu/components/MenuList/MenuList.tsx
@@ -28,12 +28,14 @@ const { useBreakpoint } = Grid;
 export function MenuList({ data, categoryRefs }: MenuListProps) {
  const { isRTL } = useAppSelector((state) => state.locale);
  const products = data?.products;
-  const { xs, md } = useBreakpoint();
+  const { xs, md, lg } = useBreakpoint();
  const { items } = useAppSelector((state) => state.order);
  const restaurantName = localStorage.getItem("restaurantName");
  const navigate = useNavigate();
  const { t } = useTranslation();
  const { themeName } = useAppSelector((state) => state.theme);
+  const isMobile = xs;
+  const isTablet = !xs && !md;

  // Show error state if data exists but has no products
  if (data && (!data.products || data.products.length === 0)) {
@@ -103,11 +105,13 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
                {isRTL ? category.name : category.name}
              </ProTitle>
              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "1rem",
-                }}
+                className={
+                  styles.menuItemsGrid + " " + isMobile
+                    ? styles.menuItemsGridMobile
+                    : isTablet
+                    ? styles.menuItemsGridTablet
+                    : styles.menuItemsGridDesktop
+                }
              >
                {categoryProducts.map((item: Product) => (
                  <div
--- a/src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css
+++ b/src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css
@@ -18,11 +18,40 @@
  gap: 16px;
 }

+.leftShape {
+  position: absolute;
+  top: 133px;
+  width: 47px;
+  height: 50px;
+  left: -11px;
+  background-color: var(--background);
+  clip-path: path("M 0 53 Q 50 50, 50 0 Q 50 50, 100 100 L 0 100 Z");
+}
+
+:global(.darkApp) .leftShape {
+  background-color: var(--background);
+}
+
+.rightShape {
+  position: absolute;
+  top: 133px;
+  width: 47px;
+  height: 50px;
+  left: 102px;
+  background-color: var(--background);
+  clip-path: path("M 0 53 Q 50 50, 50 0 Q 50 50, 100 100 L 0 100 Z");
+  transform: scale(-1, 1);
+}
+
+:global(.darkApp) .rightShape {
+  background-color: var(--background);
+}
+
 /* Enhanced responsive categories container */
@media (min-width: 769px) and (max-width: 1024px) {
  .categoriesContainer {
    height: 160px;
-    padding: 16px;
+    padding: 0 24px;
    gap: 16px;
    display: flex;
    flex-wrap: nowrap;
@@ -32,14 +61,24 @@

  .categoriesSticky {
    padding: 12px 16px !important;
-    height: 30px !important;
+    height: 70px !important;
+  }
+
+  .leftShape {
+    top: 170px;
+    left: -3px;
+  }
+
+  .rightShape {
+    top: 170px;
+    left: 116px;
  }
 }

@media (min-width: 1025px) {
  .categoriesContainer {
    height: 180px;
-    padding: 24px;
+    padding: 0 24px;
    max-width: 1200px;
    margin: 0 auto;
    gap: 16px;
@@ -57,11 +96,6 @@
  }
 }

-/* Menu Sections and Grid Layout */
-/* .menuSections {
-  margin-bottom: 105px !important;
-} */
-
 .menuSection:first-child h3 {
  margin-top: 0px !important;
 }
@@ -99,16 +133,15 @@
 }

 .menuItemsGridTablet {
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: 1fr;
  gap: 16px;
-  padding: 0 12px;
+  padding: 0 24px;
  margin-bottom: 20px;
 }

 .menuItemsGridDesktop {
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
-  padding: 0 16px;
  margin-bottom: 24px;
 }

@@ -128,35 +161,6 @@
  margin-bottom: 24px;
 }

-.leftShape {
-  position: absolute;
-  top: 133px;
-  width: 47px;
-  height: 50px;
-  left: -11px;
-  background-color: var(--background);
-  clip-path: path("M 0 53 Q 50 50, 50 0 Q 50 50, 100 100 L 0 100 Z");
-}
-
-:global(.darkApp) .leftShape {
-  background-color: var(--background);
-}
-
-.rightShape {
-  position: absolute;
-  top: 133px;
-  width: 47px;
-  height: 50px;
-  left: 102px;
-  background-color: var(--background);
-  clip-path: path("M 0 53 Q 50 50, 50 0 Q 50 50, 100 100 L 0 100 Z");
-  transform: scale(-1, 1);
-}
-
-:global(.darkApp) .rightShape {
-  background-color: var(--background);
-}
-
 /* Restaurant Info Skeleton */
 .restaurantInfoSkeleton {
  text-align: center;
@@ -190,12 +194,11 @@
 /* Enhanced responsive page container */
@media (min-width: 769px) and (max-width: 1024px) {
  .pageContainer {
-    padding: 24px;
+    /* padding: 0 24px; */
  }

  .restaurantInfoSkeleton {
    padding: 0 24px;
-    margin: 32px 0;
  }

  .loyaltySkeleton {
@@ -209,14 +212,13 @@

@media (min-width: 1025px) {
  .pageContainer {
-    padding: 32px;
+    /* padding: 32px; */
    max-width: 1200px;
    margin: 0 auto;
  }

  .restaurantInfoSkeleton {
    padding: 0 32px;
-    margin: 40px 0;
  }

  .loyaltySkeleton {
@@ -317,7 +319,7 @@
 /* Tablet-specific skeleton styles */
@media (min-width: 769px) and (max-width: 1024px) {
  .skeletonContainer {
-    padding: 24px;
+    /* padding: 0 24px; */
  }

  .skeletonContainer .ant-skeleton {
--- a/src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx
+++ b/src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx
@@ -19,21 +19,21 @@ const MenuSkeleton = ({
  itemCount = 8,
  variant = "default",
 }: MenuSkeletonProps) => {
-  const { xs, sm, md } = useBreakpoint();
+  const { xs, md } = useBreakpoint();
  const isMobile = xs;
-  const isTablet = sm && !md;
-  const isDesktop = md;
+  const isTablet = !xs && !md;
+  // const isDesktop = md;

  const getCategoryCardStyle = () => {
    if (isMobile) {
      return {
        width: 90,
-        height: 95,
+        height: 110,
      };
    } else if (isTablet) {
      return {
        width: 120,
-        height: 140,
+        height: 110,
      };
    } else {
      return {
@@ -66,23 +66,23 @@ const MenuSkeleton = ({
    if (isMobile) {
      return {
        width: 90,
-        height: 60,
+        height: 78,
        borderTopLeftRadius: 8,
        borderTopRightRadius: 8,
      };
    } else if (isTablet) {
      return {
        width: 120,
-        height: 90,
-        borderTopLeftRadius: 12,
-        borderTopRightRadius: 12,
+        height: 78,
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
      };
    } else {
      return {
-        width: 120,
-        height: 100,
-        borderTopLeftRadius: 16,
-        borderTopRightRadius: 16,
+        width: 140,
+        height: 78,
+        borderTopLeftRadius: 8,
+        borderTopRightRadius: 8,
      };
    }
  };
@@ -116,25 +116,8 @@ const MenuSkeleton = ({
    }
  };

-  const getPageContainerStyle = () => {
-    if (isDesktop) {
-      return {
-        maxWidth: "1200px",
-        margin: "0 auto",
-        padding: "32px",
-      };
-    } else if (isTablet) {
-      return {
-        padding: "24px",
-      };
-    }
-  };
-
  return (
-    <div
-      className={`${styles.pageContainer} ${styles.skeletonContainer}`}
-      style={getPageContainerStyle()}
-    >
+    <div className={`${styles.pageContainer} ${styles.skeletonContainer}`}>
      {/* Restaurant Header Skeleton */}
      <div className={styles.restaurantHeader}>
        {/* Cover Image Skeleton */}
@@ -153,10 +136,10 @@ const MenuSkeleton = ({
          style={{
            position: "absolute",
            left: isMobile ? "33px" : "40px",
-            top: isMobile ? "133px" : "-70px",
+            top: isMobile ? "133px" : isTablet ? "170px" : "170px",
            borderRadius: "50%",
-            width: isMobile ? "72px" : "80px",
-            height: isMobile ? "72px" : "80px",
+            width: isMobile ? "72px" : isTablet ? "80px" : "80px",
+            height: isMobile ? "72px" : isTablet ? "80px" : "80px",
            border: "3px solid var(--background)",
            zIndex: 10,
            overflow: "hidden",
@@ -262,7 +245,15 @@ const MenuSkeleton = ({
        variant === "minimal" ||
        variant === "detailed" ||
        variant === "categories-only") && (
-        <div style={{ padding: "0 1rem", display: "flex", gap: 8, overflow: "hidden" }}>
+        <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"
@@ -313,7 +304,7 @@ const MenuSkeleton = ({
                  >
                    <Skeleton
                      active
-                      paragraph={{ rows: 1 }}
+                      paragraph={{ rows: 0 }}
                      style={{
                        margin: 0,
                        padding: isMobile ? 3 : 8,
@@ -332,7 +323,12 @@ const MenuSkeleton = ({
        variant === "minimal" ||
        variant === "detailed" ||
        variant === "menu-only") && (
-        <div className={styles.menuSections} style={{ padding: "0 1rem" }}>
+        <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}>
@@ -387,18 +383,11 @@ const MenuSkeleton = ({
                            lineHeight: 1,
                            height: "100%",
                            flex: 1,
+                            display: "flex",
+                            flexDirection: "column",
+                            justifyContent: "center",
                          }}
                        >
-                          {/* Item Name Skeleton */}
-                          <Skeleton.Input
-                            active
-                            style={{
-                              marginBottom: isMobile ? 8 : isTablet ? 16 : 20,
-                              height: isMobile ? 16 : isTablet ? 18 : 20,
-                              width: "80%",
-                            }}
-                          />
-
                          {/* Item Description Skeleton */}
                          <Skeleton
                            active
--- a/src/pages/menu/menu.module.css
+++ b/src/pages/menu/menu.module.css
@@ -104,14 +104,20 @@
  left: auto;
 }

+/* .headerContainer{
+
+} */
+
 /* Enhanced responsive item description */
@media (min-width: 769px) and (max-width: 1024px) {
  .itemDescription {
    font-size: 14px !important;
  }
-  /* .logo {
-    display: none;
-  } */
+  .logo {
+    left: 40px;
+    width: 80px !important;
+    height: 80px !important;
+  }

  .cover {
    width: 100%;
@@ -121,6 +127,17 @@
  .restaurantHeader {
    margin-bottom: 0px;
  }
+
+  .leftShape {
+    top: 170px;
+    left: -3px;
+
+  }
+
+  .rightShape {
+    top: 170px;
+    left:116px
+  }
 }

@media (min-width: 1025px) {
@@ -145,7 +162,7 @@
 .pageContainer {
  padding: 0;
  transition: all 0.3s ease;
-  background-color: "#F7F7F7"
+  background-color: "#F7F7F7";
 }

 /* Enhanced responsive page container */
@@ -606,7 +623,6 @@
 .ratingContainer {
  display: flex;
  gap: 4px;
-  margin-bottom: 10px;
 }

 .ratingStar {
@@ -646,6 +662,6 @@
  margin-bottom: 1px;
 }

-.restaurantDescriptionSkeleton .ant-skeleton-content .ant-skeleton-paragraph{
+.restaurantDescriptionSkeleton .ant-skeleton-content .ant-skeleton-paragraph {
  margin-block-start: 8px !important;
 }
--- a/src/pages/menu/page.tsx
+++ b/src/pages/menu/page.tsx
@@ -43,8 +43,9 @@ function MenuPage() {
      skip: !restaurantDetails?.restaurant.id,
    }
  );
-  const { categoryRefs, isCategoriesSticky } = useScrollHandler();
+  const { categoryRefs } = useScrollHandler();
  const { xs, md } = useBreakpoint();
+  const isTablet = !xs && !md;

  const isLoading = isLoadingRestaurant || isLoadingMenu;

@@ -67,10 +68,10 @@ function MenuPage() {
              alt={t("menu.restaurantCover")}
              className={styles.cover}
              width={"100%"}
-              height={182}
+              height={xs ? 182 : isTablet ? 200 : 220}
              preview={false}
              loadingContainerStyle={{
-                width:"100vw"
+                width: "100vw",
              }}
            />

@@ -102,7 +103,7 @@ function MenuPage() {
            <SearchButton />
          </div>

-          <div className={`${styles.pageContainer}`}>
+          <div className={`${styles.headerContainer}`}>
            <div className={styles.contentWrapper}>
              <ProTitle level={4} className={styles.restaurantTitle}>
                {isRTL ? restaurant?.nameAR : restaurant?.name}