pedram
/
Andishmand
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

seeMoreContainers

Browse Source
main
alireza khaji 3 years ago
parent 17a72d870d
commit 9a75a9a6cc
13 changed files with 405 additions and 107 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/components/Calendar/CalendarComponents/Calendar.js
  2. 17
      src/components/Calendar2/Calendar2.js
  3. 21
      src/components/Calendar2/Title.js
  4. 14
      src/components/Calendar2/Week.js
  5. 12
      src/view/my-services/Exams.js
  6. 86
      src/view/my-services/FutureExams.js
  7. 72
      src/view/my-services/MyCourse.js
  8. 45
      src/view/my-services/MyOrders.js
  9. 42
      src/view/my-services/MyRegisters.js
  10. 87
      src/view/my-services/MyServices.js
  11. 47
      src/view/my-services/ResultExams.js
  12. 29
      src/view/my-services/Title.js
  13. 32
      src/view/my-services/index.css

2
src/components/Calendar/CalendarComponents/Calendar.js
Unescape View File

@ -309,7 +309,7 @@ let active_list;
type={type} type={type}
/> />
<div className="Calendar__footer"> <div className="Calendar__footer">
{ eventInFooter !== null && eventInFooter !== undefined && { (eventInFooter !== null && eventInFooter !== undefined) &&
<div className={`footer__Events ${type}`}> <div className={`footer__Events ${type}`}>
{ {
type == 'dashboard' ? <><div className='text-lg text-red52'>رویدادها: </div><p className='text-red26 text-sm '>{eventInFooter ? eventInFooter : 'رویدادی در این روز وجود ندارد!'}</p></> : eventInFooter type == 'dashboard' ? <><div className='text-lg text-red52'>رویدادها: </div><p className='text-red26 text-sm '>{eventInFooter ? eventInFooter : 'رویدادی در این روز وجود ندارد!'}</p></> : eventInFooter

17
src/components/Calendar2/Calendar2.js
Unescape View File

@ -0,0 +1,17 @@
import Title from "./Title";
import Week from "./Week";
const Calendar2 = ({ primaryColor }) => {
return (
<div className="Calendar2 w-full h-full rounded-lg border border-[#E0E0E0] py-1 px-2">
{/* ----title---------------- */}
<Title primaryColor={primaryColor} />
{/* ----------week---------------- */}
<Week/>
</div>
);
};
export default Calendar2;

21
src/components/Calendar2/Title.js
Unescape View File

@ -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;

14
src/components/Calendar2/Week.js
Unescape View File

@ -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;

12
src/view/my-services/Exams.js
Unescape View File

@ -4,11 +4,17 @@ import FutureExams from "./FutureExams";
import ResultExams from "./ResultExams"; import ResultExams from "./ResultExams";
const Exams = () => { const Exams = ({ seeMoreHandler, seeMoreStatus }) => {
return ( return (
<div className="Exams w-[70%] h-full flex flex-row-reverse rounded-lg border border-[#E0E0E0]"> <div className="Exams w-[70%] h-full flex flex-row-reverse rounded-lg border border-[#E0E0E0]">
<FutureExams /> <FutureExams
<ResultExams /> seeMoreHandler={seeMoreHandler}
seeMoreStatus={seeMoreStatus}
/>
<ResultExams
seeMoreHandler={seeMoreHandler}
seeMoreStatus={seeMoreStatus}
/>
</div> </div>
); );
}; };

86
src/view/my-services/FutureExams.js
Unescape View File

@ -3,8 +3,8 @@ import img2 from "../../assets/img/usgs-hoS3dzgpHzw-unsplash.jpg";
import stickynote from "../../assets/img/stickynote.svg"; import stickynote from "../../assets/img/stickynote.svg";
import clockIcon from "../../assets/img/vuesax-linear-clock.svg"; import clockIcon from "../../assets/img/vuesax-linear-clock.svg";
import Title from "./Title"; import Title from "./Title";
import './index.css' import "./index.css";
const FutureExams = () => { const FutureExams = ({ seeMoreHandler, seeMoreStatus, deActiveSeeMore }) => {
let data = [ let data = [
{ {
id: 1, id: 1,
@ -54,28 +54,32 @@ const FutureExams = () => {
]; ];
//hoverHandler-------------- //hoverHandler--------------
const hoverHandler=(index)=>{ const hoverHandler = (index) => {
let frontBox = document.querySelectorAll(".frontBox"); let frontBox = document.querySelectorAll(".frontBox");
let description = document.querySelectorAll(".frontBox-description"); 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)"; 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) // rgba(223,20,82,0.7)
} };
const hoverHandle2 = (index) => { const hoverHandle2 = (index) => {
let frontBox = document.querySelectorAll(".frontBox"); let frontBox = document.querySelectorAll(".frontBox");
let description = document.querySelectorAll(".frontBox-description"); let description = document.querySelectorAll(".frontBox-description");
if(window.innerWidth>=1490){ if (seeMoreStatus !== 1) {
frontBox[index].style.transform = "translateY(60%)"; if (window.innerWidth >= 1490) {
}else if (window.innerWidth >= 1410) { frontBox[index].style.transform = "translateY(60%)";
frontBox[index].style.transform = "translateY(57%)"; } else if (window.innerWidth >= 1410) {
}else if (window.innerWidth >= 1315) { frontBox[index].style.transform = "translateY(57%)";
frontBox[index].style.transform = "translateY(70%)"; } else if (window.innerWidth >= 1315) {
}else if (window.innerWidth >= 1230) { frontBox[index].style.transform = "translateY(70%)";
frontBox[index].style.transform = "translateY(67%)"; } else if (window.innerWidth >= 1230) {
}else{ frontBox[index].style.transform = "translateY(67%)";
frontBox[index].style.transform = "translateY(63%)"; } else {
frontBox[index].style.transform = "translateY(63%)";
}
} else {
frontBox[index].style.transform = "translateY(72%)";
} }
frontBox[index].style.background = frontBox[index].style.background =
"linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)"; "linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)";
@ -84,34 +88,58 @@ const FutureExams = () => {
}; };
return ( 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"> <div className="w-full h-full overflow-y-auto px-4 pt-4">
{/* ----title-------- */} {/* ----title-------- */}
<Title titleText="آزمون‌های پیش‌رو" /> <Title
titleText="آزمون‌های پیش‌رو"
seeMoreHandler={() => seeMoreHandler(1)}
seeMoreStatus={seeMoreStatus}
deActiveSeeMore={deActiveSeeMore}
/>
{/* ----body-------- */} {/* ----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) => ( {data?.map((item, index) => (
<div <div
key={index} key={index}
className="w-[47.5%] res1:w-[31%] aspect-square rounded overflow-hidden relative cursor-pointer" className="w-[47.5%] res1:w-[31%] aspect-square rounded overflow-hidden relative cursor-pointer"
onMouseEnter={() => hoverHandler(index)} onMouseEnter={() => hoverHandler(index)}
onMouseLeave={() => hoverHandle2(index)} onMouseLeave={() => hoverHandle2(index)}
style={seeMoreStatus === 1 ? { width: "31%" } : null}
> >
{/* -----back-img------ */} {/* -----back-img------ */}
<img src={item.img} className="w-full" alt="back-img" /> <img src={item.img} className="w-full" alt="back-img" />
{/* -----front-data------ */} {/* -----front-data------ */}
<div <div
className="frontBox w-full h-full absolute top-0 left-0 p-3 translate-y-[60%] transition-all duration-300" className="frontBox w-full h-full absolute top-0 left-0 p-3 translate-y-[60%] transition-all duration-300"
style={{ style={
background: seeMoreStatus === 1
"linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)", ? {
}} 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"> <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" /> <img src={stickynote} alt="stickynote" className="h-5 ml-1" />
<div <div
className="text-xs text-white text-right overflow-hidden text-ellipsis whitespace-nowrap" 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} {item.title}
</div> </div>
@ -120,11 +148,17 @@ const FutureExams = () => {
<div className="w-full flex flex-row-reverse items-center justify-between py-1"> <div className="w-full flex flex-row-reverse items-center justify-between py-1">
<div className="flex flex-row-reverse items-center"> <div className="flex flex-row-reverse items-center">
<img src={clockIcon} alt="clockIcon" className="ml-1 h-4" /> <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} {item.date}
</div> </div>
</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} ساعت {item.time}
</div> </div>
</div> </div>

72
src/view/my-services/MyCourse.js
Unescape View File

@ -39,16 +39,27 @@ let data = [
teacher: "فرانت‌کار عجیب", teacher: "فرانت‌کار عجیب",
}, },
]; ];
const MyCourse=()=>{ const MyCourse = ({ seeMoreHandler, seeMoreStatus, deActiveSeeMore }) => {
return ( 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"> <div className="w-full h-full overflow-y-auto px-4 pt-4">
{/* ----title-------- */} {/* ----title-------- */}
<Title titleText="دوره‌های من" /> <Title
titleText="دوره‌های من"
seeMoreHandler={() => seeMoreHandler(4)}
seeMoreStatus={seeMoreStatus}
deActiveSeeMore={deActiveSeeMore}
/>
{/* ----body-------- */} {/* ----body-------- */}
<div className="w-full mt-4"> <div className="w-full mt-4">
{data?.map((item, index) => ( {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"> <div className="w-[37%] aspect-[1/0.7] rounded overflow-hidden flex items-center justify-center">
<img <img
src={item.img} src={item.img}
@ -57,33 +68,58 @@ const MyCourse=()=>{
/> />
</div> </div>
{/* ---- */} {/* ---- */}
<div className="w-[61%]"> <div className="w-[61%] pt-1">
<div className="text-xs text-right text-[#B1B1B1]"> <div
className="text-xs text-right text-[#B1B1B1]"
style={seeMoreStatus === 4 ? { fontSize: "14px" } : null}
>
{item?.date} {item?.date}
</div> </div>
<div <div
className="text-sm text-right mt-1" className="text-sm text-right mt-1"
style={{ style={
fontFamily: "IRANSansXFaNum-Medium", seeMoreStatus === 4
direction: "rtl", ? {
}} fontFamily: "IRANSansXFaNum-Medium",
direction: "rtl",
fontSize: "20px",
}
: {
fontFamily: "IRANSansXFaNum-Medium",
direction: "rtl",
}
}
> >
{item.name} {item.name}
</div> </div>
<div <div
className="text-xs text-right text-[#B1B1B1] mt-1 overflow-hidden text-ellipsis" className="text-xs text-right text-[#B1B1B1] mt-1 overflow-hidden text-ellipsis"
style={{ style={
WebkitLineClamp: "2", seeMoreStatus === 4
WebkitBoxOrient: "vertical", ? {
display: "-webkit-box", WebkitLineClamp: "2",
direction:"rtl" WebkitBoxOrient: "vertical",
}} display: "-webkit-box",
direction: "rtl",
fontSize: "16px",
}
: {
WebkitLineClamp: "2",
WebkitBoxOrient: "vertical",
display: "-webkit-box",
direction: "rtl",
}
}
> >
{item.description} {item.description}
</div> </div>
<div <div
className="text-left text-xs w-full mt-1" className="text-left text-xs w-full mt-1"
style={{ direction: "ltr" }} style={
seeMoreStatus === 4
? { direction: "ltr",fontSize:"14px"}
: { direction: "ltr" }
}
> >
استاد:{item?.teacher} استاد:{item?.teacher}
</div> </div>
@ -94,6 +130,6 @@ const MyCourse=()=>{
</div> </div>
</div> </div>
); );
} };
export default MyCourse; export default MyCourse;

45
src/view/my-services/MyOrders.js
Unescape View File

@ -71,29 +71,43 @@ let data = [
}, },
]; ];
let statusColor = ["#F7EA46", "#57F746", "#FE1E1E"]; let statusColor = ["#F7EA46", "#57F746", "#FE1E1E"];
const MyOrders = () => { const MyOrders = ({ seeMoreHandler, seeMoreStatus, deActiveSeeMore }) => {
return ( 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"> <div className="w-full h-full overflow-y-auto px-4 pt-4">
{/* ----title-------- */} {/* ----title-------- */}
<Title titleText="سفارش‌های من" /> <Title
titleText="سفارش‌های من"
seeMoreHandler={() => seeMoreHandler(5)}
seeMoreStatus={seeMoreStatus}
deActiveSeeMore={deActiveSeeMore}
/>
{/* ----body-------- */} {/* ----body-------- */}
<div className="w-full mt-4"> <div className="w-full mt-4">
{data.map((item, index) => ( {data.map((item, index) => (
<div key={index} className="w-full mb-5"> <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-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} {item.factorId}
</div> </div>
<div className="w-[22%] text-right text-xs">{item.date}</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 <div
className="w-4 h-4 rounded-full bg-black" className="w-4 h-4 rounded-full bg-black"
style={{ style={{
backgroundColor: `${statusColor[item.status - 1]}`, backgroundColor: `${statusColor[item.status - 1]}`,
}} }}
></div> ></div>
<div className="text-xs text-left mr-1"> <div className="order-status text-xs text-right mr-1">
{item.status === 1 {item.status === 1
? "در حال پردازش" ? "در حال پردازش"
: item.status === 2 : item.status === 2
@ -104,19 +118,30 @@ const MyOrders = () => {
</div> </div>
{/* ---------- */} {/* ---------- */}
<div className="w-full flex flex-row-reverse justify-between pt-1"> <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) => ( {item.products.map((ITEM, INDEX) => (
<div <div
key={INDEX} key={INDEX}
className="w-10 h-16 rounded bg-[#E0E0E0] overflow-hidden flex items-center justfy-center cursor-pointer" 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> </div>
<div className="w-[37%]"> <div className="my-order-left w-[37%]">
<div className="w-full text-left text-xs"> <div
className="factor-sum-price w-full text-left text-xs"
style={seeMoreStatus === 5 ? { fontSize: "16px" } : null}
>
جمع فاکتور {item.sumPrice} تومان جمع فاکتور {item.sumPrice} تومان
</div> </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>
</div> </div>

42
src/view/my-services/MyRegisters.js
Unescape View File

@ -37,12 +37,20 @@ let data = [
type: 1, type: 1,
}, },
]; ];
const MyRegisters = () => { const MyRegisters = ({ seeMoreHandler, seeMoreStatus, deActiveSeeMore }) => {
return ( 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"> <div className="w-full h-full overflow-y-auto px-4 pt-4">
{/* ----title-------- */} {/* ----title-------- */}
<Title titleText="پنل هوشمند ثبت‌نام‌های من" /> <Title
titleText="پنل هوشمند ثبت‌نام‌های من"
seeMoreHandler={() => seeMoreHandler(3)}
seeMoreStatus={seeMoreStatus}
deActiveSeeMore={deActiveSeeMore}
/>
{/* ----body-------- */} {/* ----body-------- */}
<div className="w-full mt-4"> <div className="w-full mt-4">
{data.map((item, index) => ( {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-full py-1 flex flex-row-reverse items-center justify-between border-t border-[#E0E0E0]">
<div <div
className="w-1/2 text-sm text-right overflow-hidden text-ellipsis whitespace-nowrap" 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} {item.name}
</div> </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} {item.date}
</div> </div>
{/* -- */} {/* -- */}
<div className="w-1/4 h-6 rounded flex items-center justify-center bg-[#DF1452] text-xs text-white text-center cursor-pointer"> <div className="w-1/4" style={seeMoreStatus===3?{width:"20%"}:null}>
{item.type === 1 <div
? "شرکت در دوره" className="w-full h-6 rounded flex items-center justify-center border border-[#DF1452] text-xs text-[#DF1452] text-center cursor-pointer"
: item.type === 2 // style={{ width: "calc(50% - 100px)" }}
? "مکان برگزاری" >
: item.type === 3 قرارداد
? "دریافت قرارداد" </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> </div>
</div> </div>

87
src/view/my-services/MyServices.js
Unescape View File

@ -3,25 +3,94 @@ import Exams from "./Exams";
import MyCourse from "./MyCourse"; import MyCourse from "./MyCourse";
import MyOrders from "./MyOrders"; import MyOrders from "./MyOrders";
import MyRegisters from "./MyRegisters"; 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 MyServices=()=>{
const [seeMoreStatus,setSeeMoreStatus]=useState(0);
const seeMoreHandler=(index)=>{
setSeeMoreStatus(index);
}
const deActiveSeeMore=()=>{
setSeeMoreStatus(0);
}
return ( 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"> <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"> <div className="w-[28.5%] h-full">
<SimpleCalendar /> {/* <SimpleCalendar /> */}
<Calendar2 primaryColor="#DF1452"/>
</div> </div>
</div> </div>
<div className="MyServices-row w-full h-[48%] flex flex-row-reverse justify-between"> <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"> {seeMoreStatus === 0 && (
<MyRegisters /> <div className="w-[70%] h-full flex flex-row-reverse justify-between">
<MyCourse /> <MyRegisters
</div> seeMoreHandler={seeMoreHandler}
<MyOrders /> seeMoreStatus={seeMoreStatus}
/>
<MyCourse
seeMoreHandler={seeMoreHandler}
seeMoreStatus={seeMoreStatus}
/>
</div>
)}
{seeMoreStatus === 0 && (
<MyOrders
seeMoreHandler={seeMoreHandler}
seeMoreStatus={seeMoreStatus}
/>
)}
</div> </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> </div>
); );
} }

47
src/view/my-services/ResultExams.js
Unescape View File

@ -25,7 +25,7 @@ import Title from "./Title";
}, },
]; ];
const ResultExams = () => { const ResultExams = ({ seeMoreHandler, seeMoreStatus, deActiveSeeMore }) => {
let data = [ let data = [
{ {
id: 1, id: 1,
@ -61,12 +61,21 @@ const ResultExams = () => {
return ( return (
<div <div
className="ResultExams w-[45%] h-full px-1 pt-1" 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"> <div className="w-full h-full px-4 pt-4 overflow-y-auto">
{/* ----title-------- */} {/* ----title-------- */}
<div style={{ direction: "ltr" }}> <div style={{ direction: "ltr" }}>
<Title titleText="نتایج آزمون‌های من" /> <Title
titleText="نتایج آزمون‌های من"
seeMoreHandler={() => seeMoreHandler(2)}
deActiveSeeMore={deActiveSeeMore}
seeMoreStatus={seeMoreStatus}
/>
</div> </div>
{/* ----body-------- */} {/* ----body-------- */}
<div className="w-full mt-4"> <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" className="w-full h-14 rounded px-3 flex items-center justify-between mb-2 cursor-pointer"
style={{ backgroundColor: `${colorList[index % 5].bg}` }} style={{ backgroundColor: `${colorList[index % 5].bg}` }}
> >
<div <div className="w-[70%] flex items-center gap-x-2">
className="w-1 h-9 rounded-lg"
style={{ backgroundColor: `${colorList[index % 5].line}` }}
></div>
{/* --------- */}
<div className="w-[70%]">
<div <div
className="w-full text-sm text-right" className="w-1 h-9 rounded-lg"
style={{ fontFamily: "IRANSansXFaNum-Medium" }} style={{ backgroundColor: `${colorList[index % 5].line}` }}
> ></div>
{item?.title} {/* --------- */}
</div> <div className="w-auto">
<div className="w-full text-xs text-[#B1B1B1] text-right mt-[2px]"> <div
{item?.date} 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> </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}` }} style={{ borderColor: `${colorList[index % 5].line}` }}
> >
{item.status === 1 ? "نتیجه موقت" : "نتیجه نهایی"} {item.status === 1 ? "نتیجه موقت" : "نتیجه نهایی"}

29
src/view/my-services/Title.js
Unescape View File

@ -1,7 +1,12 @@
import { IoIosArrowBack } from "react-icons/io"; import { IoIosArrowBack } from "react-icons/io";
const Title=({titleText})=>{ const Title = ({
titleText,
seeMoreHandler,
seeMoreStatus,
deActiveSeeMore,
}) => {
return ( return (
<div className="w-full h-10 flex flex-row-reverse items-center justify-between"> <div className="w-full h-10 flex flex-row-reverse items-center justify-between">
<div <div
@ -10,12 +15,24 @@ const Title=({titleText})=>{
> >
{titleText} {titleText}
</div> </div>
<div className="flex items-center cursor-pointer"> {seeMoreStatus === 0 && (
<IoIosArrowBack className="text-lg text-[#504F4F] mr-1" /> <div className="flex items-center cursor-pointer">
<div className="text-[#504F4F]">مشاهده بیشتر</div> <IoIosArrowBack className="text-lg text-[#504F4F] mr-1" />
</div> <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> </div>
); );
} };
export default Title; export default Title;

32
src/view/my-services/index.css
Unescape View File

@ -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) { @media only screen and (max-width: 1409px) {
.frontBox { .frontBox {
transform: translateY(70%); transform: translateY(70%);
} }
} }
@media only screen and (max-width: 1367px) {
.order-status{
font-size: 10px;
}
}
@media only screen and (max-width: 1314px) { @media only screen and (max-width: 1314px) {
.frontBox { .frontBox {
transform: translateY(67%); 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) { @media only screen and (max-width: 1229px) {
.frontBox { .frontBox {
transform: translateY(63%); transform: translateY(63%);

Write Preview
Loading…
Cancel
Save