responsive layout

Prototypr · Feb 29, 2024 · 4e3d6ad · 4e3d6ad
1 parent 37ca3c0
commit 4e3d6ad
Show file tree

Hide file tree

Showing 19 changed files with 35 additions and 33 deletions.
diff --git a/components/Dashboard/Dashboard.jsx b/components/Dashboard/Dashboard.jsx
@@ -33,7 +33,7 @@ const Dashboard = ({postStatus, postType, currentTab}) => {
   return (
   <>
       <div>
-            <div className="grid grid-cols-12 gap-6">
+            <div className="grid grid-cols-12 gap-4 md:gap-6">
               {!loading &&
                 posts?.map((post) => (
                   <PostCard refetch={refetch} user={user} post={post} />

diff --git a/components/Dashboard/PostCard.jsx b/components/Dashboard/PostCard.jsx
@@ -61,7 +61,7 @@ const PostCard = ({ post, refetch, user }) => {
     };
 
     return (
-      <div className="flex flex-row justify-between p-6 h-full rounded-lg border shadow-sm border-black/5 hover:border-opacity-10 cursor-default bg-white hover:transition duration-300 ease-in-out col-span-12">
+      <div className="flex flex-row justify-between p-4 md:p-6 h-full rounded-lg border shadow-sm border-black/5 hover:border-opacity-10 cursor-default bg-white hover:transition duration-300 ease-in-out col-span-12">
         <div className="flex flex-col grid gap-2">
           {(post.status!=='publish' && post.status!=='draft') &&
           <div>
@@ -125,7 +125,7 @@ const PostCard = ({ post, refetch, user }) => {
             </div>
           )}
           {post.type=='tool'? (
-            <div>
+            <div className="hidden md:block">
               <Link href={`/toolbox/post/${post.id}/deal`}>
                 <button className="text-lg bg-white underline text-black  p-3  rounded-full hover:bg-gray-100 ">
                   <Gift size={18}/>

diff --git a/components/people/ProfilePageLayout.js b/components/people/ProfilePageLayout.js
@@ -299,10 +299,10 @@ const ProfilePageLayout = ({
           </div>
 
           <div className="flex-1 z-20 -mt-[120px]">
-            <div className="px-3 max-w-[1320px] mx-auto mb-20 mt-6 lg:mt-0">
-            {unapproved?<div className="px-6 mt-[60px]">
+            <div className="max-w-[1320px] mx-auto mb-20 mt-6 lg:mt-0">
+            {unapproved?<div className="mt-[60px]">
             <div className="mt-3 flex w-full bg-white shadow p-4 px-4 rounded-xl text-black/90 max-w-3xl mx-auto">
-            <div className="mr-4 my-auto">
+            <div className="hidden md:block mr-4 my-auto">
             <CircleWavyCheck size="44"/>
             </div>
             <div className="flex flex-col max-w-4xl">

diff --git a/components/toolbox/forms/DescriptionExcerptForm.js b/components/toolbox/forms/DescriptionExcerptForm.js
@@ -115,7 +115,7 @@ const [disabled, setDisabled] = useState(false);
     },[postObject])
 
     return(
-        <div className="max-w-2xl pt-6 pb-20 w-full">
+        <div className="px-6 md:px-0 max-w-2xl pt-6 pb-20 w-full">
             <div className="my-2 mb-6 ">
             <h1 className="text-2xl font-semibold mx-auto mb-2">Add your description</h1>
             <p className="text-gray-600">Write a longer description, and a short excerpt.</p>

diff --git a/components/toolbox/forms/MediaForm.js b/components/toolbox/forms/MediaForm.js
@@ -206,7 +206,7 @@ const [disabled, setDisabled] = useState(false);
     // },[postObject])
 
     return(
-        <div className="max-w-2xl pt-6 pb-20 w-full">
+        <div className="px-6 md:px-0 max-w-2xl pt-6 pb-20 w-full">
             <div className="my-2 mb-6">
             <h1 className="text-2xl font-semibold mx-auto mb-2">Add media</h1>
             <p className="text-gray-600">Upload your logo and multiple gallery images.</p>

diff --git a/components/toolbox/forms/TitleLinkFormEdit.js b/components/toolbox/forms/TitleLinkFormEdit.js
@@ -110,7 +110,7 @@ const [disabled, setDisabled] = useState(false);
 
     return(
       <div className="flex justify-start pt-3 w-full h-full">
-      <div className="max-w-2xl pt-3 w-full">
+      <div className="px-6 md:px-0 max-w-2xl pt-3 w-full">
           <div className="my-2 mb-6 ">
           <h1 className="text-4xl font-semibold mx-auto mb-3">Update {postObject.title}</h1>
             <p className="text-gray-600">Make changes to the title and link.</p>

diff --git a/components/v4/card/SmallCard/SmallCardStacked.js b/components/v4/card/SmallCard/SmallCardStacked.js
@@ -2,7 +2,7 @@ import Image from "next/image";
 import Link from "next/link";
 import Avatar from "../../avatar/AvatarLine";
 import SmallTag from "../../tag/SmallTag";
-import Moment from "react-moment";
+// import Moment from "react-moment";
 import gumletLoader from "@/components/new-index/gumletLoader";
 
 const SmallCardStacked = ({ title, image, tags, date, avatar, author, showAuthor, link }) => {
@@ -45,7 +45,7 @@ const SmallCardStacked = ({ title, image, tags, date, avatar, author, showAuthor
         </div>}
         <div>
           <Link href={link}>
-            <h2 className="md:ml-0 text-sm md:text-lg font-semibold leading-snug line-clamp-3">
+            <h2 className="md:ml-0 mb-3 md:mb-0 text-sm md:text-lg font-semibold leading-snug line-clamp-3">
               {title}
             </h2>
           </Link>

diff --git a/components/v4/layout/PostGroupRow.js b/components/v4/layout/PostGroupRow.js
@@ -10,14 +10,14 @@ import { useIntl } from "react-intl";
 const PostGroupRow = ({ largePost, smallPosts, description,title,topicObject }) => {
   let url = largePost?.attributes?.featuredImage?.data?.attributes?.url;
   const dummyAvatar = 'https://s3-us-west-1.amazonaws.com/tinify-bucket/%2Fprototypr%2Ftemp%2F1595435549331-1595435549330.png'
-  const largeCoverImage = url
-    ? url
-    : largePost?.attributes?.legacyFeaturedImage?.mediaItemUrl?largePost?.attributes?.legacyFeaturedImage?.mediaItemUrl:dummyAvatar;
+  // const largeCoverImage = url
+  //   ? url
+  //   : largePost?.attributes?.legacyFeaturedImage?.mediaItemUrl?largePost?.attributes?.legacyFeaturedImage?.mediaItemUrl:dummyAvatar;
 
-    let authorData = largePost?.attributes?.author?.data?.attributes
-    let largePostAvatar = authorData?.avatar?.data?authorData?.avatar?.data?.attributes?.url:authorData?.legacyAvatar?authorData?.legacyAvatar:dummyAvatar
+    // let authorData = largePost?.attributes?.author?.data?.attributes
+    // let largePostAvatar = authorData?.avatar?.data?authorData?.avatar?.data?.attributes?.url:authorData?.legacyAvatar?authorData?.legacyAvatar:dummyAvatar
 
-    const intl = useIntl();
+    // const intl = useIntl();
     return (
     <>
 

diff --git a/components/v4/layout/ToolIconCardRow.js b/components/v4/layout/ToolIconCardRow.js
@@ -9,7 +9,7 @@ const ToolIconCardRow = ({ tools, title, textColor, withBackground, showHeader }
     <div className="flex flex-col w-full">
     {/* <Container maxWidth="max-w-[1320px] w-full"> */}
       {showHeader!==false && <div className="flex justify-between mb-4">
-        <h3 className="font-semibold text-2xl px-1">
+        <h3 className="font-semibold text-lg md:text-2xl px-1">
          {title?title:
          <>
          Latest tools

diff --git a/components/v4/section/HeroArticleSection.js b/components/v4/section/HeroArticleSection.js
@@ -4,7 +4,7 @@ import HeroPostGrid from "../layout/HeroPostGrid";
 // import {RssSimple} from 'phosphor-react'
 const HeroArticleSection = ({user, heroCardPost,showBigPost, viewablePosts, cols,title, showHeading,showHeadingRow }) => {
   return (
-    <Container maxWidth="max-w-[1320px]">
+    <Container padding={false} maxWidth="max-w-[1320px] mx-auto px-6">
       {/* <div className="w-full shadow-md h-full grid grid-cols-12 flex justify-center bg-white rounded-3xl p-6 lg:p-6"> */}
       <div className="w-full h-full grid grid-cols-12 flex justify-center">
         <div className={`w-full max-w-full flex flex-col col-span-12 `}>

diff --git a/components/v4/section/PostsSectionHero.js b/components/v4/section/PostsSectionHero.js
@@ -43,7 +43,7 @@ const PostsSectionHero = ({user, heroCardPost,toolsList,showHeroTitle,groupSlice
        <TagsNavRow/>
      </div>
       }
-      <div className="w-full h-full grid grid-cols-12 flex justify-center px-3">
+      <div className="w-full h-full grid grid-cols-12 flex justify-center md:px-3">
         <div className={`${!showRecent?'-mt-4':''} w-full max-w-full flex flex-col gap-2 col-span-12 `}>
          <div className="flex justify-between">
             {showTitle!==false &&

diff --git a/components/v4/section/TopicIndexSection.js b/components/v4/section/TopicIndexSection.js
@@ -2,7 +2,7 @@
 import Container from "@/components/container";
 // import LargePostGridC from "@/components/v4/layout/LargePostGridB";
 // import TopicsGridHome from "../layout/TopicsGridHome";
-import PostsGroup3Cards from "../layout/PostsGroup3Cards";
+// import PostsGroup3Cards from "../layout/PostsGroup3Cards";
 import { ArrowRight, Tag } from "phosphor-react";
 import Link from "next/link";
 import { useIntl } from "react-intl";
@@ -13,7 +13,7 @@ const TopicIndexSection = ({index,user, heroCardPost, viewablePosts, jobsSidebar
 
   const intl = useIntl();
   return (
-    <Container maxWidth="max-w-[1320px]">
+    <Container padding={false} maxWidth="px-3 max-w-[1320px]">
       <div className={`w-full h-full grid grid-cols-12 flex justify-center rounded-3xl`}>
         <div className={`w-full max-w-full flex flex-col gap-2 col-span-12 py-3 `}>
           {/* <LargePostGridC title={title} largePost={heroCardPost} smallPosts={viewablePosts} /> */}
@@ -28,7 +28,7 @@ const TopicIndexSection = ({index,user, heroCardPost, viewablePosts, jobsSidebar
           <div className="flex w-full justify-between mb-3 md:mb-6">
             <div className="flex">
               <Tag className="inline-block my-auto mr-3" size={32}/>
-              <h2 className="text-2xl md:text-3xl capitalize font-semibold text-black/90">
+              <h2 className="text-xl my-auto md:text-3xl capitalize font-semibold text-black/90">
               {intl.formatMessage({ id: title })}
               </h2>
             </div>

diff --git a/components/v4/text/RSSTitle.js b/components/v4/text/RSSTitle.js
@@ -7,10 +7,9 @@ const RSSTitle = ({title}) =>{
         <div className="flex px-1">
             <h2 className="text-2xl drop-shadow-sm text-black/90 font-semibold font-inter max-w-md flex flex-col justify-center">
              {title?intl.formatMessage({ id: title }):
-             <>
-            Trending articles
-            {/* <span className="hidden md:inline text-gray-400">articles</span> */}
-             </>
+             <div className="inline-flex">
+            Trending <span className="hidden md:inline ml-2">articles</span>
+             </div>
              } 
             </h2>
             {!title ?<div className="flex ml-2 flex-col justify-center">

diff --git a/pages/index.js b/pages/index.js
@@ -195,7 +195,7 @@ export default function Index({
         {/* <img src='/static/images/toolpattern.svg' style={{opacity:0.37}} className="absolute top-0 -mt-[200px] left-0 w-full h-[124%] object-cover"/> */}
         {/* <img src='/static/images/toolpattern.svg' style={{opacity:0.37}} className="absolute top-0 -mt-[150px] left-0 w-full h-[124%] object-cover"/> */}
 
-          <div className="max-w-[1320px] mx-auto px-6 pb-16 ">
+          <div className="max-w-[1320px] mx-auto md:px-6 pb-16 ">
           <div className="flex justify-between mb-8">
               <h3 className="text-3xl text-black/90 font-semibold font-inter max-w-md leading-[32px]">
               Browse by <span className="text-underline">category</span>

diff --git a/pages/people/index.js b/pages/people/index.js
@@ -36,7 +36,7 @@ export default function PeoplePage({
 
   return (
     <Layout activeNav={"people"}>
-      <Container maxWidth="max-w-[1320px] mx-auto pb-16">
+      <Container padding={false} maxWidth="max-w-[1320px] px-3 mx-auto pb-16">
       {router.isFallback ? (
           <PostTitle>Loading…</PostTitle>
         ) :

diff --git a/pages/people/page/[pageNo].js b/pages/people/page/[pageNo].js
@@ -37,7 +37,7 @@ export default function PeoplePage({
 
   return (
     <Layout activeNav={"people"} preview={preview}>
-      <Container maxWidth="max-w-[1320px] mx-auto pb-16">
+      <Container padding={false} maxWidth="px-3 max-w-[1320px] mx-auto pb-16">
       {router.isFallback ? (
           <PostTitle>Loading…</PostTitle>
         ) :

diff --git a/pages/toolbox/post/[id]/index.js b/pages/toolbox/post/[id]/index.js
@@ -190,7 +190,7 @@ const ToolSteps = ({user, postObject, refetchPost}) =>{
     </Step>
     <Step key={`page/4`} id={'4'}>
         <div className="flex items-center justify-start h-full w-full relative">
-          <div className="max-w-2xl pt-6 pb-20 w-full">
+          <div className="px-6 md:px-0 max-w-2xl pt-6 pb-20 w-full">
               <div className="my-2 mb-6">
               {postObject.status=='draft'?
               <>

diff --git a/pages/topics.js b/pages/topics.js
@@ -146,7 +146,7 @@ export default function Index({
         {/* </Container> */}
         <SectionDivider py="py-1" transparentLine={true} />
         {/* <Container maxWidth="max-w-[1320px] pb-24 mt-1"> */}
-        <Container maxWidth="max-w-[1320px] mb-8">
+        <Container padding={false} maxWidth="max-w-[1320px] mb-8 px-3">
           {/* <div className="rounded-3xl p-3 relative md:p-10 shadow bg-white"> */}
           <div className="relative">
           {/* <img src='/static/images/toolbox/squares2.svg' className="-scale-x-100 rounded-xl opacity-30  absolute w-full h-full object-cover top-0 left-0"/> */}
@@ -168,7 +168,7 @@ export default function Index({
         </Container>
         {/* </Container> */}
 
-        <Container maxWidth="max-w-[1320px]">
+        <Container maxWidth="max-w-[1320px] hidden md:block">
           {/* <h2 className={`text-xl mb-6 font-medium`}>
         Featured Topics
       </h2> */}

diff --git a/styles/index.scss b/styles/index.scss
@@ -594,6 +594,9 @@ box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
   // padding: 1.6rem;
 }
 @media (max-width: 600px) {
+  [data-radix-popper-content-wrapper]{
+    z-index:99!important;
+  }
   .embla {
     --slide-spacing: 0.6rem;
     --slide-size: 90%;