Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-16 17:51:43 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix(mobile): check for responsiveness, add scrollarea support

Browse Source
This commit is contained in:
Amruth Pillai
2023-11-14 11:43:28 +01:00
parent 6303071410
commit 888b4db0bb
40 changed files with 491 additions and 397 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/client/src/pages/builder/sidebars/left/dialogs/awards.tsx
View File

@ -35,7 +35,7 @@ export const AwardsDialog = () => {
name="title"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t({ message: "Title", context: "Name of the Award" })}</FormLabel>
<FormControl>
<Input {...field} />
@ -49,7 +49,7 @@ export const AwardsDialog = () => {
name="awarder"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Awarder`}</FormLabel>
<FormControl>
<Input {...field} />
@ -63,7 +63,7 @@ export const AwardsDialog = () => {
name="date"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Date`}</FormLabel>
<FormControl>
<Input
@ -83,7 +83,7 @@ export const AwardsDialog = () => {
name="url"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Website`}</FormLabel>
<FormControl>
<URLInput {...field} />
@ -97,7 +97,7 @@ export const AwardsDialog = () => {
name="summary"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1 sm:col-span-2">
<FormItem className="sm:col-span-2">
<FormLabel>{t`Summary`}</FormLabel>
<FormControl>
<RichInput

10
apps/client/src/pages/builder/sidebars/left/dialogs/certifications.tsx
View File

@ -35,7 +35,7 @@ export const CertificationsDialog = () => {
name="name"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t({ message: "Name", context: "Name of the Certification" })}</FormLabel>
<FormControl>
<Input {...field} />
@ -49,7 +49,7 @@ export const CertificationsDialog = () => {
name="issuer"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Issuer`}</FormLabel>
<FormControl>
<Input {...field} />
@ -63,7 +63,7 @@ export const CertificationsDialog = () => {
name="date"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Date`}</FormLabel>
<FormControl>
<Input {...field} placeholder={t`March 2023`} />
@ -77,7 +77,7 @@ export const CertificationsDialog = () => {
name="url"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Website`}</FormLabel>
<FormControl>
<URLInput {...field} placeholder="https://udemy.com/certificate/UC-..." />
@ -91,7 +91,7 @@ export const CertificationsDialog = () => {
name="summary"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1 sm:col-span-2">
<FormItem className="sm:col-span-2">
<FormLabel>{t`Summary`}</FormLabel>
<FormControl>
<RichInput

14
apps/client/src/pages/builder/sidebars/left/dialogs/custom-section.tsx
View File

@ -49,7 +49,7 @@ export const CustomSectionDialog = () => {
name="name"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Name`}</FormLabel>
<FormControl>
<Input {...field} />
@ -63,7 +63,7 @@ export const CustomSectionDialog = () => {
name="description"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Description`}</FormLabel>
<FormControl>
<Input {...field} />
@ -77,7 +77,7 @@ export const CustomSectionDialog = () => {
name="date"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Date`}</FormLabel>
<FormControl>
<Input {...field} />
@ -91,7 +91,7 @@ export const CustomSectionDialog = () => {
name="location"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Location`}</FormLabel>
<FormControl>
<Input {...field} />
@ -105,7 +105,7 @@ export const CustomSectionDialog = () => {
name="url"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-2">
<FormItem className="sm:col-span-2">
<FormLabel>{t`Website`}</FormLabel>
<FormControl>
<URLInput {...field} />
@ -119,7 +119,7 @@ export const CustomSectionDialog = () => {
name="summary"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1 sm:col-span-2">
<FormItem className="sm:col-span-2">
<FormLabel>{t`Summary`}</FormLabel>
<FormControl>
<RichInput
@ -140,7 +140,7 @@ export const CustomSectionDialog = () => {
name="keywords"
control={form.control}
render={({ field }) => (
<div className="col-span-2 space-y-3">
<div className="space-y-3 sm:col-span-2">
<FormItem>
<FormLabel>{t`Keywords`}</FormLabel>
<FormControl>

14
apps/client/src/pages/builder/sidebars/left/dialogs/education.tsx
View File

@ -35,7 +35,7 @@ export const EducationDialog = () => {
name="institution"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Institution`}</FormLabel>
<FormControl>
<Input {...field} />
@ -49,7 +49,7 @@ export const EducationDialog = () => {
name="studyType"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>
{t({
message: "Type of Study",
@ -68,7 +68,7 @@ export const EducationDialog = () => {
name="area"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>
{t({
message: "Area of Study",
@ -87,7 +87,7 @@ export const EducationDialog = () => {
name="score"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>
{t({
message: "Score",
@ -106,7 +106,7 @@ export const EducationDialog = () => {
name="date"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1 sm:col-span-2">
<FormItem className="sm:col-span-2">
<FormLabel>{t`Date`}</FormLabel>
<FormControl>
<Input {...field} placeholder={t`March 2023 - Present`} />
@ -120,7 +120,7 @@ export const EducationDialog = () => {
name="url"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1 sm:col-span-2">
<FormItem className="sm:col-span-2">
<FormLabel>{t`Website`}</FormLabel>
<FormControl>
<URLInput {...field} />
@ -134,7 +134,7 @@ export const EducationDialog = () => {
name="summary"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1 sm:col-span-2">
<FormItem className="sm:col-span-2">
<FormLabel>{t`Summary`}</FormLabel>
<FormControl>
<RichInput

12
apps/client/src/pages/builder/sidebars/left/dialogs/experience.tsx
View File

@ -35,7 +35,7 @@ export const ExperienceDialog = () => {
name="company"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Company`}</FormLabel>
<FormControl>
<Input {...field} />
@ -49,7 +49,7 @@ export const ExperienceDialog = () => {
name="position"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>
{t({
message: "Position",
@ -68,7 +68,7 @@ export const ExperienceDialog = () => {
name="date"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Date`}</FormLabel>
<FormControl>
<Input {...field} placeholder={t`March 2023 - Present`} />
@ -82,7 +82,7 @@ export const ExperienceDialog = () => {
name="location"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Location`}</FormLabel>
<FormControl>
<Input {...field} />
@ -96,7 +96,7 @@ export const ExperienceDialog = () => {
name="url"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1 sm:col-span-2">
<FormItem className="sm:col-span-2">
<FormLabel>{t`Website`}</FormLabel>
<FormControl>
<URLInput {...field} />
@ -110,7 +110,7 @@ export const ExperienceDialog = () => {
name="summary"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1 sm:col-span-2">
<FormItem className="sm:col-span-2">
<FormLabel>{t`Summary`}</FormLabel>
<FormControl>
<RichInput

6
apps/client/src/pages/builder/sidebars/left/dialogs/languages.tsx
View File

@ -33,7 +33,7 @@ export const LanguagesDialog = () => {
name="name"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Name`}</FormLabel>
<FormControl>
<Input {...field} />
@ -47,7 +47,7 @@ export const LanguagesDialog = () => {
name="fluency"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Fluency`}</FormLabel>
<FormControl>
<Input {...field} />
@ -61,7 +61,7 @@ export const LanguagesDialog = () => {
name="fluencyLevel"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-2">
<FormItem className="sm:col-span-2">
<FormLabel>{t`Fluency (CEFR)`}</FormLabel>
<FormControl className="py-2">
<div className="flex items-center gap-x-4">

8
apps/client/src/pages/builder/sidebars/left/dialogs/profiles.tsx
View File

@ -35,7 +35,7 @@ export const ProfilesDialog = () => {
name="network"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Network`}</FormLabel>
<FormControl>
{/* eslint-disable-next-line lingui/no-unlocalized-strings */}
@ -50,7 +50,7 @@ export const ProfilesDialog = () => {
name="username"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Username`}</FormLabel>
<FormControl>
<Input {...field} placeholder="john.doe" />
@ -64,7 +64,7 @@ export const ProfilesDialog = () => {
name="url"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1 sm:col-span-2">
<FormItem className="sm:col-span-2">
<FormLabel>{t`Website`}</FormLabel>
<FormControl>
<URLInput {...field} placeholder="https://linkedin.com/in/johndoe" />
@ -78,7 +78,7 @@ export const ProfilesDialog = () => {
name="icon"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-2">
<FormItem className="sm:col-span-2">
<FormLabel htmlFor="iconSlug">{t`Icon`}</FormLabel>
<FormControl>
<div className="flex items-center gap-x-2">

12
apps/client/src/pages/builder/sidebars/left/dialogs/projects.tsx
View File

@ -40,7 +40,7 @@ export const ProjectsDialog = () => {
name="name"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Name`}</FormLabel>
<FormControl>
<Input {...field} />
@ -54,7 +54,7 @@ export const ProjectsDialog = () => {
name="description"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Description`}</FormLabel>
<FormControl>
<Input {...field} />
@ -68,7 +68,7 @@ export const ProjectsDialog = () => {
name="date"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Date`}</FormLabel>
<FormControl>
<Input {...field} placeholder={t`March 2023 - Present`} />
@ -82,7 +82,7 @@ export const ProjectsDialog = () => {
name="url"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Website`}</FormLabel>
<FormControl>
<URLInput {...field} placeholder="https://rxresu.me" />
@ -96,7 +96,7 @@ export const ProjectsDialog = () => {
name="summary"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1 sm:col-span-2">
<FormItem className="sm:col-span-2">
<FormLabel>{t`Summary`}</FormLabel>
<FormControl>
<RichInput
@ -117,7 +117,7 @@ export const ProjectsDialog = () => {
name="keywords"
control={form.control}
render={({ field }) => (
<div className="col-span-2 space-y-3">
<div className="space-y-3 sm:col-span-2">
<FormItem>
<FormLabel>{t`Keywords`}</FormLabel>
<FormControl>

10
apps/client/src/pages/builder/sidebars/left/dialogs/publications.tsx
View File

@ -35,7 +35,7 @@ export const PublicationsDialog = () => {
name="name"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Name`}</FormLabel>
<FormControl>
<Input {...field} />
@ -49,7 +49,7 @@ export const PublicationsDialog = () => {
name="publisher"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Publisher`}</FormLabel>
<FormControl>
<Input {...field} />
@ -63,7 +63,7 @@ export const PublicationsDialog = () => {
name="date"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Date`}</FormLabel>
<FormControl>
<Input {...field} placeholder={t`March 2023`} />
@ -77,7 +77,7 @@ export const PublicationsDialog = () => {
name="url"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Website`}</FormLabel>
<FormControl>
<URLInput {...field} />
@ -91,7 +91,7 @@ export const PublicationsDialog = () => {
name="summary"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1 sm:col-span-2">
<FormItem className="sm:col-span-2">
<FormLabel>{t`Summary`}</FormLabel>
<FormControl>
<RichInput

8
apps/client/src/pages/builder/sidebars/left/dialogs/references.tsx
View File

@ -35,7 +35,7 @@ export const ReferencesDialog = () => {
name="name"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Name`}</FormLabel>
<FormControl>
<Input {...field} />
@ -49,7 +49,7 @@ export const ReferencesDialog = () => {
name="description"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Description`}</FormLabel>
<FormControl>
<Input {...field} />
@ -63,7 +63,7 @@ export const ReferencesDialog = () => {
name="url"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-2">
<FormItem className="sm:col-span-2">
<FormLabel>{t`Website`}</FormLabel>
<FormControl>
<URLInput {...field} />
@ -77,7 +77,7 @@ export const ReferencesDialog = () => {
name="summary"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1 sm:col-span-2">
<FormItem className="sm:col-span-2">
<FormLabel>{t`Summary`}</FormLabel>
<FormControl>
<RichInput

8
apps/client/src/pages/builder/sidebars/left/dialogs/skills.tsx
View File

@ -37,7 +37,7 @@ export const SkillsDialog = () => {
name="name"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Name`}</FormLabel>
<FormControl>
<Input {...field} />
@ -51,7 +51,7 @@ export const SkillsDialog = () => {
name="description"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Description`}</FormLabel>
<FormControl>
<Input {...field} />
@ -65,7 +65,7 @@ export const SkillsDialog = () => {
name="level"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-2">
<FormItem className="sm:col-span-2">
<FormLabel>{t`Level`}</FormLabel>
<FormControl className="py-2">
<div className="flex items-center gap-x-4">
@ -90,7 +90,7 @@ export const SkillsDialog = () => {
name="keywords"
control={form.control}
render={({ field }) => (
<div className="col-span-2 space-y-3">
<div className="space-y-3 sm:col-span-2">
<FormItem>
<FormLabel>{t`Keywords`}</FormLabel>
<FormControl>

12
apps/client/src/pages/builder/sidebars/left/dialogs/volunteer.tsx
View File

@ -35,7 +35,7 @@ export const VolunteerDialog = () => {
name="organization"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Organization`}</FormLabel>
<FormControl>
<Input {...field} />
@ -49,7 +49,7 @@ export const VolunteerDialog = () => {
name="position"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Position`}</FormLabel>
<FormControl>
<Input {...field} />
@ -63,7 +63,7 @@ export const VolunteerDialog = () => {
name="date"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Date`}</FormLabel>
<FormControl>
<Input {...field} placeholder={t`March 2023 - Present`} />
@ -77,7 +77,7 @@ export const VolunteerDialog = () => {
name="location"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormItem>
<FormLabel>{t`Location`}</FormLabel>
<FormControl>
<Input {...field} />
@ -91,7 +91,7 @@ export const VolunteerDialog = () => {
name="url"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1 sm:col-span-2">
<FormItem className="sm:col-span-2">
<FormLabel>{t`Website`}</FormLabel>
<FormControl>
<URLInput {...field} />
@ -105,7 +105,7 @@ export const VolunteerDialog = () => {
name="summary"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1 sm:col-span-2">
<FormItem className="sm:col-span-2">
<FormLabel>{t`Summary`}</FormLabel>
<FormControl>
<RichInput

2
apps/client/src/pages/builder/sidebars/left/index.tsx
View File

@ -42,7 +42,7 @@ export const LeftSidebar = () => {
};
return (
<div className="flex bg-secondary-accent/30 pt-16 lg:pt-0">
<div className="flex bg-secondary-accent/30">
<div className="hidden basis-12 flex-col items-center justify-between bg-secondary-accent/30 py-4 sm:flex">
<Button asChild size="icon" variant="ghost" className="h-8 w-8 rounded-full">
<Link to="/dashboard">

2
apps/client/src/pages/builder/sidebars/left/sections/basics.tsx
View File

@ -88,7 +88,7 @@ export const BasicsSection = () => {
/>
</div>
<CustomFieldsSection className="col-span-2" />
<CustomFieldsSection className="sm:col-span-2" />
</main>
</section>
);

11
apps/client/src/pages/builder/sidebars/left/sections/custom/section.tsx
View File

@ -32,20 +32,13 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
<div className="flex items-end justify-between space-x-2">
<Button
size="icon"
variant="ghost"
variant="link"
className="shrink-0"
onPointerDown={(event) => controls.start(event)}
>
<DotsSixVertical />
</Button>
{/* <Input
placeholder={t`Icon`}
value={field.icon}
className="!ml-0"
onChange={(event) => handleChange("icon", event.target.value)}
/> */}
<Input
placeholder={t`Name`}
value={field.name}
@ -61,7 +54,7 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
<Button
size="icon"
variant="ghost"
variant="link"
className="!ml-0 shrink-0"
onClick={() => onRemove(field.id)}
>

14
apps/client/src/pages/builder/sidebars/left/sections/picture/options.tsx
View File

@ -69,9 +69,7 @@ export const PictureOptions = () => {
return (
<div className="flex flex-col gap-y-5">
<div className="grid grid-cols-3 items-center gap-x-6">
<Label htmlFor="picture.size" className="col-span-1">
{t`Size (in px)`}
</Label>
<Label htmlFor="picture.size">{t`Size (in px)`}</Label>
<Input
type="number"
id="picture.size"
@ -85,9 +83,7 @@ export const PictureOptions = () => {
</div>
<div className="grid grid-cols-3 items-center gap-x-6">
<Label htmlFor="picture.aspectRatio" className="col-span-1">
{t`Aspect Ratio`}
</Label>
<Label htmlFor="picture.aspectRatio">{t`Aspect Ratio`}</Label>
<div className="col-span-2 flex items-center justify-between">
<ToggleGroup
type="single"
@ -130,9 +126,7 @@ export const PictureOptions = () => {
</div>
<div className="grid grid-cols-3 items-center gap-x-6">
<Label htmlFor="picture.borderRadius" className="col-span-1">
{t`Border Radius`}
</Label>
<Label htmlFor="picture.borderRadius">{t`Border Radius`}</Label>
<div className="col-span-2 flex items-center justify-between">
<ToggleGroup
type="single"
@ -176,7 +170,7 @@ export const PictureOptions = () => {
<div>
<div className="grid grid-cols-3 items-start gap-x-6">
<div className="col-span-1">
<div>
<Label>{t`Effects`}</Label>
</div>
<div className="col-span-2 space-y-4">

6
apps/client/src/pages/builder/sidebars/left/sections/shared/section-dialog.tsx
View File

@ -108,7 +108,7 @@ export const SectionDialog = <T extends SectionItem>({
if (isDelete) {
return (
<AlertDialog open={isOpen} onOpenChange={close}>
<AlertDialogContent>
<AlertDialogContent className="z-[70]">
<Form {...form}>
<form>
<AlertDialogHeader>
@ -133,9 +133,9 @@ export const SectionDialog = <T extends SectionItem>({
return (
<Dialog open={isOpen} onOpenChange={close}>
<DialogContent>
<DialogContent className="z-[70]">
<Form {...form}>
<form className="space-y-4" onSubmit={form.handleSubmit(onSubmit)}>
<form className="space-y-6" onSubmit={form.handleSubmit(onSubmit)}>
<DialogHeader>
<DialogTitle>
<div className="flex items-center space-x-2.5">

4
apps/client/src/pages/builder/sidebars/left/sections/shared/section-list-item.tsx
View File

@ -64,7 +64,7 @@ export const SectionListItem = ({
!isDragging && "hover:bg-secondary",
)}
>
<DotsSixVertical size={12} />
<DotsSixVertical weight="bold" size={12} />
</div>
{/* List Item */}
@ -80,7 +80,7 @@ export const SectionListItem = ({
{description && <p className="text-xs leading-relaxed opacity-50">{description}</p>}
</div>
</DropdownMenuTrigger>
<DropdownMenuContent align="center" side="left" sideOffset={-16}>
<DropdownMenuContent>
<DropdownMenuCheckboxItem checked={visible} onCheckedChange={onToggleVisibility}>
<span className="-ml-0.5">{t`Visible`}</span>
</DropdownMenuCheckboxItem>