Skip to content

Commit 7dd00db

Browse files
safipatelsafipatel
committed
fixed manage page mobile sizing
1 parent f78b876 commit 7dd00db

File tree

2 files changed

+76
-45
lines changed

2 files changed

+76
-45
lines changed

‎app/classrooms/[classroomId]/manage/_components/inviteMember.tsx‎

Lines changed: 42 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -66,44 +66,48 @@ export default function InviteMember({
6666
};
6767

6868
return (
69-
<div className="my-3 flex gap-5">
70-
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
71-
{dialogTrigger ?? (
72-
<DialogTrigger asChild>
73-
<Button variant="outline" effect={"hoverUnderline"}>
74-
Invite Member <UserPlus />
75-
</Button>
76-
</DialogTrigger>
77-
)}
78-
<DialogContent className="sm:max-w-[425px]">
79-
<DialogHeader>
80-
<DialogTitle>Invite Member</DialogTitle>
81-
<DialogDescription>
82-
Enter the email of the member you would like to invite to your
83-
classroom here.
84-
</DialogDescription>
85-
</DialogHeader>
86-
<div className="grid gap-4 py-4">
87-
<div className="grid grid-cols-4 items-center gap-4">
88-
<Label htmlFor="name" className="text-right">
89-
Email
90-
</Label>
91-
<Input
92-
id="email"
93-
value={email}
94-
className="col-span-3"
95-
onChange={(e) => setEmail(e.target.value)}
96-
/>
97-
</div>
69+
// <div className="my-3 flex gap-5">
70+
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
71+
{dialogTrigger ?? (
72+
<DialogTrigger asChild>
73+
<Button
74+
variant="outline"
75+
effect={"hoverUnderline"}
76+
className="max-[740px]:w-3/5"
77+
>
78+
Invite Member <UserPlus />
79+
</Button>
80+
</DialogTrigger>
81+
)}
82+
<DialogContent className="sm:max-w-[425px]">
83+
<DialogHeader>
84+
<DialogTitle>Invite Member</DialogTitle>
85+
<DialogDescription>
86+
Enter the email of the member you would like to invite to your
87+
classroom here.
88+
</DialogDescription>
89+
</DialogHeader>
90+
<div className="grid gap-4 py-4">
91+
<div className="grid grid-cols-4 items-center gap-4">
92+
<Label htmlFor="name" className="text-right">
93+
Email
94+
</Label>
95+
<Input
96+
id="email"
97+
value={email}
98+
className="col-span-3"
99+
onChange={(e) => setEmail(e.target.value)}
100+
/>
98101
</div>
99-
<DialogFooter>
100-
<Button onClick={inviteCallback} type="submit">
101-
{isPending && <Loader2 className="animate-spin" />}
102-
Invite
103-
</Button>
104-
</DialogFooter>
105-
</DialogContent>
106-
</Dialog>
107-
</div>
102+
</div>
103+
<DialogFooter>
104+
<Button onClick={inviteCallback} type="submit">
105+
{isPending && <Loader2 className="animate-spin" />}
106+
Invite
107+
</Button>
108+
</DialogFooter>
109+
</DialogContent>
110+
</Dialog>
111+
// </div>
108112
);
109113
}

‎app/classrooms/[classroomId]/manage/buttons.tsx‎

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import {
4444
Loader2,
4545
Trash2,
4646
Upload,
47+
UserPlus,
4748
} from "lucide-react";
4849
import { toast } from "sonner";
4950
import { Button } from "@/shared/components/ui/button";
@@ -160,20 +161,38 @@ export default function ClassroomManagementButtons({
160161
};
161162

162163
return (
163-
<div className="flex flex-col">
164+
<div className="flex flex-col gap-2">
164165
<div className="flex justify-between">
166+
{/* max-[740px]:flex-col"> */}
165167
<div className="flex items-center gap-2">
168+
{/* //max-[740px]:flex-col" */}
166169
<Button
167170
variant="default"
168171
className="flex w-fit items-center gap-2 px-4 py-2"
172+
// max-[740px]:w-3/5"
169173
effect={"hoverUnderlineInvert"}
170174
asChild
171175
>
172176
<Link href="upload" passHref className="flex items-center gap-2">
173-
<Upload /> Upload materials
177+
<Upload />
178+
<span className="max-[740px]:hidden">Upload materials</span>
174179
</Link>
175180
</Button>
176-
<InviteMember optimisticUpdateCallback={inviteMember} />
181+
<InviteMember
182+
optimisticUpdateCallback={inviteMember}
183+
dialogTrigger={
184+
<DialogTrigger asChild>
185+
<Button
186+
variant="outline"
187+
effect={"hoverUnderline"}
188+
className="max-[740px]:w-3/5"
189+
>
190+
<UserPlus />{" "}
191+
<span className="max-[740px]:hidden">Invite Member</span>
192+
</Button>
193+
</DialogTrigger>
194+
}
195+
/>
177196
<SaveClassroomDialog
178197
optimisticUpdateCallback={handleChangeClassroomName}
179198
actionText="update"
@@ -182,31 +201,38 @@ export default function ClassroomManagementButtons({
182201
<Button
183202
variant="outline"
184203
className="flex gap-2"
204+
// max-[740px]:w-3/5"
185205
effect={"hoverUnderline"}
186206
>
187-
<Edit3 /> Update info
207+
<Edit3 />{" "}
208+
<span className="max-[740px]:hidden">Update info</span>
188209
</Button>
189210
</DialogTrigger>
190211
}
191212
/>
192213
</div>
193214

194215
<div className="flex items-center justify-end gap-4">
216+
{/* "
217+
//max-[740px]:flex-col max-[740px]:w-full "> */}
195218
<Button
196219
variant={
197220
classroomData.archived ? "successGhost" : "destructiveGhost"
198221
}
199222
className="flex gap-2"
223+
//max-[740px]:w-3/5 bg-accent/50"
200224
effect={"hoverUnderline"}
201225
onClick={() => archiveClassroomCallback()}
202226
>
203227
{classroomData.archived ? (
204228
<>
205-
<ArchiveRestore /> {"Unarchive"}
229+
<ArchiveRestore />{" "}
230+
<span className="max-[740px]:hidden">{"Unarchive"}</span>
206231
</>
207232
) : (
208233
<>
209-
<Archive /> {"Archive"}
234+
<Archive />{" "}
235+
<span className="max-[740px]:hidden">{"Archive"}</span>
210236
</>
211237
)}
212238
</Button>
@@ -215,9 +241,10 @@ export default function ClassroomManagementButtons({
215241
<Button
216242
variant="destructive"
217243
className="flex gap-2"
244+
//max-[740px]:w-3/5"
218245
effect={"hoverUnderlineInvert"}
219246
>
220-
<Trash2 /> Delete
247+
<Trash2 /> <span className="max-[740px]:hidden">Delete</span>
221248
</Button>
222249
</AlertDialogTrigger>
223250

0 commit comments

Comments
 (0)