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

AmruthPillai · Nov 14, 2023 · 888b4db · 888b4db
1 parent 6303071
commit 888b4db
Show file tree

Hide file tree

Showing 40 changed files with 491 additions and 397 deletions.
diff --git a/apps/artboard/src/pages/artboard.tsx b/apps/artboard/src/pages/artboard.tsx
@@ -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, "*");
       },
     });

diff --git a/apps/artboard/src/templates/azurill.tsx b/apps/artboard/src/templates/azurill.tsx
@@ -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>
           ))}

diff --git a/apps/artboard/src/templates/bronzor.tsx b/apps/artboard/src/templates/bronzor.tsx
@@ -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>
 

diff --git a/apps/artboard/src/templates/chikorita.tsx b/apps/artboard/src/templates/chikorita.tsx
@@ -503,15 +503,15 @@ 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>
           ))}
         </div>
       </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>
   );

diff --git a/apps/artboard/src/templates/ditto.tsx b/apps/artboard/src/templates/ditto.tsx
@@ -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>
           ))}

diff --git a/apps/artboard/src/templates/pikachu.tsx b/apps/artboard/src/templates/pikachu.tsx
@@ -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) => (

diff --git a/apps/client/src/pages/builder/_components/header.tsx b/apps/client/src/pages/builder/_components/header.tsx
@@ -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]",
       )}
     >

diff --git a/apps/client/src/pages/builder/_components/toolbar.tsx b/apps/client/src/pages/builder/_components/toolbar.tsx
@@ -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"

diff --git a/apps/client/src/pages/builder/layout.tsx b/apps/client/src/pages/builder/layout.tsx
@@ -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}
         >

diff --git a/apps/client/src/pages/builder/sidebars/left/dialogs/awards.tsx b/apps/client/src/pages/builder/sidebars/left/dialogs/awards.tsx
@@ -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

diff --git a/apps/client/src/pages/builder/sidebars/left/dialogs/certifications.tsx b/apps/client/src/pages/builder/sidebars/left/dialogs/certifications.tsx
@@ -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

diff --git a/apps/client/src/pages/builder/sidebars/left/dialogs/custom-section.tsx b/apps/client/src/pages/builder/sidebars/left/dialogs/custom-section.tsx
@@ -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>

diff --git a/apps/client/src/pages/builder/sidebars/left/dialogs/education.tsx b/apps/client/src/pages/builder/sidebars/left/dialogs/education.tsx
@@ -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