From 1108495507ce0a43b032bb90992a54b4da0b87fa Mon Sep 17 00:00:00 2001
From: Xevion <ryanchwalters@gmail.com>
Date: Mon, 26 Dec 2022 11:08:10 -0600
Subject: [PATCH] Add mobile-only link button, Adjust mobile text sizing,
 adjust link/click event handling

---
 src/components/ItemCard.tsx | 86 ++++++++++++++++++++++---------------
 src/pages/index.tsx         |  2 +-
 2 files changed, 52 insertions(+), 36 deletions(-)

diff --git a/src/components/ItemCard.tsx b/src/components/ItemCard.tsx
index 3c7ce2d..7302ae2 100644
--- a/src/components/ItemCard.tsx
+++ b/src/components/ItemCard.tsx
@@ -19,49 +19,65 @@ type ItemCardProps = {
 
 const ItemCard = ({banner, bannerBlur, title, description, links, location}: ItemCardProps) => {
     const itemRef = useRef<HTMLDivElement>(null);
+    const mobileButtonRef = useRef<HTMLAnchorElement>(null);
     const [active, toggleActive, setActive] = useToggle()
     const router = useRouter();
 
-    useOnClickOutside(itemRef, () => {
-        setActive(false);
+    useOnClickOutside(itemRef, (event) => {
+        if (mobileButtonRef.current != null && mobileButtonRef.current?.contains(event.target as Node))
+            return;
+        else
+            setActive(false);
     })
 
-    // TODO: Add mobile-only button when tapped showing button link for project page
+    const navigate = () => {
+        if (!isHoverable()) toggleActive();
+        else {
+            router.push(location);
+        }
+    }
 
-    return <div ref={itemRef}
-                className={classNames("item", active ? "active" : null)}
-                onClick={() => {
-                    if (!isHoverable()) toggleActive();
-                    else {
-                        router.push(location);
-                    }
-                }}>
-        <DependentImage fill src={banner} blurDataURL={bannerBlur}
-                        className={(loaded) => classNames("object-cover", loaded ? null : "blur-xl")}
-                        placeholder="blur"
-                        alt={`Banner for ${title}`}
-        />
-        <div className="elements grid grid-cols-12 h-full m-2 px-1 sm:px-4">
-            <Link href={{pathname: location}}
-                  className=" col-span-9 lg:col-span-8 max-h-full overflow-hidden drop-shadow-2xl pb-2 md:p-1 pl-2">
-
-                <div className="text-2xl sm:text-2xl md:text-3xl font-semibold">{title}</div>
-                <div className="mt-0 md:mt-1.5 text-xl sm:text-lg md:text-xl overflow-hidden ">
-                    <ReactMarkdown>{description}</ReactMarkdown>
-                </div>
-            </Link>
-            {(links?.length ?? 0) > 0 ?
-                <div className="col-span-3 lg:col-span-4 w-full flex justify-end max-h-full md:py-5">
-                    <div className="grid grid-cols-2 grid-rows-2 p-2 md:gap-3 aspect-square icon-grid">
-                        {links!.map(({icon, location, newTab}) =>
-                            <Link key={location} href={location} target={(newTab ?? true) ? "_blank" : "_self"}
-                                  onClick={stopPropagation}>
-                                {LinkIcons[icon]!({})}
-                            </Link>)}
+    return <>
+        <div ref={itemRef}
+             className={classNames("item [&:not(:first-child)]:mt-3", active ? "active" : null)}
+             onClick={navigate}>
+            <DependentImage fill src={banner} blurDataURL={bannerBlur}
+                            className={(loaded) => classNames("object-cover", loaded ? null : "blur-xl")}
+                            placeholder="blur"
+                            alt={`Banner for ${title}`}
+            />
+            <div className="elements grid grid-cols-12 h-full m-2 px-1 sm:px-4">
+                <div
+                    className="col-span-12 sm:col-span-9 lg:col-span-8 max-h-full overflow-hidden drop-shadow-2xl pb-2 md:p-1 pl-2">
+                    <Link href={{pathname: location}}
+                          className="text-lg sm:text-2xl md:text-3xl font-semibold">{title}</Link>
+                    <div className="mt-0 md:mt-1.5 text-base sm:text-xl md:text-xl overflow-hidden"
+                         onClick={navigate}
+                         style={{hyphens: "auto"}}>
+                        <ReactMarkdown>{description}</ReactMarkdown>
                     </div>
-                </div> : null}
+                </div>
+                {(links?.length ?? 0) > 0 ?
+                    <div
+                        className="hidden sm:block col-span-3 lg:col-span-4 w-full flex justify-end max-h-full md:py-5">
+                        <div className="grid grid-cols-2 grid-rows-2 p-2 md:gap-3 aspect-square icon-grid">
+                            {links!.map(({icon, location, newTab}) =>
+                                <Link key={location} href={location} target={(newTab ?? true) ? "_blank" : "_self"}
+                                      onClick={stopPropagation}>
+                                    {LinkIcons[icon]!({})}
+                                </Link>)}
+                        </div>
+                    </div> : null}
+            </div>
+
         </div>
-    </div>
+        {active ?
+            <Link ref={mobileButtonRef} href={{pathname: location}}
+                  className=" bg-zinc-800 rounded border border-zinc-900 shadow w-full h-9 p-2 flex items-center justify-center">
+                Learn More
+            </Link>
+            : null}
+    </>
 }
 
 export default ItemCard;
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index cfb2ab2..56373f7 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -102,7 +102,7 @@ const Home: NextPage<HomeStaticProps> = ({projects}: HomeStaticProps) => {
             <main
                 className="flex py-3 min-h-screen flex-row md:items-center justify-center bg-zinc-900 text-zinc-50">
                 <div className="h-full w-full max-w-[95%] lg:max-w-[85%] xl:max-w-[70%] mx-auto">
-                    <div className="flex h-full m-1 flex-col justify-start gap-y-4">
+                    <div className="flex h-full m-1 flex-col justify-start gap-y-1">
                         {
                             projects.map((project, index) =>
                                 <ItemCard key={index} {...project}