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

Jump to bottom

style: edit library page card structure #48

Merged
merged 2 commits into from
Nov 9, 2023
Merged

style: edit library page card structure #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c90a5ad
style: edit library page card structure
Wiazeph Nov 9, 2023
bf9d4a9
style: fix dictionaries card border
Wiazeph Nov 9, 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
80 changes: 44 additions & 36 deletions apps/next/src/components/Published/PublishedItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,46 +20,54 @@ const PublishedItem = (item: IDictionary) => {
}}
as={`/library/${item.slug}`}
key={item.id}
className="w-full sm:w-[calc(50%-12px)] md:w-[calc(50%-16px)] lg:w-[calc(33%-18.5px)] max-w-sm sm:max-w-none"
className="w-full sm:w-[calc(50%-12px)] md:w-[calc(50%-16px)] lg:w-[calc(33%-18.5px)] max-w-sm sm:max-w-none group"
>
<div className="w-full h-full flex flex-col gap-3 sm:gap-4 md:gap-5 justify-between rounded-2xl">
<div className="relative h-60">
<Image
alt={item.title}
src={item.image || "/images/dictionary_banner.jpg"}
className="object-cover rounded-lg"
placeholder="blur"
blurDataURL={item.image || "/images/dictionary_banner.jpg"}
fill
/>
</div>
<div className="w-full h-full">
<div className="h-full flex flex-col rounded-lg border group-hover:border-gray-300/95 dark:group-hover:border-[#2e3d56] transition-colors">
<div className="relative h-60">
<Image
alt={item.title}
src={item.image || "/images/dictionary_banner.jpg"}
className="object-cover rounded-t-lg"
placeholder="blur"
blurDataURL={item.image || "/images/dictionary_banner.jpg"}
fill
/>
</div>

<div className="py-1 w-fit flex items-center pl-1 pr-2.5 rounded-[0.625rem] text-xs font-medium border">
<span className="px-1.5 inline-flex items-center py-0.5 rounded-md border mr-2">
<Star fill="currentColor" className="h-3 w-3 mr-1" />
{item.rate}
</span>
{roundToFiveOrTen(item.numberOfWords)}+ {t("general.words")}
</div>
<div className="flex flex-col gap-4 sm:gap-5 justify-between grow p-4">
<div className="flex flex-col gap-4 sm:gap-5">
<div className="py-1 w-fit flex items-center pl-1 pr-2.5 rounded-[0.625rem] text-xs font-medium border">
<span className="px-1.5 inline-flex items-center py-0.5 rounded-md border mr-2">
<Star fill="currentColor" className="h-3 w-3 mr-1" />
{item.rate}
</span>
{roundToFiveOrTen(item.numberOfWords)}+ {t("general.words")}
</div>

<div>
<h3 className="text-2xl font-semibold">{item.title}</h3>
<h4 className="text-base text-muted-foreground mt-2">
{item.description}
</h4>
</div>
<div>
<h3 className="text-2xl font-semibold">{item.title}</h3>
<h4 className="text-base text-muted-foreground mt-3 text-ellipsis line-clamp-2">
{item.description}
</h4>
</div>
</div>

<span className="flex items-center">
<Avatar className="relative mr-3 h-10 md:h-12 w-10 md:w-12">
<AvatarImage
className="w-10 md:w-12 h-10 md:h-12"
src={item.author.avatar_url}
alt={"@" + item.author.name}
/>
<AvatarFallback>{computedName}</AvatarFallback>
</Avatar>
<span className="text-sm font-semibold">{item.author.name}</span>
</span>
<span className="flex items-center">
<Avatar className="relative w-8 md:w-10 h-8 md:h-10">
<AvatarImage
className="w-full h-full"
src={item.author.avatar_url}
alt={"@" + item.author.name}
/>
<AvatarFallback>{computedName}</AvatarFallback>
</Avatar>
<span className="ml-3 text-sm font-semibold">
{item.author.name}
</span>
</span>
</div>
</div>
</div>
</Link>
);
Expand Down
2 changes: 1 addition & 1 deletion apps/next/src/components/Published/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const Published = () => {
) : (
<main
className={cn(
"mt-6 sm:mt-8 flex flex-wrap justify-center sm:justify-start gap-x-4 sm:gap-x-6 md:gap-x-8 gap-y-12 sm:gap-y-14 md:gap-y-16 transition-transform duration-300",
"mt-6 sm:mt-8 flex flex-wrap justify-center sm:justify-start gap-4 sm:gap-6 md:gap-8 transition-transform duration-300",
isAccordionShow
? "translate-y-[221px] sm:translate-y-[82px]"
: "sm:translate-y-0"
Expand Down
Loading