Redesign menus dishes view for mobile

canopas · Apr 26, 2024 · fbfd590 · fbfd590
1 parent 6197d70
commit fbfd590
Show file tree

Hide file tree

Showing 13 changed files with 378 additions and 127 deletions.
diff --git a/website/components/FoodCategory/index.tsx b/website/components/FoodCategory/index.tsx
@@ -45,7 +45,7 @@ const FoodCategory = () => {
           <SectionTitle
             title="What's on your mind?"
             paragraph="We believe in the power of expression – so go ahead, let your thoughts flow."
-            customClass="mx-auto text-center mb-28 mt-20"
+            customClass="mx-auto text-center mb-12 sm:mb-28 mt-20"
           />
 
           <Swiper

diff --git a/website/components/ItemCard/index.tsx b/website/components/ItemCard/index.tsx
@@ -64,7 +64,7 @@ const ItemCard = () => {
         <SectionTitle
           title="Most browsed items from the location"
           paragraph="Connect Locally: Must-Visit Places in Your Neighborhood. In our vibrant community, explore top-rated local experiences."
-          customClass="mb-28"
+          customClass="mb-12 sm:mb-28"
         />
         {itemData ? (
           <div className="grid grid-cols-1 gap-x-8 gap-y-10 md:grid-cols-2 md:gap-x-6 lg:gap-x-8 xl:grid-cols-3">
@@ -73,6 +73,7 @@ const ItemCard = () => {
                 <InView triggerOnce className="animated-fade-y">
                   {({ inView, ref, entry }) => (
                     <Link
+                      target="_top"
                       ref={ref}
                       href={
                         "/restaurants/" +

diff --git a/website/pages/layout.tsx → website/components/Layout/layout.tsx b/website/pages/layout.tsx → website/components/Layout/layout.tsx
@@ -3,7 +3,7 @@
 import Footer from "@/components/Footer";
 import Header from "@/components/Header";
 import ScrollToTop from "@/components/ScrollToTop";
-import Providers from "./providers";
+import Providers from "../../pages/providers";
 import Head from "next/head";
 
 export default function RootLayout({

diff --git a/website/components/Layout/layoutWithoutFooter.tsx b/website/components/Layout/layoutWithoutFooter.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+import ScrollToTop from "@/components/ScrollToTop";
+import Providers from "../../pages/providers";
+import Head from "next/head";
+
+export default function LayoutWithoutFooter({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="dark:bg-black">
+      <Head>
+        <title>Bite Space</title>
+      </Head>
+      <Providers>
+        <Header />
+        {children}
+      </Providers>
+    </div>
+  );
+}
diff --git a/website/components/YouMayLike/index.tsx b/website/components/YouMayLike/index.tsx
@@ -24,6 +24,7 @@ const YouMayLike = () => {
           .from("restaurants")
           .select("*")
           .eq("is_public", true)
+          .order("id", { ascending: true })
           .limit(4);
 
         if (error) return error;
@@ -44,12 +45,13 @@ const YouMayLike = () => {
           <SectionTitle
             title="You May Like This"
             paragraph="From trending dishes to hidden gems, this personalized recommendation feature ensures that your next food adventure is always exciting and tailored to your unique taste buds."
-            customClass="mb-28 mt-20"
+            customClass="mb-12 sm:mb-28 mt-20"
           />
 
           <div className="animated-fade-y grid grid-cols-1 gap-4 xs:gap-10 lg:grid-cols-2">
             {restaurants.map((item: any) => (
               <Link
+                target="_top"
                 key={"may-like-" + item.id}
                 href={
                   "/restaurants/" +
@@ -69,19 +71,17 @@ const YouMayLike = () => {
                   effect="fade"
                   className="sm:h-[25rem]"
                 >
-                  {item.images.map((data: any) => (
-                    <div key={"image-" + data}>
-                      <SwiperSlide>
-                        <Image
-                          src={data}
-                          height={100}
-                          width={100}
-                          className="h-full w-full object-cover"
-                          alt="item-image"
-                          loading="lazy"
-                        />
-                      </SwiperSlide>
-                    </div>
+                  {item.images.map((data: any, key: any) => (
+                    <SwiperSlide key={key}>
+                      <Image
+                        src={data}
+                        height={100}
+                        width={100}
+                        className="h-full w-full object-cover"
+                        alt="item-image"
+                        loading="lazy"
+                      />
+                    </SwiperSlide>
                   ))}
                 </Swiper>
                 <div className="absolute top-0 z-[1] h-full w-full bg-gradient-to-t from-black/70 to-transparent md:via-transparent">

diff --git a/website/components/withScrollRestoration/index.tsx b/website/components/withScrollRestoration/index.tsx
@@ -14,17 +14,24 @@ function withScrollRestoration(WrappedComponent: any) {
           window.sessionStorage.setItem(
             `scrollY:${router.asPath}`,
             window.scrollY.toString()
-          );
-        }
-      };
-
-      const handleRouteComplete = (url: any) => {
+            );
+          }
+        };
+        
+        const handleRouteComplete = (url: any) => {
         const scrollY = window.sessionStorage.getItem(`scrollY:${url}`);
         if (scrollY) {
-          window.scrollTo(0, parseInt(scrollY));
+          if (url?.includes("/restaurants")) {
+            // restaurants data is taking time to load that's why added timout to scroll the page
+            setTimeout(function () {
+              window.scroll(0, parseInt(scrollY));
+            }, 900);
+          } else {
+            window.scrollTo(0, parseInt(scrollY));
+          }
         }
       };
-
+      
       const handlePopState = () => {
         // Retrieve the scroll position for the previous page
         const scrollY = window.sessionStorage.getItem(`scrollY:${prevPageUrl}`);

diff --git a/website/pages/about/index.tsx b/website/pages/about/index.tsx
@@ -1,7 +1,7 @@
 "use client";
 
+import RootLayout from "@/components/Layout/layout";
 import withScrollRestoration from "@/components/withScrollRestoration";
-import RootLayout from "@/pages/layout";
 import Image from "next/image";
 import Link from "next/link";
 

diff --git a/website/pages/category/[id].tsx → website/pages/category/[category].tsx b/website/pages/category/[id].tsx → website/pages/category/[category].tsx
@@ -7,13 +7,13 @@ import { useEffect, useState } from "react";
 import { CategoryData, RestaurantData } from "@/types/category-by-id";
 import { useRouter } from "next/router";
 import Restaurant from "./restaurant";
-import RootLayout from "../layout";
+import RootLayout from "../../components/Layout/layout";
 import NotFound from "@/components/PageNotFound";
 
 const Category = () => {
   const router = useRouter();
-  const { id } = router.query;
-  const suffix = id?.toString().substring(id?.lastIndexOf("-") + 1);
+  const { category } = router.query;
+  const suffix = category?.toString().substring(category?.lastIndexOf("-") + 1);
 
   const [isRestaurantsLoading, setIsRestaurantsLoading] = useState(true);
   const [categoryData, setCategoryData] = useState<CategoryData | null>(null);
@@ -38,6 +38,7 @@ const Category = () => {
               .from("categories")
               .select("id, restaurant_id, image")
               .neq("restaurant_id", 0)
+              .order('id', { ascending: false })
               .contains("tags", [data.name.toLowerCase()]);
 
           if (categoriesError) throw categoriesError;

diff --git a/website/pages/index.tsx b/website/pages/index.tsx
@@ -5,7 +5,7 @@ import Hero from "@/components/Hero";
 import ItemCard from "@/components/ItemCard";
 import YouMayLike from "@/components/YouMayLike";
 import { Inter } from "@next/font/google";
-import RootLayout from "./layout";
+import RootLayout from "../components/Layout/layout";
 import withScrollRestoration from "@/components/withScrollRestoration";
 
 const inter = Inter({ subsets: ["latin"] });

diff --git a/...pages/restaurants/[id]/cuisines/index.tsx → ...staurants/[restaurant]/cuisines/index.tsx b/...pages/restaurants/[id]/cuisines/index.tsx → ...staurants/[restaurant]/cuisines/index.tsx
@@ -14,24 +14,24 @@ import SectionTitle from "@/components/Common/SectionTitle";
 import "swiper/css";
 import "swiper/css/effect-fade";
 import { useRouter } from "next/router";
-import RootLayout from "@/pages/layout";
+import RootLayout from "@/components/Layout/layout";
 import NoDataFound from "@/components/NoDataFound";
 
 const CuisineRestaurant = () => {
   const router = useRouter();
-  const { id } = router.query;
+  const { restaurant } = router.query;
 
   const [isRestaurantsLoading, setIsRestaurantsLoading] = useState(true);
   const [restaurants, setRestaurantsData] = useState<any[]>([]);
 
   useEffect(() => {
     const fetchData = async () => {
       try {
-        if (id) {
+        if (restaurant) {
           const { data, error } = await supabase
             .from("restaurants")
             .select("*")
-            .contains("tags", [(id as string)?.replace(/-/g, " ")]);
+            .contains("tags", [(restaurant as string)?.replace(/-/g, " ")]);
 
           if (error) throw error;
 
@@ -45,7 +45,7 @@ const CuisineRestaurant = () => {
     };
 
     fetchData();
-  }, [id]);
+  }, [restaurant]);
 
   return (
     <>
@@ -86,8 +86,7 @@ const CuisineRestaurant = () => {
                           <SwiperSlide>
                             <Image
                               src={data}
-                              height={100}
-                              width={100}
+                              fill
                               className="h-full w-full object-cover"
                               alt="item-image"
                             />