Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Read more button added when text overflow on card #693

Merged
merged 3 commits into from
May 25, 2023
Merged

Read more button added when text overflow on card #693

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
18624ec
read more text will appear whenever description overflows
Isha988 May 23, 2023
b9516eb
read more bitton hover effect added
Isha988 May 24, 2023
39fa7f3
Update components/Cards/Card.tsx
Isha988 May 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions components/Cards/Card.tsx
View file
Open in desktop
rupali-codes marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
import { FC } from 'react'
import { FC,useState, useRef, useEffect } from 'react'
import { BsBoxArrowUpRight } from 'react-icons/bs'
import { CopyToClipboard } from 'components/CopyToClipboard'
import type { IData } from 'types'

const Card: FC<{ data: IData }> = (props) => {
const { data } = props
const { name, description, url } = data
const descriptionRef = useRef(document.createElement("p"));
const [isOverflow, setIsOverflow] = useState(false);
useEffect (() => {
setIsOverflow(descriptionRef.current?.scrollHeight > descriptionRef.current?.offsetHeight);
}, [])

return (
<article className="z-10 h-full w-full rounded-3xl border border-dashed border-violet-500 dark:border-violet-400 bg-gray-100 shadow-lg dark:bg-gray-900 dark:text-gray-300 dark:shadow-sm">
Expand All @@ -19,7 +24,13 @@ const Card: FC<{ data: IData }> = (props) => {
</h2>
<CopyToClipboard url={url} />
</header>
<p className="h-24 w-full overflow-hidden font-sans">{description}</p>
<div className="h-[7rem]">
rupali-codes marked this conversation as resolved.
Show resolved Hide resolved
<p ref={descriptionRef} className="h-24 w-full overflow-hidden font-sans text-ellipsis line-clamp-4">{description}</p>
{
(isOverflow) &&
<p className="text-sm underline text-violet-600 dark:text-violet-400" >read more...</p>
Isha988 marked this conversation as resolved.
Show resolved Hide resolved
}
</div>
<footer className="card-actions justify-end">
<a
onClick={(e) => e.stopPropagation()}
Expand Down
2 changes: 1 addition & 1 deletion components/Cards/CardsListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const CardsListItem: FC<{ data: IData, onClick: () => void }> = (props) => {

return (
<li
className="h-64 w-full cursor-pointer transition-all duration-100 ease-in hover:scale-[1.02] md:w-72"
className="w-full cursor-pointer transition-all duration-100 ease-in hover:scale-[1.02] md:w-72"
onClick={onClick}
>
<Card data={data} />
Expand Down