xevion/xevion.dev
1
0
Fork 0
mirror of https://github.com/Xevion/xevion.dev.git synced 2025-12-08 10:09:11 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add mobile-only link button, Adjust mobile text sizing, adjust link/click event handling

Browse Source
This commit is contained in:
Xevion
2022-12-26 11:08:10 -06:00
parent 6c8679eb43
commit 1108495507
2 changed files with 52 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/components/ItemCard.tsx
View File

@@ -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;

2
src/pages/index.tsx
View File

@@ -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}