From 7091617c7f5a8b82905f818a3bd46ffb71821bc2 Mon Sep 17 00:00:00 2001 From: Alireza khaji Date: Tue, 3 May 2022 10:57:09 +0430 Subject: [PATCH] myRegisters --- src/App.css | 5 +- src/view/my-services/FutureExams.js | 90 +++++++++++++++-------------- src/view/my-services/MyRegisters.js | 86 +++++++++++++++++++++++++++ src/view/my-services/MyServices.js | 9 ++- src/view/my-services/ResultExams.js | 68 +++++++++++----------- 5 files changed, 177 insertions(+), 81 deletions(-) create mode 100644 src/view/my-services/MyRegisters.js diff --git a/src/App.css b/src/App.css index 1adeda4..300532b 100644 --- a/src/App.css +++ b/src/App.css @@ -19,17 +19,18 @@ input::-webkit-inner-spin-button { ::-webkit-scrollbar { width: 5px; background: #dbdbdb; + border-radius: 20px; } /* Track */ ::-webkit-scrollbar-track { - border-radius: 10px; + border-radius: 20px; } /* Handle */ ::-webkit-scrollbar-thumb { background: #df1452; - border-radius: 10px; + border-radius: 20px; } /* Handle on hover */ diff --git a/src/view/my-services/FutureExams.js b/src/view/my-services/FutureExams.js index c633055..88ffbfd 100644 --- a/src/view/my-services/FutureExams.js +++ b/src/view/my-services/FutureExams.js @@ -74,59 +74,61 @@ const FutureExams = () => { }; return ( -
- {/* ----title-------- */} - - {/* ----body-------- */} - <div className="w-full mt-4 flex flex-row-reverse items-start gap-x-[3.5%] gap-y-4 flex-wrap pb-2"> - {data?.map((item, index) => ( - <div - key={index} - className="w-[31%] aspect-square rounded overflow-hidden relative cursor-pointer" - onMouseEnter={() => hoverHandler(index)} - onMouseLeave={() => hoverHandle2(index)} - > - {/* -----back-img------ */} - <img src={item.img} className="w-full" alt="back-img" /> - {/* -----front-data------ */} + <div className="FutureExams w-[55%] h-full border-l border-[#E0E0E0] px-1 pt-1"> + <div className="w-full h-full overflow-y-auto px-4 pt-4"> + {/* ----title-------- */} + <Title titleText="آزمون‌های پیش‌رو" /> + {/* ----body-------- */} + <div className="w-full mt-4 flex flex-row-reverse items-start gap-x-[3.5%] gap-y-4 flex-wrap pb-2"> + {data?.map((item, index) => ( <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%)", - }} + key={index} + className="w-[31%] aspect-square rounded overflow-hidden relative cursor-pointer" + onMouseEnter={() => hoverHandler(index)} + onMouseLeave={() => hoverHandle2(index)} > - <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" }} - > - {item.title} + {/* -----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%)", + }} + > + <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" }} + > + {item.title} + </div> </div> - </div> - {/* ----------- */} - <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="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 text-white text-right"> + {item.date} + </div> + </div> <div className="text-xs text-white text-right"> - {item.date} + ساعت {item.time} </div> </div> - <div className="text-xs text-white text-right"> - ساعت {item.time} + {/* ----------- */} + <div + className="frontBox-description text-xs text-white text-right pt-1 border-t border-white hidden" + style={{ direction: "rtl" }} + > + {item.description} </div> </div> - {/* ----------- */} - <div - className="frontBox-description text-xs text-white text-right pt-1 border-t border-white hidden" - style={{ direction: "rtl" }} - > - {item.description} - </div> </div> - </div> - ))} + ))} + </div> </div> </div> ); diff --git a/src/view/my-services/MyRegisters.js b/src/view/my-services/MyRegisters.js new file mode 100644 index 0000000..5eb7b5b --- /dev/null +++ b/src/view/my-services/MyRegisters.js @@ -0,0 +1,86 @@ +import Title from "./Title"; + +let data = [ + { + id: 1, + factorId: "ABC12345", + name: "کلاس حضوری فیزیک کوآنتوم", + date: "1401/3/3", + type: 1, + }, + { + id: 2, + factorId: "ABC12345", + name: "کلاس حضوری فیزیک کوآنتوم", + date: "1401/3/3", + type: 2, + }, + { + id: 3, + factorId: "ABC12345", + name: "کلاس حضوری فیزیک کوآنتوم", + date: "1401/3/3", + type: 3, + }, + { + id: 4, + factorId: "ABC12345", + name: "کلاس حضوری فیزیک کوآنتوم", + date: "1401/3/3", + type: 4, + }, + { + id: 5, + factorId: "ABC12345", + name: "کلاس حضوری فیزیک کوآنتوم", + date: "1401/3/3", + type: 1, + }, +]; +const MyRegisters = () => { + return ( + <div className="MyRegisters w-[53%] h-full rounded-lg border border-[#E0E0E0] px-1 pt-1"> + <div className="w-full h-full overflow-y-auto px-4 pt-4"> + {/* ----title-------- */} + <Title titleText="پنل هوشمند ثبت‌نام‌های من" /> + {/* ----body-------- */} + <div className="w-full mt-4"> + {data.map((item, index) => ( + <div key={index} className="w-full border-t border-[#E0E0E0] mb-5"> + <div className="w-full py-1" style={{ direction: "rtl" }}> + <div className="w-fit pl-3 border-l border-[#E0E0E0] text-xs text-right"> + {item.factorId} + </div> + </div> + {/* ------ */} + <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" }} + > + {item.name} + </div> + {/* -- */} + <div className="w-[30%] 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> + </div> + </div> + ))} + </div> + </div> + </div> + ); +}; + +export default MyRegisters; diff --git a/src/view/my-services/MyServices.js b/src/view/my-services/MyServices.js index 6807a6c..bbb3bd8 100644 --- a/src/view/my-services/MyServices.js +++ b/src/view/my-services/MyServices.js @@ -1,14 +1,19 @@ import Exams from "./Exams"; +import MyRegisters from "./MyRegisters"; const MyServices=()=>{ return ( - <div className="MyServices w-[93.5%] h-[100vh] pt-[4%] px-4 flex flex-col justify-between"> + <div className="MyServices w-[93.5%] h-[100vh] pt-[4%] pb-2 px-4 flex flex-col justify-between"> <div className="MyServices-row w-full h-[48%] flex flex-row-reverse justify-between"> <Exams/> </div> - <div className="MyServices-row w-full h-[48%] flex flex-row-reverse justify-between"></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/> + </div> + </div> </div> ); } diff --git a/src/view/my-services/ResultExams.js b/src/view/my-services/ResultExams.js index 4d7f16e..3f34c72 100644 --- a/src/view/my-services/ResultExams.js +++ b/src/view/my-services/ResultExams.js @@ -60,46 +60,48 @@ const ResultExams = () => { ]; return ( <div - className="ResultExams w-[45%] h-full px-4 pt-4 overflow-y-auto" + className="ResultExams w-[45%] h-full px-1 pt-1" style={{ direction: "rtl" }} > - {/* ----title-------- */} - <div style={{ direction: "ltr" }}> - <Title titleText="نتایج آزمون‌های من" /> - </div> - {/* ----body-------- */} - <div className="w-full mt-4"> - {data?.map((item, index) => ( - <div - key={index} - 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-full h-full px-4 pt-4 overflow-y-auto"> + {/* ----title-------- */} + <div style={{ direction: "ltr" }}> + <Title titleText="نتایج آزمون‌های من" /> + </div> + {/* ----body-------- */} + <div className="w-full mt-4"> + {data?.map((item, index) => ( <div - className="w-1 h-9 rounded-lg" - style={{ backgroundColor: `${colorList[index % 5].line}` }} - ></div> - {/* --------- */} - <div className="w-[70%]"> + key={index} + 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-full text-sm text-right" - style={{ fontFamily: "IRANSansXFaNum-Medium" }} - > - {item?.title} + className="w-1 h-9 rounded-lg" + style={{ backgroundColor: `${colorList[index % 5].line}` }} + ></div> + {/* --------- */} + <div className="w-[70%]"> + <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 className="w-full text-xs text-[#B1B1B1] text-right mt-[2px]"> - {item?.date} + {/* --------- */} + <div + className="w-[15%] h-9 text-center border-r text-xs flex items-center" + style={{ borderColor: `${colorList[index % 5].line}` }} + > + {item.status === 1 ? "نتیجه موقت" : "نتیجه نهایی"} </div> </div> - {/* --------- */} - <div - className="w-[15%] h-9 text-center border-r text-xs flex items-center" - style={{ borderColor: `${colorList[index % 5].line}` }} - > - {item.status === 1 ? "نتیجه موقت" : "نتیجه نهایی"} - </div> - </div> - ))} + ))} + </div> </div> </div> );