xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

update responsive

This commit is contained in:
Yee Jia Wei 2023-12-16 12:16:56 +08:00
parent 7c35fe409f
commit e0bb7ffa08
6 changed files with 134 additions and 229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/LinkViews/CompactGridView.tsx
View File

@ -1,4 +1,4 @@
import LinkCardCompact from "@/components/LinkViews/LinkCardCompact"; import LinkCardCompact from "@/components/LinkViews/LinkComponents/LinkCardCompact";
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global"; import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
export default function CompactGridView({ export default function CompactGridView({

50
components/LinkViews/LinkCardCompact.tsx → components/LinkViews/LinkComponents/LinkCardCompact.tsx
View File

@ -5,7 +5,6 @@ import {
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import useLinkStore from "@/store/links"; import useLinkStore from "@/store/links";
import useCollectionStore from "@/store/collections"; import useCollectionStore from "@/store/collections";
import Link from "next/link";
import unescapeString from "@/lib/client/unescapeString"; import unescapeString from "@/lib/client/unescapeString";
import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions"; import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate"; import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
@ -47,36 +46,31 @@ export default function LinkCardCompact({ link, count, className }: Props) {
}, [collections, links]); }, [collections, links]);
return ( return (
<div <div className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative">
className={`h-fit border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative ${ <div
className || "" onClick={() => link.url && window.open(link.url || "", "_blank")}
}`} className="flex items-center cursor-pointer p-3"
> >
<div className={"rounded-2xl overflow-clip"}> <div className="shrink-0">
<div className={"flex items-center"}> <LinkIcon link={link} />
<div className="shrink-0"> </div>
<LinkIcon link={link} />
</div>
<Link <div className="w-[calc(100%-56px)] ml-2">
href={"/links/" + link.id} <p className="line-clamp-1 mr-8">
className="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3" {unescapeString(link.name || link.description) || link.url}
> </p>
<div className={"flex items-center gap-2"}>
<div className="flex items-baseline gap-1">
<p className="text-sm text-neutral">{count + 1}</p>
<p className="text-lg truncate">
{unescapeString(link.name || link.description) || link.url}
</p>
</div>
<div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
<div className="flex items-center gap-2">
<LinkCollection link={link} collection={collection} />
&middot;
{link.url ? ( {link.url ? (
<div <div
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
window.open(link.url || "", "_blank"); window.open(link.url || "", "_blank");
}} }}
className="flex items-center gap-1 max-w-full w-fit text-xs text-neutral hover:opacity-60 duration-100" className="flex items-center hover:opacity-60 cursor-pointer duration-100"
> >
<p className="truncate w-full">{shortendURL}</p> <p className="truncate w-full">{shortendURL}</p>
</div> </div>
@ -86,13 +80,9 @@ export default function LinkCardCompact({ link, count, className }: Props) {
</div> </div>
)} )}
</div> </div>
<span className="hidden sm:block">&middot;</span>
<div className={"flex items-center gap-2 text-xs"}> <LinkDate link={link} />
<LinkCollection link={link} collection={collection} /> </div>
&middot;
<LinkDate link={link} />
</div>
</Link>
</div> </div>
</div> </div>

45
components/LinkViews/LinkComponents/LinkIcon.tsx
View File

@ -12,34 +12,29 @@ export default function LinkIcon({
const url = const url =
isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined; isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
const iconClasses: string = "w-12 bg-primary/20 text-primary shadow rounded-md p-2 select-none z-10"; const iconClasses: string =
"w-12 bg-primary/20 text-primary shadow rounded-md p-2 select-none z-10";
return ( return (
<div> <div>
{link.url && url ? ( {link.url && url ? (
<Image <Image
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`} src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
width={64} width={64}
height={64} height={64}
alt="" alt=""
className={iconClasses} className={iconClasses}
draggable="false" draggable="false"
onError={(e) => { onError={(e) => {
const target = e.target as HTMLElement; const target = e.target as HTMLElement;
target.style.display = "none"; target.style.display = "none";
}} }}
/> />
) : link.type === "pdf" ? ( ) : link.type === "pdf" ? (
<FontAwesomeIcon <FontAwesomeIcon icon={faFilePdf} className={iconClasses} />
icon={faFilePdf} ) : link.type === "image" ? (
className={iconClasses} <FontAwesomeIcon icon={faFileImage} className={iconClasses} />
/> ) : undefined}
) : link.type === "image" ? (
<FontAwesomeIcon
icon={faFileImage}
className={iconClasses}
/>
) : undefined}
</div> </div>
); );
} }

92
components/LinkViews/LinkComponents/LinkRow.tsx Normal file
View File

@ -0,0 +1,92 @@
import {
CollectionIncludingMembersAndLinkCount,
LinkIncludingShortenedCollectionAndTags,
} from "@/types/global";
import { useEffect, useState } from "react";
import useLinkStore from "@/store/links";
import useCollectionStore from "@/store/collections";
import unescapeString from "@/lib/client/unescapeString";
import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
type Props = {
link: LinkIncludingShortenedCollectionAndTags;
count: number;
className?: string;
};
export default function LinkCardCompact({ link, count, className }: Props) {
const { collections } = useCollectionStore();
const { links } = useLinkStore();
let shortendURL;
try {
shortendURL = new URL(link.url || "").host.toLowerCase();
} catch (error) {
console.log(error);
}
const [collection, setCollection] =
useState<CollectionIncludingMembersAndLinkCount>(
collections.find(
(e) => e.id === link.collection.id,
) as CollectionIncludingMembersAndLinkCount,
);
useEffect(() => {
setCollection(
collections.find(
(e) => e.id === link.collection.id,
) as CollectionIncludingMembersAndLinkCount,
);
}, [collections, links]);
return (
<div className="border-b last:border-b-0 border-neutral-content relative">
<div
onClick={() => link.url && window.open(link.url || "", "_blank")}
className="flex items-center cursor-pointer p-3"
>
<div className="shrink-0">
<LinkIcon link={link} />
</div>
<div className="w-[calc(100%-56px)] ml-2">
<p className="line-clamp-1 mr-8">
{unescapeString(link.name || link.description) || link.url}
</p>
<div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
<div className="flex items-center gap-2">
<LinkCollection link={link} collection={collection} />
&middot;
{link.url ? (
<div
onClick={(e) => {
e.preventDefault();
window.open(link.url || "", "_blank");
}}
className="flex items-center hover:opacity-60 cursor-pointer duration-100"
>
<p className="truncate w-full">{shortendURL}</p>
</div>
) : (
<div className="badge badge-primary badge-sm my-1">
{link.type}
</div>
)}
</div>
<span className="hidden sm:block">&middot;</span>
<LinkDate link={link} />
</div>
</div>
</div>
<LinkActions link={link} collection={collection} />
</div>
);
}

172
components/LinkViews/LinkRow.tsx
View File

@ -1,172 +0,0 @@
import {
CollectionIncludingMembersAndLinkCount,
LinkIncludingShortenedCollectionAndTags,
} from "@/types/global";
import {
faFolder,
faEllipsis,
faLink,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useEffect, useState } from "react";
import Image from "next/image";
import useLinkStore from "@/store/links";
import useCollectionStore from "@/store/collections";
import useAccountStore from "@/store/account";
import {
faCalendarDays,
faFileImage,
faFilePdf,
} from "@fortawesome/free-regular-svg-icons";
import usePermissions from "@/hooks/usePermissions";
import { toast } from "react-hot-toast";
import isValidUrl from "@/lib/shared/isValidUrl";
import Link from "next/link";
import unescapeString from "@/lib/client/unescapeString";
import { useRouter } from "next/router";
import EditLinkModal from "../ModalContent/EditLinkModal";
import DeleteLinkModal from "../ModalContent/DeleteLinkModal";
import ExpandedLink from "../ModalContent/ExpandedLink";
import PreservedFormatsModal from "../ModalContent/PreservedFormatsModal";
import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
type Props = {
link: LinkIncludingShortenedCollectionAndTags;
count: number;
className?: string;
};
export default function LinkRow({ link, count, className }: Props) {
const router = useRouter();
const permissions = usePermissions(link.collection.id as number);
const { collections } = useCollectionStore();
const { links } = useLinkStore();
const { account } = useAccountStore();
let shortendURL;
try {
shortendURL = new URL(link.url || "").host.toLowerCase();
} catch (error) {
console.log(error);
}
const [collection, setCollection] =
useState<CollectionIncludingMembersAndLinkCount>(
collections.find(
(e) => e.id === link.collection.id,
) as CollectionIncludingMembersAndLinkCount,
);
useEffect(() => {
setCollection(
collections.find(
(e) => e.id === link.collection.id,
) as CollectionIncludingMembersAndLinkCount,
);
}, [collections, links]);
const { removeLink, updateLink } = useLinkStore();
const pinLink = async () => {
const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
const load = toast.loading("Applying...");
const response = await updateLink({
...link,
pinnedBy: isAlreadyPinned ? undefined : [{ id: account.id }],
});
toast.dismiss(load);
response.ok &&
toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
};
const deleteLink = async () => {
const load = toast.loading("Deleting...");
const response = await removeLink(link.id as number);
toast.dismiss(load);
response.ok && toast.success(`Link Deleted.`);
};
const url =
isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
const formattedDate = new Date(link.createdAt as string).toLocaleString(
"en-US",
{
year: "numeric",
month: "short",
day: "numeric",
},
);
const iconClasses: string =
"w-20 bg-white shadow p-1 bottom-3 right-3 select-none z-10";
return (
<div
className={`h-fit border-b last:border-b-0 border-neutral-content duration-100 relative group ${
className || ""
}`}
>
<div className={"overflow-clip"}>
<div className={"flex items-center"}>
<Link
href={"/links/" + link.id}
className="group-first:rounded-tl-md group-last:rounded-bl-md overflow-clip"
>
<LinkIcon link={link} />
</Link>
<div className="p-3">
<Link
href={"/links/" + link.id}
className="inline-flex cursor-pointer mb-1"
>
<p className="text-lg truncate">
{unescapeString(link.name || link.description) || link.url}
</p>
</Link>
<div className="flex items-center gap-2 text-xs text-neutral">
<LinkCollection link={link} collection={collection} />
&middot;
{link.url ? (
<div
onClick={(e) => {
e.preventDefault();
window.open(link.url || "", "_blank");
}}
className="flex items-center hover:opacity-60 cursor-pointer duration-100"
>
<p className="truncate w-full">{shortendURL}</p>
</div>
) : (
<div className="badge badge-primary badge-sm my-1">
{link.type}
</div>
)}
&middot;
<LinkDate link={link} />
</div>
</div>
</div>
</div>
<LinkActions link={link} collection={collection} />
</div>
);
}

2
components/LinkViews/ListView.tsx
View File

@ -1,4 +1,4 @@
import LinkRow from "@/components/LinkViews/LinkRow"; import LinkRow from "@/components/LinkViews/LinkComponents/LinkRow";
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global"; import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
export default function ListView({ export default function ListView({