jason/polaris-task-force
1
0
Fork 0
Code Issues Wiki Activity

fix(missions): stack hero content in flow on mobile and move attendance above details on small screens

Browse source
This commit is contained in:
Jason Fraley 2026-09-08 01:31:00 -04:00
parent dcc308c2ae
commit de3db4bd09
1 changed files with 29 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/app/(frontend)/intelligence/missions/[id]/page.tsx
View file

@ -241,9 +241,19 @@ export default async function MissionDetailPage({ params }: MissionDetailPagePro
})),
};
const attendanceCard = (
<MissionAttendance
missionId={mission.id}
currentUserId={currentUser ? (currentUser.id as number) : null}
currentResponse={currentResponse}
attendanceClosed={attendanceClosed}
{...attendanceProps}
/>
);
return (
<div className="flex flex-col">
<header className="relative min-h-[500px] w-full overflow-hidden bg-background">
<header className="relative flex min-h-[500px] w-full flex-col overflow-hidden bg-background">
<div className="absolute top-0 left-0 px-5 pt-5 pb-3 z-10">
<Link
href="/intelligence/missions"
@ -266,32 +276,31 @@ export default async function MissionDetailPage({ params }: MissionDetailPagePro
<div className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/40 to-background" />
<div className="absolute inset-0 bg-gradient-to-r from-black/30 via-transparent to-black/40" />
<div className="absolute top-4 right-4 z-20 flex gap-2">
<span
className={`rounded-md border border-white/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider backdrop-blur-sm ${statusColors[mission.ownershipAndStatus.status] ?? "bg-muted text-muted-foreground"}`}
>
{mission.ownershipAndStatus.status}
</span>
<span
className={`rounded-md border border-white/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider backdrop-blur-sm ${operationTypeColors[mission.operationType] ?? "bg-muted text-muted-foreground"}`}
>
{operationTypeLabels[mission.operationType] ?? mission.operationType}
</span>
</div>
<div className="absolute inset-0 flex flex-col justify-end p-6 md:p-10 lg:p-12">
<div className="relative z-10 mt-auto flex flex-col px-5 pb-6 pt-14 md:absolute md:inset-0 md:justify-end md:px-10 md:py-10 lg:px-12">
<div className="mx-auto flex w-full max-w-7xl flex-col">
<div className="z-20 mb-4 flex flex-wrap gap-2 md:absolute md:top-4 md:right-4 md:mb-0">
<span
className={`rounded-md border border-white/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider backdrop-blur-sm ${statusColors[mission.ownershipAndStatus.status] ?? "bg-muted text-muted-foreground"}`}
>
{mission.ownershipAndStatus.status}
</span>
<span
className={`rounded-md border border-white/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider backdrop-blur-sm ${operationTypeColors[mission.operationType] ?? "bg-muted text-muted-foreground"}`}
>
{operationTypeLabels[mission.operationType] ?? mission.operationType}
</span>
</div>
<div className="flex items-center gap-2 font-mono text-sm uppercase tracking-widest text-white/60">
<CrosshairIcon className="size-4" />
<span>{mission.codeName}</span>
</div>
<h1
id="mission-title"
className="mt-3 text-5xl font-bold tracking-tight text-white drop-shadow-2xl md:text-6xl"
className="mt-3 text-4xl font-bold tracking-tight text-white drop-shadow-2xl md:text-6xl"
>
{mission.name}
</h1>
<p className="mt-2 max-w-3xl text-lg leading-relaxed text-white/80">
<p className="mt-2 max-w-3xl text-base leading-relaxed text-white/80 md:text-lg">
{mission.summary}
</p>
@ -367,6 +376,8 @@ export default async function MissionDetailPage({ params }: MissionDetailPagePro
</header>
<div className="p-5 flex flex-col gap-6 max-w-7xl mx-auto w-full">
{/* Attendance sits right under the hero on stacked (below-xl) layouts */}
<div className="xl:hidden">{attendanceCard}</div>
<div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
{/* ── Main Content (2/3) ──────────────────────────── */}
<div className="xl:col-span-2 flex flex-col gap-6">
@ -472,13 +483,7 @@ export default async function MissionDetailPage({ params }: MissionDetailPagePro
/>
)}
<MissionAttendance
missionId={mission.id}
currentUserId={currentUser ? (currentUser.id as number) : null}
currentResponse={currentResponse}
attendanceClosed={attendanceClosed}
{...attendanceProps}
/>
<div className="hidden xl:block">{attendanceCard}</div>
{/* Campaign Card */}
{campaign && (