style(products page): fix paginiation on mobile

fixes #87
202306-NEA-DZ-FEW · Nov 13, 2023 · 1c0d974 · 1c0d974
1 parent 24ece57
commit 1c0d974
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 7 deletions.
diff --git a/src/components/ProductFiltering/CategoryFilter.jsx b/src/components/ProductFiltering/CategoryFilter.jsx
@@ -36,7 +36,7 @@ function CategoryFilter({ t, queryParams }) {
           leaveFrom='transform opacity-100 scale-100'
           leaveTo='transform opacity-0 scale-95'
         >
-          <Menu.Items className='absolute max-h-52 overflow-y-scroll bg-white z-10 rounded-lg top-10 w-full'>
+          <Menu.Items className='absolute max-h-52 overflow-y-scroll no-scrollbar bg-white z-10 rounded-lg top-10 w-full ring-1 ring-black ring-opacity-5 drop-shadow-xl'>
             <div className='py-1'>
               {categories.map(({ name, dataKey }) => (
                 <Link

diff --git a/src/components/ProductFiltering/ListingTypeFilter.jsx b/src/components/ProductFiltering/ListingTypeFilter.jsx
@@ -34,7 +34,7 @@ function ListingTypeFilter({ t, queryParams }) {
           leaveFrom='transform opacity-100 scale-100'
           leaveTo='transform opacity-0 scale-95'
         >
-          <Menu.Items className='absolute max-h-52 overflow-y-scroll bg-white z-10 rounded-lg top-10 w-full'>
+          <Menu.Items className='absolute max-h-52 overflow-y-scroll no-scrollbar bg-white z-10 rounded-lg top-10 w-full ring-1 ring-black ring-opacity-5 drop-shadow-xl'>
             <div className='py-1'>
               {listingTypes.map((type) => (
                 <Link

diff --git a/src/components/ProductFiltering/LocationFilter.jsx b/src/components/ProductFiltering/LocationFilter.jsx
@@ -37,7 +37,7 @@ function LocationFilter({ t, queryParams }) {
           leaveFrom='transform opacity-100 scale-100'
           leaveTo='transform opacity-0 scale-95'
         >
-          <Menu.Items className='absolute max-h-52 overflow-y-scroll bg-white z-10 rounded-lg top-10 w-full'>
+          <Menu.Items className='absolute max-h-52 no-scrollbar overflow-y-scroll bg-white z-10 rounded-lg top-10 w-full ring-1 ring-black ring-opacity-5 drop-shadow-xl'>
             <div className='py-1'>
               {states.map(({ name, dataKey }) => (
                 <Link

diff --git a/src/components/ProductFiltering/Pagination.jsx b/src/components/ProductFiltering/Pagination.jsx
@@ -28,7 +28,7 @@ function Pagination({ page, pageSize, totalItems, queryParams, totalPages }) {
   };
 
   return (
-    <div className='flex items-center justify-between'>
+    <div className='flex items-center justify-center md:justify-between flex-wrap gap-4'>
       <div className='flex gap-4'>
         <button
           className='btn btn-sm normal-case font-normal tracking-wide'

diff --git a/src/components/ProductFiltering/__test__/__snapshots__/Pagination.test.js.snap b/src/components/ProductFiltering/__test__/__snapshots__/Pagination.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="flex items-center justify-between"
+  className="flex items-center justify-center md:justify-between flex-wrap gap-4"
 >
   <div
     className="flex gap-4"

diff --git a/src/pages/products/index.jsx b/src/pages/products/index.jsx
@@ -33,7 +33,7 @@ function ProductsPage({
       <div className='relative md:h-[75vh] h-[80vh] overflow-x-hidden w-full'>
         <Carousel t={t} items={categories} queryParams={queryParams} />
       </div>
-      <div className='flex flex-col lg:flex-row px-8 gap-8 mt-8 items-start'>
+      <div className='flex flex-col lg:flex-row px-8 gap-8 mt-10 items-start min-h-[80vh]'>
         <div className='lg:w-[30%] h-full w-full bg-white drop-shadow-lg p-4 rounded-xl flex gap-6 flex-col'>
           <h3 className='flex gap-2 items-center text-2xl tracking-wide lg:mb-8'>
             <MdFilterList /> Filters
@@ -65,7 +65,7 @@ function ProductsPage({
             </Link>
           </div>
           <div className='bg-white drop-shadow-lg rounded-xl p-4 flex flex-col gap-4'>
-            <div className='flex flex-wrap gap-4 items-center justify-start w-full'>
+            <div className='flex flex-wrap gap-4 items-center justify-center md:justify-start w-full'>
               {items.map((item) => (
                 <Link
                   key={item.id}