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

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

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

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

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>

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

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

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">

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">

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>

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

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

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>

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