Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix #1660 [Mobile Frontend Issue] : Section-Dialog Overflow In Mobile Device Along With Some Changes In Spacing And Font Size Of Sidebar #2114

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix #1660 [Mobile Frontend Issue] : Section-Dialog Overflow In Mobile Device Along With Some Changes In Spacing And Font Size Of Sidebar #2114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/client/src/pages/builder/sidebars/left/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
4 changes: 2 additions & 2 deletions apps/client/src/pages/builder/sidebars/left/sections/basics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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"
Expand Down
8 changes: 6 additions & 2 deletions apps/client/src/pages/builder/sidebars/left/sections/shared/section-base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,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">
Expand Down Expand Up @@ -158,7 +158,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({
Expand Down
58 changes: 32 additions & 26 deletions apps/client/src/pages/builder/sidebars/left/sections/shared/section-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
DialogHeader,
DialogTitle,
Form,
ScrollArea,
} from "@reactive-resume/ui";
import { produce } from "immer";
import get from "lodash.get";
Expand Down Expand Up @@ -144,32 +145,37 @@ 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>
</DialogHeader>

{children}

<DialogFooter>
<Button type="submit">
{isCreate && t`Create`}
{isUpdate && t`Save Changes`}
{isDuplicate && t`Duplicate`}
</Button>
</DialogFooter>
</form>
<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>
</DialogHeader>

{children}

<DialogFooter>
<Button type="submit">
{isCreate && t`Create`}
{isUpdate && t`Save Changes`}
{isDuplicate && t`Duplicate`}
</Button>
</DialogFooter>
</form>
</ScrollArea>
</Form>
</DialogContent>
</Dialog>
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/pages/builder/sidebars/left/sections/shared/section-options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/pages/builder/sidebars/left/sections/summary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/pages/builder/sidebars/right/sections/export.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/pages/builder/sidebars/right/sections/information.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
4 changes: 2 additions & 2 deletions apps/client/src/pages/builder/sidebars/right/sections/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`}>
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/pages/builder/sidebars/right/sections/notes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
4 changes: 2 additions & 2 deletions apps/client/src/pages/builder/sidebars/right/sections/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/pages/builder/sidebars/right/sections/sharing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
2 changes: 1 addition & 1 deletion apps/client/src/pages/builder/sidebars/right/sections/statistics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
4 changes: 2 additions & 2 deletions apps/client/src/pages/builder/sidebars/right/sections/template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions apps/client/src/pages/builder/sidebars/right/sections/theme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 4 additions & 4 deletions apps/client/src/pages/builder/sidebars/right/sections/typography.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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={() => {
Expand Down