From 3282d5a6155cec350d6cba0f9e8c6fa5f7500c0f Mon Sep 17 00:00:00 2001 From: daniel31x13 Date: Thu, 5 Oct 2023 19:12:35 +0330 Subject: [PATCH] bug fixed + small visual improvements + improved user experience --- components/CollectionCard.tsx | 2 +- components/LinkCard.tsx | 44 +++++++++++++++++---------- components/Modal/Link/LinkDetails.tsx | 1 - components/PublicPage/LinkCard.tsx | 2 +- package.json | 1 + pages/collections/[id].tsx | 2 +- pages/public/collections/[id].tsx | 38 ++++++++++++++++++++--- styles/globals.css | 2 +- yarn.lock | 21 +++++++++++++ 9 files changed, 87 insertions(+), 26 deletions(-) diff --git a/components/CollectionCard.tsx b/components/CollectionCard.tsx index af13803..60609a4 100644 --- a/components/CollectionCard.tsx +++ b/components/CollectionCard.tsx @@ -32,7 +32,7 @@ export default function CollectionCard({ collection, className }: Props) { return (
setExpandDropdown(!expandDropdown)} diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx index 8f186f9..1e26b78 100644 --- a/components/LinkCard.tsx +++ b/components/LinkCard.tsx @@ -19,6 +19,7 @@ import { faCalendarDays } from "@fortawesome/free-regular-svg-icons"; import usePermissions from "@/hooks/usePermissions"; import { toast } from "react-hot-toast"; import isValidUrl from "@/lib/client/isValidUrl"; +import Link from "next/link"; type Props = { link: LinkIncludingShortenedCollectionAndTags; @@ -106,7 +107,7 @@ export default function LinkCard({ link, count, className }: Props) { return (
{(permissions === true || permissions?.canUpdate || @@ -136,7 +137,7 @@ export default function LinkCard({ link, count, className }: Props) { active: link, }); }} - className="flex items-start gap-5 sm:gap-10 h-full w-full p-5" + className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-5" > {url && (
-
-
- -

- {collection?.name} -

-
-
-
+ { + e.stopPropagation(); + }} + className="flex items-center gap-1 max-w-full w-fit my-3 hover:opacity-70 duration-100" + > + +

+ {collection?.name} +

+ + { + e.stopPropagation(); + }} + className="flex items-center gap-1 max-w-full w-fit text-gray-500 dark:text-gray-300 hover:opacity-70 duration-100" + >

{shortendURL}

-
+

{formattedDate}

diff --git a/components/Modal/Link/LinkDetails.tsx b/components/Modal/Link/LinkDetails.tsx index 7ab3d52..8281939 100644 --- a/components/Modal/Link/LinkDetails.tsx +++ b/components/Modal/Link/LinkDetails.tsx @@ -166,7 +166,6 @@ export default function LinkDetails({ link, isOwnerOrMod }: Props) { -
+
{url && ( <>
-
+
{activeCollection && (
diff --git a/pages/public/collections/[id].tsx b/pages/public/collections/[id].tsx index 25b6683..78eb2a1 100644 --- a/pages/public/collections/[id].tsx +++ b/pages/public/collections/[id].tsx @@ -4,10 +4,25 @@ import getPublicCollectionData from "@/lib/client/getPublicCollectionData"; import { PublicCollectionIncludingLinks } from "@/types/global"; import { useRouter } from "next/router"; import React, { useEffect, useState } from "react"; +import { motion, Variants } from "framer-motion"; + +const cardVariants: Variants = { + offscreen: { + y: 50, + opacity: 0, + }, + onscreen: { + y: 0, + opacity: 1, + transition: { + duration: 0.4, + }, + }, +}; export default function PublicCollections() { const router = useRouter(); - const hasReachedBottom = useDetectPageBottom(); + const { reachedBottom, setReachedBottom } = useDetectPageBottom(); const [data, setData] = useState(); @@ -33,19 +48,21 @@ export default function PublicCollections() { }, []); useEffect(() => { - if (hasReachedBottom && router.query.id) { + if (reachedBottom && router.query.id) { getPublicCollectionData( Number(router.query.id), data as PublicCollectionIncludingLinks, setData ); } - }, [hasReachedBottom]); + + setReachedBottom(false); + }, [reachedBottom]); return data ? (

{data.name}

@@ -59,7 +76,18 @@ export default function PublicCollections() {
{data?.links?.map((e, i) => { - return ; + return ( + + + + + + ); })}
diff --git a/styles/globals.css b/styles/globals.css index 41dcd6e..c85afa2 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -12,7 +12,7 @@ } ::selection { - background-color: #0ea5e9; + background-color: #0ea4e93c; color: white; } diff --git a/yarn.lock b/yarn.lock index 71a70f1..78896a4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -663,6 +663,18 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7" integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ== +"@emotion/is-prop-valid@^0.8.2": + version "0.8.8" + resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" + integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== + dependencies: + "@emotion/memoize" "0.7.4" + +"@emotion/memoize@0.7.4": + version "0.7.4" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" + integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== + "@emotion/memoize@^0.8.0": version "0.8.0" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" @@ -2738,6 +2750,15 @@ fraction.js@^4.2.0: resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950" integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA== +framer-motion@^10.16.4: + version "10.16.4" + resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.16.4.tgz#30279ef5499b8d85db3a298ee25c83429933e9f8" + integrity sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA== + dependencies: + tslib "^2.4.0" + optionalDependencies: + "@emotion/is-prop-valid" "^0.8.2" + fs-constants@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"