Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-09 20:12:26 +10:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2114 from Karanrajsinh/main

Browse Source 
Fix #1660 [Mobile Frontend Issue] :  Section-Dialog Overflow In Mobile Device Along With Some Changes In Spacing And Font Size Of Sidebar
This commit is contained in:
Amruth Pillai
2025-01-12 15:28:18 +01:00
committed by GitHub
parent 89a44cc33a 9d0a0bba86
commit 007243f2c3
16 changed files with 62 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -161,7 +161,7 @@ export const LeftSidebar = () => {
</div>
<ScrollArea orientation="vertical" className="h-screen flex-1 pb-16 lg:pb-0">
<div ref={containterRef} className="grid gap-y-6 p-6 @container/left">
<div ref={containterRef} className="grid gap-y-10 p-6 @container/left">
<BasicsSection />
<Separator />
<SummarySection />

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

@ -18,7 +18,7 @@ export const BasicsSection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("basics")}
<h2 className="line-clamp-1 text-3xl font-bold">{t`Basics`}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Basics`}</h2>
</div>
</header>
@ -27,7 +27,7 @@ export const BasicsSection = () => {
<PictureSection />
</div>
<div className="space-y-1.5 sm:col-span-2">
<div className="space-y-4 sm:col-span-2">
<Label htmlFor="basics.name">{t`Full Name`}</Label>
<Input
id="basics.name"

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

@ -100,7 +100,7 @@ export const SectionBase = <T extends SectionItem>({ id, title, description }: P
<div className="flex items-center gap-x-4">
{getSectionIcon(id)}
<h2 className="line-clamp-1 text-3xl font-bold">{section.name}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{section.name}</h2>
</div>
<div className="flex items-center gap-x-2">
@ -161,7 +161,11 @@ export const SectionBase = <T extends SectionItem>({ id, title, description }: P
{section.items.length > 0 && (
<footer className="flex items-center justify-end">
<Button variant="outline" className="ml-auto gap-x-2" onClick={onCreate}>
<Button
variant="outline"
className="ml-auto gap-x-2 text-xs lg:text-sm"
onClick={onCreate}
>
<Plus />
<span>
{t({

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

@ -20,6 +20,7 @@ import {
DialogHeader,
DialogTitle,
Form,
ScrollArea,
} from "@reactive-resume/ui";
import { produce } from "immer";
import get from "lodash.get";
@ -146,36 +147,41 @@ export const SectionDialog = <T extends SectionItem>({
<Dialog open={isOpen} onOpenChange={close}>
<DialogContent className="z-50">
<Form {...form}>
<form className="space-y-6" onSubmit={form.handleSubmit(onSubmit)}>
<DialogHeader>
<DialogTitle>
<div className="flex items-center space-x-2.5">
{isCreate && <Plus />}
{isUpdate && <PencilSimple />}
{isDuplicate && <CopySimple />}
<h2>
{isCreate && t`Create a new item`}
{isUpdate && t`Update an existing item`}
{isDuplicate && t`Duplicate an existing item`}
</h2>
</div>
</DialogTitle>
<ScrollArea>
<form
className=" max-h-[60vh] space-y-6 lg:max-h-fit"
onSubmit={form.handleSubmit(onSubmit)}
>
<DialogHeader>
<DialogTitle>
<div className="flex items-center space-x-2.5">
{isCreate && <Plus />}
{isUpdate && <PencilSimple />}
{isDuplicate && <CopySimple />}
<h2>
{isCreate && t`Create a new item`}
{isUpdate && t`Update an existing item`}
{isDuplicate && t`Duplicate an existing item`}
</h2>
</div>
</DialogTitle>
<VisuallyHidden>
<DialogDescription />
</VisuallyHidden>
</DialogHeader>
<VisuallyHidden>
<DialogDescription />
</VisuallyHidden>
</DialogHeader>
{children}
{children}
<DialogFooter>
<Button type="submit">
{isCreate && t`Create`}
{isUpdate && t`Save Changes`}
{isDuplicate && t`Duplicate`}
</Button>
</DialogFooter>
</form>
<DialogFooter>
<Button type="submit">
{isCreate && t`Create`}
{isUpdate && t`Save Changes`}
{isDuplicate && t`Duplicate`}
</Button>
</DialogFooter>
</form>
</ScrollArea>
</Form>
</DialogContent>
</Dialog>

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

@ -82,7 +82,7 @@ export const SectionOptions = ({ id }: Props) => {
<List weight="bold" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-48">
<DropdownMenuContent className="mr-4 w-48 ">
{hasItems && (
<>
<DropdownMenuItem onClick={onCreate}>

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

@ -20,7 +20,7 @@ export const SummarySection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("summary")}
<h2 className="line-clamp-1 text-3xl font-bold">{section.name}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{section.name}</h2>
</div>
<div className="flex items-center gap-x-2">

2
apps/client/src/pages/builder/sidebars/right/sections/export.tsx
View File

@ -37,7 +37,7 @@ export const ExportSection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("export")}
<h2 className="line-clamp-1 text-3xl font-bold">{t`Export`}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Export`}</h2>
</div>
</header>

2
apps/client/src/pages/builder/sidebars/right/sections/information.tsx
View File

@ -114,7 +114,7 @@ export const InformationSection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("information")}
<h2 className="line-clamp-1 text-3xl font-bold">{t`Information`}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Information`}</h2>
</div>
</header>

4
apps/client/src/pages/builder/sidebars/right/sections/layout.tsx
View File

@ -204,7 +204,7 @@ export const LayoutSection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("layout")}
<h2 className="line-clamp-1 text-3xl font-bold">{t`Layout`}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Layout`}</h2>
</div>
<Tooltip content={t`Reset Layout`}>
@ -268,7 +268,7 @@ export const LayoutSection = () => {
<Button variant="outline" className="ml-auto" onClick={onAddPage}>
<Plus />
<span className="ml-2">{t`Add New Page`}</span>
<span className="ml-2 text-xs lg:text-sm">{t`Add New Page`}</span>
</Button>
</main>
</section>

2
apps/client/src/pages/builder/sidebars/right/sections/notes.tsx
View File

@ -14,7 +14,7 @@ export const NotesSection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("notes")}
<h2 className="line-clamp-1 text-3xl font-bold">{t`Notes`}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Notes`}</h2>
</div>
</header>

4
apps/client/src/pages/builder/sidebars/right/sections/page.tsx
View File

@ -23,11 +23,11 @@ export const PageSection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("page")}
<h2 className="line-clamp-1 text-3xl font-bold">{t`Page`}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Page`}</h2>
</div>
</header>
<main className="grid gap-y-4">
<main className="grid gap-y-6">
<div className="space-y-1.5">
<Label>{t`Format`}</Label>
<Select

2
apps/client/src/pages/builder/sidebars/right/sections/sharing.tsx
View File

@ -36,7 +36,7 @@ export const SharingSection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("sharing")}
<h2 className="line-clamp-1 text-3xl font-bold">{t`Sharing`}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Sharing`}</h2>
</div>
</header>

2
apps/client/src/pages/builder/sidebars/right/sections/statistics.tsx
View File

@ -20,7 +20,7 @@ export const StatisticsSection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("statistics")}
<h2 className="line-clamp-1 text-3xl font-bold">{t`Statistics`}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Statistics`}</h2>
</div>
</header>

4
apps/client/src/pages/builder/sidebars/right/sections/template.tsx
View File

@ -16,11 +16,11 @@ export const TemplateSection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("template")}
<h2 className="line-clamp-1 text-3xl font-bold">{t`Template`}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Template`}</h2>
</div>
</header>
<main className="grid grid-cols-2 gap-5 @lg/right:grid-cols-3 @2xl/right:grid-cols-4">
<main className="grid grid-cols-2 gap-8 @lg/right:grid-cols-3 @2xl/right:grid-cols-4">
{templatesList.map((template, index) => (
<AspectRatio key={template} ratio={1 / 1.4142}>
<motion.div

4
apps/client/src/pages/builder/sidebars/right/sections/theme.tsx
View File

@ -17,11 +17,11 @@ export const ThemeSection = () => {
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("theme")}
<h2 className="line-clamp-1 text-3xl font-bold">{t`Theme`}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Theme`}</h2>
</div>
</header>
<main className="grid gap-y-4">
<main className="grid gap-y-6">
<div className="mb-2 grid grid-cols-6 flex-wrap justify-items-center gap-y-4 @xs/right:grid-cols-9">
{colors.map((color) => (
<div

8
apps/client/src/pages/builder/sidebars/right/sections/typography.tsx
View File

@ -58,15 +58,15 @@ export const TypographySection = () => {
}, [typography.font.family]);
return (
<section id="typography" className="grid gap-y-6">
<section id="typography" className="grid gap-y-8">
<header className="flex items-center justify-between">
<div className="flex items-center gap-x-4">
{getSectionIcon("typography")}
<h2 className="line-clamp-1 text-3xl font-bold">{t`Typography`}</h2>
<h2 className="line-clamp-1 text-2xl font-bold lg:text-3xl">{t`Typography`}</h2>
</div>
</header>
<main className="grid gap-y-4">
<main className="grid gap-y-8">
<div className="grid grid-cols-2 gap-4">
{fontSuggestions.map((font) => (
<Button
@ -75,7 +75,7 @@ export const TypographySection = () => {
style={{ fontFamily: font }}
disabled={typography.font.family === font}
className={cn(
"flex h-12 items-center justify-center overflow-hidden rounded border text-center text-sm ring-primary transition-colors hover:bg-secondary-accent focus:outline-none focus:ring-1 disabled:opacity-100",
"flex h-12 items-center justify-center overflow-hidden rounded border text-center text-xs ring-primary transition-colors hover:bg-secondary-accent focus:outline-none focus:ring-1 disabled:opacity-100 lg:text-sm",
typography.font.family === font && "ring-1",
)}
onClick={() => {