mobile(ResultExams,FutureExams)

main
alireza khaji 2 years ago
parent c9a2f3d6e0
commit 28ccf2c3b5
  1. 10
      src/App.css
  2. 3
      src/App.js
  3. 67
      src/components/Calendar2/Calendar2.js
  4. 188
      src/components/Calendar2/Days.js
  5. 32
      src/components/Calendar2/MobileEventBox.js
  6. 42
      src/components/Calendar2/Week.js
  7. 258
      src/components/nav/Nav.js
  8. 2
      src/view/my-services/FutureExams.js
  9. 45
      src/view/my-services/index.css
  10. 142
      src/view/my-services/mobile/FutureExams.js
  11. 38
      src/view/my-services/mobile/MyServices.js
  12. 97
      src/view/my-services/mobile/ResultExams.js

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

@ -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 ? (
<MyServices />
window.innerWidth>1000 ?<MyServices /> : <MobileMyServices/>
) : (
<LoginSignUp activeLogin={activeLogin} />
)

@ -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 (
<div className="Calendar2 w-full h-full rounded-lg border border-[#E0E0E0] pt-1 pb-2 px-2 relative">
{/* ----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
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>
);
};

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

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

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

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

@ -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 = [
{

@ -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%);
}
}
}
/* 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%);
}
}

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

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

@ -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;
Loading…
Cancel
Save