From 9a676d5f2d10ec9ca345393ecbebf952a957afe3 Mon Sep 17 00:00:00 2001 From: Meer Uzair <121447358+MeerUzairWasHere@users.noreply.github.com> Date: Fri, 27 Sep 2024 20:41:09 +0530 Subject: [PATCH] Added responsiveness create post (#407) * Update page.tsx * Update layout.tsx * Update job-form.tsx --- src/app/create/page.tsx | 2 +- src/app/layout.tsx | 2 +- src/components/job-form.tsx | 16 ++++++++-------- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/app/create/page.tsx b/src/app/create/page.tsx index a7b678cb..428dad04 100644 --- a/src/app/create/page.tsx +++ b/src/app/create/page.tsx @@ -3,7 +3,7 @@ import React from 'react'; const page = () => { return ( - <div className="mt-10 min-w-full"> + <div className="mt-10 flex flex-col items-center"> <div> <h1 className="text-center text-4xl font-semibold">Post a job</h1> <p className="text-center mt-6 text-lg text-gray-300"> diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 890387dc..9fc68b7f 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -35,7 +35,7 @@ export default async function RootLayout({ > <Providers> <Header /> - <main className="grow grid">{children}</main> + <main className="grow grid p-4">{children}</main> <Footer /> </Providers> {/* Commenting this out for temp basis */} diff --git a/src/components/job-form.tsx b/src/components/job-form.tsx index 0d742beb..d9661b6f 100644 --- a/src/components/job-form.tsx +++ b/src/components/job-form.tsx @@ -159,20 +159,20 @@ const PostJobForm = () => { }, [watchHasSalaryRange, form]); return ( <div className="flex flex-col items-center gap-y-10 justify-center"> - <div className=" mt-4 flex gap-2 "> - <div className="bg-gray-800/90 backdrop-blur-sm p-4 rounded-lg text-center text-white flex-1 sm:min-w-[12rem]"> + <div className="w-full md:justify-center mt-4 flex flex-col md:flex-row gap-2"> + <div className="bg-gray-800/90 backdrop-blur-sm p-4 rounded-lg text-center text-white w-full md:w-48"> <Calendar className="w-8 h-8 mb-3 mx-auto text-green-500" /> <p className="text-base font-semibold mb-1">Posted for</p> <p className="text-gray-400 text-sm">30 days</p> </div> - <div className="bg-gray-800/90 backdrop-blur-sm p-4 rounded-lg text-center text-white flex-1 sm:min-w-[12rem]"> + <div className="bg-gray-800/90 backdrop-blur-sm p-4 rounded-lg text-center text-white w-full md:w-48"> <MailOpenIcon className="w-8 h-8 mb-3 mx-auto text-purple-500" /> <p className="text-base font-semibold mb-1">Emailed to</p> <p className="text-gray-400 text-sm">290,301 subscribers</p> </div> - <div className="bg-gray-800/90 backdrop-blur-sm p-4 rounded-lg text-center text-white flex-1 sm:min-w-[12rem]"> + <div className="bg-gray-800/90 backdrop-blur-sm p-4 rounded-lg text-center text-white w-full md:w-48"> <LucideRocket className="w-8 h-8 mb-3 mx-auto text-orange-500" /> <p className="text-base font-semibold mb-1">Reach</p> <p className="text-gray-400 text-sm"> @@ -180,11 +180,11 @@ const PostJobForm = () => { </p> </div> </div> - <div className="flex-col justify-center"> + <div className="flex-col justify-center"> <Form {...form}> <form onSubmit={form.handleSubmit(handleFormSubmit)} - className="flex flex-col max-w-full max-sm:p-2 " + className="flex flex-col max-w-full" > <div className="bg-gray-900 w-full text-gray-300 p-6 rounded-lg space-y-4"> <h2 className="text-2xl font-semibold mb-6">Job details</h2> @@ -206,7 +206,7 @@ const PostJobForm = () => { )} /> - <div className="grid grid-cols-2 gap-4"> + <div className="grid grid-cols md:grid-cols-2 gap-4"> <FormField control={form.control} name="category" @@ -437,7 +437,7 @@ const PostJobForm = () => { </div> {/* Company Name and Email Fields */} - <div className="flex gap-4 mb-4"> + <div className="flex flex-col md:flex-row gap-4 mb-4"> <div className="flex-1"> <FormField control={form.control}