infrastructure/plunk
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #174 from wzulfikar/responsive-forms

Browse Source 
Make forms and few other UI responsive
This commit is contained in:
Dries Augustyns
2025-05-24 10:08:26 +02:00
committed by GitHub
parent 05429b8331 dd6c7ce0a7
commit d97353cee6
12 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/dashboard/src/components/Input/MarkdownEditor/Editor.tsx
+3 -3
View File
@@ -711,8 +711,8 @@ export default function Editor({ value, onChange, mode, modeSwitcher }: Markdown
</div> </div>
</div> </div>
<> <>
<div className={"prose prose-sm prose-neutral space-y-4 break-words p-4"}> <div className={"prose prose-sm prose-neutral space-y-4 break-words p-4 w-full"}>
<div className={"w-full"} style={{ width: "600px" }}> <div className={"w-full lg:w-[600px]"}>
<EditorContent editor={editor} /> <EditorContent editor={editor} />
<EditorBubbleMenu <EditorBubbleMenu
editor={editor} editor={editor}
@@ -739,7 +739,7 @@ export default function Editor({ value, onChange, mode, modeSwitcher }: Markdown
</> </>
) : ( ) : (
<> <>
<div className={"mb-3 grid gap-3 md:grid-cols-1"}> <div className={"mb-3 sm:grid sm:gap-3 md:grid-cols-1"}>
<div> <div>
<label className="block text-sm font-medium text-neutral-700">Email Body</label> <label className="block text-sm font-medium text-neutral-700">Email Body</label>
<div className="mt-1 h-full"> <div className="mt-1 h-full">
packages/dashboard/src/pages/actions/[id].tsx
+1 -1
View File
@@ -415,7 +415,7 @@ export default function Index() {
return router.push("/actions"); return router.push("/actions");
}} }}
className={ className={
"flex w-full justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm" "flex w-fit justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
} }
> >
Cancel Cancel
packages/dashboard/src/pages/actions/index.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ export default function Index() {
{actions ? ( {actions ? (
actions.length > 0 ? ( actions.length > 0 ? (
<> <>
<div className={"grid grid-cols-1 gap-6 sm:grid-cols-2"}> <div className={"grid grid-cols-1 gap-6 lg:grid-cols-2"}>
{actions {actions
.sort((a, b) => { .sort((a, b) => {
if (a.name < b.name) { if (a.name < b.name) {
packages/dashboard/src/pages/actions/new.tsx
+1 -1
View File
@@ -305,7 +305,7 @@ export default function Index() {
return router.push("/actions"); return router.push("/actions");
}} }}
className={ className={
"flex w-full justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm" "flex w-fit justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
} }
> >
Cancel Cancel
packages/dashboard/src/pages/campaigns/[id].tsx
+2 -2
View File
@@ -422,7 +422,7 @@ export default function Index() {
</> </>
} }
> >
<form onSubmit={handleSubmit(update)} className="space-6 grid gap-6 sm:grid-cols-6"> <form onSubmit={handleSubmit(update)} className="space-y-6 sm:space-y-0 sm:space-6 sm:grid sm:gap-6 sm:grid-cols-6">
<div className={"sm:col-span-6 grid sm:grid-cols-6 gap-6"}> <div className={"sm:col-span-6 grid sm:grid-cols-6 gap-6"}>
<Input <Input
className={"sm:col-span-6"} className={"sm:col-span-6"}
@@ -874,7 +874,7 @@ export default function Index() {
</AnimatePresence> </AnimatePresence>
</div> </div>
<div className={"ml-auto mt-6 flex justify-end gap-x-5 sm:col-span-6"}> <div className={"ml-auto mt-6 sm:flex justify-end sm:gap-x-5 sm:col-span-6"}>
{campaign.status === "DRAFT" ? ( {campaign.status === "DRAFT" ? (
<> <>
<motion.button <motion.button
packages/dashboard/src/pages/campaigns/new.tsx
+3 -3
View File
@@ -212,8 +212,8 @@ export default function Index() {
<> <>
<Dashboard> <Dashboard>
<Card title={"Create a new campaign"}> <Card title={"Create a new campaign"}>
<form onSubmit={handleSubmit(create)} className="space-6 grid gap-6 sm:grid-cols-6"> <form onSubmit={handleSubmit(create)} className="space-y-6 sm:grid sm:grid-cols-6 sm:gap-6">
<div className={"sm:col-span-6 grid sm:grid-cols-6 gap-6"}> <div className={"sm:col-span-6 sm:grid sm:grid-cols-6 sm:gap-6 space-y-6 sm:space-y-0"}>
<Input <Input
className={"sm:col-span-6"} className={"sm:col-span-6"}
label={"Subject"} label={"Subject"}
@@ -626,7 +626,7 @@ export default function Index() {
return router.push("/campaigns"); return router.push("/campaigns");
}} }}
className={ className={
"flex w-full justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm" "flex w-fit justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-800 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
} }
> >
Cancel Cancel
packages/dashboard/src/pages/contacts/[id].tsx
+1 -1
View File
@@ -246,7 +246,7 @@ export default function Index() {
</> </>
} }
> >
<form onSubmit={handleSubmit(update)} className="grid gap-x-5 space-y-9 sm:grid-cols-2"> <form onSubmit={handleSubmit(update)} className="space-y-6 sm:grid sm:gap-x-5 sm:space-y-9 sm:grid-cols-2">
<div className={"col-span-2 flex items-center gap-6"}> <div className={"col-span-2 flex items-center gap-6"}>
<span className="inline-flex h-20 w-20 items-center justify-center rounded-full bg-neutral-100"> <span className="inline-flex h-20 w-20 items-center justify-center rounded-full bg-neutral-100">
<span className="text-xl font-semibold leading-none text-neutral-800">{contact.email[0].toUpperCase()}</span> <span className="text-xl font-semibold leading-none text-neutral-800">{contact.email[0].toUpperCase()}</span>
packages/dashboard/src/pages/index.tsx
+4 -4
View File
@@ -28,8 +28,8 @@ export default function Index() {
<> <>
<Dashboard> <Dashboard>
<> <>
<div className="divide-y divide-neutral-200 overflow-hidden rounded border border-neutral-200 bg-neutral-200 sm:grid sm:grid-cols-3 sm:gap-px sm:divide-y-0"> <div className="divide-y divide-neutral-200 overflow-hidden rounded border border-neutral-200 bg-neutral-200 lg:grid lg:grid-cols-3 lg:gap-px lg:divide-y-0">
<div className="group relative rounded-tl rounded-tr bg-white p-6 transition focus-within:ring-2 focus-within:ring-inset focus-within:ring-neutral-800 sm:rounded-tr-none"> <div className="group relative rounded-tl rounded-tr bg-white p-6 transition focus-within:ring-2 focus-within:ring-inset focus-within:ring-neutral-800 lg:rounded-tr-none">
{activeProject.verified ? ( {activeProject.verified ? (
<> <>
<div> <div>
@@ -108,7 +108,7 @@ export default function Index() {
</span> </span>
</div> </div>
<div className="group relative bg-white p-6 transition focus-within:ring-2 focus-within:ring-inset focus-within:ring-neutral-800 sm:rounded-tr"> <div className="group relative bg-white p-6 transition focus-within:ring-2 focus-within:ring-inset focus-within:ring-neutral-800 lg:rounded-tr">
<div> <div>
<span className="inline-flex rounded bg-neutral-100 p-3 text-neutral-800 ring-4 ring-white"> <span className="inline-flex rounded bg-neutral-100 p-3 text-neutral-800 ring-4 ring-white">
<LineChart size={20} /> <LineChart size={20} />
@@ -133,7 +133,7 @@ export default function Index() {
</span> </span>
</div> </div>
<div className="group relative bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-neutral-800 sm:rounded-bl"> <div className="group relative bg-white p-6 focus-within:ring-2 focus-within:ring-inset focus-within:ring-neutral-800 lg:rounded-bl">
<div> <div>
<span className="inline-flex rounded bg-neutral-100 p-3 text-neutral-800 ring-4 ring-white"> <span className="inline-flex rounded bg-neutral-100 p-3 text-neutral-800 ring-4 ring-white">
<Book size={20} /> <Book size={20} />
packages/dashboard/src/pages/settings/api.tsx
+2 -2
View File
@@ -94,7 +94,7 @@ export default function Index() {
}} }}
> >
<label className="block text-sm font-medium text-neutral-700">Public API Key</label> <label className="block text-sm font-medium text-neutral-700">Public API Key</label>
<p className={"cursor-pointer rounded border border-neutral-300 bg-neutral-100 px-3 py-2 text-sm"}> <p className={"cursor-pointer rounded border border-neutral-300 bg-neutral-100 px-3 py-2 text-sm truncate"}>
{activeProject.public} {activeProject.public}
</p> </p>
@@ -111,7 +111,7 @@ export default function Index() {
}} }}
> >
<label className="block text-sm font-medium text-neutral-700">Secret API Key</label> <label className="block text-sm font-medium text-neutral-700">Secret API Key</label>
<p className={"cursor-pointer rounded border border-neutral-300 bg-neutral-100 px-3 py-2 text-sm"}> <p className={"cursor-pointer rounded border border-neutral-300 bg-neutral-100 px-3 py-2 text-sm truncate"}>
{activeProject.secret} {activeProject.secret}
</p> </p>
packages/dashboard/src/pages/templates/[id].tsx
+2 -2
View File
@@ -203,7 +203,7 @@ export default function Index() {
</> </>
} }
> >
<form onSubmit={handleSubmit(update)} className="grid gap-6 sm:grid-cols-6"> <form onSubmit={handleSubmit(update)} className="space-y-6 sm:space-y-0 sm:grid sm:gap-6 sm:grid-cols-6">
<Input <Input
className={"sm:col-span-4"} className={"sm:col-span-4"}
label={"Subject"} label={"Subject"}
@@ -320,7 +320,7 @@ export default function Index() {
return router.push("/templates"); return router.push("/templates");
}} }}
className={ className={
"flex w-full justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm" "flex w-fit justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
} }
> >
Cancel Cancel
packages/dashboard/src/pages/templates/index.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ export default function Index() {
{templates ? ( {templates ? (
templates.length > 0 ? ( templates.length > 0 ? (
<> <>
<div className={"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3"}> <div className={"grid grid-cols-1 gap-6 lg:grid-cols-3"}>
{templates {templates
.sort((a, b) => { .sort((a, b) => {
if (a.actions.length > 0 && b.actions.length === 0) { if (a.actions.length > 0 && b.actions.length === 0) {
packages/dashboard/src/pages/templates/new.tsx
+2 -2
View File
@@ -96,7 +96,7 @@ export default function Index() {
<> <>
<Dashboard> <Dashboard>
<Card title={"Create a new template"} description={"Reusable blueprints of your emails"}> <Card title={"Create a new template"} description={"Reusable blueprints of your emails"}>
<form onSubmit={handleSubmit(create)} className="grid gap-6 sm:grid-cols-6"> <form onSubmit={handleSubmit(create)} className="space-y-6 sm:space-y-0 sm:grid sm:gap-6 sm:grid-cols-6">
<Input <Input
className={"sm:col-span-4"} className={"sm:col-span-4"}
label={"Subject"} label={"Subject"}
@@ -213,7 +213,7 @@ export default function Index() {
return router.push("/templates"); return router.push("/templates");
}} }}
className={ className={
"flex w-full justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm" "flex w-fit justify-center rounded border border-neutral-300 bg-white px-6 py-2 text-base font-medium text-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
} }
> >
Cancel Cancel