Skip to content

Commit

Permalink
work packages rework
Browse files Browse the repository at this point in the history
  • Loading branch information
@andresgnlez
andresgnlez committed Oct 28, 2024
1 parent 9875738 commit 5bbc83b
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 132 deletions.
2 changes: 1 addition & 1 deletion src/containers/about/partners/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function Partners() {
technology, and natural sciences, most of whom also have substantial experience with
hands-on Citizen Science. The consortium also consists of institutional actors,
environmental NGOs practicing Citizen Science, as well as a network of Fab Labs and
Designers and the private sector. This enables the more4nature consortium to implement its
designers and the private sector. This enables the more4nature consortium to implement its
ambitious and truly innovative approach.
</p>
<ul className="grid flex-wrap divide-grey-800/30 border-l border-t border-grey-800/30 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
Expand Down
158 changes: 27 additions & 131 deletions src/containers/about/work-packages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,3 @@
'use client';

import { useEffect, useRef, useState } from 'react';

import { Media } from '@/containers/media';

import DiscoverMoreButton from '@/components/discover-more-button';
import {
Dialog,
Expand Down Expand Up @@ -62,138 +56,40 @@ const WORK_PACKAGES = [
},
];

function getScrollPositionRelativeToElement(element: HTMLLIElement) {
const rect = element.getBoundingClientRect();

return {
top: rect.top + window.scrollY,
left: rect.left + window.scrollX,
};
}

export default function WorkPackages() {
const [pagePositionY, setPagePositionY] = useState(0);
const itemsRefs = useRef<HTMLLIElement[]>([]);
const [itemsBreakpoints, setItemsBreakpoints] = useState<
{
start: number;
end: number;
}[]
>([]);
const [currentWorkPackage, setCurrentWorkPackage] = useState(1);

useEffect(() => {
const getPositionY = () => {
setPagePositionY(window.scrollY);
};
window.addEventListener('scroll', getPositionY);

return () => {
window.removeEventListener('scroll', getPositionY);
};
}, []);

useEffect(() => {
if (itemsRefs.current?.length) {
const newItemsBreakpoints = itemsRefs.current.map((itemRef) => {
const { top } = getScrollPositionRelativeToElement(itemRef);
return {
start: top,
end: top + itemRef.clientHeight,
};
});
setItemsBreakpoints(newItemsBreakpoints);
}
}, []);

useEffect(() => {
itemsBreakpoints.forEach((item, index) => {
if (pagePositionY >= item.start && pagePositionY <= item.end) {
setCurrentWorkPackage(index + 1);
}
});
}, [itemsBreakpoints, pagePositionY]);

return (
<div className="bg-grey-800 text-white">
<Wrapper className="space-y-8 lg:space-y-14">
<h3 className="text-xl lg:text-2xl">Work Packages</h3>
<Media lessThan="md">
<ul className="col-span-10 grid-cols-10 space-y-10">
{WORK_PACKAGES.map(({ name, description, organization }, index) => (
<li
key={name}
// @ts-expect-error fix later
ref={(el) => (itemsRefs.current[index] = el as NonNullable<typeof el>)}
>
<div className="space-y-8">
<div className="flex flex-col space-y-2">
<div>
<span className="text-xl">0{index + 1}</span>
<span className="text-white/30">/0{WORK_PACKAGES.length}</span>
</div>
<h4 className="text-lg">{name}</h4>
</div>
<Dialog>
<DialogTrigger asChild>
<DiscoverMoreButton />
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{name}</DialogTitle>
<DialogDescription>
<>
<p>Led by {organization}</p>
{description}
</>
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>
</div>
</li>
))}
</ul>
</Media>
<Media greaterThanOrEqual="md">
<div className="relative grid grid-cols-12 gap-4">
<div className="col-span-2">
<span className="sticky top-0 pt-10">
<span className="text-xl">0{currentWorkPackage}</span>
<ul className="col-span-10 grid-cols-10 space-y-20">
{WORK_PACKAGES.map(({ name, description, organization }, index) => (
<li key={name}>
<span className="pt-10">
<span className="text-xl">0{index + 1}</span>
<span className="text-white/30">/0{WORK_PACKAGES.length}</span>
</span>
</div>
<ul className="col-span-10 grid-cols-10 space-y-20 pt-10">
{WORK_PACKAGES.map(({ name, description, organization }, index) => (
<li
key={name}
// @ts-expect-error fix later
ref={(el) => (itemsRefs.current[index] = el as NonNullable<typeof el>)}
>
<div className="space-y-8">
<h4 className="text-xl">{name}</h4>
<Dialog>
<DialogTrigger asChild>
<DiscoverMoreButton />
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{name}</DialogTitle>
<DialogDescription>
<>
<p>Led by {organization}</p>
{description}
</>
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>
</div>
</li>
))}
</ul>
</div>
</Media>
<div className="space-y-8">
<h4 className="text-xl">{name}</h4>
<Dialog>
<DialogTrigger asChild>
<DiscoverMoreButton />
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>{name}</DialogTitle>
<DialogDescription>
<>
<p>Led by {organization}</p>
{description}
</>
</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>
</div>
</li>
))}
</ul>
</Wrapper>
</div>
);
Expand Down

0 comments on commit 5bbc83b

Please sign in to comment.