client: modify debate card ui

Casuals4Fun · Jul 15, 2024 · ed86219 · ed86219
1 parent 4c7f0d5
commit ed86219
Show file tree

Hide file tree

Showing 14 changed files with 44 additions and 105 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,13 +60,11 @@
     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;
 }
@@ -91,11 +79,6 @@
         display: block;
         columns: 2;
     }
-
-    /* .card-break {
-        break-inside: avoid;
-        margin-bottom: 20px;
-    } */
 }
 
 @media screen and (max-width: 1024px) {
@@ -196,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,25 +1,12 @@
 #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: 15px 15px 0 15px;
-    /* padding: 20px 15px 0 15px; */
 }
 
 #closed-card .left,
 #closed-card-loading .left {
-    flex: 1.2;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -28,10 +15,6 @@
 #closed-card .right,
 #closed-card-loading .right {
     padding-top: 10px;
-    padding-bottom: 15px;
-    /* padding-top: 30px;
-    padding-bottom: 30px; */
-    flex: 0.8;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -40,10 +23,10 @@
 
 #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 {
@@ -196,12 +179,10 @@
 
 #closed-card .debate-bar__container {
     padding-top: 10px;
-    /* padding-top: 15px; */
 }
 
 #closed-card-loading .right .debate-bar {
     margin-top: 10px;
-    /* margin-top: 15px; */
 }
 
 #closed-card-loading .right .debate-bar .loading-skeleton {
@@ -212,7 +193,6 @@
 #closed-card .right .debate-info,
 #closed-card-loading .right .debate-info {
     padding-top: 10px;
-    /* padding-top: 20px; */
     display: flex;
     justify-content: space-between;
 }
@@ -244,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;
@@ -257,14 +232,6 @@
     #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 p {
@@ -289,11 +256,11 @@
     }
 
     #closed-card .right .debate-info {
-        padding-top: 15px;
+        padding-top: 10px;
     }
 
     #closed-card-loading .right .debate-info {
-        padding-top: 15px;
+        padding-top: 10px;
     }
 }
 
@@ -305,4 +272,9 @@
     #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
@@ -20,14 +20,12 @@ const ClosedDebateCard = () => {
                 <h2 title='Sony is the best camera of all time. ↗' onClick={() => navigate('/')}>
                     Sony is the best camera of all time.
                 </h2>
-                {/* <p>
+                <p>
                     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. 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>
     )
 }
@@ -65,18 +64,14 @@ const ClosedDebateLoadingCard = () => {
                 <div className='topic'>
                     <LoadingSkeleton />
                 </div>
-                {/* <div className='description'>
+                <div className='description'>
                     <LoadingSkeleton />
                     <LoadingSkeleton />
                     <LoadingSkeleton />
                     <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,13 +1,3 @@
-#open-card,
-#open-card-loading {
-    /* min-height: 270px; */
-    padding: 15px;
-    /* 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;
@@ -97,7 +87,6 @@
 #open-card-loading .user-info {
     width: 70%;
     padding: 10px 0;
-    /* padding: 10px 0 15px 0; */
     display: flex;
     gap: 10px;
     align-items: center;
@@ -183,13 +172,15 @@
     border-radius: 30px;
 }
 
-@media screen and (max-width: 1536px) {
-
-    /* #open-card,
-    #open-card-loading {
-        min-height: auto;
-    } */
+#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;
     }
@@ -215,4 +206,9 @@
     #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
@@ -22,11 +22,11 @@ const OpenDebateCard = () => {
                 </h2>
                 <Link to='/'>Debate</Link>
             </div>
-            {/* <p className='debate-body'>
+            <p className='debate-body'>
                 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. 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> */}
+            </p>
             <div className='user-info'>
                 <img src="/user.jpg" alt="" loading="lazy" onClick={() => handleProfileClick('julieroberts')} />
                 <div className='user-detail'>
@@ -47,26 +47,27 @@ 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'>
                 <LoadingSkeleton />
                 <LoadingSkeleton />
             </div>
-            {/* <div className='debate-body'>
+            <div className='debate-body'>
                 <LoadingSkeleton />
                 <LoadingSkeleton />
                 <LoadingSkeleton />
                 <LoadingSkeleton />
                 <LoadingSkeleton />
-            </div> */}
+            </div>
             <div className='user-info'>
                 <div className='img'>
                     <LoadingSkeleton />
@@ -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;
     }

diff --git a/client/src/components/sidebar/explore.css b/client/src/components/sidebar/explore.css
@@ -59,9 +59,6 @@
 }
 
 #explore .explore-btns a {
-    /* padding: 7.5px 20px;
-    background-color: var(--card_background);
-    border: 1px solid var(--explore_input_bg); */
     padding: 7.5px 15px;
     background-color: var(--body_background);
     border-radius: 20px;

diff --git a/client/src/components/sidebar/left-sidebar.css b/client/src/components/sidebar/left-sidebar.css
@@ -35,7 +35,6 @@
     list-style: none;
     max-width: fit-content;
     height: 100%;
-    /* max-height: 100dvh; */
     max-height: 100svh;
     margin: 0 auto;
     display: flex;