From f7d8283df55aa330c41e3f7bc21e28b77be8b008 Mon Sep 17 00:00:00 2001 From: Shubham-Lal Date: Thu, 11 Apr 2024 12:15:09 +0530 Subject: [PATCH] client: add ellipsis hozizontally and line-clamp vertically --- .../components/card/closed-debate-card.css | 6 +++ .../components/card/closed-debate-card.tsx | 8 ++-- .../src/components/card/open-debate-card.css | 37 +++++++++++++++--- .../src/components/card/open-debate-card.tsx | 5 ++- client/src/hooks/useFileHandler.ts | 38 ------------------- 5 files changed, 46 insertions(+), 48 deletions(-) delete mode 100644 client/src/hooks/useFileHandler.ts diff --git a/client/src/components/card/closed-debate-card.css b/client/src/components/card/closed-debate-card.css index c2de679..e59938d 100644 --- a/client/src/components/card/closed-debate-card.css +++ b/client/src/components/card/closed-debate-card.css @@ -25,6 +25,7 @@ display: flex; flex-direction: column; justify-content: center; + overflow: hidden; } #closed-card .divider { @@ -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); @@ -138,6 +143,7 @@ } #closed-card .left p { + -webkit-line-clamp: 2; font-size: 15px; } diff --git a/client/src/components/card/closed-debate-card.tsx b/client/src/components/card/closed-debate-card.tsx index c2723b7..7d8c901 100644 --- a/client/src/components/card/closed-debate-card.tsx +++ b/client/src/components/card/closed-debate-card.tsx @@ -9,7 +9,9 @@ const ClosedDebateCard = () => {

Sony is the best camera of all time.

- 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.

View
@@ -26,10 +28,10 @@ const ClosedDebateCard = () => {
- +
-

{useFormatNumber(2100)} comments

+

{useFormatNumber(210)} comments

5 days ago

diff --git a/client/src/components/card/open-debate-card.css b/client/src/components/card/open-debate-card.css index c3d555b..bf45a4b 100644 --- a/client/src/components/card/open-debate-card.css +++ b/client/src/components/card/open-debate-card.css @@ -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); @@ -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; @@ -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; @@ -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) { @@ -93,4 +116,8 @@ #open-card .debate-header a { padding-top: 0; } + + #open-card .debate-body { + -webkit-line-clamp: 7; + } } \ No newline at end of file diff --git a/client/src/components/card/open-debate-card.tsx b/client/src/components/card/open-debate-card.tsx index 3d778df..e071f63 100644 --- a/client/src/components/card/open-debate-card.tsx +++ b/client/src/components/card/open-debate-card.tsx @@ -14,17 +14,18 @@ const OpenDebateCard = () => {

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.

-
+

Julie Roberts

julieroberts

-

15 mins ago

+

15 mins ago

) diff --git a/client/src/hooks/useFileHandler.ts b/client/src/hooks/useFileHandler.ts deleted file mode 100644 index 890f189..0000000 --- a/client/src/hooks/useFileHandler.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { useCallback } from "react"; - -type HandleFileChange = (e: React.ChangeEvent) => Promise; - -const useFileHandler = (maxSize: number): HandleFileChange => { - const handleFileChange = useCallback(async (e: React.ChangeEvent): Promise => { - const file = e.target.files?.[0]; - if (file) { - if (file.type.startsWith('image/')) { - if (file.size <= maxSize * 1024 * 1024) { - return new Promise((resolve, reject) => { - const reader = new FileReader(); - reader.onloadend = () => { - if (typeof reader.result === 'string') { - resolve(reader.result); - } else { - reject(new Error('Failed to read file as data URL')); - } - }; - reader.onerror = reject; - reader.readAsDataURL(file); - }); - } else { - alert("File size should not exceed " + maxSize + "MB"); - return null; - } - } else { - alert("Please select an image file."); - return null; - } - } - return null; - }, [maxSize]); - - return handleFileChange; -}; - -export default useFileHandler; \ No newline at end of file