Fakultas Ilmu Komputer UI

Commit 3834208e authored by Lia Yuliana's avatar Lia Yuliana
Browse files

[CHORES] fix responsiveness IUMK element

parent 5f7d1733
Pipeline #72265 failed with stages
in 4 minutes and 49 seconds
......@@ -17,7 +17,7 @@ const EmployeeDropdown = ({setEmployeeData}) => {
return (
<div className="">
<div
className="flex flex-row items-center justify-between py-1.5 px-2 bg-white md:mr-96 lg:mr-96 xl:mr-96 2xl:mr-96 px-4 mr-24 py-2.5 border-2 border-grey rounded-lg"
className="flex flex-row items-center justify-between py-1.5 px-2 bg-white md:mr-64 lg:mr-64 xl:mr-64 2xl:mr-64 px-4 mr-24 py-2.5 border-2 border-grey rounded-lg"
onClick={() => setShowDropdown(!showDropdown)}
>
<div className="flex flex-row items-center">
......
......@@ -9,7 +9,10 @@ const FormIUMK1 = ({register, errors, handleSubmit, onSubmit}) => {
onSubmit={handleSubmit(onSubmit)}
>
<div className="flex flex-col justify-center items-center">
<h1 className="heading-2 mb-4" data-testid="form-iumk-1-judul">
<h1
className="flex text-center heading-2 mb-4 pt-9"
data-testid="form-iumk-1-judul"
>
Jelaskan Industri Anda
</h1>
<p
......@@ -73,7 +76,6 @@ const FormIUMK1 = ({register, errors, handleSubmit, onSubmit}) => {
type="radio"
value="Firma"
/>
Firma
<label className="heading-3 text-charchoal">Yayasan</label>
<input
className="mr-2"
......@@ -142,12 +144,14 @@ const FormIUMK1 = ({register, errors, handleSubmit, onSubmit}) => {
/>
{errors.barangJasa && <p>{errors.barangJasa.message}</p>}
</div>
<button
className="bg-poporange text-white heading-3 px-10 md:px-32 lg:px-32 xl:px-32 2xl:px-32 py-2.5 mr-6 mb-10 float-right shadow rounded-lg submit self-end"
data-testid="lanjut-button"
>
Lanjut
</button>
<div className="pt-4">
<button
className="bg-poporange text-white heading-3 px-10 md:px-28 lg:px-24 xl:px-24 2xl:px-24 py-2 mb-10 float-right shadow rounded-lg submit"
data-testid="lanjut-button"
>
Lanjut
</button>
</div>
</form>
)
}
......
......@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
const FormIUMK2 = ({register, handleSubmit, onSubmit, setEmployeeData}) => {
return (
<form
className="bg-white flex flex-col"
className="bg-white flex flex-col px-4"
data-testid="form-iumk-2"
onSubmit={handleSubmit(onSubmit)}
>
......@@ -24,7 +24,7 @@ const FormIUMK2 = ({register, handleSubmit, onSubmit, setEmployeeData}) => {
memberikan penawaran yang sesuai dengan keadaan Anda
</p>
</div>
<div className="pl-6">
<div>
<div
className="flex flex-col pb-6"
data-testid="form-iumk-2-jumlah-karyawan"
......@@ -41,7 +41,7 @@ const FormIUMK2 = ({register, handleSubmit, onSubmit, setEmployeeData}) => {
<span className="medium-text text-black">(opsional)</span>
</label>
<input
className="md:mr-96 lg:mr-96 xl:mr-96 2xl:mr-96 px-4 mr-24 py-2.5 border-2 border-grey rounded-lg"
className="md:mr-64 lg:mr-64 xl:mr-64 2xl:mr-64 px-4 mr-24 py-2.5 border-2 border-grey rounded"
placeholder="Tulis Kode KBLI disini"
name="kbli"
ref={register({
......@@ -54,7 +54,7 @@ const FormIUMK2 = ({register, handleSubmit, onSubmit, setEmployeeData}) => {
Catatan <span className="medium-text text-black">(opsional)</span>
</label>
<textarea
className="px-4 pb-32 pt-2.5 mr-6 resize-none border-2 border-grey rounded-lg items-start"
className="w-full px-4 pb-32 pt-2.5 mr-6 resize-none border-2 border-grey rounded items-start"
placeholder="e.g.untuk pendirian PT ABC saya sudah mempunyai dokumen A, B,C ..."
name="catatan"
ref={register({
......@@ -63,12 +63,14 @@ const FormIUMK2 = ({register, handleSubmit, onSubmit, setEmployeeData}) => {
/>
</div>
</div>
<button
className="bg-poporange text-white heading-3 px-10 md:px-32 lg:px-32 xl:px-32 2xl:px-32 py-2.5 mr-6 mb-10 float-right shadow rounded-lg submit self-end"
data-testid="lanjut-button"
>
Lanjut
</button>
<div className="pt-4">
<button
className="bg-poporange text-white heading-3 px-10 md:px-28 lg:px-24 xl:px-24 2xl:px-24 py-2 mb-10 float-right shadow rounded-lg submit"
data-testid="lanjut-button"
>
Lanjut
</button>
</div>
</form>
)
}
......
......@@ -31,39 +31,43 @@ const FormIUMK3 = ({data}) => {
return (
<form className="px-4" data-testid="form-iumk-3">
{urutan.map((value, index) => (
<div key={index}>
<div
className={`flex flex-row justify-between ${
urutan[index] != 'catatan' && 'lg:pb-3 xl:pb-3 2xl:pb-3'
}`}
>
<div
className="grid lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3"
key={index}
>
<div className="flex justify-start grid lg:col-span-2 xl:col-span-2 2xl:col-span-2 lg:pb-3 xl:pb-3 2xl:pb-3">
<p className="md\:font-Lato">{label[index]}</p>
{value != 'catatan' && (
{urutan[index] == 'catatan' ? (
<p
className="heading-3 md\:font-Lato text-right"
data-testid={`form-iumk-3-input-${value}`}
className="md\:font-Lato"
data-testid={`form-pt-3-input-${value}`}
>
{data[value]}
</p>
) : (
''
)}
</div>
{value == 'catatan' && (
<div className="pb-3 mb-0">
<p className="" data-testid={`form-iumk-3-input-${value}`}>
{urutan[index] == 'catatan' ? (
''
) : (
<div className="flex justify-start lg:justify-end xl:justify-end 2xl:justify-end text-left lg:text-right xl:text-right 2xl:text-right pb-3">
<p className="heading-3" data-testid={`form-pt-3-input-${value}`}>
{data[value]}
</p>
</div>
)}
</div>
))}
<button
className="bg-poporange text-white heading-3 px-10 md:px-32 lg:px-32 xl:px-32 2xl:px-32 py-2.5 mr-6 mb-10 float-right shadow rounded-lg submit self-end"
data-testid="submit-button"
>
Submit
</button>
<div className="pt-4">
<button
className="bg-poporange text-white heading-3 px-10 md:px-28 lg:px-24 xl:px-24 2xl:px-24 py-2 mb-10 float-right shadow rounded-lg submit"
data-testid="submit-button"
>
Submit
</button>
</div>
</form>
)
}
......
......@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
const Stepper = ({currentPage, setCurrentPage}) => {
return (
<div className="flex flex-row justify-between items-center ml-96 mr-96 pt-28 pb-10 px-48">
<div className="flex flex-row justify-between items-center px-12 lg:px-48 lg:px-36 xl:px-48 2xl:px-48 mx-42 lg:mx-64 xl:mx-72 2xl:mx-72 pt-28 pb-14">
<div
className="flex flex-col justify-center items-center pt-1 relative"
data-testid="step-1"
......
......@@ -34,28 +34,30 @@ const FormIUMK = () => {
return (
<div>
<Navbar isLoggedIn={loggedIn} name={name} />
<Stepper currentPage={pageNumber} setCurrentPage={setPageNumber} />
<div className="bg-white flex flex-col ml-80 mr-80 pt-8 pb-20 px-5">
{pageNumber == 1 && (
<FormIUMK1
register={register}
errors={errors}
handleSubmit={handleSubmit}
onSubmit={onSubmit}
/>
)}
<div className="bg-lightgrey px-10 lg:px-2 xl:px-2 2xl:px-2 py-6">
<Stepper currentPage={pageNumber} setCurrentPage={setPageNumber} />
<div className="bg-white flex flex-col mx-92 lg:mx-80 xl:mx-80 2xl:mx-80 px-4 lg:px-6 xl:px-6 2xl:px-6 pt-4">
{pageNumber == 1 && (
<FormIUMK1
register={register}
errors={errors}
handleSubmit={handleSubmit}
onSubmit={onSubmit}
/>
)}
{pageNumber == 2 && (
<FormIUMK2
register={register}
errors={errors}
handleSubmit={handleSubmit}
onSubmit={onSubmit}
setEmployeeData={setEmployeeData}
/>
)}
{pageNumber == 2 && (
<FormIUMK2
register={register}
errors={errors}
handleSubmit={handleSubmit}
onSubmit={onSubmit}
setEmployeeData={setEmployeeData}
/>
)}
{pageNumber == 3 && <FormIUMK3 data={data} />}
{pageNumber == 3 && <FormIUMK3 data={data} />}
</div>
</div>
</div>
)
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment