Skip to content

Journal, Peer Review and My Funding: compact heroes of one height #1156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yattias merged 1 commit into from
Oct 8, 2026
Merged

Journal, Peer Review and My Funding: compact heroes of one height #1156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions app/journal/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const PIPELINE_STEPS = [
] as const;

const JournalIssueCards = () => (
<div className="relative aspect-[3/4] w-[11.7rem] flex-shrink-0 sm:w-[13.5rem]">
<div className="relative aspect-[3/4] w-[11.7rem] flex-shrink-0">
<div
aria-hidden="true"
className="absolute -inset-6 origin-bottom -rotate-[6deg] rounded-[2.5rem] bg-primary-500/25 blur-2xl"
Expand Down Expand Up @@ -83,7 +83,7 @@ const JournalIssueCards = () => (
);

const JournalTimeline = () => (
<div className="mt-8 w-full max-w-lg overflow-x-auto pb-1">
<div className="mt-6 w-full max-w-lg overflow-x-auto pb-1">
<div className="grid grid-cols-2">
{PIPELINE_STEPS.map((step, index) => {
const isCurrent = step.href === null;
Expand Down Expand Up @@ -168,7 +168,7 @@ const MobileJournalDetails = () => (

const JournalHero = () => (
<div className="relative border-b border-gray-200 bg-gray-50">
<div className="relative z-10 mx-auto max-w-[1180px] px-4 py-16 tablet:!px-8 sm:py-20">
<div className="relative z-10 mx-auto max-w-[1180px] px-4 py-10 tablet:!px-8 sm:py-12">
<div className="flex flex-col gap-10 lg:flex-row lg:items-center lg:justify-between">
<div className="max-w-2xl">
<h1
Expand All @@ -187,7 +187,8 @@ const JournalHero = () => (
<JournalTimeline />
</div>

<div className="flex justify-center lg:justify-end lg:pr-6">
{/* Wide screens only, and no taller than the text beside it, as on My Funding. */}
<div className="hidden lg:flex lg:justify-end lg:pr-6">
<JournalIssueCards />
</div>
</div>
Expand Down
12 changes: 6 additions & 6 deletions app/my-funding/components/MyFundingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,7 +338,7 @@ export function MyFundingPage() {

const hero = isEmpty ? (
<MyFundingWelcomeHero
line="This page fills in as you take part: what you give, the RFPs you open, the proposals you write, and the scientists behind them."
line="This page fills in as you fund research, open RFPs, write proposals and review."
actions={welcomeActions}
/>
) : !isSettled ? (
Expand Down Expand Up @@ -513,19 +513,19 @@ function heroCovers(
function HeroSkeleton() {
return (
<div className="border-b border-gray-200 bg-gray-50" aria-hidden="true">
<div className="mx-auto max-w-[1012px] animate-pulse px-4 pt-10 tablet:!px-8 sm:pt-16">
<div className="lg:grid lg:grid-cols-[minmax(0,1fr)_320px]">
<div className="mx-auto max-w-[1012px] animate-pulse px-4 pt-10 tablet:!px-8 sm:pt-12">
<div className="lg:grid lg:min-h-[302px] lg:grid-cols-[minmax(0,1fr)_320px] lg:grid-rows-[1fr_auto]">
<div className="min-w-0 lg:col-start-1 lg:row-start-1 lg:self-center">
<div className="h-10 w-11/12 rounded-lg bg-gray-200 sm:h-12" />
<div className="mt-2 h-10 w-2/3 rounded-lg bg-gray-200 sm:h-12" />
<div className="mt-5 h-5 w-3/4 rounded bg-gray-200" />
</div>
<div className="hidden lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:-mr-6 lg:-mt-16 lg:flex lg:items-center lg:justify-end">
<div className={cn('flex items-center justify-center', DECK_SIZE.hero.box)}>
<div className="hidden lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:-mr-6 lg:-mt-12 lg:flex lg:items-center lg:justify-end">
<div className={cn('flex items-center justify-center', DECK_SIZE.box)}>
<div className="h-[200px] w-[164px] -rotate-3 rounded-2xl bg-gray-200" />
</div>
</div>
<div className="mt-8 flex h-12 items-center gap-6 border-b border-gray-200 sm:mt-12 lg:col-start-1 lg:row-start-2 lg:self-end">
<div className="mt-8 flex h-12 items-center gap-6 border-b border-gray-200 sm:mt-10 lg:col-start-1 lg:row-start-2 lg:self-end">
<div className="h-4 w-20 rounded bg-gray-200" />
<div className="h-4 w-16 rounded bg-gray-200" />
<div className="h-4 w-16 rounded bg-gray-200" />
Expand Down
2 changes: 1 addition & 1 deletion app/my-funding/components/MyFundingSignedOut.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export function MyFundingSignedOut() {
rightSidebarTopOffset="aligned"
topBanner={
<MyFundingWelcomeHero
line="Sign in to see everything you have funded, raised and reviewed in one place: the scientists you back, the updates they post, and where your money went."
line="Sign in to see what you have funded, raised and reviewed, all in one place."
actions={
<>
<button
Expand Down
18 changes: 10 additions & 8 deletions app/peer-review/PeerReviewHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const HOW_IT_WORKS = [

/** The journal's issue-card stack, dressed as an accepted proposal review. */
const PeerReviewCards = () => (
<div className="relative aspect-[3/4] w-[11.7rem] flex-shrink-0 sm:w-[13.5rem]">
<div className="relative aspect-[3/4] w-[11.7rem] flex-shrink-0">
<div
aria-hidden="true"
className="absolute -inset-6 origin-bottom -rotate-[6deg] rounded-[2.5rem] bg-orange-500/25 blur-2xl"
Expand Down Expand Up @@ -106,15 +106,16 @@ const PeerReviewCards = () => (
);

const PeerReviewTimeline = () => (
<div className="mt-8 w-full max-w-2xl overflow-x-auto pb-1">
<div className="min-w-[30rem]">
<div className="mt-6 w-full max-w-2xl overflow-x-auto pb-1">
{/* Three steps fit a phone's width with tighter gaps; wider screens keep the full spacing. */}
<div className="sm:min-w-[30rem]">
<div className="grid grid-cols-3">
{PIPELINE_STEPS.map((step, index) => {
const next = PIPELINE_STEPS[index + 1];
const number = String(index + 1).padStart(2, '0');

return (
<div key={step.label} className={cn('flex items-center', index > 0 && 'pl-6')}>
<div key={step.label} className={cn('flex items-center', index > 0 && 'pl-4 sm:pl-6')}>
<span
className={cn(
'font-mono text-2xl font-medium tracking-wide',
Expand All @@ -128,7 +129,7 @@ const PeerReviewTimeline = () => (
<span
aria-hidden="true"
className={cn(
'ml-6 h-px flex-1 bg-gradient-to-r',
'ml-3 h-px flex-1 bg-gradient-to-r sm:ml-6',
next.current
? 'from-gray-300 to-orange-400'
: step.current
Expand Down Expand Up @@ -159,7 +160,7 @@ const PeerReviewTimeline = () => (
);

return (
<div key={step.label} className={cn(index > 0 && 'pl-6')}>
<div key={step.label} className={cn(index > 0 && 'pl-4 sm:pl-6')}>
{step.href ? (
<Link href={step.href} className="group block">
{content}
Expand All @@ -177,7 +178,7 @@ const PeerReviewTimeline = () => (

export const PeerReviewHero = () => (
<div className="relative border-b border-gray-200 bg-gray-50">
<div className="relative z-10 mx-auto max-w-[1180px] px-4 py-16 tablet:!px-8 sm:py-20">
<div className="relative z-10 mx-auto max-w-[1180px] px-4 py-10 tablet:!px-8 sm:py-12">
<div className="flex flex-col gap-10 lg:flex-row lg:items-center lg:justify-between">
<div className="max-w-2xl">
<h1
Expand All @@ -196,7 +197,8 @@ export const PeerReviewHero = () => (
<PeerReviewTimeline />
</div>

<div className="flex justify-center lg:justify-end lg:pr-6">
{/* Wide screens only, and no taller than the text beside it, as on My Funding. */}
<div className="hidden lg:flex lg:justify-end lg:pr-6">
<PeerReviewCards />
</div>
</div>
Expand Down
35 changes: 14 additions & 21 deletions components/Funding/dashboard/MyFundingHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,19 +71,21 @@ interface MyFundingHeroProps {
export function MyFundingHero({ headline, line, covers, tabs }: MyFundingHeroProps) {
return (
<section aria-label="Your funding" className="border-b border-gray-200 bg-gray-50">
<div className="mx-auto max-w-[1012px] px-4 pt-10 tablet:!px-8 sm:pt-16">
<div className="lg:grid lg:grid-cols-[minmax(0,1fr)_320px]">
<div className="mx-auto max-w-[1012px] px-4 pt-10 tablet:!px-8 sm:pt-12">
{/* From lg, as tall as the Journal and Peer Review heroes (350px with the
padding above): the headline centers in the room above the tabs. */}
<div className="lg:grid lg:min-h-[302px] lg:grid-cols-[minmax(0,1fr)_320px] lg:grid-rows-[1fr_auto]">
<div className="min-w-0 lg:col-start-1 lg:row-start-1 lg:self-center">
<h1 className={HEADLINE} style={DISPLAY_FONT}>
{headline}
</h1>
{line && <p className="mt-4 text-lg text-gray-600">{line}</p>}
</div>
{/* Pulled up by the header's top padding, so the deck centers on the whole header. */}
<div className="hidden lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:-mr-6 lg:-mt-16 lg:flex lg:items-center lg:justify-end">
<CoverDeck covers={covers} size="hero" />
<div className="hidden lg:col-start-2 lg:row-span-2 lg:row-start-1 lg:-mr-6 lg:-mt-12 lg:flex lg:items-center lg:justify-end">
<CoverDeck covers={covers} />
</div>
<div className="mt-8 min-w-0 sm:mt-12 lg:col-start-1 lg:row-start-2 lg:self-end">
<div className="mt-8 min-w-0 sm:mt-10 lg:col-start-1 lg:row-start-2 lg:self-end">
{tabs}
</div>
</div>
Expand All @@ -104,8 +106,9 @@ interface MyFundingWelcomeHeroProps {
export function MyFundingWelcomeHero({ line, actions }: MyFundingWelcomeHeroProps) {
return (
<section aria-label="My Funding" className="border-b border-gray-200 bg-gray-50">
<div className="mx-auto max-w-[1012px] px-4 py-12 tablet:!px-8 sm:py-16">
<div className="flex flex-col gap-8 lg:flex-row lg:items-center lg:justify-between">
<div className="mx-auto max-w-[1012px] px-4 py-10 tablet:!px-8 sm:py-12">
{/* From lg, as tall as the Journal and Peer Review heroes. */}
<div className="flex flex-col gap-8 lg:min-h-[254px] lg:flex-row lg:items-center lg:justify-between">
<div className="min-w-0 max-w-2xl">
<h1 className={HEADLINE} style={DISPLAY_FONT}>
Fund the <HeadlineAmount>science</HeadlineAmount> you care about, or get yours funded.
Expand All @@ -128,26 +131,16 @@ const FAN_POSITIONS = [

/**
* Up to three cards fanned like the Journal's issue cards. Wide screens only.
* The deck is laid out at one size and scaled to fit where it sits: beside the
* welcome's headline, or in the signed-in header's right-hand column.
* The deck is laid out at one size and scaled to sit beside a headline.
*/
export const DECK_SIZE = {
full: { box: 'h-[260px] w-[364px]', scale: 'scale-[0.866]' },
hero: { box: 'h-[246px] w-[345px]', scale: 'scale-[0.82]' },
} as const;
export const DECK_SIZE = { box: 'h-[246px] w-[345px]', scale: 'scale-[0.82]' } as const;

function CoverDeck({
covers,
size = 'full',
}: {
readonly covers: readonly HeroCover[];
readonly size?: keyof typeof DECK_SIZE;
}) {
function CoverDeck({ covers }: { readonly covers: readonly HeroCover[] }) {
const shown = covers.slice(0, 3);
if (shown.length === 0) return null;
// One card sits in the middle; two take the outer places.
const places = shown.length === 1 ? [1] : shown.length === 2 ? [0, 2] : [0, 1, 2];
const { box, scale } = DECK_SIZE[size];
const { box, scale } = DECK_SIZE;
return (
<div aria-hidden="true" className={cn('relative hidden flex-shrink-0 lg:block', box)}>
<div className={cn('absolute left-0 top-0 h-[300px] w-[420px] origin-top-left', scale)}>
Expand Down
Loading