From 98003b863121b2931c552a61993dd170ef37cc23 Mon Sep 17 00:00:00 2001
From: Areos Chen <areos.cc@gmail.com>
Date: Tue, 26 Mar 2024 16:10:17 +1030
Subject: [PATCH] adjust: modal size on small screen

---
 src/components/CheckBox.tsx                   |  5 ++-
 src/components/modal/modalFrame.tsx           |  4 +-
 .../modals/mJobAssign/AssignedStaff.tsx       |  2 +-
 .../modals/mJobAssign/DateSchedule.tsx        | 40 ++++++++++++++++---
 .../modals/mJobAssign/SelectStaff.tsx         |  2 +-
 .../modals/mJobAssign/mJobAssign.tsx          |  3 +-
 src/pageComponents/modals/mOrderForm.tsx      | 39 +++++++++---------
 src/pageComponents/modals/mOrderPay.tsx       |  2 +-
 .../modals/mTimeTracker/TimeBtns.tsx          |  2 +-
 9 files changed, 65 insertions(+), 34 deletions(-)

diff --git a/src/components/CheckBox.tsx b/src/components/CheckBox.tsx
index 9ebd9eb..355e8dc 100644
--- a/src/components/CheckBox.tsx
+++ b/src/components/CheckBox.tsx
@@ -6,10 +6,11 @@ type Tprops = ComponentPropsWithoutRef<"input"> & {
 };
 
 const CheckBox: FC<Tprops> = (props) => {
-    const { onChange, checked, onClick, name, uid, ...restProps } = props;
+    const { onChange, checked, onClick, name, uid, className, ...restProps } =
+        props;
     return (
         <div
-            className={`inline-flex items-center h-16 w-auto border-2 border-gray-200 rounded-lg ${checked && "border-indigo-500"}`}
+            className={`inline-flex items-center h-16 w-auto border-2 border-gray-200 rounded-lg ${checked && "border-indigo-500"} ${className}`}
         >
             <input
                 id={`link-checkbox-${uid}`}
diff --git a/src/components/modal/modalFrame.tsx b/src/components/modal/modalFrame.tsx
index 0d37f4e..5a42701 100644
--- a/src/components/modal/modalFrame.tsx
+++ b/src/components/modal/modalFrame.tsx
@@ -85,7 +85,7 @@ const ModalFrame: FC<Tprops> = ({
                                 )} ${className}`}
                             >
                                 {/* right top close button */}
-                                <div className="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
+                                <div className="absolute right-0 top-0 pr-4 pt-4 block">
                                     <CloseBtn
                                         onClick={(e) => {
                                             e.preventDefault();
@@ -99,7 +99,7 @@ const ModalFrame: FC<Tprops> = ({
                                         {/* title */}
                                         <Dialog.Title
                                             as="h3"
-                                            className={`text-base font-semibold leading-6 mb-4  ${
+                                            className={`text-base flex items-center font-semibold leading-6 mb-4 h-[5vh] ${
                                                 isMajor
                                                     ? "text-red-600 flex items-center justify-center"
                                                     : "text-gray-900"
diff --git a/src/pageComponents/modals/mJobAssign/AssignedStaff.tsx b/src/pageComponents/modals/mJobAssign/AssignedStaff.tsx
index 2881d55..ab3b2ba 100644
--- a/src/pageComponents/modals/mJobAssign/AssignedStaff.tsx
+++ b/src/pageComponents/modals/mJobAssign/AssignedStaff.tsx
@@ -25,7 +25,7 @@ const AssignedStaff: FC = () => {
     return (
         <Fieldset
             title={t("label.assignedStaff")}
-            sFieldset="col-span-full lg:col-span-5 my-2 mx-1 lg:h-[45vh] overflow-y-auto p-4"
+            sFieldset="col-span-full lg:col-span-5 my-2 mx-1 h-[28vh] md:h-[38vh] lg:h-[45vh] overflow-y-auto p-4"
         >
             {scheduledWork.length > 0 ? (
                 scheduledWork.map((item) => {
diff --git a/src/pageComponents/modals/mJobAssign/DateSchedule.tsx b/src/pageComponents/modals/mJobAssign/DateSchedule.tsx
index ecab5ad..c6de093 100644
--- a/src/pageComponents/modals/mJobAssign/DateSchedule.tsx
+++ b/src/pageComponents/modals/mJobAssign/DateSchedule.tsx
@@ -1,4 +1,5 @@
 import type { FC } from "react";
+import { useEffect, useState } from "react";
 import { DateBtn } from "@/components/btns";
 import Card from "@/components/card";
 import Fieldset from "@/components/form/fieldset";
@@ -11,9 +12,25 @@ import { dateFormatAU, sortWorkLogs } from "@/utils/utils";
 const DateSchedule: FC = () => {
     const { t } = useTranslation();
     const selectedDate = useJobAssignStore((state) => state.selectedDate);
-    const currentWorkLogs = useJobAssignStore((state) => state.currentWorkLogs);
     const setDate = useJobAssignStore((state) => state.setDate);
+    const currentWorkLogs = useJobAssignStore((state) => state.currentWorkLogs);
     const setWorkLogs = useJobAssignStore((state) => state.setWorkLogs);
+    const [isTooSmallScreen, setIsTooSmallScreen] = useState(false);
+
+    const checkScreenWidth = () => {
+        setIsTooSmallScreen(window.innerWidth < 420);
+    };
+
+    useEffect(() => {
+        checkScreenWidth();
+        // Add event listener for window resize
+        window.addEventListener("resize", checkScreenWidth);
+
+        // Remove event listener on component unmount
+        return () => {
+            window.removeEventListener("resize", checkScreenWidth);
+        };
+    });
 
     // remove work log from the current work log list
     const handleDelete = (indexToRemove: number) => {
@@ -22,6 +39,17 @@ const DateSchedule: FC = () => {
         );
     };
 
+    const InputDatePicker = () => {
+        return (
+            <input
+                type="date"
+                onChange={(e) => setDate(new Date(e.target.value))}
+                value={selectedDate?.toDateString()}
+                placeholder="DD/MM/YYYY" // Placeholder text
+            />
+        );
+    };
+
     return (
         <Fieldset
             title={
@@ -40,7 +68,7 @@ const DateSchedule: FC = () => {
             sLegend={`text-lg`}
         >
             {/* date picker area */}
-            <div className="col-span-full sm:col-span-4">
+            <div className="col-span-full md:col-span-5 lg:col-span-full xl:col-span-5">
                 <div className="font-semibold text-indigo-500 text-bold my-2 ml-2">
                     {selectedDate != undefined ? (
                         <>
@@ -53,17 +81,17 @@ const DateSchedule: FC = () => {
                         t("modal.tips.noDateSelected")
                     )}
                 </div>
-                <Card className=" flex justify-center">
-                    <DatePicker />
+                <Card className="flex justify-center h-auto w-auto">
+                    {isTooSmallScreen ? <InputDatePicker /> : <DatePicker />}
                 </Card>
             </div>
 
             {/* assigned dates area */}
-            <div className="col-span-full sm:col-span-4 ">
+            <div className="col-span-full md:col-span-3 lg:col-span-full xl:col-span-3">
                 <div className="font-semibold text-indigo-500 text-bold my-2 ml-2">
                     {t("modal.tips.scheduledWork")}
                 </div>
-                <Card className="overflow-y-auto flex flex-col justify-stretch">
+                <Card className="overflow-y-auto flex flex-col justify-stretch max-h-[40vh]">
                     {sortWorkLogs("dsc", currentWorkLogs).map((item, index) => {
                         return (
                             <div key={index} className="my-1 w-full flex">
diff --git a/src/pageComponents/modals/mJobAssign/SelectStaff.tsx b/src/pageComponents/modals/mJobAssign/SelectStaff.tsx
index 74ae408..f07db90 100644
--- a/src/pageComponents/modals/mJobAssign/SelectStaff.tsx
+++ b/src/pageComponents/modals/mJobAssign/SelectStaff.tsx
@@ -62,7 +62,7 @@ const SelectStaff: FC = () => {
     return (
         <Fieldset
             title={t("label.selectStaff")}
-            sFieldset="col-span-full lg:col-span-5 my-2 mx-1 h-[28vh] px-2 overflow-y-auto gap-x-2 gap-y-3 flex flex-wrap justify-start content-start"
+            sFieldset="col-span-full my-2 mx-1 h-[28vh] px-2 gap-x-2 gap-y-3 flex flex-wrap justify-start content-start overflow-y-auto"
         >
             {allStaff.length ? (
                 allStaff.map((staff) => {
diff --git a/src/pageComponents/modals/mJobAssign/mJobAssign.tsx b/src/pageComponents/modals/mJobAssign/mJobAssign.tsx
index e3bb46d..3b9b33b 100644
--- a/src/pageComponents/modals/mJobAssign/mJobAssign.tsx
+++ b/src/pageComponents/modals/mJobAssign/mJobAssign.tsx
@@ -64,7 +64,7 @@ const MJobAssign = () => {
 
     const mainContent = (
         <Form onSubmit={onSubmit} className="grid grid-cols-1 gap-y-3 gap-x-4">
-            <section className="grid grid-cols-1 lg:grid-cols-8 gap-y-3 gap-x-4 overflow-y-auto h-[74dvh] sm:h-[77dvh] lg:h-auto">
+            <section className="grid grid-cols-1 lg:grid-cols-8 gap-y-3 gap-x-4 overflow-y-auto h-[77vh] lg:h-auto">
                 {/* left area */}
                 <section className="col-span-1 lg:col-span-4 grid grid-cols-1">
                     {/* client fieldset */}
@@ -106,6 +106,7 @@ const MJobAssign = () => {
             title={t("modal.title.jobAssign")}
             mode="full"
             mQuit={true}
+            className={"overflow-y-auto"}
         >
             {mainContent}
         </MTemplate>
diff --git a/src/pageComponents/modals/mOrderForm.tsx b/src/pageComponents/modals/mOrderForm.tsx
index d856bf9..3811db9 100644
--- a/src/pageComponents/modals/mOrderForm.tsx
+++ b/src/pageComponents/modals/mOrderForm.tsx
@@ -700,8 +700,8 @@ const MOrderForm: FC = memo(() => {
     );
 
     const mainContent = (
-        <Form onSubmit={onSubmit} className="grid grid-cols-1 gap-y-3 gap-x-4">
-            <div className="grid grid-cols-1 lg:grid-cols-8 gap-y-3 gap-x-4 overflow-y-auto h-[74dvh] sm:h-[77dvh] lg:h-auto">
+        <Form onSubmit={onSubmit}>
+            <section className="grid grid-cols-1 lg:grid-cols-8 gap-y-3 gap-x-4 overflow-y-auto h-[77vh] lg:h-auto">
                 <section className="col-span-1 lg:col-span-3 grid grid-cols-1">
                     {/* client info */}
                     <fieldset className="">
@@ -729,23 +729,24 @@ const MOrderForm: FC = memo(() => {
                     </fieldset>
                 </section>
                 {/* order services list */}
-                <fieldset className="col-span-full lg:col-span-5">
-                    <legend className="text-indigo-500 text-bold">
-                        {t("label.serviceList")}:
-                    </legend>
-                    {descContent}
-                    {/* append btn - adding a new service */}
-                    {appendNewService}
-                </fieldset>
-            </div>
-            <section className="col-span-full row-span-2">
-                {/* btns */}
-                <SubmitBtn
-                    onClick={() => trigger()}
-                    onClose={onClose}
-                    navState={navigation.state}
-                    className=""
-                />
+                <section className="col-span-1 lg:col-span-5 grid grid-cols-1">
+                    <fieldset className="col-span-full">
+                        <legend className="text-indigo-500 text-bold">
+                            {t("label.serviceList")}:
+                        </legend>
+                        {descContent}
+                        {/* append btn - adding a new service */}
+                        {appendNewService}
+                        <section className="col-span-full row-span-2">
+                            {/* btns */}
+                            <SubmitBtn
+                                onClick={() => trigger()}
+                                onClose={onClose}
+                                navState={navigation.state}
+                            />
+                        </section>
+                    </fieldset>
+                </section>
             </section>
         </Form>
     );
diff --git a/src/pageComponents/modals/mOrderPay.tsx b/src/pageComponents/modals/mOrderPay.tsx
index 506d460..dd00a43 100644
--- a/src/pageComponents/modals/mOrderPay.tsx
+++ b/src/pageComponents/modals/mOrderPay.tsx
@@ -268,7 +268,7 @@ const MOrderPay: FC = memo(() => {
 
     const mainContent = (
         <Form onSubmit={onSubmit}>
-            <section className="grid grid-cols-1 lg:grid-cols-8 gap-y-3 gap-x-4 overflow-y-auto h-[74vh] sm:h-[77vh] lg:h-auto">
+            <section className="grid grid-cols-1 lg:grid-cols-8 gap-y-3 gap-x-4 overflow-y-auto h-[77vh] lg:h-auto">
                 <section className="col-span-1 lg:col-span-3 grid grid-cols-1">
                     {/* client info */}
                     <fieldset className="col-span-full">
diff --git a/src/pageComponents/modals/mTimeTracker/TimeBtns.tsx b/src/pageComponents/modals/mTimeTracker/TimeBtns.tsx
index c399f0c..e633d3f 100644
--- a/src/pageComponents/modals/mTimeTracker/TimeBtns.tsx
+++ b/src/pageComponents/modals/mTimeTracker/TimeBtns.tsx
@@ -48,7 +48,7 @@ const TimeBtnGroup: FC<Tprops> = ({ className, setOpenReset }) => {
             ) : (
                 <>
                     <Button
-                        className={`border-2 col-span-1 rounded-full font-bold border-red-600 bg-red-500 text-slate-100 hover:bg-slate-100 hover:text-red-600`}
+                        className={`border-2 col-span-1 rounded-full font-bold border-red-600 bg-red-500 text-slate-100 hover:bg-slate-100 hover:text-red-600 text-wrap`}
                         onClick={() => setOpenReset(true)}
                     >
                         {t("btn.timeReset")}