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

myRegisters

Browse Source
main
alireza khaji 3 years ago
parent a92fadd4b3
commit 7091617c7f
5 changed files with 177 additions and 81 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. 5
      src/App.css
  2. 90
      src/view/my-services/FutureExams.js
  3. 86
      src/view/my-services/MyRegisters.js
  4. 9
      src/view/my-services/MyServices.js
  5. 68
      src/view/my-services/ResultExams.js

5
src/App.css
Unescape View File

@ -19,17 +19,18 @@ input::-webkit-inner-spin-button {
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 5px; width: 5px;
background: #dbdbdb; background: #dbdbdb;
border-radius: 20px;
} }
/* Track */ /* Track */
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
border-radius: 10px; border-radius: 20px;
} }
/* Handle */ /* Handle */
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #df1452; background: #df1452;
border-radius: 10px; border-radius: 20px;
} }
/* Handle on hover */ /* Handle on hover */

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

@ -74,59 +74,61 @@ const FutureExams = () => {
}; };
return ( return (
<div className="FutureExams w-[55%] h-full border-l border-[#E0E0E0] px-4 pt-4 overflow-y-auto"> <div className="FutureExams w-[55%] h-full border-l border-[#E0E0E0] px-1 pt-1">
{/* ----title-------- */} <div className="w-full h-full overflow-y-auto px-4 pt-4">
<Title titleText="آزمون‌های پیش‌رو" /> {/* ----title-------- */}
{/* ----body-------- */} <Title titleText="آزمون‌های پیش‌رو" />
<div className="w-full mt-4 flex flex-row-reverse items-start gap-x-[3.5%] gap-y-4 flex-wrap pb-2"> {/* ----body-------- */}
{data?.map((item, index) => ( <div className="w-full mt-4 flex flex-row-reverse items-start gap-x-[3.5%] gap-y-4 flex-wrap pb-2">
<div {data?.map((item, index) => (
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 <div
className="frontBox w-full h-full absolute top-0 left-0 p-3 translate-y-[60%] transition-all duration-300" key={index}
style={{ className="w-[31%] aspect-square rounded overflow-hidden relative cursor-pointer"
background: onMouseEnter={() => hoverHandler(index)}
"linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)", onMouseLeave={() => hoverHandle2(index)}
}}
> >
<div className="w-full flex items-center flex-row-reverse pb-1 border-b border-white"> {/* -----back-img------ */}
<img src={stickynote} alt="stickynote" className="h-5 ml-1" /> <img src={item.img} className="w-full" alt="back-img" />
<div {/* -----front-data------ */}
className="text-xs text-white text-right overflow-hidden text-ellipsis whitespace-nowrap" <div
style={{ direction: "rtl" }} className="frontBox w-full h-full absolute top-0 left-0 p-3 translate-y-[60%] transition-all duration-300"
> style={{
{item.title} 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> {/* ----------- */}
{/* ----------- */} <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 text-white text-right">
{item.date}
</div>
</div>
<div className="text-xs text-white text-right"> <div className="text-xs text-white text-right">
{item.date} ساعت {item.time}
</div> </div>
</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> </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> </div>
</div> </div>
); );

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

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

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

@ -1,14 +1,19 @@
import Exams from "./Exams"; import Exams from "./Exams";
import MyRegisters from "./MyRegisters";
const MyServices=()=>{ const MyServices=()=>{
return ( 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"> <div className="MyServices-row w-full h-[48%] flex flex-row-reverse justify-between">
<Exams/> <Exams/>
</div> </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> </div>
); );
} }

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

@ -60,46 +60,48 @@ const ResultExams = () => {
]; ];
return ( return (
<div <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" }} style={{ direction: "rtl" }}
> >
{/* ----title-------- */} <div className="w-full h-full px-4 pt-4 overflow-y-auto">
<div style={{ direction: "ltr" }}> {/* ----title-------- */}
<Title titleText="نتایج آزمون‌های من" /> <div style={{ direction: "ltr" }}>
</div> <Title titleText="نتایج آزمون‌های من" />
{/* ----body-------- */} </div>
<div className="w-full mt-4"> {/* ----body-------- */}
{data?.map((item, index) => ( <div className="w-full mt-4">
<div {data?.map((item, index) => (
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 <div
className="w-1 h-9 rounded-lg" key={index}
style={{ backgroundColor: `${colorList[index % 5].line}` }} className="w-full h-14 rounded px-3 flex items-center justify-between mb-2 cursor-pointer"
></div> style={{ backgroundColor: `${colorList[index % 5].bg}` }}
{/* --------- */} >
<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 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>
<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> </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> </div>
); );

Write Preview
Loading…
Cancel
Save