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

mobile(ResultExams,FutureExams)

Browse Source
main
alireza khaji 3 years ago
parent c9a2f3d6e0
commit 28ccf2c3b5
12 changed files with 654 additions and 270 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. 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

10
src/App.css
Unescape View File

@ -22,6 +22,16 @@ input::-webkit-inner-spin-button {
border-radius: 20px; border-radius: 20px;
} }
@media only screen and (max-width: 999px) {
::-webkit-scrollbar {
width: 0px !important;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: transparent !important;
}
}
/* Track */ /* Track */
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
border-radius: 20px; border-radius: 20px;

3
src/App.js
Unescape View File

@ -42,6 +42,7 @@ import AddExam from "./view/addExam";
import ChatPage from "./view/chatPage"; import ChatPage from "./view/chatPage";
import ShoppingCart from "./components/ShoppingCart"; import ShoppingCart from "./components/ShoppingCart";
import MyServices from "./view/my-services/MyServices"; import MyServices from "./view/my-services/MyServices";
import MobileMyServices from "./view/my-services/mobile/MyServices";
let data = [ let data = [
{ {
@ -703,7 +704,7 @@ function App() {
path="/myServices" path="/myServices"
element={ element={
LOGIN ? ( LOGIN ? (
<MyServices /> window.innerWidth>1000 ?<MyServices /> : <MobileMyServices/>
) : ( ) : (
<LoginSignUp activeLogin={activeLogin} /> <LoginSignUp activeLogin={activeLogin} />
) )

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

@ -1,6 +1,7 @@
import moment from "jalali-moment"; import moment from "jalali-moment";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Days from "./Days"; import Days from "./Days";
import MobileEventBox from "./MobileEventBox";
import Title from "./Title"; import Title from "./Title";
import Week from "./Week"; import Week from "./Week";
@ -147,36 +148,42 @@ const Calendar2 = ({ primaryColor }) => {
return ( return (
<div className="Calendar2 w-full h-full rounded-lg border border-[#E0E0E0] pt-1 pb-2 px-2 relative"> <div className="Calendar2 w-full h-full rounded-lg border border-[#E0E0E0] pt-1 pb-2 px-2 relative">
{/* ----title---------------- */} <div
<Title className="w-full h-full"
primaryColor={primaryColor} // style={window.innerWidth < 1000 ? { height: "80%" } : null}
year={year} >
month={month} {/* ----title---------------- */}
monthList={monthList} <Title
NextMonth={NextMonth} primaryColor={primaryColor}
previousMonth={previousMonth} year={year}
selectDay={selectDay} month={month}
setShowEvents={setShowEvents} monthList={monthList}
/> NextMonth={NextMonth}
{/* ----------week---------------- */} previousMonth={previousMonth}
<Week /> selectDay={selectDay}
{/* ----------days---------------- */} setShowEvents={setShowEvents}
<Days />
findFirstDayWeekDay={findFirstDayWeekDay} {/* ----------week---------------- */}
year={year} <Week />
month={month} {/* ----------days---------------- */}
currentYear={currentYear} <Days
currentMonth={currentMonth} findFirstDayWeekDay={findFirstDayWeekDay}
currentDay={currentDay} year={year}
primaryColor={primaryColor} month={month}
eventList={eventList} currentYear={currentYear}
activeDay={activeDay} currentMonth={currentMonth}
selectDay={selectDay} currentDay={currentDay}
eventBoxRight={eventBoxRight} primaryColor={primaryColor}
eventBoxTop={eventBoxTop} eventList={eventList}
eventBoxisRight={eventBoxisRight} activeDay={activeDay}
showEvent={showEvent} selectDay={selectDay}
/> eventBoxRight={eventBoxRight}
eventBoxTop={eventBoxTop}
eventBoxisRight={eventBoxisRight}
showEvent={showEvent}
/>
</div>
{/* {(showEvent && window.innerWidth<1000)&& <MobileEventBox/>} */}
</div> </div>
); );
}; };

188
src/components/Calendar2/Days.js
Unescape View File

@ -1,5 +1,6 @@
import moment from "jalali-moment"; import moment from "jalali-moment";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import MobileEventBox from "./MobileEventBox";
let daysList = [ let daysList = [
{ {
@ -334,95 +335,126 @@ const Days = ({
const selectDayHandler=(index)=>{ const selectDayHandler=(index)=>{
setEventData(Daylist[index].events); setEventData(Daylist[index].events);
selectDay(index); 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 ( return (
<div <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)" }} style={{ height: "calc(100% - 80px)" }}
> >
{Daylist.map((item, index) => ( <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">
<div {Daylist.map((item, index) => (
key={index} <div
className="w-[13%] h-[15%] rounded-lg cursor-pointer flex flex-col items-center justify-center text-sm relative" key={index}
style={ className="w-[13%] h-[15%] rounded-lg cursor-pointer flex flex-col items-center justify-center text-sm relative"
activeDay === index style={
? { activeDay === index
backgroundColor: primaryColor, ? {
color: "#fff", backgroundColor: primaryColor,
} color: "#fff",
: item.isToday }
? { : item.isToday
border: `1px solid ${primaryColor}`, ? {
color: `${primaryColor}`, border: `1px solid ${primaryColor}`,
} color: `${primaryColor}`,
: index % 7 === 6 }
? { color: "#C94E2A" } : index % 7 === 6
: null ? { color: "#C94E2A" }
} : null
onClick={() => selectDayHandler(index)} }
> onClick={() => selectDayHandler(index)}
<div>{item.dayNumber}</div> >
<div className="w-[90%] flex items-center justify-center gap-x-1 absolute bottom-1"> <div
{item?.events?.map((event, Index) => ( className="text-black text-sm"
<React.Fragment key={Index}> style={
{Index < 2 && ( 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 <div
key={Index} className="w-2 h-2 rounded-full bg-white ml-2"
className="w-1 h-1 rounded-full bg-black"
style={ style={
event?.type item?.type
? { backgroundColor: dotsColor[event.type - 1] } ? { backgroundColor: dotsColor[item.type-1] }
: { backgroundColor: dotsColor[Index] } : { backgroundColor: dotsColor[index % 2] }
} }
></div> ></div>
)} <div className="text-sm text-right text-[#999]">
</React.Fragment> {item?.title}
))} </div>
</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> </div>
</div> ))}
))} </div>
</div> </div>
</div> )}
</div>
{/* ---------mobile-events-box---------------- */}
{showEvent && window.innerWidth < 1000 && (
<MobileEventBox eventData={eventData} dotsColor={dotsColor} primaryColor={primaryColor} />
)} )}
</div> </div>
); );

32
src/components/Calendar2/MobileEventBox.js
Unescape View File

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

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

@ -1,18 +1,42 @@
let weekList = ["شنبه","یک‌شنبه","دوشنبه","سه‌شنبه","چهارشنبه","پنج‌شنبه","جمعه"] let weekList = ["شنبه","یک‌شنبه","دوشنبه","سه‌شنبه","چهارشنبه","پنج‌شنبه","جمعه"]
let weekList2 = [
"ش",
"1ش",
"2ش",
"3ش",
"4ش",
"5ش",
"ج",
];
const Week=()=>{ const Week=()=>{
return ( return (
<div className="Week w-full h-8 flex items-center justify-between flex-row-reverse"> <div className="Week w-full h-8 flex items-center justify-between flex-row-reverse">
{weekList.map((item, index) => ( {window.innerWidth >= 1350 &&
<div weekList.map((item, index) => (
key={index} <div
className="w-[13%] text-center text-xs" key={index}
style={index === 6 ? { color: "#C94E2A" } : null} className="w-[13%] text-center text-xs text-black"
> style={index === 6 ? { color: "#C94E2A" } : null}
{item} >
</div> {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> </div>
); );
} }

258
src/components/nav/Nav.js
Unescape View File

@ -62,78 +62,124 @@ useEffect(() => {
} }
const mobileOptions = [ const mobileOptions = [
{ {
title: 'صفحه اصلی', title: "صفحه اصلی",
icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> icon: (
<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" /> <svg
<path d="M12 17.99V14.99" stroke="" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /> width="24"
</svg> height="24"
, viewBox="0 0 24 24"
link: '/', 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: 'فروشگاه', title: "فروشگاه",
icon: <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> icon: (
<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" /> <svg
<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" /> width="24"
<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" /> height="24"
<path d="M9 8H21" stroke="inherit" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" /> viewBox="0 0 24 24"
</svg>, fill="none"
link: '/services', 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: 'پشتیبانی', title: "پشتیبانی",
icon: <svg icon: (
id="vuesax_linear_sms" <svg
data-name="vuesax/linear/sms" id="vuesax_linear_sms"
xmlns="http://www.w3.org/2000/svg" data-name="vuesax/linear/sms"
width="24" xmlns="http://www.w3.org/2000/svg"
height="24" width="24"
viewBox="0 0 46.091 46.091" height="24"
viewBox="0 0 46.091 46.091"
> >
<g id="sms"> <g id="sms">
<path <path
id="Vector" 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" 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)" transform="translate(3.841 6.722)"
fill="none" fill="none"
stroke="" stroke=""
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
strokeWidth="3" strokeWidth="3"
/> />
<path <path
id="Vector-2" id="Vector-2"
data-name="Vector" data-name="Vector"
d="M19.2,0,13.194,4.8a6.08,6.08,0,0,1-7.2,0L0,0" d="M19.2,0,13.194,4.8a6.08,6.08,0,0,1-7.2,0L0,0"
transform="translate(13.443 17.284)" transform="translate(13.443 17.284)"
fill="none" fill="none"
stroke="" stroke=""
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
strokeWidth="3" strokeWidth="3"
/> />
<path <path
id="Vector-3" id="Vector-3"
data-name="Vector" data-name="Vector"
d="M0,0H46.091V46.091H0Z" d="M0,0H46.091V46.091H0Z"
fill="none" fill="none"
opacity="0" opacity="0"
/> />
</g> </g>
</svg> </svg>
, ),
link: '/messages', 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); const [navId, setNavId] = useState(initai_navId);
@ -149,8 +195,8 @@ useEffect(() => {
return ( return (
location2.pathname.includes('azmoon_list') || location2.pathname.includes('messages') || location2.pathname.includes('shoppingCart') || location2.pathname.includes('register') ? null : 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="w-full flex fixed bg-white justify-center z-20 h-20 bottom-0">
<div className="flex w-11/12 bg-white justify-between rtl border border-red82OP rounded-xl"> <div className="flex w-11/12 h-full bg-white justify-between rtl border border-red82OP rounded-xl">
{ {
mobileOptions.map( mobileOptions.map(
(item, index) => ( (item, index) => (
@ -180,84 +226,10 @@ useEffect(() => {
</div> </div>
<div <div
className="back-item-img w-full h-[12.5%] bg-red52 absolute right-0 z-20 transition-all duration-300" 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>
{/* ------------ */} {/* ------------ */}
<div className="nav-menu-container w-full h-3/4 flex-col items-center absolute z-30 right-0"> <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 <Link
to="/services" 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" className="nav-menu-container-item w-full h-1/6 flex flex-col items-center justify-center hover:bg-color2_5 cursor-pointer"

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

@ -4,6 +4,8 @@ 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 = ({ seeMoreHandler, seeMoreStatus, deActiveSeeMore }) => { const FutureExams = ({ seeMoreHandler, seeMoreStatus, deActiveSeeMore }) => {
let data = [ let data = [
{ {

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

@ -1,20 +1,17 @@
@media only screen and (max-width: 1489px) { @media only screen and (max-width: 1489px) {
.frontBox{ .frontBox {
transform: translateY(57%); transform: translateY(57%);
} }
} }
@media only screen and (max-width: 1446px) { @media only screen and (max-width: 1446px) {
.factor-sum-price{ .factor-sum-price {
font-size: 11px; font-size: 11px;
} }
.my-order-left{ .my-order-left {
width: 41%; width: 41%;
} }
.my-order-right{ .my-order-right {
width: 56%; width: 56%;
} }
} }
@ -26,7 +23,7 @@
} }
@media only screen and (max-width: 1367px) { @media only screen and (max-width: 1367px) {
.order-status{ .order-status {
font-size: 10px; font-size: 10px;
} }
} }
@ -55,4 +52,34 @@
.frontBox { .frontBox {
transform: translateY(63%); 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%);
}
}

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

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

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

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

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

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