Skip to content

Chaos 689 Responsive fix for the campaign page (admin), campaign details and campaign questions (user) #691

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
peternuyn merged 4 commits into from
Mar 17, 2026
Merged

Chaos 689 Responsive fix for the campaign page (admin), campaign details and campaign questions (user) #691

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
359ae70
feat: enhance organisation campaign page.
Mar 12, 2026
5fc56db
feat: update TypeScript paths @components/
Mar 12, 2026
94c89b3
refactor: improve UI components and responsiveness for campaign and c…
Mar 12, 2026
942a0e4
fix: rollback api.ts and login (page.tsx) to avoid deployment mismatc…
Mar 17, 2026
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
76 changes: 38 additions & 38 deletions frontend-nextjs/src/app/[lang]/campaign/[orgSlug]/[campaignSlug]/campaign-info.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,38 +32,38 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
return (
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100">
{/* Hero Section */}
<div className="relative h-[400px] bg-gradient-to-br from-primary/20 to-primary/5 overflow-hidden">
<div className="relative h-[280px] overflow-hidden bg-gradient-to-br from-primary/20 to-primary/5 sm:h-[340px] lg:h-[400px]">
<img
src={campaignData.cover_image || '/placeholder.svg'}
alt="Campaign cover"
className="absolute inset-0 w-full h-full object-cover opacity-30"
/>
<div className="absolute inset-0 bg-gradient-to-t from-gray-900/80 to-transparent"></div>

<div className="relative h-full max-w-5xl mx-auto px-6 flex flex-col justify-end pb-12">
<h1 className="text-5xl font-bold text-white mb-4 drop-shadow-lg">
<div className="relative mx-auto flex h-full max-w-5xl flex-col justify-end px-4 pb-8 sm:px-6 sm:pb-12">
<h1 className="mb-3 break-words text-3xl font-bold leading-tight text-white drop-shadow-lg sm:mb-4 sm:text-4xl lg:text-5xl">
{campaignData.name}
</h1>
{campaignData.organisation_name && (
<p className="text-xl text-white/90 drop-shadow">
<p className="text-base text-white/90 drop-shadow sm:text-xl">
{campaignData.organisation_name}
</p>
)}
</div>
</div>

{/* Main Content */}
<div className="max-w-5xl mx-auto px-6 py-12">
<div className="mx-auto max-w-5xl px-4 py-6 sm:px-6 sm:py-10 lg:py-12">
{/* Flexbox container for main layout */}
<div className="flex flex-col lg:flex-row gap-8">
<div className="flex flex-col gap-6 lg:flex-row lg:gap-8">
{/* Left Column */}
<div className="lg:w-2/3">
<div className="order-2 lg:order-1 lg:w-2/3">
{/* Main Content Container with unified card */}
<div className="bg-white rounded-lg shadow-sm border border-gray-200">
{/* Campaign Description */}
{campaignData.description && (
<div className="p-6">
<h2 className="text-2xl font-semibold text-gray-900 mb-4 flex items-center gap-1">
<div className="p-4 sm:p-6">
<h2 className="mb-4 flex items-center gap-1 text-xl font-semibold text-gray-900 sm:text-2xl">
<Info className="w-6 h-6" />
{dict.common.about}
</h2>
Expand All @@ -80,8 +80,8 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:

{/* Application Requirements */}
{campaignData.application_requirements && (
<div className="p-6">
<h3 className="text-xl font-semibold mb-4 flex items-center gap-1">
<div className="p-4 sm:p-6">
<h3 className="mb-4 flex items-center gap-1 text-lg font-semibold sm:text-xl">
<FileText className="w-5 h-5" />
{dict.common.application_requirements}
</h3>
Expand All @@ -98,12 +98,12 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:

{/* Interview Information */}
{campaignData.interview_format && (
<div className="p-6">
<h3 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-1">
<div className="p-4 sm:p-6">
<h3 className="mb-4 flex items-center gap-1 text-lg font-semibold text-gray-900 sm:text-xl">
<Video className="w-5 h-5" />
{dict.common.interview_details}
</h3>
<div className="space-y-3 grid grid-cols-3">
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
<div className="flex flex-col justify-start gap-3">
<span className="text-sm font-medium text-gray-900 min-w-24">
{dict.common.interview_format}
Expand All @@ -115,7 +115,7 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
)}

</div>
<div className="flex flex-col justify-start gap-3 col-span-2">
<div className="col-span-1 flex flex-col justify-start gap-3 sm:col-span-2">
<span className="text-sm text-gray-600 capitalize">
{campaignData.interview_format}
</span>
Expand All @@ -133,8 +133,8 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
<hr className="border-gray-200" />

{/* Available Roles */}
<div className="p-6">
<h3 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-1">
<div className="p-4 sm:p-6">
<h3 className="mb-4 flex items-center gap-1 text-lg font-semibold text-gray-900 sm:text-xl">
<Briefcase className="w-5 h-5" />
{dict.common.available_roles}
</h3>
Expand All @@ -144,11 +144,11 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
key={role.id}
className="p-4 bg-gray-50 rounded-lg border border-gray-200"
>
<div className="flex justify-between mb-2">
<h4 className="text-lg font-semibold text-gray-900">
<div className="mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
<h4 className="text-base font-semibold text-gray-900 sm:text-lg">
{role.name}
</h4>
<span className="flex gap-1 items-center px-3 py-1 text-sm font-medium rounded-full">
<span className="flex w-fit items-center gap-1 rounded-full px-3 py-1 text-sm font-medium">
<Users className="w-5 h-5" /> {role.max_available}
</span>
</div>
Expand All @@ -171,21 +171,21 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
<hr className="border-gray-200" />

{/* Attachments */}
<div className="p-6">
<h3 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-1">
<div className="p-4 sm:p-6">
<h3 className="mb-4 flex items-center gap-1 text-lg font-semibold text-gray-900 sm:text-xl">
<Files className="w-5 h-5" />
{dict.common.attachments}
</h3>
<div>
{attachmentsData && attachmentsData.length > 0 && attachmentsData.map(attachment => (
<div>
<div key={attachment.id} className="mb-2 last:mb-0">
<a
href={attachment.download_url}
target="_blank"
rel="noopener noreferrer"
className="text-blue-600 hover:text-blue-800 underline flex items-center gap-2"
className="flex items-start gap-2 break-all text-sm text-blue-600 underline hover:text-blue-800 sm:text-base"
>
<FileText className="w-4 h-4" />
<FileText className="mt-0.5 h-4 w-4 shrink-0" />
{attachment.file_name} ({(attachment.file_size / 1024).toFixed(2)} KB)
</a>
</div>
Expand All @@ -197,8 +197,8 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
<hr className="border-gray-200" />

{/* Timeline Section */}
<div className="p-6">
<h3 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-1">
<div className="p-4 sm:p-6">
<h3 className="mb-4 flex items-center gap-1 text-lg font-semibold text-gray-900 sm:text-xl">
<Clock className="w-5 h-5" />
{dict.common.recruitment_timeline}
</h3>
Expand Down Expand Up @@ -277,20 +277,20 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
<hr className="border-gray-200" />

{/* Contact Information Section */}
<div className="pt-6 ml-6 mb-6">
<h3 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-1">
<div className="p-4 pb-6 sm:p-6">
<h3 className="mb-4 flex items-center gap-1 text-lg font-semibold text-gray-900 sm:text-xl">
<Phone className="w-5 h-5" />
{dict.common.contact_information}
</h3>

<div className="space-y-4">
{campaignData.website_url && (
<div className="flex items-center gap-3">
<ExternalLink className="text-gray-400 w-5 h-5 flex-shrink-0" />
<div className="flex items-start gap-3">
<ExternalLink className="h-5 w-5 shrink-0 text-gray-400" />
<div>
<a
href={campaignData.website_url}
className="text-sm text-primary hover:underline"
className="break-all text-sm text-primary hover:underline"
>
{dict.common.visit_website}
</a>
Expand All @@ -299,12 +299,12 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
)}

{campaignData.contact_email && (
<div className="flex items-center gap-3">
<Mail className="text-gray-400 w-5 h-5 flex-shrink-0" />
<div className="flex items-start gap-3">
<Mail className="h-5 w-5 shrink-0 text-gray-400" />
<div>
<a
href={`mailto:${campaignData.contact_email}?subject=[Chaos Application Query] ${campaignData.organisation_name} ${campaignData.name}`}
className="text-sm text-primary hover:underline"
className="break-all text-sm text-primary hover:underline"
>
{campaignData.contact_email}
</a>
Expand All @@ -317,10 +317,10 @@ export default function CampaignInfo({ orgSlug, campaignSlug, dict }: { orgSlug:
</div>

{/* Right Column - Sidebar */}
<div className="lg:w-1/3">
<div className="sticky top-6">
<div className="order-1 lg:order-2 lg:w-1/3">
<div className="lg:sticky lg:top-6">
{/* Apply Card */}
<div className="bg-white rounded-lg shadow-sm p-6 border border-gray-200">
<div className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm sm:p-6">
<h3 className="text-lg font-semibold text-gray-900 mb-4">
{dict.common.apply_now}
</h3>
Expand Down
34 changes: 19 additions & 15 deletions ...app/[lang]/campaign/apply/[campaignId]/application/[applicationId]/application-answer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ import { getCampaign, getCampaignRoles } from "@/models/campaign";
import { getInProgressApplication, submitApplication } from "@/models/application";
import { Answer, getAllCommonAnswers, updateApplicationRoles } from "@/models/answer";
import { useState, useEffect } from "react";
import RoleSelector from "../../../../../../../components/application-answer/role-selector";
import RoleTabs from "../../../../../../../components/application-answer/role-tabs";
import MainContent from "../../../../../../../components/application-answer/main-content";
import TabSwitcher from "../../../../../../../components/application-answer/tab-switcher";
import ReviewCard from "@/components/application-answer/review-card";
import RoleSelector from "@components/application-answer/role-selector";
import RoleTabs from "@components/application-answer/role-tabs";
import MainContent from "@components/application-answer/main-content";
import TabSwitcher from "@components/application-answer/tab-switcher";
import ReviewCard from "@components/application-answer/review-card";
import { getAllCommonQuestions, linkQuestionsAndAnswers, Question, QuestionAndAnswer } from "@/models/question";
import { getAllRoleAnswers } from "@/models/answer";
import { getAllRoleQuestions } from "@/models/question";
Expand Down Expand Up @@ -252,22 +252,26 @@ export default function ApplicationReview({
}, [selectedRoleIds, campaignId, applicationId, queryClient]);

return (
<div className="min-h-screen bg-background w-full overflow-y-scroll [&::-webkit-scrollbar]:hidden">
<div className="w-full mx-auto p-8">
<div className="mb-8">
<h1 className="text-3xl font-bold text-foreground mb-2">
<div className="min-h-screen w-full overflow-x-hidden bg-background">
<div className="mx-auto w-full max-w-7xl px-4 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8">
<div className="mb-5 sm:mb-8">
<h1 className="mb-2 break-words text-2xl font-bold text-foreground sm:text-3xl">
{campaign?.name}
</h1>
<h3 className="text-xl text-muted-foreground">
<h3 className="text-base text-muted-foreground sm:text-xl">
{formatDate(campaign?.starts_at)} - {formatDate(campaign?.ends_at)}
</h3>
</div>
<div></div>
<div className="flex gap-8 w-full">
<RoleSelector roles={roles} maxRolesPerApplication={campaign?.max_roles_per_application} selectedRoleIds={selectedRoleIds} onChangeSelectedRoles={updateRoles} applicationId={applicationId} dict={dict} />
<div className="flex-1">
<RoleTabs roles={roles} selectedRoleIds={selectedRoleIds} activeTab={activeTab} onChangeActiveTab={setActiveTab} dict={dict} />
<div className="relative pb-14">
<div className="flex w-full flex-col gap-4 lg:gap-8 xl:flex-row">
<div className="w-full xl:w-80 xl:shrink-0">
<RoleSelector roles={roles} maxRolesPerApplication={campaign?.max_roles_per_application} selectedRoleIds={selectedRoleIds} onChangeSelectedRoles={updateRoles} applicationId={applicationId} dict={dict} />
</div>
<div className="min-w-0 flex-1">
<div className="overflow-x-auto pb-1">
<RoleTabs roles={roles} selectedRoleIds={selectedRoleIds} activeTab={activeTab} onChangeActiveTab={setActiveTab} dict={dict} />
</div>
<div className="relative pb-12 sm:pb-14">
<MainContent campaignId={campaignId} applicationId={applicationId} activeTab={activeTab} dict={dict} updateRoleAnswers={updateQuestionAnswer} qaByRole={qaByRole} />
<TabSwitcher roles={roles} selectedRoleIds={selectedRoleIds} activeTab={activeTab} onChangeActiveTab={setActiveTab} dict={dict} />
</div>
Expand Down
Loading
Loading