Skip to content

Commit

Permalink
client: add ellipsis hozizontally and line-clamp vertically
Browse files Browse the repository at this point in the history
  • Loading branch information
Shubham-Lal committed Apr 11, 2024
1 parent cc1fc2f commit f7d8283
Show file tree
Hide file tree
Showing 5 changed files with 46 additions and 48 deletions.
6 changes: 6 additions & 0 deletions client/src/components/card/closed-debate-card.css
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}

#closed-card .divider {
Expand All @@ -43,6 +44,10 @@
}

#closed-card .left p {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
padding-top: 10px;
font-size: 16px;
color: var(--card_color_secondary);
Expand Down Expand Up @@ -138,6 +143,7 @@
}

#closed-card .left p {
-webkit-line-clamp: 2;
font-size: 15px;
}

Expand Down
8 changes: 5 additions & 3 deletions client/src/components/card/closed-debate-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ const ClosedDebateCard = () => {
<div className='left'>
<h2>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.
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>
Expand All @@ -26,10 +28,10 @@ const ClosedDebateCard = () => {
</div>
</div>
<div className='debate-bar__container'>
<DebateBar debateFrom={4000000} debateBy={6000000} />
<DebateBar debateFrom={423} debateBy={516} />
</div>
<div className='debate-info'>
<p>{useFormatNumber(2100)} comments</p>
<p>{useFormatNumber(210)} comments</p>
<p>5 days ago</p>
</div>
</div>
Expand Down
37 changes: 32 additions & 5 deletions client/src/components/card/open-debate-card.css
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,10 @@
}

#open-card .debate-body {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
padding-top: 10px;
font-size: 16px;
color: var(--card_color_secondary);
Expand All @@ -42,12 +46,8 @@
justify-content: space-between;
}

#open-card .debate-footer p {
font-size: 14px;
color: var(--card_color_secondary);
}

#open-card .user-info {
width: 70%;
display: flex;
gap: 10px;
align-items: center;
Expand All @@ -62,6 +62,19 @@
cursor: pointer;
}

#open-card .user-info .user-detail {
overflow: hidden;
}

#open-card .user-info p {
max-width: 100%;
width: fit-content;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: var(--card_color_secondary);
}

#open-card .user-info p:nth-child(1) {
font-size: 15px;
font-weight: 600;
Expand All @@ -71,10 +84,20 @@
font-size: 14px;
}

#open-card .debate-footer .created-date {
width: auto;
font-size: 14px;
color: var(--card_color_secondary);
}

@media screen and (max-width: 1536px) {
#open-card .debate-body {
font-size: 15px;
}

#open-card .debate-body {
-webkit-line-clamp: 6;
}
}

@media screen and (max-width: 480px) {
Expand All @@ -93,4 +116,8 @@
#open-card .debate-header a {
padding-top: 0;
}

#open-card .debate-body {
-webkit-line-clamp: 7;
}
}
5 changes: 3 additions & 2 deletions client/src/components/card/open-debate-card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,18 @@ const OpenDebateCard = () => {
</div>
<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>
<div className='debate-footer'>
<div className='user-info'>
<img src="/user.jpg" alt="" />
<div>
<div className='user-detail'>
<p>Julie Roberts</p>
<p>julieroberts</p>
</div>
</div>
<p>15 mins ago</p>
<p className='created-date'>15 mins ago</p>
</div>
</div>
)
Expand Down
38 changes: 0 additions & 38 deletions client/src/hooks/useFileHandler.ts

This file was deleted.

0 comments on commit f7d8283

Please sign in to comment.