nyne/nysoure
1
0
Fork 0
mirror of https://github.com/wgh136/nysoure.git synced 2025-09-27 12:17:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve UI of pinned

Browse Source
This commit is contained in:
nyne
2025-08-29 17:30:35 +08:00
parent 634d5a348a
commit f067e802a2
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/pages/home_page.tsx
View File

@@ -97,7 +97,7 @@ function PinnedResources() {
} }
return ( return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4">
{pinnedResources.map((resource) => ( {pinnedResources.map((resource) => (
<PinnedResourceItem key={resource.id} resource={resource} /> <PinnedResourceItem key={resource.id} resource={resource} />
))} ))}
@@ -111,7 +111,7 @@ function PinnedResourceItem({ resource }: { resource: Resource }) {
return ( return (
<a <a
href={`/resources/${resource.id}`} href={`/resources/${resource.id}`}
className={"p-2 cursor-pointer block"} className={"cursor-pointer block"}
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
navigate(`/resources/${resource.id}`); navigate(`/resources/${resource.id}`);
@@ -119,7 +119,7 @@ function PinnedResourceItem({ resource }: { resource: Resource }) {
> >
<div <div
className={ className={
"card shadow hover:shadow-md transition-shadow bg-base-100-tr82" "shadow hover:shadow-md transition-shadow rounded-2xl overflow-clip relative"
} }
> >
{resource.image != null && ( {resource.image != null && (
@@ -127,12 +127,12 @@ function PinnedResourceItem({ resource }: { resource: Resource }) {
<img <img
src={network.getResampledImageUrl(resource.image.id)} src={network.getResampledImageUrl(resource.image.id)}
alt="cover" alt="cover"
className="w-full aspect-[5/2] object-cover" className="w-full aspect-[7/3] object-cover"
/> />
</figure> </figure>
)} )}
<div className="p-4"> <div className="p-4 absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent">
<h2 className="card-title break-all">{resource.title}</h2> <h2 className="break-all card-title text-white">{resource.title}</h2>
</div> </div>
</div> </div>
</a> </a>