Skip to content

Commit

Permalink
Make user edit modal responsive
Browse files Browse the repository at this point in the history
williammck committed Nov 30, 2024
1 parent 4222f40 commit d5e0d81
Showing 2 changed files with 12 additions and 12 deletions.
16 changes: 8 additions & 8 deletions src/app/roster/[cid]/EditUserModal.tsx
Original file line number Diff line number Diff line change
@@ -62,7 +62,7 @@ export const EditUserModal: React.FC<EditUserModalProps> = ({ user, show, close
return (
<Modal large show={show} title="Modify User" close={close}>
<form onSubmit={handleSubmit(patchResource)}>
<div className="mb-3 grid grid-cols-6 gap-3">
<div className="mb-3 grid grid-cols-2 gap-3 md:grid-cols-6">
<TextInput
{...register('first_name')}
className="col-span-2"
@@ -78,10 +78,10 @@ export const EditUserModal: React.FC<EditUserModalProps> = ({ user, show, close
<TextInput readOnly label="CID" value={user.cid} />
<TextInput readOnly label="Rating" value={user.rating.short} />
</div>
<div className="grid grid-cols-6 gap-3">
<div className="grid grid-cols-2 gap-3 md:grid-cols-6">
<TextInput
{...register('email')}
className="col-span-4"
className="col-span-2 md:col-span-4"
label="Email"
error={errors.email?.message}
/>
@@ -134,11 +134,11 @@ export const EditUserModal: React.FC<EditUserModalProps> = ({ user, show, close

<div className="mb-5 grid grid-cols-[auto_1fr] gap-x-5 gap-y-3">
<div />
<small className="flex items-center gap-1 text-slate-400">
<small className="text-slate-400">
Click endorsements to toggle. Click <LuPlusCircle className="inline" /> to add solo endorsement.
</small>
<p className="text-right font-medium">Delivery + Ground</p>
<div className="flex gap-2">
<div className="flex flex-col gap-2 sm:flex-row">
<Controller
name="endorsements.gnd"
control={control}
@@ -177,7 +177,7 @@ export const EditUserModal: React.FC<EditUserModalProps> = ({ user, show, close
/>
</div>
<p className="text-right font-medium">Local</p>
<div className="flex gap-2">
<div className="flex flex-col gap-2 sm:flex-row">
<Controller
name="endorsements.twr"
control={control}
@@ -216,7 +216,7 @@ export const EditUserModal: React.FC<EditUserModalProps> = ({ user, show, close
/>
</div>
<p className="text-right font-medium">Approach</p>
<div className="flex gap-2">
<div className="flex flex-col gap-2 sm:flex-row">
<Controller
name="endorsements.app"
control={control}
@@ -243,7 +243,7 @@ export const EditUserModal: React.FC<EditUserModalProps> = ({ user, show, close
/>
</div>
<p className="text-right font-medium">Center</p>
<div className="flex gap-2">
<div className="flex flex-col gap-2 sm:flex-row">
<Controller
name="endorsements.zhu"
control={control}
8 changes: 4 additions & 4 deletions src/app/roster/[cid]/page.tsx
Original file line number Diff line number Diff line change
@@ -94,24 +94,24 @@ const UserProfile: NextPage<UserProfileParams> = async ({ params }) => {
<h3 className="mb-5 text-2xl font-medium">Endorsements</h3>
<div className="grid grid-cols-[auto_1fr] gap-x-5 gap-y-3">
<p className="text-right font-medium">Delivery + Ground</p>
<div className="flex gap-2">
<div className="flex flex-col gap-2 sm:flex-row">
<EndorsementBadge tier={0} name="GND" status={user.endorsements.gnd} />
<EndorsementBadge tier={1} name="HOU GND T1" status={user.endorsements.hou_gnd} />
<EndorsementBadge tier={1} name="IAH GND T1" status={user.endorsements.iah_gnd} />
</div>
<p className="text-right font-medium">Local</p>
<div className="flex gap-2">
<div className="flex flex-col gap-2 sm:flex-row">
<EndorsementBadge tier={0} name="TWR" status={user.endorsements.twr} />
<EndorsementBadge tier={1} name="HOU TWR T1" status={user.endorsements.hou_twr} />
<EndorsementBadge tier={1} name="IAH TWR T1" status={user.endorsements.iah_twr} />
</div>
<p className="text-right font-medium">Approach</p>
<div className="flex gap-2">
<div className="flex flex-col gap-2 sm:flex-row">
<EndorsementBadge tier={0} name="APP" status={user.endorsements.app} />
<EndorsementBadge tier={1} name="I90 T1" status={user.endorsements.i90} />
</div>
<p className="text-right font-medium">Center</p>
<div className="flex gap-2">
<div className="flex flex-col gap-2 sm:flex-row">
<EndorsementBadge tier={2} name="ZHU" status={user.endorsements.zhu} />
</div>
</div>

0 comments on commit d5e0d81

Please sign in to comment.