From 28ccf2c3b57bbc4195b54c6145191334448a7866 Mon Sep 17 00:00:00 2001 From: Alireza khaji Date: Thu, 12 May 2022 19:41:17 +0430 Subject: [PATCH] mobile(ResultExams,FutureExams) --- src/App.css | 10 + src/App.js | 3 +- src/components/Calendar2/Calendar2.js | 67 +++--- src/components/Calendar2/Days.js | 188 ++++++++------- src/components/Calendar2/MobileEventBox.js | 32 +++ src/components/Calendar2/Week.js | 42 +++- src/components/nav/Nav.js | 258 +++++++++------------ src/view/my-services/FutureExams.js | 2 + src/view/my-services/index.css | 45 +++- src/view/my-services/mobile/FutureExams.js | 142 ++++++++++++ src/view/my-services/mobile/MyServices.js | 38 +++ src/view/my-services/mobile/ResultExams.js | 97 ++++++++ 12 files changed, 654 insertions(+), 270 deletions(-) create mode 100644 src/components/Calendar2/MobileEventBox.js create mode 100644 src/view/my-services/mobile/FutureExams.js create mode 100644 src/view/my-services/mobile/MyServices.js create mode 100644 src/view/my-services/mobile/ResultExams.js diff --git a/src/App.css b/src/App.css index 300532b..6dbc72e 100644 --- a/src/App.css +++ b/src/App.css @@ -22,6 +22,16 @@ input::-webkit-inner-spin-button { border-radius: 20px; } +@media only screen and (max-width: 999px) { + ::-webkit-scrollbar { + width: 0px !important; + background: transparent; + } + ::-webkit-scrollbar-thumb { + background: transparent !important; +} +} + /* Track */ ::-webkit-scrollbar-track { border-radius: 20px; diff --git a/src/App.js b/src/App.js index c0a1d56..feba4ed 100644 --- a/src/App.js +++ b/src/App.js @@ -42,6 +42,7 @@ import AddExam from "./view/addExam"; import ChatPage from "./view/chatPage"; import ShoppingCart from "./components/ShoppingCart"; import MyServices from "./view/my-services/MyServices"; +import MobileMyServices from "./view/my-services/mobile/MyServices"; let data = [ { @@ -703,7 +704,7 @@ function App() { path="/myServices" element={ LOGIN ? ( - + window.innerWidth>1000 ? : ) : ( ) diff --git a/src/components/Calendar2/Calendar2.js b/src/components/Calendar2/Calendar2.js index 82d193f..0bdbd18 100644 --- a/src/components/Calendar2/Calendar2.js +++ b/src/components/Calendar2/Calendar2.js @@ -1,6 +1,7 @@ import moment from "jalali-moment"; import { useEffect, useState } from "react"; import Days from "./Days"; +import MobileEventBox from "./MobileEventBox"; import Title from "./Title"; import Week from "./Week"; @@ -147,36 +148,42 @@ const Calendar2 = ({ primaryColor }) => { return (
- {/* ----title---------------- */} - - {/* ----------week---------------- */} - <Week /> - {/* ----------days---------------- */} - <Days - findFirstDayWeekDay={findFirstDayWeekDay} - year={year} - month={month} - currentYear={currentYear} - currentMonth={currentMonth} - currentDay={currentDay} - primaryColor={primaryColor} - eventList={eventList} - activeDay={activeDay} - selectDay={selectDay} - eventBoxRight={eventBoxRight} - eventBoxTop={eventBoxTop} - eventBoxisRight={eventBoxisRight} - showEvent={showEvent} - /> + <div + className="w-full h-full" + // style={window.innerWidth < 1000 ? { height: "80%" } : null} + > + {/* ----title---------------- */} + <Title + primaryColor={primaryColor} + year={year} + month={month} + monthList={monthList} + NextMonth={NextMonth} + previousMonth={previousMonth} + selectDay={selectDay} + setShowEvents={setShowEvents} + /> + {/* ----------week---------------- */} + <Week /> + {/* ----------days---------------- */} + <Days + findFirstDayWeekDay={findFirstDayWeekDay} + year={year} + month={month} + currentYear={currentYear} + currentMonth={currentMonth} + currentDay={currentDay} + primaryColor={primaryColor} + eventList={eventList} + activeDay={activeDay} + selectDay={selectDay} + eventBoxRight={eventBoxRight} + eventBoxTop={eventBoxTop} + eventBoxisRight={eventBoxisRight} + showEvent={showEvent} + /> + </div> + {/* {(showEvent && window.innerWidth<1000)&& <MobileEventBox/>} */} </div> ); }; diff --git a/src/components/Calendar2/Days.js b/src/components/Calendar2/Days.js index 489c98f..896ade6 100644 --- a/src/components/Calendar2/Days.js +++ b/src/components/Calendar2/Days.js @@ -1,5 +1,6 @@ import moment from "jalali-moment"; import React, { useEffect, useState } from "react"; +import MobileEventBox from "./MobileEventBox"; let daysList = [ { @@ -334,95 +335,126 @@ const Days = ({ const selectDayHandler=(index)=>{ setEventData(Daylist[index].events); selectDay(index); + if(window.innerWidth<1000){ + if(!showEvent){ + document.querySelector(".Days-main").style.height = "calc(80%)"; + }else{ + if(activeDay===index) + document.querySelector(".Days-main").style.height = "calc(100%)"; + } + } } return ( <div - className="Days w-full flex flex-row-reverse items-start justify-between flex-wrap gap-y-[2%] relative" + className="Days w-full relative" style={{ height: "calc(100% - 80px)" }} > - {Daylist.map((item, index) => ( - <div - key={index} - className="w-[13%] h-[15%] rounded-lg cursor-pointer flex flex-col items-center justify-center text-sm relative" - style={ - activeDay === index - ? { - backgroundColor: primaryColor, - color: "#fff", - } - : item.isToday - ? { - border: `1px solid ${primaryColor}`, - color: `${primaryColor}`, - } - : index % 7 === 6 - ? { color: "#C94E2A" } - : null - } - onClick={() => selectDayHandler(index)} - > - <div>{item.dayNumber}</div> - <div className="w-[90%] flex items-center justify-center gap-x-1 absolute bottom-1"> - {item?.events?.map((event, Index) => ( - <React.Fragment key={Index}> - {Index < 2 && ( + <div className="Days-main w-full h-full flex flex-row-reverse items-start justify-between flex-wrap gap-y-[2%] transition-all duration-300"> + {Daylist.map((item, index) => ( + <div + key={index} + className="w-[13%] h-[15%] rounded-lg cursor-pointer flex flex-col items-center justify-center text-sm relative" + style={ + activeDay === index + ? { + backgroundColor: primaryColor, + color: "#fff", + } + : item.isToday + ? { + border: `1px solid ${primaryColor}`, + color: `${primaryColor}`, + } + : index % 7 === 6 + ? { color: "#C94E2A" } + : null + } + onClick={() => selectDayHandler(index)} + > + <div + className="text-black text-sm" + style={ + activeDay === index + ? { + color: "#fff", + } + : item.isToday + ? { + color: `${primaryColor}`, + } + : index % 7 === 6 + ? { color: "#C94E2A" } + : null + } + > + {item.dayNumber} + </div> + <div className="w-[90%] flex items-center justify-center gap-x-1 absolute bottom-1"> + {item?.events?.map((event, Index) => ( + <React.Fragment key={Index}> + {Index < 2 && ( + <div + key={Index} + className="w-1 h-1 rounded-full bg-black" + style={ + event?.type + ? { backgroundColor: dotsColor[event.type - 1] } + : { backgroundColor: dotsColor[Index] } + } + ></div> + )} + </React.Fragment> + ))} + </div> + </div> + ))} + {/* ----------events-box---------------- */} + {showEvent && window.innerWidth > 1000 && ( + <div + className="w-2/3 rounded bg-[#343234] absolute top-4 p-2" + style={ + eventBoxisRight + ? { + top: `${eventBoxTop}%`, + right: `calc(${eventBoxRight}% - 1px)`, + } + : { + top: `${eventBoxTop}%`, + left: `calc(${eventBoxRight}% - 1px)`, + } + } + > + <div className="w-full flex items-center justify-between"> + {/* <div className="w-1/3 h-[2px] bg-white rounded-lg"></div> */} + <div className="w-full text-right text text-white">:رویدادها</div> + {/* <div className="w-1/3 h-[2px] bg-white rounded-lg"></div> */} + </div> + <div className="w-full mt-1"> + {eventData?.map((item, index) => ( + <div + key={index} + className="w-full flex flex-row-reverse items-center mb-2" + > <div - key={Index} - className="w-1 h-1 rounded-full bg-black" + className="w-2 h-2 rounded-full bg-white ml-2" style={ - event?.type - ? { backgroundColor: dotsColor[event.type - 1] } - : { backgroundColor: dotsColor[Index] } + item?.type + ? { backgroundColor: dotsColor[item.type-1] } + : { backgroundColor: dotsColor[index % 2] } } ></div> - )} - </React.Fragment> - ))} - </div> - </div> - ))} - {/* ----------events-box---------------- */} - {showEvent && ( - <div - className="w-2/3 rounded bg-[#343234] absolute top-4 p-2" - style={ - eventBoxisRight - ? { - top: `${eventBoxTop}%`, - right: `calc(${eventBoxRight}% - 1px)`, - } - : { - top: `${eventBoxTop}%`, - left: `calc(${eventBoxRight}% - 1px)`, - } - } - > - <div className="w-full flex items-center justify-between"> - {/* <div className="w-1/3 h-[2px] bg-white rounded-lg"></div> */} - <div className="w-full text-right text text-white">:رویدادها</div> - {/* <div className="w-1/3 h-[2px] bg-white rounded-lg"></div> */} - </div> - <div className="w-full mt-1"> - {eventData?.map((item, index) => ( - <div - key={index} - className="w-full flex flex-row-reverse items-center mb-2" - > - <div - className="w-2 h-2 rounded-full bg-white ml-2" - style={ - item?.type - ? { backgroundColor: dotsColor[item.type] } - : { backgroundColor: dotsColor[index%2] } - } - ></div> - <div className="text-sm text-right text-[#999]"> - {item?.title} + <div className="text-sm text-right text-[#999]"> + {item?.title} + </div> </div> - </div> - ))} + ))} + </div> </div> - </div> + )} + </div> + {/* ---------mobile-events-box---------------- */} + {showEvent && window.innerWidth < 1000 && ( + <MobileEventBox eventData={eventData} dotsColor={dotsColor} primaryColor={primaryColor} /> )} </div> ); diff --git a/src/components/Calendar2/MobileEventBox.js b/src/components/Calendar2/MobileEventBox.js new file mode 100644 index 0000000..c8bef02 --- /dev/null +++ b/src/components/Calendar2/MobileEventBox.js @@ -0,0 +1,32 @@ + + +const MobileEventBox = ({ eventData, dotsColor, primaryColor }) => { + return ( + <div className="MobileEventBox w-full h-[19%] p-2 rounded bg-[#343234] mt-[1%] flex flex-row-reverse items-center gap-x-2 overflow-x-auto"> + <div + className="text-base text-right text-white" + style={{ direction: "rtl" }} + > + رویدادها: + </div> + {eventData?.map((item, index) => ( + <div + className="px-2 h-4/5 rounded flex flex-row-reverse items-center gap-x-2" + style={{ backgroundColor: primaryColor }} + > + <div + className="w-2 h-2 rounded" + style={ + item?.type + ? { backgroundColor: dotsColor[item.type-1] } + : { backgroundColor: dotsColor[index % 2] } + } + ></div> + <div className="text-sm text-right text-white">{item.title}</div> + </div> + ))} + </div> + ); +}; + +export default MobileEventBox; \ No newline at end of file diff --git a/src/components/Calendar2/Week.js b/src/components/Calendar2/Week.js index 3429767..1ea81c8 100644 --- a/src/components/Calendar2/Week.js +++ b/src/components/Calendar2/Week.js @@ -1,18 +1,42 @@ let weekList = ["شنبه","یک‌شنبه","دوشنبه","سه‌شنبه","چهارشنبه","پنج‌شنبه","جمعه"] +let weekList2 = [ + "ش", + "1ش", + "2ش", + "3ش", + "4ش", + "5ش", + "ج", +]; 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" - style={index === 6 ? { color: "#C94E2A" } : null} - > - {item} - </div> - ))} + {window.innerWidth >= 1350 && + weekList.map((item, index) => ( + <div + key={index} + className="w-[13%] text-center text-xs text-black" + style={index === 6 ? { color: "#C94E2A" } : null} + > + {item} + </div> + ))} + {window.innerWidth < 1350 && + weekList2.map((item, index) => ( + <div + key={index} + className="w-[13%] text-center text-xs text-black" + style={ + index === 6 + ? { color: "#C94E2A", direction: "rtl" } + : { direction: "rtl" } + } + > + {item} + </div> + ))} </div> ); } diff --git a/src/components/nav/Nav.js b/src/components/nav/Nav.js index 859d9a8..24706aa 100644 --- a/src/components/nav/Nav.js +++ b/src/components/nav/Nav.js @@ -62,78 +62,124 @@ useEffect(() => { } const mobileOptions = [ { - title: 'صفحه اصلی', - icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M9.02 2.84004L3.63 7.04004C2.73 7.74004 2 9.23004 2 10.36V17.77C2 20.09 3.89 21.99 6.21 21.99H17.79C20.11 21.99 22 20.09 22 17.78V10.5C22 9.29004 21.19 7.74004 20.2 7.05004L14.02 2.72004C12.62 1.74004 10.37 1.79004 9.02 2.84004Z" stroke="" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> - <path d="M12 17.99V14.99" stroke="" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> - </svg> - , - link: '/', + title: "صفحه اصلی", + icon: ( + <svg + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M9.02 2.84004L3.63 7.04004C2.73 7.74004 2 9.23004 2 10.36V17.77C2 20.09 3.89 21.99 6.21 21.99H17.79C20.11 21.99 22 20.09 22 17.78V10.5C22 9.29004 21.19 7.74004 20.2 7.05004L14.02 2.72004C12.62 1.74004 10.37 1.79004 9.02 2.84004Z" + stroke="" + strokeWidth="1.5" + strokeLinecap="round" + strokeLinejoin="round" + /> + <path + d="M12 17.99V14.99" + stroke="" + strokeWidth="1.5" + strokeLinecap="round" + strokeLinejoin="round" + /> + </svg> + ), + link: "/myServices", }, { - title: 'فروشگاه', - icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M2 2H3.74001C4.82001 2 5.67 2.93 5.58 4L4.75 13.96C4.61 15.59 5.89999 16.99 7.53999 16.99H18.19C19.63 16.99 20.89 15.81 21 14.38L21.54 6.88C21.66 5.22 20.4 3.87 18.73 3.87H5.82001" stroke="" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" /> - <path d="M16.25 22C16.9404 22 17.5 21.4404 17.5 20.75C17.5 20.0596 16.9404 19.5 16.25 19.5C15.5596 19.5 15 20.0596 15 20.75C15 21.4404 15.5596 22 16.25 22Z" stroke="" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" /> - <path d="M8.25 22C8.94036 22 9.5 21.4404 9.5 20.75C9.5 20.0596 8.94036 19.5 8.25 19.5C7.55964 19.5 7 20.0596 7 20.75C7 21.4404 7.55964 22 8.25 22Z" stroke="" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" /> - <path d="M9 8H21" stroke="inherit" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" /> - </svg>, - link: '/services', + title: "فروشگاه", + icon: ( + <svg + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M2 2H3.74001C4.82001 2 5.67 2.93 5.58 4L4.75 13.96C4.61 15.59 5.89999 16.99 7.53999 16.99H18.19C19.63 16.99 20.89 15.81 21 14.38L21.54 6.88C21.66 5.22 20.4 3.87 18.73 3.87H5.82001" + stroke="" + strokeWidth="1.5" + strokeMiterlimit="10" + strokeLinecap="round" + strokeLinejoin="round" + /> + <path + d="M16.25 22C16.9404 22 17.5 21.4404 17.5 20.75C17.5 20.0596 16.9404 19.5 16.25 19.5C15.5596 19.5 15 20.0596 15 20.75C15 21.4404 15.5596 22 16.25 22Z" + stroke="" + strokeWidth="1.5" + strokeMiterlimit="10" + strokeLinecap="round" + strokeLinejoin="round" + /> + <path + d="M8.25 22C8.94036 22 9.5 21.4404 9.5 20.75C9.5 20.0596 8.94036 19.5 8.25 19.5C7.55964 19.5 7 20.0596 7 20.75C7 21.4404 7.55964 22 8.25 22Z" + stroke="" + strokeWidth="1.5" + strokeMiterlimit="10" + strokeLinecap="round" + strokeLinejoin="round" + /> + <path + d="M9 8H21" + stroke="inherit" + strokeWidth="1.5" + strokeMiterlimit="10" + strokeLinecap="round" + strokeLinejoin="round" + /> + </svg> + ), + link: "/services", }, { - title: 'پشتیبانی', - icon: <svg - id="vuesax_linear_sms" - data-name="vuesax/linear/sms" - xmlns="http://www.w3.org/2000/svg" - width="24" - height="24" - viewBox="0 0 46.091 46.091" - - > - <g id="sms"> - <path - id="Vector" - d="M28.807,32.648H9.6c-5.761,0-9.6-2.881-9.6-9.6V9.6C0,2.881,3.841,0,9.6,0h19.2c5.761,0,9.6,2.881,9.6,9.6V23.046C38.409,29.767,34.568,32.648,28.807,32.648Z" - transform="translate(3.841 6.722)" - fill="none" - stroke="" - strokeLinecap="round" - strokeLinejoin="round" - strokeWidth="3" - /> - <path - id="Vector-2" - data-name="Vector" - d="M19.2,0,13.194,4.8a6.08,6.08,0,0,1-7.2,0L0,0" - transform="translate(13.443 17.284)" - fill="none" - stroke="" - strokeLinecap="round" - strokeLinejoin="round" - strokeWidth="3" - /> - <path - id="Vector-3" - data-name="Vector" - d="M0,0H46.091V46.091H0Z" - fill="none" - opacity="0" - /> - </g> - </svg> - , - link: '/messages', + title: "پشتیبانی", + icon: ( + <svg + id="vuesax_linear_sms" + data-name="vuesax/linear/sms" + xmlns="http://www.w3.org/2000/svg" + width="24" + height="24" + viewBox="0 0 46.091 46.091" + > + <g id="sms"> + <path + id="Vector" + d="M28.807,32.648H9.6c-5.761,0-9.6-2.881-9.6-9.6V9.6C0,2.881,3.841,0,9.6,0h19.2c5.761,0,9.6,2.881,9.6,9.6V23.046C38.409,29.767,34.568,32.648,28.807,32.648Z" + transform="translate(3.841 6.722)" + fill="none" + stroke="" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="3" + /> + <path + id="Vector-2" + data-name="Vector" + d="M19.2,0,13.194,4.8a6.08,6.08,0,0,1-7.2,0L0,0" + transform="translate(13.443 17.284)" + fill="none" + stroke="" + strokeLinecap="round" + strokeLinejoin="round" + strokeWidth="3" + /> + <path + id="Vector-3" + data-name="Vector" + d="M0,0H46.091V46.091H0Z" + fill="none" + opacity="0" + /> + </g> + </svg> + ), + link: "/messages", }, - // { - // title: 'حساب کاربری', - // icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> - // <path d="M12.1601 10.87C12.0601 10.86 11.9401 10.86 11.8301 10.87C9.45006 10.79 7.56006 8.84 7.56006 6.44C7.56006 3.99 9.54006 2 12.0001 2C14.4501 2 16.4401 3.99 16.4401 6.44C16.4301 8.84 14.5401 10.79 12.1601 10.87Z" stroke="" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> - // <path d="M7.15997 14.56C4.73997 16.18 4.73997 18.82 7.15997 20.43C9.90997 22.27 14.42 22.27 17.17 20.43C19.59 18.81 19.59 16.17 17.17 14.56C14.43 12.73 9.91997 12.73 7.15997 14.56Z" stroke="" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> - // </svg> - // , - // link: '/dashboard', - // }, ]; const [navId, setNavId] = useState(initai_navId); @@ -149,8 +195,8 @@ useEffect(() => { return ( location2.pathname.includes('azmoon_list') || location2.pathname.includes('messages') || location2.pathname.includes('shoppingCart') || location2.pathname.includes('register') ? null : - <div className="w-full flex fixed bg-white justify-center z-20 py-4 bottom-0"> - <div className="flex w-11/12 bg-white justify-between rtl border border-red82OP rounded-xl"> + <div className="w-full flex fixed bg-white justify-center z-20 h-20 bottom-0"> + <div className="flex w-11/12 h-full bg-white justify-between rtl border border-red82OP rounded-xl"> { mobileOptions.map( (item, index) => ( @@ -180,84 +226,10 @@ useEffect(() => { </div> <div className="back-item-img w-full h-[12.5%] bg-red52 absolute right-0 z-20 transition-all duration-300" - // style={ - // initai_navId === 2 - // ? { top: `${(3 / 12) * 100}%` } - // : initai_navId === 5 - // ? { top: `${(6 / 12) * 100}%` } - // : - // null - // } ></div> {/* ------------ */} <div className="nav-menu-container w-full h-3/4 flex-col items-center absolute z-30 right-0"> - {/* <Link - to="/" - className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer" - onClick={() => chaneNav(1)} - > - <div className="w-full flex items-center justify-center" style={{width: '7vw'}}> - <svg - id="vuesax_bold_element-4" - data-name="vuesax/bold/element-4" - xmlns="http://www.w3.org/2000/svg" - width="46.091" - height="46.091" - viewBox="0 0 46.091 46.091" - className="nav-menu-container-item-img w-2/6" - > - <g id="element-4"> - <path - id="Vector" - d="M16.324,17.092V4.033C16.324,1.152,15.095,0,12.041,0H4.283C1.229,0,0,1.152,0,4.033V17.092c0,2.881,1.229,4.033,4.283,4.033h7.759C15.095,21.125,16.324,19.973,16.324,17.092Z" - transform="translate(24.966 3.841)" - fill={navId === 1 ? "#fff" : "transparent"} - stroke={navId === 1 ? "none" : "#A5A8AB"} - /> - <path - id="Vector-2" - data-name="Vector" - d="M16.324,4.033V17.092c0,2.881-1.229,4.033-4.283,4.033H4.283C1.229,21.125,0,19.973,0,17.092V4.033C0,1.152,1.229,0,4.283,0h7.759C15.095,0,16.324,1.152,16.324,4.033Z" - transform="translate(4.801 21.125)" - fill={navId === 1 ? "#fff" : "transparent"} - stroke={navId === 1 ? "none" : "#A5A8AB"} - /> - <path - id="Vector-3" - data-name="Vector" - d="M0,0H46.091V46.091H0Z" - transform="translate(46.091 46.091) rotate(180)" - fill="none" - opacity="0" - /> - <path - id="Vector-4" - data-name="Vector" - d="M16.324,9.41V4.033C16.324,1.152,15.095,0,12.041,0H4.283C1.229,0,0,1.152,0,4.033V9.41c0,2.881,1.229,4.033,4.283,4.033h7.759C15.095,13.443,16.324,12.291,16.324,9.41Z" - transform="translate(24.966 28.807)" - fill={navId === 1 ? "#fff" : "transparent"} - stroke={navId === 1 ? "none" : "#A5A8AB"} - /> - <path - id="Vector-5" - data-name="Vector" - d="M16.324,9.41V4.033C16.324,1.152,15.095,0,12.041,0H4.283C1.229,0,0,1.152,0,4.033V9.41c0,2.881,1.229,4.033,4.283,4.033h7.759C15.095,13.443,16.324,12.291,16.324,9.41Z" - transform="translate(4.801 3.841)" - fill={navId === 1 ? "#fff" : "transparent"} - stroke={navId === 1 ? "none" : "#A5A8AB"} - /> - </g> - </svg> - </div> - <div - className="nav-menu-container-item-title px-2" - style={1 === navId ? { color: "#fff", fontSize: '0.7vw' } : { color: "#A5A8AB", fontSize: '0.7vw' }} - > - پیشخوان - </div> - </Link> */} - {/* ---------- */} <Link to="/services" className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer" diff --git a/src/view/my-services/FutureExams.js b/src/view/my-services/FutureExams.js index 1f7f438..eb8daf1 100644 --- a/src/view/my-services/FutureExams.js +++ b/src/view/my-services/FutureExams.js @@ -4,6 +4,8 @@ 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 = ({ seeMoreHandler, seeMoreStatus, deActiveSeeMore }) => { let data = [ { diff --git a/src/view/my-services/index.css b/src/view/my-services/index.css index c5e93da..66e825a 100644 --- a/src/view/my-services/index.css +++ b/src/view/my-services/index.css @@ -1,20 +1,17 @@ - - - @media only screen and (max-width: 1489px) { - .frontBox{ + .frontBox { transform: translateY(57%); } } @media only screen and (max-width: 1446px) { - .factor-sum-price{ + .factor-sum-price { font-size: 11px; } - .my-order-left{ + .my-order-left { width: 41%; } - .my-order-right{ + .my-order-right { width: 56%; } } @@ -26,7 +23,7 @@ } @media only screen and (max-width: 1367px) { - .order-status{ + .order-status { font-size: 10px; } } @@ -55,4 +52,34 @@ .frontBox { transform: translateY(63%); } -} \ No newline at end of file +} + +/* mobile---------- */ +@media only screen and (max-width: 1000px) { + .FutureExams-m-body::-webkit-scrollbar { + width: 0px !important; + background: transparent; + } + .FutureExams-m-body::-webkit-scrollbar-thumb { + background: transparent !important; + border-radius: 20px; + } +} + +@media only screen and (max-width: 372px) { + .FutureExams-m-item-box{ + width: 50% !important; + } + .frontBox-m{ + transform: translateY(61%); + } +} + +@media only screen and (max-width: 340px) { + .FutureExams-m-item-box{ + width: 55% !important; + } + .frontBox-m{ + transform: translateY(61%); + } +} diff --git a/src/view/my-services/mobile/FutureExams.js b/src/view/my-services/mobile/FutureExams.js new file mode 100644 index 0000000..83595c7 --- /dev/null +++ b/src/view/my-services/mobile/FutureExams.js @@ -0,0 +1,142 @@ +import Title from "../Title"; +import img1 from "../../../assets/img/bia-andrade-PO8Woh4YBD8-unsplash.jpg"; +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 "../index.css"; +let data = [ + { + id: 1, + img: img1, + title: "آزمون فلسفه مدرن", + date: "1400/3/3", + time: "21:00", + description: + "متنی طولانی که برای تست قرار داده میشود و دلیل دیگری برای وجود ان نیست", + }, + { + id: 2, + img: img2, + title: "آزمون فلسفه مدرن فراشناختی اجتماعی", + date: "1400/3/3", + time: "21:00", + description: + "متنی طولانی که برای تست قرار داده میشود و دلیل دیگری برای وجود ان نیست", + }, + { + id: 3, + img: img1, + title: "آزمون فلسفه مدرن", + date: "1400/3/3", + time: "21:00", + description: + "متنی طولانی که برای تست قرار داده میشود و دلیل دیگری برای وجود ان نیست", + }, + { + id: 4, + img: img2, + title: "آزمون فلسفه مدرن", + date: "1400/3/3", + time: "21:00", + description: + "متنی طولانی که برای تست قرار داده میشود و دلیل دیگری برای وجود ان نیست", + }, + { + id: 5, + img: img1, + title: "آزمون فلسفه مدرن", + date: "1400/3/3", + time: "21:00", + description: + "متنی طولانی که برای تست قرار داده میشود و دلیل دیگری برای وجود ان نیست", + }, +]; +const FutureExams = ({ seeMoreStatus, seeMoreHandler }) => { + return ( + <div className="FutureExams w-full h-full"> + {/* ----title----------- */} + <Title + titleText="آزمون‌های پیش‌رو" + seeMoreStatus={seeMoreStatus} + seeMoreHandler={seeMoreHandler} + /> + {/* ----body----------- */} + <div + className="FutureExams-m-body w-full mt-2 flex items-center gap-x-2 flex-row-reverse overflow-x-auto" + // style={{ height: "calc(100% - 48px)" }} + > + {data.map((item, index) => ( + <div + key={index} + className="FutureExams-m-item-box w-[45%] aspect-square rounded bg-black relative overflow-hidden shrink-0" + > + {/* -----back-img------ */} + <img src={item.img} className="w-full" alt="back-img" /> + {/* -----front-data------ */} + <div + className="frontBox-m w-full h-full absolute top-0 left-0 p-3 translate-y-[59%] 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> + </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="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" + style={seeMoreStatus === 1 ? { fontSize: "14px" } : null} + > + ساعت {item.time} + </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> + ); +}; + +export default FutureExams; diff --git a/src/view/my-services/mobile/MyServices.js b/src/view/my-services/mobile/MyServices.js new file mode 100644 index 0000000..3210794 --- /dev/null +++ b/src/view/my-services/mobile/MyServices.js @@ -0,0 +1,38 @@ +import { useState } from "react"; +import Calendar2 from "../../../components/Calendar2/Calendar2"; +import FutureExams from "./FutureExams"; +import ResultExams from "./ResultExams"; + + + +const MyServices=()=>{ + const [seeMoreStatus, setSeeMoreStatus] = useState(0); + const seeMoreHandler = (index) => { + setSeeMoreStatus(index); + }; + const deActiveSeeMore = () => { + setSeeMoreStatus(0); + }; + return ( + <div + className="M_MyServices w-full overflow-y-auto bg-white text-white pt-16 px-2" + style={{ height: "calc(100vh - 80px)", maxHeight: "calc(100vh - 80px)" }} + > + <div className="w-full h-[50vh]"> + <Calendar2 primaryColor="#DF1452" /> + </div> + <div className="w-full border my-4 rounded-lg p-2"> + <FutureExams + seeMoreStatus={seeMoreStatus} + seeMoreHandler={seeMoreHandler} + /> + </div> + <ResultExams + seeMoreStatus={seeMoreStatus} + seeMoreHandler={seeMoreHandler} + /> + </div> + ); +} + +export default MyServices; \ No newline at end of file diff --git a/src/view/my-services/mobile/ResultExams.js b/src/view/my-services/mobile/ResultExams.js new file mode 100644 index 0000000..f30398e --- /dev/null +++ b/src/view/my-services/mobile/ResultExams.js @@ -0,0 +1,97 @@ +import Title from "../Title"; + + + +//colorList------------------ + let colorList = [ + { + bg: "rgba(228,126,48,0.1)", + line: "#E47E30", + }, + { + bg: "rgba(230,212,51,0.1)", + line: "#E6D433", + }, + { + bg: "rgba(31,96,18,0.1)", + line: "#1F6012", + }, + { + bg: "rgba(35,227,175,0.1)", + line: "#23E3AF", + }, + { + bg: "rgba(35,86,227,0.1)", + line: "#2356E3", + }, + ]; + +let data = [ + { + id: 1, + title: "آزمون شیمی عالی", + date: "1400/3/3", + status: 1, + }, + { + id: 2, + title: "آزمون شیمی عالی پیشرفته", + date: "1400/3/3", + status: 2, + }, + { + id: 3, + title: "آزمون شیمی عالی", + date: "1400/3/3", + status: 1, + }, + { + id: 4, + title: "آزمون شیمی عالی", + date: "1400/3/3", + status: 2, + }, + { + id: 5, + title: "آزمون شیمی عالی", + date: "1400/3/3", + status: 1, + }, +]; +const ResultExams = ({ seeMoreStatus, seeMoreHandler }) => { + return ( + <div className="ResultExams w-full py-2 px-2 border rounded-lg mb-4"> + {/* ---title-------- */} + <Title + titleText="نتایج آزمون‌ها" + seeMoreStatus={seeMoreStatus} + seeMoreHandler={seeMoreHandler} + /> + {/* ---body-------- */} + <div className="w-full mt-1 flex flex-row-reverse items-center gap-x-2 overflow-x-auto"> + {data?.map((item, index) => ( + <div + className="w-[35%] aspect-[1/1.1] rounded shrink-0 p-2 flex flex-col items-center justify-center" + style={{ backgroundColor: colorList[index % 5].bg }} + > + <div className="w-full text-sm text-center text-black overflow-hidden text-ellipsis whitespace-nowrap" style={{direction:"rtl"}}> + {item.title} + </div> + <div className="text-xs text-center mt-1 text-black"> + {item.date} + </div> + <div + className="w-full h-[2px] mt-3 rounded-lg" + style={{ backgroundColor: colorList[index % 5].line }} + ></div> + <div className="text-xs text-center text-black mt-1"> + {item.status === 1 ? "نتیجه موقت" : "نتیجه نهایی"} + </div> + </div> + ))} + </div> + </div> + ); +}; + +export default ResultExams; \ No newline at end of file