client: modify card styling

Casuals4Fun · Jun 17, 2024 · ea58b2d · ea58b2d
2 parents 25b035e + 7531150
commit ea58b2d
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 36 deletions.
diff --git a/client/src/components/card/claim-username.css b/client/src/components/card/claim-username.css
@@ -2,9 +2,9 @@
     --claim-border: #E5E4E2;
     --username-bg: #E5E4E2;
     --username-color: #000;
-    --username-input-bg: #FFF;
+    --username-input-bg: #F9F9F9;
     --username-input-color: #000;
-    --submit-bg: #FFF;
+    --submit-bg: #F9F9F9;
 }
 
 [data-theme='dark'] {
@@ -71,7 +71,6 @@
     padding: 0 20px;
     width: 100%;
     font-size: 16px;
-    font-weight: 600;
     background-color: var(--username-input-bg);
     color: var(--username-input-color);
 }
@@ -114,7 +113,7 @@
 
 @media screen and (max-width: 480px) {
     #claim-username {
-        margin-bottom: 10px;
+        margin-bottom: 5px;
     }
 
     #claim-username .username-input .domain {

diff --git a/client/src/components/card/closed-debate-card.css b/client/src/components/card/closed-debate-card.css
@@ -43,13 +43,20 @@
 #closed-card .left h2 {
     font-size: 20px;
     font-weight: 600;
-    max-width: 300px;
+    /* max-width: 300px;
     text-overflow: ellipsis;
-    white-space: nowrap;
+    white-space: nowrap;  */
     overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
     cursor: pointer;
 }
 
+#closed-card .left h2:hover {
+    text-decoration: underline;
+}
+
 #closed-card-loading .left .topic .loading-skeleton {
     max-width: 300px;
     height: 25px;
@@ -129,17 +136,17 @@
 
 #closed-card .right .user-info .debate-from img,
 #closed-card .right .user-info .debate-by img {
-    width: 60px;
-    height: 60px;
+    width: 40px;
+    height: 40px;
     object-fit: cover;
     border: 2px solid var(--explore_input_bg);
     border-radius: 10px;
     cursor: pointer;
 }
 
 #closed-card-loading .right .user-info .debater .loading-skeleton:nth-child(1) {
-    width: 60px;
-    height: 60px;
+    width: 40px;
+    height: 40px;
     border-radius: 10px;
 }
 
@@ -169,6 +176,15 @@
     font-weight: unset;
 }
 
+#closed-card .right .user-info .debate-from img:hover~p:last-child,
+#closed-card .right .user-info .debate-by img:hover~p:last-child,
+#closed-card .right .user-info .debate-from p:nth-child(2):hover~p:last-child,
+#closed-card .right .user-info .debate-by p:nth-child(2):hover~p:last-child,
+#closed-card .right .user-info .debate-from p:last-child:hover,
+#closed-card .right .user-info .debate-by p:last-child:hover {
+    text-decoration: underline;
+}
+
 #closed-card-loading .right .user-info .debater .loading-skeleton:nth-child(3) {
     width: 60px;
     height: 15px;
@@ -245,9 +261,9 @@
         flex: unset;
     }
 
-    #closed-card .left h2 {
+    /* #closed-card .left h2 {
         max-width: 350px;
-    }
+    } */
 
     #closed-card .left p {
         font-size: 15px;
@@ -279,11 +295,11 @@
     }
 }
 
-@media screen and (max-width: 767px) {
+/* @media screen and (max-width: 767px) {
     #closed-card .left h2 {
         max-width: 400px;
     }
-}
+} */
 
 @media screen and (max-width: 480px) {
 
@@ -293,7 +309,7 @@
     }
 
     #closed-card .left h2 {
-        max-width: 100%;
+        /* max-width: 100%; */
         font-size: 18px;
     }
 

diff --git a/client/src/components/card/closed-debate-card.tsx b/client/src/components/card/closed-debate-card.tsx
@@ -10,11 +10,15 @@ const ClosedDebateCard = () => {
     const navigate = useNavigate();
     const { sidebar } = useNavStore();
 
+    const handleProfileClick = (username: string) => {
+        navigate(`/${username}`);
+    }
+
     return (
         <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.
+                <h2 title='Sony is the best camera of all time. ↗' onClick={() => navigate('/')}>
+                    Sony is the best camera of all time.
                 </h2>
                 <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!
@@ -27,14 +31,14 @@ const ClosedDebateCard = () => {
             <div className={`right ${sidebar ? '' : 'flex-unset'}`}>
                 <div className='user-info'>
                     <div className='debate-from'>
-                        <img src="/user1.webp" alt="" loading="lazy" />
-                        <p>Aniket Das</p>
-                        <p>aniketdas</p>
+                        <img src="/user1.webp" alt="" loading="lazy" onClick={() => handleProfileClick('aniketdas')} />
+                        <p onClick={() => handleProfileClick('aniketdas')}>Aniket Das</p>
+                        <p onClick={() => handleProfileClick('aniketdas')}>aniketdas</p>
                     </div>
                     <div className='debate-by'>
-                        <img src="/user2.jpeg" alt="" loading="lazy" />
-                        <p>Pratik Prasad</p>
-                        <p>pratikprasad</p>
+                        <img src="/user2.jpeg" alt="" loading="lazy" onClick={() => handleProfileClick('pratikprasad')} />
+                        <p onClick={() => handleProfileClick('pratikprasad')}>Pratik Prasad</p>
+                        <p onClick={() => handleProfileClick('pratikprasad')}>pratikprasad</p>
                     </div>
                 </div>
                 <div className='debate-bar__container'>

diff --git a/client/src/components/card/open-debate-card.css b/client/src/components/card/open-debate-card.css
@@ -20,12 +20,19 @@
 #open-card .debate-header h2 {
     font-size: 20px;
     font-weight: 600;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    /* text-overflow: ellipsis;
+    white-space: nowrap; */
     overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
     cursor: pointer;
 }
 
+#open-card .debate-header h2:hover {
+    text-decoration: underline;
+}
+
 #open-card-loading .debate-header .loading-skeleton:first-child {
     width: 400px;
     height: 25px;
@@ -35,6 +42,7 @@
 #open-card .debate-header a {
     padding-top: 3px;
     width: fit-content;
+    height: fit-content;
     color: var(--card_color_secondary);
     text-decoration: underline;
     font-size: 15px;
@@ -120,6 +128,7 @@
     white-space: nowrap;
     overflow: hidden;
     color: var(--card_color_secondary);
+    cursor: pointer;
 }
 
 #open-card .user-info p:nth-child(1) {
@@ -144,6 +153,12 @@
     font-size: 14px;
 }
 
+#open-card .user-info img:hover~.user-detail p:nth-child(2),
+#open-card .user-info .user-detail p:nth-child(1):hover~p:nth-child(2),
+#open-card .user-info .user-detail p:nth-child(2):hover {
+    text-decoration: underline;
+}
+
 #open-card .debate-footer .created-date {
     width: auto;
     font-size: 14px;
@@ -174,9 +189,9 @@
         min-height: auto;
     }
 
-    #open-card .debate-header h2 {
+    /* #open-card .debate-header h2 {
         max-width: 350px;
-    }
+    } */
 
     #open-card .debate-body {
         font-size: 15px;
@@ -203,15 +218,11 @@
     }
 
     #open-card .debate-header h2 {
-        max-width: 100%;
+        /* max-width: 100%; */
         font-size: 18px;
     }
 
     #open-card-loading .debate-header .loading-skeleton:first-child {
         height: 23px;
     }
-
-    #open-card .debate-header a {
-        padding-top: 0;
-    }
 }
diff --git a/client/src/components/card/open-debate-card.tsx b/client/src/components/card/open-debate-card.tsx
@@ -10,10 +10,14 @@ const OpenDebateCard = () => {
     const navigate = useNavigate();
     const { sidebar } = useNavStore();
 
+    const handleProfileClick = (username: string) => {
+        navigate(`/${username}`);
+    }
+
     return (
         <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('/')}>
+                <h2 title='Artificial Intelligence – Is AI good for society or not? ↗' onClick={() => navigate('/')}>
                     Artificial Intelligence – Is AI good for society or not?
                 </h2>
                 <Link to='/'>Debate</Link>
@@ -24,10 +28,10 @@ const OpenDebateCard = () => {
                 Fugiat repellat architecto pariatur fugit perspiciatis voluptas quidem autem.
             </p>
             <div className='user-info'>
-                <img src="/user.jpg" alt="" loading="lazy" />
+                <img src="/user.jpg" alt="" loading="lazy" onClick={() => handleProfileClick('julieroberts')} />
                 <div className='user-detail'>
-                    <p>Julie Roberts</p>
-                    <p>julieroberts</p>
+                    <p onClick={() => handleProfileClick('julieroberts')}>Julie Roberts</p>
+                    <p onClick={() => handleProfileClick('julieroberts')}>julieroberts</p>
                 </div>
             </div>
             <div className='debate-footer'>