egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improved collection card and avatar grouping

Browse Source
This commit is contained in:
daniel31x13
2023-11-28 00:29:11 -05:00
parent 916c69602d
commit 1ca6d72f82
4 changed files with 97 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/collections/index.tsx
+1 -1
View File
@@ -117,7 +117,7 @@ export default function Collections() {
})}
<div
className="p-5 bg-base-200 self-stretch border border-solid border-neutral-content min-h-[12rem] rounded-2xl cursor-pointer shadow duration-100 hover:shadow-none flex flex-col gap-4 justify-center items-center group"
className="card card-compact shadow-md hover:shadow-none duration-200 border border-neutral-content p-5 bg-base-200 self-stretch min-h-[12rem] rounded-2xl cursor-pointer flex flex-col gap-4 justify-center items-center group"
onClick={() => {
setModal({
modal: "COLLECTION",
pages/public/collections/[id].tsx
+45 -46
View File
@@ -144,54 +144,53 @@ export default function PublicCollections() {
<div className="mt-3">
<div className={`min-w-[15rem]`}>
<div className="flex justify-center sm:justify-end items-start w-fit">
{collectionOwner.id ? (
<ProfilePhoto
src={collectionOwner.image || undefined}
className="w-7 h-7"
/>
) : undefined}
{collection.members
.sort((a, b) => (a.userId as number) - (b.userId as number))
.map((e, i) => {
return (
<ProfilePhoto
key={i}
src={e.user.image ? e.user.image : undefined}
className="w-7 h-7"
/>
);
})
.slice(0, 4)}
{collection?.members.length &&
collection.members.length - 3 > 0 ? (
<div className={`avatar placeholder`}>
<div className="bg-base-100 text-base-content rounded-full w-8 h-8 ring-2 ring-base-content">
<span>+{collection.members.length - 3}</span>
<div className="flex gap-1 justify-center sm:justify-end items-center w-fit">
<div
className="flex items-center btn px-2 btn-ghost rounded-full"
onClick={() =>
setModal({
modal: "COLLECTION",
state: true,
method: "VIEW_TEAM",
isOwner: false,
active: collection,
defaultIndex: 0,
})
}
>
{collectionOwner.id ? (
<ProfilePhoto
src={collectionOwner.image || undefined}
className="w-7 h-7"
/>
) : undefined}
{collection.members
.sort((a, b) => (a.userId as number) - (b.userId as number))
.map((e, i) => {
return (
<ProfilePhoto
key={i}
src={e.user.image ? e.user.image : undefined}
className="-ml-3"
/>
);
})
.slice(0, 3)}
{collection.members.length - 3 > 0 ? (
<div className={`avatar placeholder -ml-3`}>
<div className="bg-base-100 text-neutral rounded-full w-8 h-8 ring-2 ring-neutral-content">
<span>+{collection.members.length - 3}</span>
</div>
</div>
</div>
) : null}
) : null}
</div>
<p className="ml-3 mt-1 text-neutral text-xs">
By
<span
className="btn btn-ghost btn-xs p-1"
onClick={() =>
setModal({
modal: "COLLECTION",
state: true,
method: "VIEW_TEAM",
isOwner: false,
active: collection,
defaultIndex: 0,
})
}
>
{collectionOwner.name}
{collection.members.length > 0
? ` and ${collection.members.length} others`
: undefined}
</span>
<p className="text-neutral text-xs">
By {collectionOwner.name}
{collection.members.length > 0
? ` and ${collection.members.length} others`
: undefined}
.
</p>
</div>
</div>