Merge pull request #2 from Shubham-Lal/main

client: switch to masonry layout
Casuals4Fun · Jun 16, 2024 · e74ca86 · e74ca86
2 parents 221ae1a + 14da45a
commit e74ca86
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 20 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -69,14 +69,20 @@
     user-select: none;
 }
 
-.grid-debates {
+.column-debates {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
 }
 
 @media screen and (max-width: 1880px) {
-    .grid-debates {
-        grid-template-columns: repeat(2, 1fr);
+    .column-debates {
+        display: block;
+        columns: 2;
+    }
+
+    .card-break {
+        break-inside: avoid;
+        margin-bottom: 20px;
     }
 }
 
@@ -98,9 +104,15 @@
         display: none;
     }
 
-    .debates.grid-debates {
+    .debates.column-debates {
+        columns: unset;
         display: flex;
     }
+
+    .card-break {
+        break-inside: avoid;
+        margin-bottom: 0;
+    }
 }
 
 @media screen and (max-width: 767px) {

diff --git a/client/src/components/card/closed-debate-card.tsx b/client/src/components/card/closed-debate-card.tsx
@@ -11,7 +11,7 @@ const ClosedDebateCard = () => {
     const { sidebar } = useNavStore();
 
     return (
-        <div id='closed-card'>
+        <div id='closed-card' className={sidebar ? '' : 'card-break'}>
             <div className={`left ${sidebar ? '' : 'flex-unset'}`}>
                 <h2 title='Sony is the best camera of all time.' onClick={() => navigate('/')}>
                     Sony is the best camera of all time. Sony is the best camera of all time. Sony is the best camera of all time.
@@ -56,7 +56,7 @@ const ClosedDebateLoadingCard = () => {
     const { sidebar } = useNavStore();
 
     return (
-        <div id='closed-card-loading'>
+        <div id='closed-card-loading' className={sidebar ? '' : 'card-break'}>
             <div className={`left ${sidebar ? '' : 'flex-unset'}`}>
                 <div className='topic'>
                     <LoadingSkeleton />

diff --git a/client/src/components/card/open-debate-card.tsx b/client/src/components/card/open-debate-card.tsx
@@ -1,15 +1,17 @@
 import "./open-debate-card.css"
 import { useNavigate, Link } from "react-router-dom"
+import { useNavStore } from "../../store/useNavStore"
 import { MdModeComment } from "react-icons/md"
 import { IoCaretUpSharp } from "react-icons/io5"
 import useFormatNumber from "../../hooks/useFormatNumber"
 import LoadingSkeleton from "../loading/skeleton"
 
 const OpenDebateCard = () => {
     const navigate = useNavigate();
+    const { sidebar } = useNavStore();
 
     return (
-        <div id='open-card'>
+        <div id='open-card' className={sidebar ? '' : 'card-break'}>
             <div className='debate-header'>
                 <h2 title='Artificial Intelligence – Is AI good for society or not?' onClick={() => navigate('/')}>
                     Artificial Intelligence – Is AI good for society or not?
@@ -46,8 +48,10 @@ const OpenDebateCard = () => {
 }
 
 const OpenDebateLoadingCard = () => {
+    const { sidebar } = useNavStore();
+
     return (
-        <div id='open-card-loading'>
+        <div id='open-card-loading' className={sidebar ? '' : 'card-break'}>
             <div className='debate-header'>
                 <LoadingSkeleton />
                 <LoadingSkeleton />

diff --git a/client/src/pages/home/index.tsx b/client/src/pages/home/index.tsx
@@ -10,7 +10,7 @@ export default function HomePage() {
   const { sidebar } = useNavStore();
 
   return (
-    <div className={`debates ${sidebar ? '' : 'grid-debates'}`}>
+    <div className={`debates ${sidebar ? '' : 'column-debates'}`}>
       {(isAuthenticated === AuthStatus.Authenticating || isAuthenticated === AuthStatus.Failed) && (
         <ClaimUsername />
       )}

diff --git a/client/src/pages/hot-topics/index.tsx b/client/src/pages/hot-topics/index.tsx
@@ -6,7 +6,7 @@ export default function HotTopicsPage() {
     const { sidebar } = useNavStore();
 
     return (
-        <div className={`debates ${sidebar ? '' : 'grid-debates'}`}>
+        <div className={`debates ${sidebar ? '' : 'column-debates'}`}>
             <ClosedDebateLoadingCard />
             <ClosedDebateCard />
             <ClosedDebateLoadingCard />

diff --git a/client/src/pages/open-topics/index.tsx b/client/src/pages/open-topics/index.tsx
@@ -6,7 +6,7 @@ export default function OpenTopicsPage() {
     const { sidebar } = useNavStore();
 
     return (
-        <div className={`debates ${sidebar ? '' : 'grid-debates'}`}>
+        <div className={`debates ${sidebar ? '' : 'column-debates'}`}>
             <OpenDebateLoadingCard />
             <OpenDebateCard />
             <OpenDebateLoadingCard />

diff --git a/client/src/pages/search/index.tsx b/client/src/pages/search/index.tsx
@@ -23,10 +23,6 @@ export default function SearchPage() {
         }
     }, [location.search, navigate]);
 
-    const handleClearSearchTerm = () => {
-        navigate("/search");
-    }
-
     return (
         <div id='search'>
             <Explore term={searchTerm} />
@@ -37,11 +33,8 @@ export default function SearchPage() {
                         <h1>
                             Showing results for <span>{searchTerm}</span>
                         </h1>
-                        <button className='clear-term'>
-                            <IoMdClose
-                                size={20}
-                                onClick={handleClearSearchTerm}
-                            />
+                        <button className='clear-term' onClick={() => navigate("/search")}>
+                            <IoMdClose size={20} />
                         </button>
                     </div>
                 </>