client: modify debate card ui

Casuals4Fun · Jul 15, 2024 · 1c432ed · 1c432ed
2 parents 4169ff7 + ed86219
commit 1c432ed
Show file tree

Hide file tree

Showing 14 changed files with 52 additions and 118 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -16,23 +16,13 @@
 }
 
 #right-sidebar {
-    /* max-height: 100dvh; */
     max-height: 100svh;
 }
 
 #main {
     width: 40%;
-    /* height: 100dvh; */
     height: 100svh;
     overflow-y: auto;
-    --dot-bg: var(--body_background);
-    --dot-color: #4C4E52;
-    --dot-size: 1px;
-    --dot-space: 15px;
-    background:
-        linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
-        linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
-        var(--dot-color);
     border-left: 1px solid var(--explore_input_bg);
     border-right: 1px solid var(--explore_input_bg);
 }
@@ -70,25 +60,25 @@
     padding: 20px;
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: 30px;
     user-select: none;
 }
 
 .column-debates {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    display: block;
+    columns: 3;
+}
+
+.card-break {
+    break-inside: avoid;
+    margin-bottom: 20px;
 }
 
 @media screen and (max-width: 1880px) {
     .column-debates {
         display: block;
         columns: 2;
     }
-
-    .card-break {
-        break-inside: avoid;
-        margin-bottom: 20px;
-    }
 }
 
 @media screen and (max-width: 1024px) {
@@ -189,7 +179,7 @@
     }
 
     .debates {
-        padding: 10px;
-        gap: 10px;
+        padding: 20px 10px;
+        gap: 20px;
     }
 }
diff --git a/client/src/components/card/closed-debate-card.css b/client/src/components/card/closed-debate-card.css
@@ -1,33 +1,20 @@
 #closed-card,
 #closed-card-loading {
-    min-height: 270px;
-    background-color: var(--card_background);
-    border: 1px solid var(--card_border);
     display: flex;
+    flex-direction: column;
     justify-content: space-between;
-    /* border-radius: 8px; */
-}
-
-#closed-card .left,
-#closed-card-loading .left,
-#closed-card .right,
-#closed-card-loading .right {
-    padding: 20px 15px;
 }
 
 #closed-card .left,
 #closed-card-loading .left {
-    flex: 1.2;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
 #closed-card .right,
 #closed-card-loading .right {
-    padding-top: 30px;
-    padding-bottom: 30px;
-    flex: 0.8;
+    padding-top: 10px;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -36,18 +23,15 @@
 
 #closed-card .divider,
 #closed-card-loading .divider {
-    /* margin: 15px 0;
-    width: 2px;
-    background: linear-gradient(transparent, var(--card_divider), var(--card_divider), transparent); */
-    border-left: 1px solid var(--card_border);
+    margin-top: 30px;
+    width: 100%;
+    height: 0;
+    border-bottom: 1px solid var(--card_border);
 }
 
 #closed-card .left h2 {
     font-size: 20px;
     font-weight: 600;
-    /* max-width: 300px;
-    text-overflow: ellipsis;
-    white-space: nowrap;  */
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 2;
@@ -194,11 +178,11 @@
 }
 
 #closed-card .debate-bar__container {
-    padding-top: 15px;
+    padding-top: 10px;
 }
 
 #closed-card-loading .right .debate-bar {
-    margin-top: 15px;
+    margin-top: 10px;
 }
 
 #closed-card-loading .right .debate-bar .loading-skeleton {
@@ -208,7 +192,7 @@
 
 #closed-card .right .debate-info,
 #closed-card-loading .right .debate-info {
-    padding-top: 20px;
+    padding-top: 10px;
     display: flex;
     justify-content: space-between;
 }
@@ -240,11 +224,6 @@
         flex-direction: column;
     }
 
-    #closed-card .divider,
-    #closed-card-loading .divider {
-        display: none;
-    }
-
     #closed-card .left,
     #closed-card-loading .left {
         padding-bottom: 0;
@@ -253,20 +232,8 @@
     #closed-card .right,
     #closed-card-loading .right {
         padding-top: 10px;
-        padding-bottom: 20px;
-    }
-
-    #closed-card .left.flex-unset,
-    #closed-card-loading .left.flex-unset,
-    #closed-card .right.flex-unset,
-    #closed-card-loading .right.flex-unset {
-        flex: unset;
     }
 
-    /* #closed-card .left h2 {
-        max-width: 350px;
-    } */
-
     #closed-card .left p {
         font-size: 15px;
     }
@@ -289,27 +256,25 @@
     }
 
     #closed-card .right .debate-info {
-        padding-top: 15px;
+        padding-top: 10px;
     }
 
     #closed-card-loading .right .debate-info {
-        padding-top: 15px;
+        padding-top: 10px;
     }
 }
 
-/* @media screen and (max-width: 767px) {
-    #closed-card .left h2 {
-        max-width: 400px;
-    }
-} */
-
 @media screen and (max-width: 480px) {
     #closed-card .left h2 {
-        /* max-width: 100%; */
         font-size: 18px;
     }
 
     #closed-card-loading .left .topic .loading-skeleton {
         height: 23px;
     }
+
+    #closed-card .divider,
+    #closed-card-loading .divider {
+        margin-top: 20px;
+    }
 }
diff --git a/client/src/components/card/closed-debate-card.tsx b/client/src/components/card/closed-debate-card.tsx
@@ -1,5 +1,5 @@
 import "./closed-debate-card.css"
-import { useNavigate, Link } from "react-router-dom"
+import { useNavigate } from "react-router-dom"
 import { useNavStore } from "../../store/useNavStore"
 import DebateBar from "./debate-bar"
 import { MdModeComment } from "react-icons/md"
@@ -25,9 +25,7 @@ const ClosedDebateCard = () => {
                     Fugiat repellat architecto pariatur fugit perspiciatis voluptas quidem autem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non labore necessitatibus reiciendis rem ad perferendis, id officia omnis voluptas eius veritatis explicabo harum! Vero porro labore quo ab aut. Nesciunt!
                     Fugiat repellat architecto pariatur fugit perspiciatis voluptas quidem autem.
                 </p>
-                <Link to='/'>View</Link>
             </div>
-            <div className='divider' />
             <div className={`right ${sidebar ? '' : 'flex-unset'}`}>
                 <div className='user-info'>
                     <div className='debate-from'>
@@ -52,6 +50,7 @@ const ClosedDebateCard = () => {
                     <p className='created-at'>5 days ago</p>
                 </div>
             </div>
+            <div className='divider' />
         </div>
     )
 }
@@ -72,11 +71,7 @@ const ClosedDebateLoadingCard = () => {
                     <LoadingSkeleton />
                     <LoadingSkeleton />
                 </div>
-                <div className='view'>
-                    <LoadingSkeleton />
-                </div>
             </div>
-            <div className='divider' />
             <div className={`right ${sidebar ? '' : 'flex-unset'}`}>
                 <div className='user-info'>
                     <div className='debater'>
@@ -98,6 +93,7 @@ const ClosedDebateLoadingCard = () => {
                     <LoadingSkeleton />
                 </div>
             </div>
+            <div className='divider' />
         </div>
     )
 }

diff --git a/client/src/components/card/open-debate-card.css b/client/src/components/card/open-debate-card.css
@@ -1,12 +1,3 @@
-#open-card,
-#open-card-loading {
-    min-height: 270px;
-    padding: 20px 15px;
-    background-color: var(--card_background);
-    border: 1px solid var(--card_border);
-    /* border-radius: 8px; */
-}
-
 #open-card .debate-header,
 #open-card-loading .debate-header {
     display: flex;
@@ -21,8 +12,6 @@
 #open-card .debate-header h2 {
     font-size: 20px;
     font-weight: 600;
-    /* text-overflow: ellipsis;
-    white-space: nowrap; */
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 2;
@@ -97,7 +86,7 @@
 #open-card .user-info,
 #open-card-loading .user-info {
     width: 70%;
-    padding: 10px 0 15px 0;
+    padding: 10px 0;
     display: flex;
     gap: 10px;
     align-items: center;
@@ -183,17 +172,15 @@
     border-radius: 30px;
 }
 
-@media screen and (max-width: 1536px) {
-
-    #open-card,
-    #open-card-loading {
-        min-height: auto;
-    }
-
-    /* #open-card .debate-header h2 {
-        max-width: 350px;
-    } */
+#open-card .divider,
+#open-card-loading .divider {
+    margin-top: 30px;
+    width: 100%;
+    height: 0;
+    border-bottom: 1px solid var(--card_border);
+}
 
+@media screen and (max-width: 1536px) {
     #open-card .debate-body {
         font-size: 15px;
     }
@@ -213,11 +200,15 @@
     }
 
     #open-card .debate-header h2 {
-        /* max-width: 100%; */
         font-size: 18px;
     }
 
     #open-card-loading .debate-header .loading-skeleton:first-child {
         height: 23px;
     }
+
+    #open-card .divider,
+    #open-card-loading .divider {
+        margin-top: 20px;
+    }
 }
diff --git a/client/src/components/card/open-debate-card.tsx b/client/src/components/card/open-debate-card.tsx
@@ -47,13 +47,14 @@ const OpenDebateCard = () => {
                 </div>
                 <p className='created-date'>15 mins ago</p>
             </div>
+            <div className='divider' />
         </div>
     )
 }
 
 const OpenDebateLoadingCard = () => {
     const { sidebar } = useNavStore();
-    
+
     return (
         <div id='open-card-loading' className={sidebar ? '' : 'card-break'}>
             <div className='debate-header'>
@@ -85,6 +86,7 @@ const OpenDebateLoadingCard = () => {
                     <LoadingSkeleton />
                 </div>
             </div>
+            <div className='divider' />
         </div>
     )
 }

diff --git a/client/src/components/loading/style.css b/client/src/components/loading/style.css
@@ -14,7 +14,6 @@
 }
 
 .loading-component {
-    /* height: calc(100dvh - 40px); */
     height: calc(100svh - 40px);
     display: grid;
     place-items: center;
@@ -47,7 +46,6 @@
 
 @media screen and (max-width: 480px) {
     .loading-component {
-        /* height: calc(100dvh - 150px); */
         height: calc(100svh - 150px);
     }
 }
diff --git a/client/src/components/modal/auth/index.css b/client/src/components/modal/auth/index.css
@@ -4,7 +4,6 @@
     top: 0;
     left: 0;
     right: 0;
-    /* height: 100dvh; */
     height: 100svh;
     backdrop-filter: blur(8px);
     display: flex;
@@ -369,7 +368,6 @@
     }
 
     #auth-modal .form__container .extra-btn {
-        /* align-items: flex-start; */
         gap: 10px;
         flex-direction: column;
     }