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

3
src/App.js
Unescape View File

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

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

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

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

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

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

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

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

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 Title from "./Title";
import "./index.css";
const FutureExams = ({ seeMoreHandler, seeMoreStatus, deActiveSeeMore }) => {
let data = [
{

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

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

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