row of 4 tools, pagination 16 per page

Prototypr · Feb 9, 2024 · 8c14648 · 8c14648
1 parent 2653137
commit 8c14648
Show file tree

Hide file tree

Showing 12 changed files with 23 additions and 23 deletions.
diff --git a/components/toolbox/ToolboxIndexPage.jsx b/components/toolbox/ToolboxIndexPage.jsx
@@ -63,7 +63,7 @@ const ToolboxIndexPage = ({
           }}
           className="relative bg-white shadow-sm rounded-b-[3.4rem] -mt-[96px] pt-[86px] md:pt-[96px] pb-20 overflow-hidden px-1 xs:px-3 sm:px-6"
         >
-          <div className="relative max-w-[1200px] mx-auto w-full h-full px-3 z-10">
+          <div className="relative max-w-[1320px] mx-auto w-full h-full px-3 z-10">
             <Breadcrumbs
               urlRoot={urlRoot}
               title={title}
@@ -90,7 +90,7 @@ const ToolboxIndexPage = ({
 {/* {title} */}
 
 
-      <Container padding={false} maxWidth="max-w-[1200px] px-6 mx-auto xl:px-3 grid grid-cols-12">
+      <Container padding={false} maxWidth="max-w-[1320px] px-6 mx-auto xl:px-3 grid grid-cols-12">
 
       <Sidebar
           title={title}
@@ -109,7 +109,7 @@ const ToolboxIndexPage = ({
 
                 <ToolImageCard
                   posts={allPosts}
-                  columns={"lg:grid-cols-3"}
+                  columns={"lg:grid-cols-4"}
                   type="toolbox"
                 />
 

diff --git a/components/v4/card/CategoriesIconCard.js b/components/v4/card/CategoriesIconCard.js
@@ -22,15 +22,8 @@ const CategoriesIconCard = ({ topic, withBackground, showCount }) => {
           });
         }}
         className="flex"
-      ><div className={`${withBackground?'bg-white rounded-xl p-3':''} bg-gray-100 w-full h-auto rounded-xl cursor-pointer flex flex-col`}>
-          <div className="flex flex-row rounded-xl">
-          <div
-              // style={{ flex: "0 0 3em" }}
-              className="w-12 h-12 bg-white/90 p-3 my-auto mr-3 relative rounded-full  overflow-hidden"
-            >
-              {topic.icon?
-              <img className="w-full h-full" src={topic.icon}/>:<Tag weight="fill" className="my-auto mr-3 opacity-20" size={24}/>}
-            </div>
+      ><div className={`${withBackground?'bg-white rounded-xl p-4':''} bg-gray-100 w-full h-auto rounded-xl cursor-pointer flex flex-col`}>
+          <div className="flex flex-row justify-between rounded-xl">
             <div className="flex flex-col pl-1 justify-center">
               <div className="capitalize overflow-hidden line-clamp-1 inline font-medium py-0 mb-0.5 font-inter text-base">
                 {topic?.name}
@@ -52,6 +45,13 @@ const CategoriesIconCard = ({ topic, withBackground, showCount }) => {
                 ""
               )}
             </div>
+            <div
+              // style={{ flex: "0 0 3em" }}
+              className="w-12 h-12 bg-white/90 p-3 my-auto relative rounded-full  overflow-hidden"
+            >
+              {topic.icon?
+              <img className="w-full h-full" src={topic.icon}/>:<Tag weight="fill" className="my-auto mr-3 opacity-20" size={24}/>}
+            </div>
           </div>
         </div>
       </Link>

diff --git a/components/v4/card/ToolImageCard.js b/components/v4/card/ToolImageCard.js
@@ -6,7 +6,7 @@ import gumletLoader from "@/components/new-index/gumletLoader";
 
 const ToolImageCard = ({ posts, type, columns, tagNumber }) => {
   return (
-    <div className={`grid grid-cols-1 ${columns?columns:'lg:grid-cols-3'} gap-8 w-full flex-wrap`}>
+    <div className={`grid grid-cols-1 ${columns?columns:'lg:grid-cols-3'} gap-6 w-full flex-wrap`}>
       {posts.map((post, i) => {
         let title, slug, coverImage, tags, logo;
 
@@ -55,7 +55,7 @@ const ToolImageCard = ({ posts, type, columns, tagNumber }) => {
             style={{
             //   background: this.state.backgroundShimmer,
               display: "flex",
-              height: "195px",
+              height: "145px",
             }}
           >
             <div className="absolute top-0 left-0 z-10 rounded-2xl w-full h-full bg-gradient-to-b from-black/5 via-black/10 to-black/40"></div>

diff --git a/pages/prototyping/[tag]/page/[pageNo].js b/pages/prototyping/[tag]/page/[pageNo].js
@@ -10,7 +10,7 @@ import {
 
 import { find_page_slug_from_menu, get_slugs_from_menu } from '@/lib/menus/lib/getAllTagsFromMenu'
 
-const PAGE_SIZE = 15;
+const PAGE_SIZE = 16;
 import ALL_SLUGS_CATEGORY from "@/lib/menus/prototyping";
 
 const BREADCRUMBS = {

diff --git a/pages/prototyping/page/[pageNo].js b/pages/prototyping/page/[pageNo].js
@@ -9,7 +9,7 @@ import get_all_tags from '@/lib/menus/lib/getAllTagsFromMenu'
 import ALL_SLUGS_CATEGORY from '@/lib/menus/prototyping'
 import Footer from "@/components/footer";
 
-const PAGE_SIZE = 15;
+const PAGE_SIZE = 16;
 
 const BREADCRUMBS = {
     pageTitle:'Prototyping',

diff --git a/pages/toolbox/[slug]/page/[pageNo].js b/pages/toolbox/[slug]/page/[pageNo].js
@@ -14,7 +14,7 @@ import {
 import { useEffect } from "react";
 import Footer from "@/components/footer";
 
-const PAGE_SIZE = 15;
+const PAGE_SIZE = 16;
 
 const BREADCRUMBS = {
   pageTitle: "Toolbox",

diff --git a/pages/toolbox/augmented-reality-tools/[tag]/page/[pageNo].js b/pages/toolbox/augmented-reality-tools/[tag]/page/[pageNo].js
@@ -8,7 +8,7 @@ import { find_page_slug_from_menu, get_slugs_from_menu } from '@/lib/menus/lib/g
 
 import ALL_SLUGS_CATEGORY from '@/lib/menus/realityTools'
 
-const PAGE_SIZE = 15;
+const PAGE_SIZE = 16;
 
 const BREADCRUMBS = {
     pageTitle:'Miex Reality',

diff --git a/pages/toolbox/augmented-reality-tools/page/[pageNo].js b/pages/toolbox/augmented-reality-tools/page/[pageNo].js
@@ -5,7 +5,7 @@ import { getAllPostsForToolsSubcategoryPage, getPostsByPageForToolsSubcategoryPa
 import ToolboxIndexPage from "@/components/toolbox/ToolboxIndexPage";
 
 
-const PAGE_SIZE = 15;
+const PAGE_SIZE = 16;
 
 import get_all_tags from '@/lib/menus/lib/getAllTagsFromMenu'
 import ALL_SLUGS_CATEGORY from '@/lib/menus/realityTools'

diff --git a/pages/toolbox/conversational-design-tools/[tag]/page/[pageNo].js b/pages/toolbox/conversational-design-tools/[tag]/page/[pageNo].js
@@ -4,7 +4,7 @@ import { getAllPostsForToolsSubcategoryPage, getPostsByPageForToolsSubcategoryPa
 import ToolboxIndexPage from "@/components/toolbox/ToolboxIndexPage";
 
 import { find_page_slug_from_menu, get_slugs_from_menu } from '@/lib/menus/lib/getAllTagsFromMenu'
-const PAGE_SIZE = 15;
+const PAGE_SIZE = 16;
 
 import ALL_SLUGS_CATEGORY from '@/lib/menus/chatTools'
 import Footer from "@/components/footer";

diff --git a/pages/toolbox/conversational-design-tools/page/[pageNo].js b/pages/toolbox/conversational-design-tools/page/[pageNo].js
@@ -10,7 +10,7 @@ import get_all_tags from '@/lib/menus/lib/getAllTagsFromMenu'
 import ALL_SLUGS_CATEGORY from '@/lib/menus/chatTools'
 import Footer from "@/components/footer";
 
-const PAGE_SIZE = 15;
+const PAGE_SIZE = 16;
 
 const BREADCRUMBS = {
     pageTitle:'Conversational Design',

diff --git a/pages/toolbox/ux-tools/[tag]/page/[pageNo].js b/pages/toolbox/ux-tools/[tag]/page/[pageNo].js
@@ -7,7 +7,7 @@ import ALL_SLUGS_GROUPS from "@/lib/menus/uxTools";
 import { find_page_slug_from_menu, get_slugs_from_menu } from '@/lib/menus/lib/getAllTagsFromMenu'
 import Footer from "@/components/footer";
 
-const PAGE_SIZE = 15;
+const PAGE_SIZE = 16;
 
 const BREADCRUMBS = {
   pageTitle:'UX Tools',

diff --git a/pages/toolbox/ux-tools/page/[pageNo].js b/pages/toolbox/ux-tools/page/[pageNo].js
@@ -10,7 +10,7 @@ import get_all_tags from '@/lib/menus/lib/getAllTagsFromMenu'
 import ALL_SLUGS_GROUPS from "@/lib/menus/uxTools";
 import Footer from "@/components/footer";
 
-const PAGE_SIZE = 15;
+const PAGE_SIZE = 16;
 
 const BREADCRUMBS = {
     pageTitle:'UX Tools',