From 9a75a9a6ccc4621cbfd87c8515f0204da494e754 Mon Sep 17 00:00:00 2001 From: Alireza khaji Date: Sat, 7 May 2022 16:57:32 +0430 Subject: [PATCH] seeMoreContainers --- .../Calendar/CalendarComponents/Calendar.js | 2 +- src/components/Calendar2/Calendar2.js | 17 ++++ src/components/Calendar2/Title.js | 21 +++++ src/components/Calendar2/Week.js | 14 +++ src/view/my-services/Exams.js | 12 ++- src/view/my-services/FutureExams.js | 90 +++++++++++++------ src/view/my-services/MyCourse.js | 74 +++++++++++---- src/view/my-services/MyOrders.js | 45 +++++++--- src/view/my-services/MyRegisters.js | 42 ++++++--- src/view/my-services/MyServices.js | 87 ++++++++++++++++-- src/view/my-services/ResultExams.js | 47 ++++++---- src/view/my-services/Title.js | 29 ++++-- src/view/my-services/index.css | 32 +++++++ 13 files changed, 405 insertions(+), 107 deletions(-) create mode 100644 src/components/Calendar2/Calendar2.js create mode 100644 src/components/Calendar2/Title.js create mode 100644 src/components/Calendar2/Week.js diff --git a/src/components/Calendar/CalendarComponents/Calendar.js b/src/components/Calendar/CalendarComponents/Calendar.js index 8d45e53..44160af 100644 --- a/src/components/Calendar/CalendarComponents/Calendar.js +++ b/src/components/Calendar/CalendarComponents/Calendar.js @@ -309,7 +309,7 @@ let active_list; type={type} />
- { eventInFooter !== null && eventInFooter !== undefined && + { (eventInFooter !== null && eventInFooter !== undefined) &&
{ type == 'dashboard' ? <>
رویدادها:

{eventInFooter ? eventInFooter : 'رویدادی در این روز وجود ندارد!'}

: eventInFooter diff --git a/src/components/Calendar2/Calendar2.js b/src/components/Calendar2/Calendar2.js new file mode 100644 index 0000000..5dc32cb --- /dev/null +++ b/src/components/Calendar2/Calendar2.js @@ -0,0 +1,17 @@ +import Title from "./Title"; +import Week from "./Week"; + + + +const Calendar2 = ({ primaryColor }) => { + return ( +
+ {/* ----title---------------- */} + + {/* ----------week---------------- */} + <Week/> + </div> + ); +}; + +export default Calendar2; \ No newline at end of file diff --git a/src/components/Calendar2/Title.js b/src/components/Calendar2/Title.js new file mode 100644 index 0000000..772d126 --- /dev/null +++ b/src/components/Calendar2/Title.js @@ -0,0 +1,21 @@ +import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io"; + +const Title = ({ primaryColor }) => { + return ( + <div className="Title w-full h-12 flex flex-row-reverse items-center justify-between"> + <IoIosArrowForward className="text-lg text-[#504F4F] cursor-pointer" /> + <div + className="text-lg text-right" + style={{ + color: `${primaryColor}`, + fontFamily: "IRANSansXFaNum-Medium", + }} + > + اریبهشت، 1401 + </div> + <IoIosArrowBack className="text-lg text-[#504F4F] cursor-pointer" /> + </div> + ); +}; + +export default Title; diff --git a/src/components/Calendar2/Week.js b/src/components/Calendar2/Week.js new file mode 100644 index 0000000..ae29819 --- /dev/null +++ b/src/components/Calendar2/Week.js @@ -0,0 +1,14 @@ + + +let weekList = ["شنبه","یک‌شنبه","دوشنبه","سه‌شنبه","چهارشنبه","پنج‌شنبه","جمعه"] +const Week=()=>{ + return ( + <div className="Week w-full h-8 flex items-center justify-between flex-row-reverse"> + {weekList.map((item,index)=>( + <div key={index} className="w-[13%] text-center text-xs">{item}</div> + ))} + </div> + ); +} + +export default Week; \ No newline at end of file diff --git a/src/view/my-services/Exams.js b/src/view/my-services/Exams.js index ea53558..ab902fe 100644 --- a/src/view/my-services/Exams.js +++ b/src/view/my-services/Exams.js @@ -4,11 +4,17 @@ import FutureExams from "./FutureExams"; import ResultExams from "./ResultExams"; -const Exams = () => { +const Exams = ({ seeMoreHandler, seeMoreStatus }) => { return ( <div className="Exams w-[70%] h-full flex flex-row-reverse rounded-lg border border-[#E0E0E0]"> - <FutureExams /> - <ResultExams /> + <FutureExams + seeMoreHandler={seeMoreHandler} + seeMoreStatus={seeMoreStatus} + /> + <ResultExams + seeMoreHandler={seeMoreHandler} + seeMoreStatus={seeMoreStatus} + /> </div> ); }; diff --git a/src/view/my-services/FutureExams.js b/src/view/my-services/FutureExams.js index 7911688..1f7f438 100644 --- a/src/view/my-services/FutureExams.js +++ b/src/view/my-services/FutureExams.js @@ -3,8 +3,8 @@ import img2 from "../../assets/img/usgs-hoS3dzgpHzw-unsplash.jpg"; import stickynote from "../../assets/img/stickynote.svg"; import clockIcon from "../../assets/img/vuesax-linear-clock.svg"; import Title from "./Title"; -import './index.css' -const FutureExams = () => { +import "./index.css"; +const FutureExams = ({ seeMoreHandler, seeMoreStatus, deActiveSeeMore }) => { let data = [ { id: 1, @@ -54,64 +54,92 @@ const FutureExams = () => { ]; //hoverHandler-------------- - const hoverHandler=(index)=>{ + const hoverHandler = (index) => { let frontBox = document.querySelectorAll(".frontBox"); let description = document.querySelectorAll(".frontBox-description"); - frontBox[index].style.transform="translateY(0px)"; + frontBox[index].style.transform = "translateY(0px)"; frontBox[index].style.background = "rgba(223,20,82,0.7)"; - description[index].style.display="block"; + description[index].style.display = "block"; // rgba(223,20,82,0.7) - } + }; const hoverHandle2 = (index) => { let frontBox = document.querySelectorAll(".frontBox"); let description = document.querySelectorAll(".frontBox-description"); - if(window.innerWidth>=1490){ - frontBox[index].style.transform = "translateY(60%)"; - }else if (window.innerWidth >= 1410) { - frontBox[index].style.transform = "translateY(57%)"; - }else if (window.innerWidth >= 1315) { - frontBox[index].style.transform = "translateY(70%)"; - }else if (window.innerWidth >= 1230) { - frontBox[index].style.transform = "translateY(67%)"; - }else{ - frontBox[index].style.transform = "translateY(63%)"; + if (seeMoreStatus !== 1) { + if (window.innerWidth >= 1490) { + frontBox[index].style.transform = "translateY(60%)"; + } else if (window.innerWidth >= 1410) { + frontBox[index].style.transform = "translateY(57%)"; + } else if (window.innerWidth >= 1315) { + frontBox[index].style.transform = "translateY(70%)"; + } else if (window.innerWidth >= 1230) { + frontBox[index].style.transform = "translateY(67%)"; + } else { + frontBox[index].style.transform = "translateY(63%)"; + } + } else { + frontBox[index].style.transform = "translateY(72%)"; } frontBox[index].style.background = "linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)"; description[index].style.display = "none"; // rgba(223,20,82,0.7) }; - + return ( - <div className="FutureExams w-[55%] h-full border-l border-[#E0E0E0] px-1 pt-1"> + <div + className="FutureExams w-[55%] h-full border-l border-[#E0E0E0] px-1 pt-1" + style={seeMoreStatus !== 0 ? { width: "100%", border: "none" } : null} + > <div className="w-full h-full overflow-y-auto px-4 pt-4"> {/* ----title-------- */} - <Title titleText="آزمون‌های پیش‌رو" /> + <Title + titleText="آزمون‌های پیش‌رو" + seeMoreHandler={() => seeMoreHandler(1)} + seeMoreStatus={seeMoreStatus} + deActiveSeeMore={deActiveSeeMore} + /> {/* ----body-------- */} - <div className="w-full mt-4 flex flex-row-reverse items-start gap-x-[5%] res1:gap-x-[3.5%] gap-y-4 flex-wrap pb-2"> + <div + className="w-full mt-4 flex flex-row-reverse items-start gap-x-[5%] res1:gap-x-[3.5%] gap-y-4 flex-wrap pb-2" + style={seeMoreStatus === 1 ? { columnGap: "3.5%" } : null} + > {data?.map((item, index) => ( <div key={index} className="w-[47.5%] res1:w-[31%] aspect-square rounded overflow-hidden relative cursor-pointer" onMouseEnter={() => hoverHandler(index)} onMouseLeave={() => hoverHandle2(index)} + style={seeMoreStatus === 1 ? { width: "31%" } : null} > {/* -----back-img------ */} <img src={item.img} className="w-full" alt="back-img" /> {/* -----front-data------ */} <div className="frontBox w-full h-full absolute top-0 left-0 p-3 translate-y-[60%] transition-all duration-300" - style={{ - background: - "linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)", - }} + style={ + seeMoreStatus === 1 + ? { + background: + "linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)", + transform: "translateY(72%)", + } + : { + background: + "linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)", + } + } > <div className="w-full flex items-center flex-row-reverse pb-1 border-b border-white"> <img src={stickynote} alt="stickynote" className="h-5 ml-1" /> <div className="text-xs text-white text-right overflow-hidden text-ellipsis whitespace-nowrap" - style={{ direction: "rtl" }} + style={ + seeMoreStatus === 1 + ? { direction: "rtl", fontSize: "16px" } + : { direction: "rtl" } + } > {item.title} </div> @@ -120,11 +148,17 @@ const FutureExams = () => { <div className="w-full flex flex-row-reverse items-center justify-between py-1"> <div className="flex flex-row-reverse items-center"> <img src={clockIcon} alt="clockIcon" className="ml-1 h-4" /> - <div className="text-xs res1:text-[10px] res0_5:text-xs text-white text-right"> + <div + className="text-xs res1:text-[10px] res0_5:text-xs text-white text-right" + style={seeMoreStatus === 1 ? { fontSize: "14px" } : null} + > {item.date} </div> </div> - <div className="text-xs res1:text-[10px] res0_5:text-xs text-white text-right"> + <div + className="text-xs res1:text-[10px] res0_5:text-xs text-white text-right" + style={seeMoreStatus === 1 ? { fontSize: "14px" } : null} + > ساعت {item.time} </div> </div> @@ -144,4 +178,4 @@ const FutureExams = () => { ); }; -export default FutureExams; \ No newline at end of file +export default FutureExams; diff --git a/src/view/my-services/MyCourse.js b/src/view/my-services/MyCourse.js index 7b0c1f8..1c6790f 100644 --- a/src/view/my-services/MyCourse.js +++ b/src/view/my-services/MyCourse.js @@ -39,16 +39,27 @@ let data = [ teacher: "فرانت‌کار عجیب", }, ]; -const MyCourse=()=>{ +const MyCourse = ({ seeMoreHandler, seeMoreStatus, deActiveSeeMore }) => { return ( - <div className="MyCourse w-[45%] h-full rounded-lg border border-[#E0E0E0] px-1 pt-1"> + <div + className="MyCourse w-[45%] h-full rounded-lg border border-[#E0E0E0] px-1 pt-1" + style={seeMoreStatus === 4 ? { width: "100%" } : null} + > <div className="w-full h-full overflow-y-auto px-4 pt-4"> {/* ----title-------- */} - <Title titleText="دوره‌های من" /> + <Title + titleText="دوره‌های من" + seeMoreHandler={() => seeMoreHandler(4)} + seeMoreStatus={seeMoreStatus} + deActiveSeeMore={deActiveSeeMore} + /> {/* ----body-------- */} <div className="w-full mt-4"> {data?.map((item, index) => ( - <div className="w-full flex flex-row-reverse items-center justify-between mb-4 cursor-pointer"> + <div + key={index} + className="w-full flex flex-row-reverse items-start justify-between mb-4 cursor-pointer" + > <div className="w-[37%] aspect-[1/0.7] rounded overflow-hidden flex items-center justify-center"> <img src={item.img} @@ -57,33 +68,58 @@ const MyCourse=()=>{ /> </div> {/* ---- */} - <div className="w-[61%]"> - <div className="text-xs text-right text-[#B1B1B1]"> + <div className="w-[61%] pt-1"> + <div + className="text-xs text-right text-[#B1B1B1]" + style={seeMoreStatus === 4 ? { fontSize: "14px" } : null} + > {item?.date} </div> <div className="text-sm text-right mt-1" - style={{ - fontFamily: "IRANSansXFaNum-Medium", - direction: "rtl", - }} + style={ + seeMoreStatus === 4 + ? { + fontFamily: "IRANSansXFaNum-Medium", + direction: "rtl", + fontSize: "20px", + } + : { + fontFamily: "IRANSansXFaNum-Medium", + direction: "rtl", + } + } > {item.name} </div> <div className="text-xs text-right text-[#B1B1B1] mt-1 overflow-hidden text-ellipsis" - style={{ - WebkitLineClamp: "2", - WebkitBoxOrient: "vertical", - display: "-webkit-box", - direction:"rtl" - }} + style={ + seeMoreStatus === 4 + ? { + WebkitLineClamp: "2", + WebkitBoxOrient: "vertical", + display: "-webkit-box", + direction: "rtl", + fontSize: "16px", + } + : { + WebkitLineClamp: "2", + WebkitBoxOrient: "vertical", + display: "-webkit-box", + direction: "rtl", + } + } > {item.description} </div> <div className="text-left text-xs w-full mt-1" - style={{ direction: "ltr" }} + style={ + seeMoreStatus === 4 + ? { direction: "ltr",fontSize:"14px"} + : { direction: "ltr" } + } > استاد:{item?.teacher} </div> @@ -94,6 +130,6 @@ const MyCourse=()=>{ </div> </div> ); -} +}; -export default MyCourse; \ No newline at end of file +export default MyCourse; diff --git a/src/view/my-services/MyOrders.js b/src/view/my-services/MyOrders.js index 65d2895..831bf92 100644 --- a/src/view/my-services/MyOrders.js +++ b/src/view/my-services/MyOrders.js @@ -71,29 +71,43 @@ let data = [ }, ]; let statusColor = ["#F7EA46", "#57F746", "#FE1E1E"]; -const MyOrders = () => { +const MyOrders = ({ seeMoreHandler, seeMoreStatus, deActiveSeeMore }) => { return ( - <div className="MyOrders w-[28.5%] h-full rounded-lg border border-[#E0E0E0] px-1 pt-1"> + <div + className="MyOrders w-[28.5%] h-full rounded-lg border border-[#E0E0E0] px-1 pt-1" + style={seeMoreStatus === 5 ? { width: "100%" } : null} + > <div className="w-full h-full overflow-y-auto px-4 pt-4"> {/* ----title-------- */} - <Title titleText="سفارش‌های من" /> + <Title + titleText="سفارش‌های من" + seeMoreHandler={() => seeMoreHandler(5)} + seeMoreStatus={seeMoreStatus} + deActiveSeeMore={deActiveSeeMore} + /> {/* ----body-------- */} <div className="w-full mt-4"> {data.map((item, index) => ( <div key={index} className="w-full mb-5"> <div className="w-full flex flex-row-reverse items-center justify-between py-1 border-y border-[#E0E0E0]"> - <div className="w-[40%] pl-1 text-right text-xs border-l border-[#E0E0E0]"> + <div + className="w-[40%] pl-1 text-right text-xs border-l border-[#E0E0E0]" + style={seeMoreStatus === 5 ? { width: "55%" } : null} + > {item.factorId} </div> <div className="w-[22%] text-right text-xs">{item.date}</div> - <div className="w-[30%] flex flex-row-reverse items-center"> + <div + className="w-[30%] flex flex-row-reverse items-center" + style={seeMoreStatus === 5 ? { width: "15%" } : null} + > <div className="w-4 h-4 rounded-full bg-black" style={{ backgroundColor: `${statusColor[item.status - 1]}`, }} ></div> - <div className="text-xs text-left mr-1"> + <div className="order-status text-xs text-right mr-1"> {item.status === 1 ? "در حال پردازش" : item.status === 2 @@ -104,19 +118,30 @@ const MyOrders = () => { </div> {/* ---------- */} <div className="w-full flex flex-row-reverse justify-between pt-1"> - <div className="w-[60%] flex flex-row-reverse items-start gap-x-2 gap-y-2 flex-wrap"> + <div className="my-order-right w-[60%] flex flex-row-reverse items-start gap-x-2 gap-y-2 flex-wrap"> {item.products.map((ITEM, INDEX) => ( <div key={INDEX} className="w-10 h-16 rounded bg-[#E0E0E0] overflow-hidden flex items-center justfy-center cursor-pointer" + style={ + seeMoreStatus === 5 + ? { width: "80px", height: "128px" } + : null + } ></div> ))} </div> - <div className="w-[37%]"> - <div className="w-full text-left text-xs"> + <div className="my-order-left w-[37%]"> + <div + className="factor-sum-price w-full text-left text-xs" + style={seeMoreStatus === 5 ? { fontSize: "16px" } : null} + > جمع فاکتور {item.sumPrice} تومان </div> - <div className="w-full h-7 rounded flex items-center justify-center text-xs text-center text-white bg-[#DF1452] mt-2 cursor-pointer"> + <div + className="w-full h-7 rounded flex items-center justify-center text-xs text-center text-white bg-[#DF1452] mt-2 cursor-pointer" + style={seeMoreStatus === 5 ? { width: "130px",fontSize:"16px",height:"35px" } : null} + > جزئیات سفارش </div> </div> diff --git a/src/view/my-services/MyRegisters.js b/src/view/my-services/MyRegisters.js index 5eb7b5b..35b130e 100644 --- a/src/view/my-services/MyRegisters.js +++ b/src/view/my-services/MyRegisters.js @@ -37,12 +37,20 @@ let data = [ type: 1, }, ]; -const MyRegisters = () => { +const MyRegisters = ({ seeMoreHandler, seeMoreStatus, deActiveSeeMore }) => { return ( - <div className="MyRegisters w-[53%] h-full rounded-lg border border-[#E0E0E0] px-1 pt-1"> + <div + className="MyRegisters w-[53%] h-full rounded-lg border border-[#E0E0E0] px-1 pt-1" + style={seeMoreStatus===3?{width:"100%"}:null} + > <div className="w-full h-full overflow-y-auto px-4 pt-4"> {/* ----title-------- */} - <Title titleText="پنل هوشمند ثبت‌نام‌های من" /> + <Title + titleText="پنل هوشمند ثبت‌نام‌های من" + seeMoreHandler={() => seeMoreHandler(3)} + seeMoreStatus={seeMoreStatus} + deActiveSeeMore={deActiveSeeMore} + /> {/* ----body-------- */} <div className="w-full mt-4"> {data.map((item, index) => ( @@ -56,23 +64,31 @@ const MyRegisters = () => { <div className="w-full py-1 flex flex-row-reverse items-center justify-between border-t border-[#E0E0E0]"> <div className="w-1/2 text-sm text-right overflow-hidden text-ellipsis whitespace-nowrap" - style={{ fontFamily: "IRANSansXFaNum-Medium" }} + style={{ + fontFamily: "IRANSansXFaNum-Medium", + direction: "rtl", + }} > {item.name} </div> {/* -- */} - <div className="w-[30%] pr-2 text-right text-xs text-[#B1B1B1] border-r border-[#E0E0E0]"> + <div className="w-[60px] pr-2 text-right text-xs text-[#B1B1B1] border-r border-[#E0E0E0]"> {item.date} </div> {/* -- */} - <div className="w-1/4 h-6 rounded flex items-center justify-center bg-[#DF1452] text-xs text-white text-center cursor-pointer"> - {item.type === 1 - ? "شرکت در دوره" - : item.type === 2 - ? "مکان برگزاری" - : item.type === 3 - ? "دریافت قرارداد" - : "شرکت در آزمون"} + <div className="w-1/4" style={seeMoreStatus===3?{width:"20%"}:null}> + <div + className="w-full h-6 rounded flex items-center justify-center border border-[#DF1452] text-xs text-[#DF1452] text-center cursor-pointer" + // style={{ width: "calc(50% - 100px)" }} + > + قرارداد + </div> + <div + className="w-full h-6 rounded flex items-center justify-center bg-[#DF1452] text-xs text-white text-center cursor-pointer mt-1" + // style={{ width: "calc(50% - 100px)" }} + > + {item.type === 1 ? "شرکت در دوره" : "مکان برگزاری"} + </div> </div> </div> </div> diff --git a/src/view/my-services/MyServices.js b/src/view/my-services/MyServices.js index 77a25a1..5981a49 100644 --- a/src/view/my-services/MyServices.js +++ b/src/view/my-services/MyServices.js @@ -3,25 +3,94 @@ import Exams from "./Exams"; import MyCourse from "./MyCourse"; import MyOrders from "./MyOrders"; import MyRegisters from "./MyRegisters"; - +import {useState} from "react"; +import FutureExams from "./FutureExams"; +import ResultExams from "./ResultExams"; +import Calendar2 from "../../components/Calendar2/Calendar2"; const MyServices=()=>{ + const [seeMoreStatus,setSeeMoreStatus]=useState(0); + const seeMoreHandler=(index)=>{ + setSeeMoreStatus(index); + } + const deActiveSeeMore=()=>{ + setSeeMoreStatus(0); + } return ( - <div className="MyServices w-[93.5%] h-[100vh] pt-[4%] pb-2 px-4 flex flex-col justify-between"> + <div className="MyServices w-[93.5%] h-[100vh] pt-16 pb-2 px-4 flex flex-col justify-between relative"> <div className="MyServices-row w-full h-[49%] flex flex-row-reverse justify-between"> - <Exams /> + {seeMoreStatus === 0 ? ( + <Exams + seeMoreHandler={seeMoreHandler} + seeMoreStatus={seeMoreStatus} + /> + ) : ( + <div className="w-[70%] h-full"></div> + )} <div className="w-[28.5%] h-full"> - <SimpleCalendar /> + {/* <SimpleCalendar /> */} + <Calendar2 primaryColor="#DF1452"/> </div> </div> <div className="MyServices-row w-full h-[48%] flex flex-row-reverse justify-between"> - <div className="w-[70%] h-full flex flex-row-reverse justify-between"> - <MyRegisters /> - <MyCourse /> - </div> - <MyOrders /> + {seeMoreStatus === 0 && ( + <div className="w-[70%] h-full flex flex-row-reverse justify-between"> + <MyRegisters + seeMoreHandler={seeMoreHandler} + seeMoreStatus={seeMoreStatus} + /> + <MyCourse + seeMoreHandler={seeMoreHandler} + seeMoreStatus={seeMoreStatus} + /> + </div> + )} + {seeMoreStatus === 0 && ( + <MyOrders + seeMoreHandler={seeMoreHandler} + seeMoreStatus={seeMoreStatus} + /> + )} </div> + {/* ----see-more-------------------- */} + {seeMoreStatus !== 0 && ( + <div + className="see-more-container w-[70%] absolute top-16 right-4 border border-[#E0E0E0] rounded-lg bg-white" + style={{ height: "calc(100% - 72px)", width: "calc(70% - 20px)" }} + > + {seeMoreStatus === 1 && ( + <FutureExams + seeMoreStatus={seeMoreStatus} + deActiveSeeMore={deActiveSeeMore} + /> + )} + {seeMoreStatus === 2 && ( + <ResultExams + seeMoreStatus={seeMoreStatus} + deActiveSeeMore={deActiveSeeMore} + /> + )} + {seeMoreStatus === 3 && ( + <MyRegisters + seeMoreStatus={seeMoreStatus} + deActiveSeeMore={deActiveSeeMore} + /> + )} + {seeMoreStatus === 4 && ( + <MyCourse + seeMoreStatus={seeMoreStatus} + deActiveSeeMore={deActiveSeeMore} + /> + )} + {seeMoreStatus === 5 && ( + <MyOrders + seeMoreStatus={seeMoreStatus} + deActiveSeeMore={deActiveSeeMore} + /> + )} + </div> + )} </div> ); } diff --git a/src/view/my-services/ResultExams.js b/src/view/my-services/ResultExams.js index 3f34c72..d7d03c7 100644 --- a/src/view/my-services/ResultExams.js +++ b/src/view/my-services/ResultExams.js @@ -25,7 +25,7 @@ import Title from "./Title"; }, ]; -const ResultExams = () => { +const ResultExams = ({ seeMoreHandler, seeMoreStatus, deActiveSeeMore }) => { let data = [ { id: 1, @@ -61,12 +61,21 @@ const ResultExams = () => { return ( <div className="ResultExams w-[45%] h-full px-1 pt-1" - style={{ direction: "rtl" }} + style={ + seeMoreStatus === 2 + ? { direction: "rtl", width: "100%" } + : { direction: "rtl" } + } > <div className="w-full h-full px-4 pt-4 overflow-y-auto"> {/* ----title-------- */} <div style={{ direction: "ltr" }}> - <Title titleText="نتایج آزمون‌های من" /> + <Title + titleText="نتایج آزمون‌های من" + seeMoreHandler={() => seeMoreHandler(2)} + deActiveSeeMore={deActiveSeeMore} + seeMoreStatus={seeMoreStatus} + /> </div> {/* ----body-------- */} <div className="w-full mt-4"> @@ -76,25 +85,27 @@ const ResultExams = () => { className="w-full h-14 rounded px-3 flex items-center justify-between mb-2 cursor-pointer" style={{ backgroundColor: `${colorList[index % 5].bg}` }} > - <div - className="w-1 h-9 rounded-lg" - style={{ backgroundColor: `${colorList[index % 5].line}` }} - ></div> - {/* --------- */} - <div className="w-[70%]"> + <div className="w-[70%] flex items-center gap-x-2"> <div - className="w-full text-sm text-right" - style={{ fontFamily: "IRANSansXFaNum-Medium" }} - > - {item?.title} - </div> - <div className="w-full text-xs text-[#B1B1B1] text-right mt-[2px]"> - {item?.date} + className="w-1 h-9 rounded-lg" + style={{ backgroundColor: `${colorList[index % 5].line}` }} + ></div> + {/* --------- */} + <div className="w-auto"> + <div + className="w-full text-sm text-right" + style={{ fontFamily: "IRANSansXFaNum-Medium" }} + > + {item?.title} + </div> + <div className="w-full text-xs text-[#B1B1B1] text-right mt-[2px]"> + {item?.date} + </div> </div> </div> - {/* --------- */} + {/* ------------------ */} <div - className="w-[15%] h-9 text-center border-r text-xs flex items-center" + className="w-[15%] h-9 text-center border-r text-xs flex items-center justify-center" style={{ borderColor: `${colorList[index % 5].line}` }} > {item.status === 1 ? "نتیجه موقت" : "نتیجه نهایی"} diff --git a/src/view/my-services/Title.js b/src/view/my-services/Title.js index 02ff62d..a1274cc 100644 --- a/src/view/my-services/Title.js +++ b/src/view/my-services/Title.js @@ -1,7 +1,12 @@ import { IoIosArrowBack } from "react-icons/io"; -const Title=({titleText})=>{ +const Title = ({ + titleText, + seeMoreHandler, + seeMoreStatus, + deActiveSeeMore, +}) => { return ( <div className="w-full h-10 flex flex-row-reverse items-center justify-between"> <div @@ -10,12 +15,24 @@ const Title=({titleText})=>{ > {titleText} </div> - <div className="flex items-center cursor-pointer"> - <IoIosArrowBack className="text-lg text-[#504F4F] mr-1" /> - <div className="text-[#504F4F]">مشاهده بیشتر</div> - </div> + {seeMoreStatus === 0 && ( + <div className="flex items-center cursor-pointer"> + <IoIosArrowBack className="text-lg text-[#504F4F] mr-1" /> + <div className="text-[#504F4F]" onClick={seeMoreHandler}> + مشاهده بیشتر + </div> + </div> + )} + {seeMoreStatus !== 0 && ( + <div className="flex items-center cursor-pointer"> + <IoIosArrowBack className="text-lg text-[#504F4F] mr-1" /> + <div className="text-[#504F4F]" onClick={deActiveSeeMore}> + بازگشت + </div> + </div> + )} </div> ); -} +}; export default Title; \ No newline at end of file diff --git a/src/view/my-services/index.css b/src/view/my-services/index.css index 7beb28a..c5e93da 100644 --- a/src/view/my-services/index.css +++ b/src/view/my-services/index.css @@ -7,18 +7,50 @@ } } +@media only screen and (max-width: 1446px) { + .factor-sum-price{ + font-size: 11px; + } + .my-order-left{ + width: 41%; + } + .my-order-right{ + width: 56%; + } +} + @media only screen and (max-width: 1409px) { .frontBox { transform: translateY(70%); } } +@media only screen and (max-width: 1367px) { + .order-status{ + font-size: 10px; + } +} + @media only screen and (max-width: 1314px) { .frontBox { transform: translateY(67%); } } +@media only screen and (max-width: 1234px) { + .factor-sum-price { + font-size: 11px; + } + + .my-order-left { + width: 44%; + } + + .my-order-right { + width: 53%; + } +} + @media only screen and (max-width: 1229px) { .frontBox { transform: translateY(63%);