From 707206450c592184853085bd8918b095da2987d6 Mon Sep 17 00:00:00 2001
From: Ehsan <ehsanahmadi8338@gmail.com>
Date: Thu, 29 Aug 2024 03:18:01 +0330
Subject: [PATCH] responsive page doctor item & page booking

---
 components/clinic/components/about/index.js   |  1 +
 components/clinic/components/contact/index.js | 10 ++--
 .../clinic/components/contact/modal/index.js  |  4 +-
 .../doctor/appointmentList/ItemAppointment.js |  4 +-
 components/doctor/detailDoctor/Link.js        | 51 +++++++++++--------
 components/doctor/detailDoctor/Title.js       | 30 ++++++-----
 .../doctor/detailDoctor/cards/AboutDcotor.js  | 33 ++++++++++--
 .../detailDoctor/cards/locations/Item.js      |  9 ++--
 .../detailDoctor/cards/locations/index.js     |  4 +-
 components/doctor/index.js                    |  2 +-
 10 files changed, 96 insertions(+), 52 deletions(-)

diff --git a/components/clinic/components/about/index.js b/components/clinic/components/about/index.js
index 95937e2..42ff271 100644
--- a/components/clinic/components/about/index.js
+++ b/components/clinic/components/about/index.js
@@ -1,4 +1,5 @@
 import { useState } from "react";
+
 import ListBime from "./ListBime";
 import Services from "./Services";
 import Images from "./iamges/Images";
diff --git a/components/clinic/components/contact/index.js b/components/clinic/components/contact/index.js
index 8c07f12..f5f42ca 100644
--- a/components/clinic/components/contact/index.js
+++ b/components/clinic/components/contact/index.js
@@ -2,7 +2,7 @@ import { useState } from "react";
 
 import RoutingWhiteC from "@/components/icons/RoutingWhiteC";
 import { Button } from "@mui/material";
-import ModalSearchCity from "./modal";
+import ModalOpenLocation from "./modal";
 import Detail from "./Detail";
 import RoutingC from "@/components/icons/RoutingC";
 
@@ -22,7 +22,7 @@ function Contact({ data }) {
         >
             <div className="flex items-end justify-between">
                 <Detail data={data} />
-                <ModalSearchCity
+                <ModalOpenLocation
                     open={open}
                     setOpen={setOpen}
                     handleClose={handleClose}
@@ -35,7 +35,7 @@ function Contact({ data }) {
                         <RoutingC />
                         مسیریابی
                     </Button>
-                </ModalSearchCity>
+                </ModalOpenLocation>
             </div>
             <div
                 className="w-full relative h-[460px] mt-[24px]"
@@ -45,7 +45,7 @@ function Contact({ data }) {
                     className='w-full h-full rounded-lg'
                     loading="lazy"
                 ></iframe>
-                <ModalSearchCity
+                <ModalOpenLocation
                     open={open}
                     setOpen={setOpen}
                     handleClose={handleClose}
@@ -56,7 +56,7 @@ function Contact({ data }) {
                     >
                         <RoutingWhiteC />
                     </Button>
-                </ModalSearchCity>
+                </ModalOpenLocation>
             </div>
         </div>
     )
diff --git a/components/clinic/components/contact/modal/index.js b/components/clinic/components/contact/modal/index.js
index 51339c9..3dd0602 100644
--- a/components/clinic/components/contact/modal/index.js
+++ b/components/clinic/components/contact/modal/index.js
@@ -4,7 +4,7 @@ import { Drawer, Modal } from "@mui/material";
 import { styleDefault } from "@/mui";
 import Content from "./Content";
 
-function ModalSearchCity({ open, setOpen, handleClose, children }) {
+function ModalOpenLocation({ open, setOpen, handleClose, children }) {
 
     const toggleDrawer = (newOpen) => () => {
         setOpen(newOpen);
@@ -48,4 +48,4 @@ function ModalSearchCity({ open, setOpen, handleClose, children }) {
     )
 }
 
-export default ModalSearchCity
\ No newline at end of file
+export default ModalOpenLocation
\ No newline at end of file
diff --git a/components/doctor/appointmentList/ItemAppointment.js b/components/doctor/appointmentList/ItemAppointment.js
index b6168e7..d326acc 100644
--- a/components/doctor/appointmentList/ItemAppointment.js
+++ b/components/doctor/appointmentList/ItemAppointment.js
@@ -25,7 +25,7 @@ function ItemAppointment({ turn, doctor }) {
                     <p className="text-[#525252] text-[14px] font-medium">تخصص: {doctor.expertise}</p>
                 </div>
             </div>
-            <div className='flex mt-5 items-center justify-between'>
+            <div className='flex mt-5 gap-2 items-center justify-between'>
                 <div className='flex items-start justify-start gap-1'>
                     <GreenCalendarTurn />
                     <p className='text-[#05BA58] text-[12px] font-medium'>اولین نوبت آزاد: {turn.first_free_turn}</p>
@@ -33,7 +33,7 @@ function ItemAppointment({ turn, doctor }) {
                 <Link href={`/booking/${turn.id}`}>
                     <Button
                         variant='contained'
-                        className='!py-2 !px-6 gap-1'
+                        className='!py-2 !px-3 xl:!px-6 gap-1'
                     >
                         دریافت نوبت
                         <div className='w-[20px] h-[20px]'>
diff --git a/components/doctor/detailDoctor/Link.js b/components/doctor/detailDoctor/Link.js
index d8776d3..5d658b9 100644
--- a/components/doctor/detailDoctor/Link.js
+++ b/components/doctor/detailDoctor/Link.js
@@ -13,30 +13,37 @@ function Link() {
     const [activeId, setActiveId] = useState(0);
 
     return (
-        <ul className="flex items-center justify-start mt-[56px] mb-[32px]">
-            {listLink.map((item, idx) => (
-                <li
-                    key={idx}
-                    className="flex"
-                >
-                    <a href={`#${item.link}`}>
-                        <Button
-                            onClick={() => setActiveId(idx)}
-                            className={`!text-[20px] !font-bold !p-1
+        <>
+            <span className="block bg-[#EFEFEF] h-px w-full my-[16px] lg:my-0 lg:bg-transparent"></span>
+            <ul className="flex items-center justify-evenly lg:justify-start mb-[32px]">
+                {listLink.map((item, idx) => (
+                    <li
+                        key={idx}
+                        className="flex w-full lg:w-fit relative"
+                    >
+                        <a
+                            href={`#${item.link}`}
+                            className="mx-auto"
+                        >
+                            <Button
+                                onClick={() => setActiveId(idx)}
+                                className={`!text-[20px] !text-center !font-bold !p-1
                                 ${activeId === idx ? '!text-[#F17732]' : '!text-[#525252]'}
                             `}
-                            variant="text">
-                            {item.name}
-                        </Button>
-                    </a>
-                    {listLink.length > idx + 1 && (
-                        <span
-                            className="block bg-[#BABABA] w-px h-[38px] lg:mx-[44px] xl:mx-[56px]"
-                        ></span>
-                    )}
-                </li>
-            ))}
-        </ul>
+                                variant="text">
+                                {item.name}
+                            </Button>
+                        </a>
+                        {listLink.length > idx + 1 && (
+                            <span
+                                className="block border-transparent border-l border-dotted border-l-[#BABABA] w-px h-[38px] lg:mx-[44px] xl:mx-[56px]
+                                absolute left-0 lg:relative"
+                            ></span>
+                        )}
+                    </li>
+                ))}
+            </ul>
+        </>
     )
 }
 
diff --git a/components/doctor/detailDoctor/Title.js b/components/doctor/detailDoctor/Title.js
index 9a830f8..e77b392 100644
--- a/components/doctor/detailDoctor/Title.js
+++ b/components/doctor/detailDoctor/Title.js
@@ -5,31 +5,37 @@ import Image from "next/image"
 
 function Title({ doctor }) {
     return (
-        <div className="flex items-center justify-start gap-8">
+        <div className="flex flex-col lg:flex-row items-center justify-start gap-[8px] lg:gap-[32px]">
             <Image
+                className="
+                    w-[40px] sm:w-[81px] md:w-[123px] lg:w-[164px]
+                    h-[40px] sm:h-[81px] md:h-[123px] lg:h-[164px]
+                "
                 src={doctor.img}
-                width={164}
-                height={164}
                 alt="img-doctor"
+                height={164}
+                width={164}
             />
-            <div className="flex flex-col items-start gap-4">
-                <p className="text-[#3B3B3B] text-[20px] font-bold">{doctor.name}</p>
-                <p className="text-[#525252] text-[16px] font-medium">تخصص: {doctor.expertise}</p>
+            <div className="flex flex-col items-center lg:items-start gap-[8px] lg:gap-[16px]">
+                <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">{doctor.name}</p>
+                <p className="text-[#525252] text-[14px] md:text-[16px] font-medium">تخصص: {doctor.expertise}</p>
                 <div className="flex items-center justify-start gap-11">
                     <p className="text-[#525252] text-[16px] font-medium">{doctor.experience} سال تجربه</p>
                     <div className="flex items-center gap-1">
-                        <TickCircle />
-                        <p className="text-[#525252] text-[16px] font-medium">کد نظام پزشکی: {doctor.medical_system_code}</p>
+                        <div className="hidden lg:flex">
+                            <TickCircle />
+                        </div>
+                        <p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-medium">کد نظام پزشکی: {doctor.medical_system_code}</p>
                     </div>
                 </div>
                 <div className="flex items-center justify-start gap-2">
-                    <div className="flex p-1 gap-0.5 items-center justify-center">
+                    <div className="flex p-1 gap-0.5 items-start justify-center">
                         <StarDI />
-                        <p className="text-[#616161] text-[14px] font-normal">امتیاز: {doctor.point}</p>
+                        <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">امتیاز: {doctor.point}</p>
                     </div>
-                    <div className="flex p-1 items-center gap-0.5">
+                    <div className="flex p-1 items-start gap-0.5">
                         <LikeDI />
-                        <p className="text-[#616161] text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
+                        <p className="text-[#616161] text-[12px] md:text-[14px] font-normal">{doctor.satisfaction}% رضایت کاربران</p>
                     </div>
                 </div>
             </div>
diff --git a/components/doctor/detailDoctor/cards/AboutDcotor.js b/components/doctor/detailDoctor/cards/AboutDcotor.js
index 0afb6ab..2f09bdc 100644
--- a/components/doctor/detailDoctor/cards/AboutDcotor.js
+++ b/components/doctor/detailDoctor/cards/AboutDcotor.js
@@ -1,13 +1,40 @@
+'use client';
+
+import { useState } from "react";
+import { Button } from "@mui/material"
+
 function AboutDcotor({ doctor }) {
+
+    const [isMore, setIsMore] = useState(false);
+
     return (
         <div>
             <a
                 id="about-doctor"
                 className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
             ></a>
-            <p className="text-[#616161] text-[14px] font-normal text-justify">{doctor.detail}</p>
-            <div className="mt-2 mb-8">
-                <p className="text-[#525252] text-[16px] font-bold">تخصص ها</p>
+            <div className="flex flex-col items-center justify-center">
+                <p
+                    className={`
+                        text-[#616161] text-[14px] font-normal text-justify overflow-hidden relative
+                        md:max-h-fit after:absolute after:right-0 after:bottom-0 after:h-[80px]
+                        after:shadow-xl after:w-full transition-all duration-500 md:after:!bg-[linear-gradient(transparent,transparent)]
+                        ${isMore ?
+                            'after:bg-transparent max-h-screen' :
+                            'after:bg-[linear-gradient(transparent,#FAFAFA)] max-h-[200px]'
+                        }
+                    `}
+                >{doctor.detail}</p>
+                <Button
+                    className="!text-[#F17732] md:!hidden !text-[14px] !font-light !p-2"
+                    onClick={() => setIsMore(!isMore)}
+                    variant="text"
+                >
+                    {isMore ? 'مطالعه کمتر' : 'مطالعه بیشتر'}
+                </Button>
+            </div>
+            <div className="mt-2 mb-6 md:mb-7 lg:mb-8">
+                <p className="text-[#525252] text-[14px] md:text-[16px] font-bold">تخصص ها</p>
                 <ul className="flex flex-wrap gap-y-1 items-center justify-start gap-4">
                     {doctor.specialties.map((item, idx) => (
                         <li className="flex items-center justify-start gap-1">
diff --git a/components/doctor/detailDoctor/cards/locations/Item.js b/components/doctor/detailDoctor/cards/locations/Item.js
index 271dd16..a03343e 100644
--- a/components/doctor/detailDoctor/cards/locations/Item.js
+++ b/components/doctor/detailDoctor/cards/locations/Item.js
@@ -39,16 +39,19 @@ function Item({ data }) {
                         'max-h-0'}
                 `}
             >
-                <div className="gap-4 flex flex-col items-start mt-[24px]">
+                <div className="gap-3 md:gap-4 flex flex-col items-start mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px]">
                     <p className="text-[#525252] text-[16px] font-normal">آدرس: {data.address}</p>
                     <p className="text-[#525252] text-[16px] font-normal">تلفن: {data.phone}</p>
                     <p className="text-[#525252] text-[16px] font-normal">روزهای کاری: {data.working_days}</p>
                 </div>
                 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d99748.77423686371!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e1!3m2!1sen!2snl!4v1724802057795!5m2!1sen!2snl"
-                    className='w-full h-[470px] rounded-lg mt-4'
+                    className='
+                        w-full rounded-lg mt-4
+                        h-[219px] sm:h-[302px] md:h-[385px] lg:h-[470px]
+                    '
+                    referrerPolicy="no-referrer-when-downgrade"
                     allowFullScreen=""
                     loading="lazy"
-                    referrerPolicy="no-referrer-when-downgrade"
                 ></iframe>
             </div>
         </>
diff --git a/components/doctor/detailDoctor/cards/locations/index.js b/components/doctor/detailDoctor/cards/locations/index.js
index 1685f7b..421d470 100644
--- a/components/doctor/detailDoctor/cards/locations/index.js
+++ b/components/doctor/detailDoctor/cards/locations/index.js
@@ -4,7 +4,7 @@ function Locations({ doctor }) {
     return (
         <div>
             <p
-                className="text-[#525252] text-[20px] font-bold"
+                className="text-[#525252] text-[16px] md:text-[18px] lg:text-[20px] font-bold"
             >موقعیت مکانی </p>
             <ul className="flex w-full mt-[24px] flex-col justify-center items-start">
                 {doctor.locations.map((item, idx) => (
@@ -14,7 +14,7 @@ function Locations({ doctor }) {
                             data={item}
                         />
                         {doctor.locations.length > idx + 1 && (
-                            <span className="w-full h-px bg-[#EFEFEF] block my-[16px]"></span>
+                            <span className="w-full h-px bg-[#EFEFEF] block my-[12px] md:my-[14px] lg:my-[16px]"></span>
                         )}
                     </li>
                 ))}
diff --git a/components/doctor/index.js b/components/doctor/index.js
index 55f4bba..45a513e 100644
--- a/components/doctor/index.js
+++ b/components/doctor/index.js
@@ -6,7 +6,7 @@ function DoctorPage({ doctor }) {
     return (
         <div className="pt-[120px] mt-[56px] padding-responsive">
             <div className="flex items-center justify-between">
-                <div className="flex items-center justify-start text-[16px] font-normal">
+                <div className="flex items-center justify-start text-[14px] md:text-[16px] font-normal">
                     <p className="text-[#9B9B9B] text-nowrap">متخصص {doctor.expertise} {' >'}</p>
                     <p className="text-[#525252] text-nowrap mr-1">{doctor.name}</p>
                 </div>