improved UI
This commit is contained in:
daniel31x13
parent
a3106e072b
commit
0e6b47d068
|
|
@ -121,7 +121,7 @@ export default function CollectionCard({ collection, className }: Props) {
|
|||
{collectionOwner.id ? (
|
||||
<ProfilePhoto
|
||||
src={collectionOwner.image || undefined}
|
||||
dimensionClass="w-7 h-7"
|
||||
name={collectionOwner.name}
|
||||
/>
|
||||
) : undefined}
|
||||
{collection.members
|
||||
|
|
@ -131,13 +131,14 @@ export default function CollectionCard({ collection, className }: Props) {
|
|||
<ProfilePhoto
|
||||
key={i}
|
||||
src={e.user.image ? e.user.image : undefined}
|
||||
name={e.user.name}
|
||||
className="-ml-3"
|
||||
/>
|
||||
);
|
||||
})
|
||||
.slice(0, 3)}
|
||||
{collection.members.length - 3 > 0 ? (
|
||||
<div className={`avatar placeholder -ml-3`}>
|
||||
<div className={`avatar drop-shadow-md 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>
|
||||
|
|
|
|||
|
|
@ -250,8 +250,23 @@ export default function LinkCard({ link, count, className }: Props) {
|
|||
<p className="truncate capitalize w-full">{collection?.name}</p>
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href={link.url || ""}
|
||||
target="_blank"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
className="flex items-center gap-1 max-w-full w-fit text-neutral hover:opacity-70 duration-100"
|
||||
>
|
||||
<FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
|
||||
<p className="truncate w-full">{shortendURL}</p>
|
||||
</Link>
|
||||
<div className="flex items-center gap-1 text-neutral">
|
||||
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
|
||||
<p>{formattedDate}</p>
|
||||
</div>
|
||||
{link.tags[0] ? (
|
||||
<div className="flex gap-3 items-center flex-wrap my-2 truncate relative">
|
||||
<div className="flex gap-3 items-center flex-wrap mt-2 truncate relative">
|
||||
<div className="flex gap-1 items-center flex-nowrap">
|
||||
{link.tags.map((e, i) => (
|
||||
<Link
|
||||
|
|
@ -269,24 +284,8 @@ export default function LinkCard({ link, count, className }: Props) {
|
|||
<div className="absolute w-1/2 top-0 bottom-0 right-0 bg-gradient-to-r from-transparent to-base-200 to-35%"></div>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-xs my-2 p-1 font-semibold italic">No Tags</p>
|
||||
<p className="text-xs mt-2 p-1 font-semibold italic">No Tags</p>
|
||||
)}
|
||||
|
||||
<Link
|
||||
href={link.url || ""}
|
||||
target="_blank"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
className="flex items-center gap-1 max-w-full w-fit text-neutral hover:opacity-70 duration-100"
|
||||
>
|
||||
<FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
|
||||
<p className="truncate w-full">{shortendURL}</p>
|
||||
</Link>
|
||||
<div className="flex items-center gap-1 text-neutral">
|
||||
<FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
|
||||
<p>{formattedDate}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -211,6 +211,7 @@ export default function EditCollectionSharingModal({
|
|||
src={
|
||||
collectionOwner.image ? collectionOwner.image : undefined
|
||||
}
|
||||
name={collectionOwner.name}
|
||||
/>
|
||||
<div className="w-full">
|
||||
<div className="flex items-center gap-1 w-full justify-between">
|
||||
|
|
@ -259,6 +260,7 @@ export default function EditCollectionSharingModal({
|
|||
<div className="flex items-center gap-2">
|
||||
<ProfilePhoto
|
||||
src={e.user.image ? e.user.image : undefined}
|
||||
name={e.user.name}
|
||||
/>
|
||||
<div>
|
||||
<p className="text-sm font-bold">{e.user.name}</p>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export default function ProfilePhoto({
|
|||
|
||||
return !image ? (
|
||||
<div
|
||||
className={`avatar placeholder ${className || ""} ${
|
||||
className={`avatar drop-shadow-md placeholder ${className || ""} ${
|
||||
dimensionClass || "w-8 h-8 "
|
||||
}`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -111,7 +111,10 @@ export default function Index() {
|
|||
onClick={() => setEditCollectionSharingModal(true)}
|
||||
>
|
||||
{collectionOwner.id ? (
|
||||
<ProfilePhoto src={collectionOwner.image || undefined} />
|
||||
<ProfilePhoto
|
||||
src={collectionOwner.image || undefined}
|
||||
name={collectionOwner.name}
|
||||
/>
|
||||
) : undefined}
|
||||
{activeCollection.members
|
||||
.sort((a, b) => (a.userId as number) - (b.userId as number))
|
||||
|
|
@ -121,12 +124,13 @@ export default function Index() {
|
|||
key={i}
|
||||
src={e.user.image ? e.user.image : undefined}
|
||||
className="-ml-3"
|
||||
name={e.user.name}
|
||||
/>
|
||||
);
|
||||
})
|
||||
.slice(0, 3)}
|
||||
{activeCollection.members.length - 3 > 0 ? (
|
||||
<div className={`avatar placeholder -ml-3`}>
|
||||
<div className={`avatar drop-shadow-md placeholder -ml-3`}>
|
||||
<div className="bg-base-100 text-neutral rounded-full w-8 h-8 ring-2 ring-neutral-content">
|
||||
<span>+{activeCollection.members.length - 3}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -145,7 +145,7 @@ export default function PublicCollections() {
|
|||
{collectionOwner.id ? (
|
||||
<ProfilePhoto
|
||||
src={collectionOwner.image || undefined}
|
||||
dimensionClass="w-7 h-7"
|
||||
name={collectionOwner.name}
|
||||
/>
|
||||
) : undefined}
|
||||
{collection.members
|
||||
|
|
@ -156,12 +156,13 @@ export default function PublicCollections() {
|
|||
key={i}
|
||||
src={e.user.image ? e.user.image : undefined}
|
||||
className="-ml-3"
|
||||
name={e.user.name}
|
||||
/>
|
||||
);
|
||||
})
|
||||
.slice(0, 3)}
|
||||
{collection.members.length - 3 > 0 ? (
|
||||
<div className={`avatar placeholder -ml-3`}>
|
||||
<div className={`avatar drop-shadow-md 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>
|
||||
|
|
|
|||
Ŝarĝante…
Reference in New Issue