Skip to content
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.

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

chore: Improve mobile responsiveness #104

Merged
merged 24 commits into from
Feb 24, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
749c962
chore: remove extra margin on join us page
phoenixpereira Feb 19, 2024
fb920be
feat: make account boxes fit better on mobile
phoenixpereira Feb 22, 2024
ba98af1
refactor: simplify bool component props and rename isFormButton to size
phoenixpereira Feb 24, 2024
465c78a
feat(home): Add join us button at end of page
rayokamoto Feb 19, 2024
f9391c8
fix(home): Center sponsors on screen resize
rayokamoto Feb 19, 2024
0ab6332
feat(home): Use join us link instead of button
rayokamoto Feb 19, 2024
67fbe90
chore: spelling and grammar fixes (#86)
rayokamoto Feb 19, 2024
b5396ec
chore: more spelling and grammar fixes (#88)
tinnamchoi Feb 19, 2024
7d51320
feat: add button loading to indicate request in progress (#89)
rayokamoto Feb 19, 2024
ab63f12
chore: add loading for pay online button (#92)
rayokamoto Feb 19, 2024
28f034a
feat: enable ssr for header
jsun969 Feb 19, 2024
565f05b
feat(api): remove unnecessary apis
jsun969 Feb 19, 2024
ba1cd10
feat: refresh rsc after mutation (#94)
jsun969 Feb 19, 2024
d28bdde
feat: add titles for all pages
jsun969 Feb 19, 2024
2795259
feat(seo): disable robot for few pages
jsun969 Feb 19, 2024
8361990
fix(seo): remove metadata on client components
jsun969 Feb 19, 2024
e48fc50
fix(header): mobile menu has correct links and behaviour (#96)
rayokamoto Feb 19, 2024
97c5c2a
chore: Add underline styling to mobile menu links (#98)
rayokamoto Feb 19, 2024
3da5c9e
fix(contact): minor fix for mobile style (#100)
jsun969 Feb 19, 2024
834a787
Merge branch 'main' into chore/mobile-responsiveness
phoenixpereira Feb 24, 2024
3041225
fix: make button component valid after merge
phoenixpereira Feb 24, 2024
06cf029
chore: use self-closing tag for divs
phoenixpereira Feb 24, 2024
9789fe0
chore: make settings container wider on desktop
phoenixpereira Feb 24, 2024
20b66ab
fix(settings): responsive style for setting tabs
jsun969 Feb 24, 2024
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
6 changes: 3 additions & 3 deletions src/app/(account)/forgot-password/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -126,9 +126,9 @@ export default function ForgotPasswordPage() {
});

return (
<section className="flex justify-center">
<FancyRectangle colour="purple" offset="8" filled={true}>
<div className="z-0 w-[24rem] border-4 border-black bg-white px-8 py-8 text-black md:w-[32rem] md:px-12 md:py-12">
<section className="w-full max-w-lg">
<FancyRectangle colour="purple" offset="8" filled fullWidth>
<div className="z-0 w-full border-4 border-black bg-white p-8 text-black md:p-12">
<h3 className="text-3xl font-bold">Forgot Your Password?</h3>
<p className="mb-8 text-xl">{STEP_INSTRUCTIONS[step]}</p>
{step === 1 && (
Expand Down
10 changes: 5 additions & 5 deletions src/app/(account)/join/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default function JoinPage() {
}, [isSignedIn]);

return (
<main className="mx-4 flex flex-col items-center gap-8 px-4 md:mx-10 md:gap-16">
<main className="flex flex-col items-center gap-8 md:gap-16">
<Title colour="purple">Join Us</Title>
<section>
<div className="relative z-10 flex flex-col text-2xl font-black md:flex-row lg:text-3xl">
Expand All @@ -53,11 +53,11 @@ export default function JoinPage() {
</p>
</div>
</section>
<section>
<FancyRectangle colour="purple" offset="8" filled={true}>
<div className="z-0 w-full border-4 border-black bg-white px-12 py-12 text-black">
<section className="w-full max-w-lg">
<FancyRectangle colour="purple" offset="8" filled fullWidth>
<div className="z-0 w-full border-4 border-black bg-white p-8 text-black md:p-12">
<h3 className="text-3xl font-bold">{heading.title}</h3>
<p className="text-xl">{heading.description}</p>
<p className="mb-8 text-xl">{heading.description}</p>

<SignedOut>
<StepOne />
Expand Down
12 changes: 9 additions & 3 deletions src/app/(account)/join/steps/StepFour.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,17 @@ export default function StepFour() {
type="checkbox"
/>
</div>
<div className="mt-8 flex justify-center space-x-4">
<Button onClick={prevStep} colour="orange">
<div className="grid grid-cols-2 gap-4">
<Button onClick={prevStep} colour="orange" width="w-full" size="small">
Back
</Button>
<Button onClick={handleSignUp} colour="purple" loading={createMember.isMutating}>
<Button
onClick={handleSignUp}
colour="purple"
width="w-full"
size="small"
loading={createMember.isMutating}
>
Sign up
</Button>
</div>
Expand Down
14 changes: 8 additions & 6 deletions src/app/(account)/join/steps/StepOne.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -153,14 +153,15 @@ export default function StepOne() {

return (
<div>
<Button onClick={handleGoogleSignUp} colour="white" width="w-[19rem] md:w-[25.5rem]">
<FcGoogle className="mr-2 inline-block text-xl" /> Continue with Google
<Button onClick={handleGoogleSignUp} colour="white" width="w-full" size="small">
<FcGoogle className="mb-0.5 mr-2 inline-block text-xl" />
Continue with Google
</Button>

<div className="my-6 mt-10 flex items-center justify-center">
<div className="w-full border-t border-grey"></div>
<div className="w-full border-t border-grey" />
<p className="mx-4 text-grey">or</p>
<div className="w-full border-t border-grey"></div>
<div className="w-full border-t border-grey" />
</div>

<form onSubmit={handleSignUp}>
Expand All @@ -173,11 +174,12 @@ export default function StepOne() {
control={form.control}
name="password"
/>
<div className="mt-8 flex justify-center space-x-4">
<div className="mt-8">
<Button
colour="orange"
width="w-[19rem] md:w-[25.5rem]"
width="w-full"
type="submit"
size="small"
loading={emailJoinLoading}
>
Continue
Expand Down
6 changes: 3 additions & 3 deletions src/app/(account)/join/steps/StepThree.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -102,11 +102,11 @@ export default function StepThree() {
/>
</>
)}
<div className="mt-8 flex justify-center space-x-4">
<Button onClick={prevStep} colour="orange">
<div className="grid grid-cols-2 gap-4">
<Button onClick={prevStep} colour="orange" width="w-full" size="small">
Back
</Button>
<Button type="submit" colour="orange">
<Button type="submit" colour="orange" width="w-full" size="small">
Continue
</Button>
</div>
Expand Down
8 changes: 3 additions & 5 deletions src/app/(account)/join/steps/StepTwo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -70,11 +70,9 @@ export default function StepTwo() {
{form.watch('studentStatus') === 'At The University of Adelaide' && (
<ControlledField label="Student ID" control={form.control} name="studentId" />
)}
<div className="mb-4 mt-8 flex w-full">
<Button colour="orange" width="w-[19rem] md:w-[25.5rem]" type="submit">
Continue
</Button>
</div>
<Button colour="orange" width="w-full" size="small" type="submit">
Continue
</Button>
</form>
);
}
6 changes: 3 additions & 3 deletions src/app/(account)/settings/Settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,17 @@ export default function Settings({ settingData }: { settingData: SettingData })
const { refresh } = useRouter();

return (
<>
<div className="flex w-full flex-col gap-4 border-4 border-black bg-white px-4 py-8 text-black md:flex-row md:gap-8 md:p-12">
<Sidebar
currentTab={tab}
onTabChange={(tab) => {
setTab(tab);
refresh();
}}
/>
<div className="flex w-full">
<div className="w-full">
<Tab settingData={settingData} />
</div>
</>
</div>
);
}
9 changes: 6 additions & 3 deletions src/app/(account)/settings/Sidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ function SidebarTab({ tabName, currentTab, onTabChange }: SidebarTabProps) {
const selected = currentTab === tabName;
return (
<button
className={`text-left ${selected ? 'cursor-default font-bold' : 'hover:underline'}`}
className={`text-nowrap text-xl md:text-base ${selected ? 'cursor-default font-bold' : 'hover:underline'}`}
onClick={() => {
if (!selected) {
onTabChange(tabName);
Expand All @@ -25,11 +25,14 @@ function SidebarTab({ tabName, currentTab, onTabChange }: SidebarTabProps) {
interface SidebarProps {
currentTab: TabNames;
onTabChange: (tab: TabNames) => void;
className?: string;
}

export default function Sidebar({ currentTab, onTabChange }: SidebarProps) {
export default function Sidebar({ currentTab, onTabChange, className }: SidebarProps) {
return (
<div className="flex w-48 flex-col space-y-4 border-r-2 border-grey">
<div
className={`${className} flex flex-col items-center gap-4 overflow-y-scroll border-2 border-grey p-2 md:items-end md:overflow-visible md:border-y-0 md:border-l-0 md:border-r-2 md:py-0 md:pl-0 md:pr-8`}
>
{TAB_NAMES.map((tab, i) => (
<SidebarTab
currentTab={currentTab}
Expand Down
32 changes: 15 additions & 17 deletions src/app/(account)/settings/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,27 +21,25 @@ export default async function SettingsPage() {
const membershipPayment = await verifyMembershipPayment(user.id);

return (
<div className="flex flex-col">
<main className="flex flex-col items-center gap-8 md:gap-16">
<div className="flex justify-center">
<Title colour="purple">Settings</Title>
</div>
<section className="mt-12 flex justify-center">
<FancyRectangle colour="purple" offset="8" filled>
<div className="z-0 flex w-fit gap-8 border-4 border-black bg-white px-8 py-8 text-black md:w-[48rem] md:px-12 md:py-12">
{exists ? (
<Settings settingData={{ membershipPayment }} />
) : (
<h2 className="text-2xl">
Please finishing{' '}
<Link href="/join" className="font-bold text-purple">
signing up
</Link>{' '}
first.
</h2>
)}
</div>
<section className="w-full max-w-[62rem]">
<FancyRectangle colour="purple" offset="8" filled fullWidth>
{exists ? (
<Settings settingData={{ membershipPayment }} />
) : (
<h2 className="text-2xl">
Please finishing{' '}
<Link href="/join" className="font-bold text-purple">
signing up
</Link>{' '}
first.
</h2>
)}
</FancyRectangle>
</section>
</div>
</main>
);
}
8 changes: 4 additions & 4 deletions src/app/(account)/settings/tabs/AccountSettings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ export default function AccountSettings({
Membership Status: <span className="text-orange">Payment Required</span>
</h2>

<div className="mb-6 border-b-2 border-black"></div>
<div className="mb-6 border-b-2 border-black" />
<p>
Finalise your membership by{' '}
<span
Expand All @@ -78,7 +78,7 @@ export default function AccountSettings({
)}
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
<h2 className="text-2xl font-bold">Change Email</h2>
<div className="mb-2 border-b-2 border-black"></div>
<div className="mb-2 border-b-2 border-black" />
<p className="font-bold">Email address</p>
<input
type="email"
Expand All @@ -93,7 +93,7 @@ export default function AccountSettings({
</form>
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
<h2 className="text-2xl font-bold">Change Password</h2>
<div className="mb-2 border-b-2 border-black"></div>
<div className="mb-2 border-b-2 border-black" />
<div className="flex flex-col gap-2">
<label htmlFor="oldPassword" className="font-bold">
Old Password
Expand Down Expand Up @@ -139,7 +139,7 @@ export default function AccountSettings({
</form>
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
<h2 className="text-2xl font-bold">Change Linked Google Account</h2>
<div className="mb-2 border-b-2 border-black"></div>
<div className="mb-2 border-b-2 border-black" />
<p className="font-bold">Link Status: </p>
</form>
</div>
Expand Down
6 changes: 4 additions & 2 deletions src/app/(account)/settings/tabs/MembershipSettings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function MembershipSettings({
{payment.paid ? 'Paid' : 'Payment Required'}
</span>
</h2>
<div className="mb-6 border-b-2 border-black"></div>
<div className="mb-6 border-b-2 border-black" />
{payment.paid ? (
<p>
You are a CS Club member! Your membership expires on{' '}
Expand All @@ -51,11 +51,13 @@ export default function MembershipSettings({
.
</p>
<h2 className="mt-8 text-2xl font-bold">Pay Membership Fee</h2>
<div className="mb-6 border-b-2 border-black"></div>
<div className="mb-6 border-b-2 border-black" />
<Button
type="submit"
colour="orange"
onClick={handlePayment}
width="w-full md:w-42"
size="small"
loading={pay.isMutating}
>
Pay Online
Expand Down
2 changes: 1 addition & 1 deletion src/app/(account)/settings/tabs/NotificationsSettings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default function NotificationsSettings() {
<div className="relative flex w-full flex-col gap-10">
<div>
<h2 className="text-2xl font-bold">Change Email Notification Settings</h2>
<div className="mb-2 border-b-2 border-black"></div>
<div className="mb-2 border-b-2 border-black" />
</div>
<div className="items-left flex flex-col gap-4 md:flex-row">
<h2 className="text-lg font-semibold">Enable Email Notifications</h2>
Expand Down
2 changes: 1 addition & 1 deletion src/app/(account)/settings/tabs/PersonalInfoSettings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ export default function PersonalInfoSettings() {
return (
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4">
<h2 className="text-2xl font-bold">Change Personal Info</h2>
<div className="mb-2 border-b-2 border-black"></div>
<div className="mb-2 border-b-2 border-black" />
<ControlledField label="First Name" name="firstName" control={control} type="text" />
<ControlledField label="Last Name" name="lastName" control={control} type="text" />
<ControlledField
Expand Down
Loading
Loading