Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-13 00:03:27 +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

3
apps/artboard/src/pages/artboard.tsx
View File

@ -19,8 +19,9 @@ export const ArtboardPage = () => {
webfontloader.load({
google: { families: [fontString] },
active: () => {
const width = window.document.body.offsetWidth;
const height = window.document.body.offsetHeight;
const message = { type: "PAGE_LOADED", payload: { height } };
const message = { type: "PAGE_LOADED", payload: { width, height } };
window.postMessage(message, "*");
},
});

2
apps/artboard/src/templates/azurill.tsx
View File

@ -490,7 +490,7 @@ export const Azurill = ({ columns, isFirstPage = false }: TemplateProps) => {
{isFirstPage && <Header />}
<div className="grid grid-cols-3 gap-x-4">
<div className="sidebar group col-span-1 space-y-4">
<div className="sidebar group space-y-4">
{sidebar.map((section) => (
<Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
))}

4
apps/artboard/src/templates/bronzor.tsx
View File

@ -79,7 +79,7 @@ const Summary = () => {
return (
<section id={section.id} className="grid grid-cols-5 border-t pt-2.5">
<div className="col-span-1">
<div>
<h4 className="text-base font-bold">{section.name}</h4>
</div>
@ -153,7 +153,7 @@ const Section = <T,>({
return (
<section id={section.id} className="grid grid-cols-5 border-t pt-2.5">
<div className="col-span-1">
<div>
<h4 className="text-base font-bold">{section.name}</h4>
</div>

4
apps/artboard/src/templates/chikorita.tsx
View File

@ -503,7 +503,7 @@ export const Chikorita = ({ columns, isFirstPage = false }: TemplateProps) => {
))}
</div>
<div className="sidebar group col-span-1 space-y-4 text-background">
<div className="sidebar group space-y-4 text-background">
{sidebar.map((section) => (
<Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
))}
@ -511,7 +511,7 @@ export const Chikorita = ({ columns, isFirstPage = false }: TemplateProps) => {
</div>
<div className="absolute inset-0 grid grid-cols-3" style={{ top: -margin }}>
<div className="col-span-1 col-start-3 ml-2 bg-primary"></div>
<div className="col-start-3 ml-2 bg-primary"></div>
</div>
</div>
);

4
apps/artboard/src/templates/ditto.tsx
View File

@ -30,7 +30,7 @@ const Header = () => {
return (
<div className="relative z-20 grid grid-cols-3 space-x-4">
<div className="col-span-1 mx-auto">
<div className="mx-auto">
<Picture />
</div>
@ -530,7 +530,7 @@ export const Ditto = ({ columns, isFirstPage = false }: TemplateProps) => {
{isFirstPage && <Header />}
<div className="grid grid-cols-3 space-x-4">
<div className="sidebar group col-span-1 space-y-4">
<div className="sidebar group space-y-4">
{sidebar.map((section) => (
<Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
))}

2
apps/artboard/src/templates/pikachu.tsx
View File

@ -526,7 +526,7 @@ export const Pikachu = ({ columns, isFirstPage = false }: TemplateProps) => {
return (
<div className="space-y-4">
<div className="grid grid-cols-3 space-x-6">
<div className="sidebar group col-span-1 space-y-4">
<div className="sidebar group space-y-4">
{isFirstPage && <Picture className="w-full !max-w-none" />}
{sidebar.map((section) => (

2
apps/client/src/pages/builder/_components/header.tsx
View File

@ -32,7 +32,7 @@ export const BuilderHeader = () => {
<div
style={{ left: `${leftPanelSize}%`, right: `${rightPanelSize}%` }}
className={cn(
"fixed inset-x-0 top-0 z-[100] h-16 bg-secondary-accent/50 backdrop-blur-lg lg:z-20",
"fixed inset-x-0 top-0 z-[60] h-16 bg-secondary-accent/50 backdrop-blur-lg lg:z-20",
!isDragging && "transition-[left,right]",
)}
>

12
apps/client/src/pages/builder/_components/toolbar.tsx
View File

@ -50,19 +50,17 @@ export const BuilderToolbar = () => {
return (
<motion.div
initial={{ opacity: 0, bottom: -64 }}
whileHover={{ opacity: 1, bottom: 0 }}
animate={{ opacity: 0.3, bottom: -28 }}
className="fixed inset-x-0 mx-auto pb-4 pt-6 text-center"
whileHover={{ opacity: 1, bottom: 0 }}
className="fixed inset-x-0 mx-auto hidden pb-4 pt-6 text-center md:block"
>
<div className="inline-flex items-center justify-center rounded-full bg-background px-4 shadow-xl">
{/* Undo */}
<Tooltip content={t`Undo`}>
<Button size="icon" variant="ghost" className="rounded-none" onClick={() => undo()}>
<ArrowCounterClockwise />
</Button>
</Tooltip>
{/* Redo */}
<Tooltip content={t`Redo`}>
<Button size="icon" variant="ghost" className="rounded-none" onClick={() => redo()}>
<ArrowClockwise />
@ -97,7 +95,6 @@ export const BuilderToolbar = () => {
<Separator orientation="vertical" className="h-9" />
{/* Toggle Page Break Line */}
<Tooltip content={t`Toggle Page Break Line`}>
<Toggle
className="rounded-none"
@ -110,7 +107,6 @@ export const BuilderToolbar = () => {
</Toggle>
</Tooltip>
{/* Toggle Page Numbers */}
<Tooltip content={t`Toggle Page Numbers`}>
<Toggle
className="rounded-none"
@ -125,15 +121,13 @@ export const BuilderToolbar = () => {
<Separator orientation="vertical" className="h-9" />
{/* Copy Link to Resume */}
<Tooltip content={t`Copy Link to Resume`}>
<Button size="icon" variant="ghost" className="rounded-none" disabled={!isPublic}>
<LinkSimple />
</Button>
</Tooltip>
{/* Download PDF */}
<Tooltip content={t`Download PDF`}>
<Tooltip content={t`Export as PDF`}>
<Button
size="icon"
variant="ghost"

2
apps/client/src/pages/builder/layout.tsx
View File

@ -75,7 +75,7 @@ export const BuilderLayout = () => {
<Sheet open={sheet.left.open} onOpenChange={sheet.left.setOpen}>
<SheetContent
side="left"
className="p-0 sm:max-w-xl"
className="top-16 p-0 sm:max-w-xl"
showClose={false}
onOpenAutoFocus={onOpenAutoFocus}
>

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>

2
apps/client/src/pages/dashboard/layout.tsx
View File

@ -11,7 +11,7 @@ export const DashboardLayout = () => {
return (
<div>
<div className="sticky top-0 z-50 flex items-center justify-between p-4 lg:hidden">
<div className="sticky top-0 z-50 flex items-center justify-between p-4 pb-0 lg:hidden">
<Sheet open={open} onOpenChange={setOpen}>
<SheetTrigger asChild>
<Button size="icon" variant="ghost" className="bg-background">

12
apps/client/src/pages/dashboard/resumes/page.tsx
View File

@ -1,6 +1,6 @@
import { t } from "@lingui/macro";
import { List, SquaresFour } from "@phosphor-icons/react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@reactive-resume/ui";
import { ScrollArea, Tabs, TabsContent, TabsList, TabsTrigger } from "@reactive-resume/ui";
import { motion } from "framer-motion";
import { useState } from "react";
import { Helmet } from "react-helmet-async";
@ -21,7 +21,11 @@ export const ResumesPage = () => {
</title>
</Helmet>
<Tabs value={layout} onValueChange={(value) => setLayout(value as Layout)}>
<Tabs
value={layout}
onValueChange={(value) => setLayout(value as Layout)}
className="space-y-4"
>
<div className="flex items-center justify-between">
<motion.h1
initial={{ opacity: 0, x: -50 }}
@ -43,14 +47,14 @@ export const ResumesPage = () => {
</TabsList>
</div>
<div className="mt-12 md:mt-8">
<ScrollArea className="h-[calc(100vh-140px)] lg:h-[calc(100vh-88px)]">
<TabsContent value="grid">
<GridView />
</TabsContent>
<TabsContent value="list">
<ListView />
</TabsContent>
</div>
</ScrollArea>
</Tabs>
</>
);

26
apps/client/src/pages/dashboard/settings/page.tsx
View File

@ -1,5 +1,5 @@
import { t } from "@lingui/macro";
import { Separator } from "@reactive-resume/ui";
import { ScrollArea, Separator } from "@reactive-resume/ui";
import { motion } from "framer-motion";
import { Helmet } from "react-helmet-async";
@ -17,7 +17,7 @@ export const SettingsPage = () => (
</title>
</Helmet>
<div className="max-w-2xl space-y-8 pb-12">
<div className="max-w-2xl space-y-4">
<motion.h1
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
@ -26,15 +26,19 @@ export const SettingsPage = () => (
{t`Settings`}
</motion.h1>
<AccountSettings />
<Separator />
<SecuritySettings />
<Separator />
<ProfileSettings />
<Separator />
<OpenAISettings />
<Separator />
<DangerZoneSettings />
<ScrollArea hideScrollbar className="h-[calc(100vh-140px)] lg:h-[calc(100vh-88px)]">
<div className="space-y-6">
<AccountSettings />
<Separator />
<SecuritySettings />
<Separator />
<ProfileSettings />
<Separator />
<OpenAISettings />
<Separator />
<DangerZoneSettings />
</div>
</ScrollArea>
</div>
</>
);

6
apps/client/src/pages/home/components/footer.tsx
View File

@ -7,10 +7,10 @@ import { Logo } from "@/client/components/logo";
import { ThemeSwitch } from "@/client/components/theme-switch";
export const Footer = () => (
<footer className="fixed inset-x-0 bottom-0 -z-50 h-[400px] bg-background">
<footer className="bg-background">
<Separator />
<div className="container grid py-6 sm:grid-cols-3 lg:grid-cols-4">
<div className="container grid py-12 sm:grid-cols-3 lg:grid-cols-4">
<div className="flex flex-col gap-y-2">
<Logo size={96} className="-ml-2" />
@ -24,7 +24,7 @@ export const Footer = () => (
</div>
<div className="relative col-start-4">
<div className="absolute bottom-0 right-0 space-x-2">
<div className="absolute bottom-0 right-0 lg:space-x-2">
<LocaleSwitch />
<ThemeSwitch />
</div>

5
apps/client/src/pages/home/layout.tsx
View File

@ -1,12 +1,13 @@
import { ScrollArea } from "@reactive-resume/ui";
import { Outlet } from "react-router-dom";
import { Footer } from "./components/footer";
import { Header } from "./components/header";
export const HomeLayout = () => (
<>
<ScrollArea orientation="vertical" className="h-screen">
<Header />
<Outlet />
<Footer />
</>
</ScrollArea>
);

2
apps/client/src/pages/home/page.tsx
View File

@ -12,7 +12,7 @@ import { SupportSection } from "./sections/support";
import { TestimonialsSection } from "./sections/testimonials";
export const HomePage = () => (
<main className="relative isolate mb-[400px] overflow-hidden bg-background">
<main className="relative isolate bg-background">
<Helmet>
<title>
{t`Reactive Resume`} - {t`A free and open-source resume builder`}

51
apps/client/src/pages/home/sections/faq/index.tsx
View File

@ -226,32 +226,31 @@ const Question5 = () => (
</AccordionItem>
);
export const FAQSection = () => {
return (
<section id="faq" className="container relative py-24 sm:py-32">
<div className="grid gap-12 lg:grid-cols-3">
<div className="col-span-1 space-y-6">
<h2 className="text-3xl font-bold">Frequently Asked Questions</h2>
export const FAQSection = () => (
<section id="faq" className="container relative py-24 sm:py-32">
<div className="grid gap-12 lg:grid-cols-3">
<div className="space-y-6">
<h2 className="text-4xl font-bold">Frequently Asked Questions</h2>
<p className="text-base leading-loose">
Here are some questions I often get asked about Reactive Resume.
</p>
<p className="text-base leading-loose">
Here are some questions I often get asked about Reactive Resume.
</p>
<p className="text-sm leading-loose">
Unfortunately, this section is available only in English, as I do not want to burden
translators with having to translate these large paragraphs of text.
</p>
</div>
<div className="col-span-2">
<Accordion collapsible type="single">
<Question1 />
<Question2 />
<Question3 />
<Question4 />
<Question5 />
</Accordion>
</div>
<p className="text-sm leading-loose">
Unfortunately, this section is available only in English, as I do not want to burden
translators with having to translate these large paragraphs of text.
</p>
</div>
</section>
);
};
<div className="col-span-2">
<Accordion collapsible type="single">
<Question1 />
<Question2 />
<Question3 />
<Question4 />
<Question5 />
</Accordion>
</div>
</div>
</section>
);

16
apps/client/src/pages/home/sections/sample-resumes/index.tsx
View File

@ -1,4 +1,4 @@
import { t } from "@lingui/macro";
import { t, Trans } from "@lingui/macro";
import { motion } from "framer-motion";
const resumes = [
@ -13,9 +13,17 @@ export const SampleResumesSection = () => (
<div className="container flex flex-col gap-12 lg:min-h-[600px] lg:flex-row lg:items-start">
<div className="space-y-4 lg:mt-16 lg:basis-96">
<h2 className="text-4xl font-bold">{t`Sample Resumes`}</h2>
<p className="text-base leading-relaxed">
{t`Have a look at some of the resume created to showcase the templates available on Reactive Resume. They also serve some great examples to help guide the creation of your own resume.`}
</p>
<Trans>
<p className="leading-relaxed">
Have a look at some of the resume created to showcase the templates available on
Reactive Resume.
</p>
<p className="leading-relaxed">
They could also serve as examples to help guide the creation of your next resume.
</p>
</Trans>
</div>
<div className="w-full overflow-hidden lg:absolute lg:right-0 lg:max-w-[55%]">

4
apps/client/src/pages/public/page.tsx
View File

@ -38,6 +38,7 @@ export const PublicResumePage = () => {
if (event.origin !== window.location.origin) return;
if (event.data.type === "PAGE_LOADED") {
frameRef.current.width = event.data.payload.width;
frameRef.current.height = event.data.payload.height;
frameRef.current.contentWindow.removeEventListener("message", handleMessage);
}
@ -65,8 +66,9 @@ export const PublicResumePage = () => {
<iframe
title={title}
ref={frameRef}
scrolling="no"
src="/artboard/preview"
style={{ width: `${pageSizeMap[format].width}mm` }}
style={{ width: `${pageSizeMap[format].width}mm`, overflow: "hidden" }}
/>
</div>