diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js index b371dfa..42d1fe8 100644 --- a/src/components/Calendar/index.js +++ b/src/components/Calendar/index.js @@ -30,7 +30,7 @@ const SimpleCalendar = () => { } return ( -
+
{/* { let data = [ { @@ -66,7 +66,17 @@ const FutureExams = () => { const hoverHandle2 = (index) => { let frontBox = document.querySelectorAll(".frontBox"); let description = document.querySelectorAll(".frontBox-description"); + if(window.innerWidth>=1490){ frontBox[index].style.transform = "translateY(60%)"; + }else if (window.innerWidth >= 1410) { + frontBox[index].style.transform = "translateY(57%)"; + }else if (window.innerWidth >= 1315) { + frontBox[index].style.transform = "translateY(70%)"; + }else if (window.innerWidth >= 1230) { + frontBox[index].style.transform = "translateY(67%)"; + }else{ + frontBox[index].style.transform = "translateY(63%)"; + } frontBox[index].style.background = "linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)"; description[index].style.display = "none"; @@ -79,11 +89,11 @@ const FutureExams = () => { {/* ----title-------- */} {/* ----body-------- */} - <div className="w-full mt-4 flex flex-row-reverse items-start gap-x-[3.5%] gap-y-4 flex-wrap pb-2"> + <div className="w-full mt-4 flex flex-row-reverse items-start gap-x-[5%] res1:gap-x-[3.5%] gap-y-4 flex-wrap pb-2"> {data?.map((item, index) => ( <div key={index} - className="w-[31%] aspect-square rounded overflow-hidden relative cursor-pointer" + className="w-[47.5%] res1:w-[31%] aspect-square rounded overflow-hidden relative cursor-pointer" onMouseEnter={() => hoverHandler(index)} onMouseLeave={() => hoverHandle2(index)} > @@ -91,7 +101,7 @@ const FutureExams = () => { <img src={item.img} className="w-full" alt="back-img" /> {/* -----front-data------ */} <div - className="frontBox w-full h-full absolute top-0 left-0 p-3 translate-y-[60%] transition-all duration-300" + className="frontBox w-full h-full absolute top-0 left-0 p-3 translate-y-[60%] transition-all duration-300" style={{ background: "linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)", @@ -110,11 +120,11 @@ const FutureExams = () => { <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 text-white text-right"> + <div className="text-xs res1:text-[10px] res0_5:text-xs text-white text-right"> {item.date} </div> </div> - <div className="text-xs text-white text-right"> + <div className="text-xs res1:text-[10px] res0_5:text-xs text-white text-right"> ساعت {item.time} </div> </div> diff --git a/src/view/my-services/MyOrders.js b/src/view/my-services/MyOrders.js index de41f1c..65d2895 100644 --- a/src/view/my-services/MyOrders.js +++ b/src/view/my-services/MyOrders.js @@ -108,7 +108,7 @@ const MyOrders = () => { {item.products.map((ITEM, INDEX) => ( <div key={INDEX} - className="w-10 h-16 rounded bg-[#E0E0E0] overflow-hidden flex items-center justfy-center" + className="w-10 h-16 rounded bg-[#E0E0E0] overflow-hidden flex items-center justfy-center cursor-pointer" ></div> ))} </div> diff --git a/src/view/my-services/MyServices.js b/src/view/my-services/MyServices.js index b944c93..77a25a1 100644 --- a/src/view/my-services/MyServices.js +++ b/src/view/my-services/MyServices.js @@ -1,3 +1,4 @@ +import SimpleCalendar from "../../components/Calendar"; import Exams from "./Exams"; import MyCourse from "./MyCourse"; import MyOrders from "./MyOrders"; @@ -9,14 +10,17 @@ const MyServices=()=>{ return ( <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-[49%] flex flex-row-reverse justify-between"> - <Exams/> + <Exams /> + <div className="w-[28.5%] h-full"> + <SimpleCalendar /> + </div> </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/> - <MyCourse/> + <MyRegisters /> + <MyCourse /> </div> - <MyOrders/> + <MyOrders /> </div> </div> ); diff --git a/src/view/my-services/index.css b/src/view/my-services/index.css new file mode 100644 index 0000000..7beb28a --- /dev/null +++ b/src/view/my-services/index.css @@ -0,0 +1,26 @@ + + + +@media only screen and (max-width: 1489px) { + .frontBox{ + transform: translateY(57%); + } +} + +@media only screen and (max-width: 1409px) { + .frontBox { + transform: translateY(70%); + } +} + +@media only screen and (max-width: 1314px) { + .frontBox { + transform: translateY(67%); + } +} + +@media only screen and (max-width: 1229px) { + .frontBox { + transform: translateY(63%); + } +} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 768810c..1ebef87 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -23,41 +23,43 @@ module.exports = { color17: "#CB1F1F", color18: "#E2E2E2", color19: "#959595", //register input label - red26: '#521326', - red25: '#752525', - red52: '#df1452', - red5B : '#c82b5b', - red46OP: 'rgba(255, 246, 246, 0.8)', - grayEC: '#ececec', - grayFD : '#fdfdfd', - grayE0 : '#e0e0e0', - gray81 : '#818181', - gray70 : '#707070', - gray37: '#373737', - grayAB: '#a5a8ab', - red82OP: 'rgba(223, 20, 82, 0.08)', - pinkF5: '#fff1f5', - pinkD6 : '#ffd6d6', - black40: '#404040', - green17 : '#8daf17', - greenE9 : '#dcffe9', - green13: '#00ba13', - blue5F : '#05335f', - blue7E : '#15517e', - blueFF : '#f2f9ff', - blue65 : '#65a9ff', - blueE3 : '#4c7fe3', - blueED : '#4690ed', - blueDF : '#14b5df', - blue52 : '#132c52', - blue3A : '#00253a', - blueCD : '#1064cd', - + red26: "#521326", + red25: "#752525", + red52: "#df1452", + red5B: "#c82b5b", + red46OP: "rgba(255, 246, 246, 0.8)", + grayEC: "#ececec", + grayFD: "#fdfdfd", + grayE0: "#e0e0e0", + gray81: "#818181", + gray70: "#707070", + gray37: "#373737", + grayAB: "#a5a8ab", + red82OP: "rgba(223, 20, 82, 0.08)", + pinkF5: "#fff1f5", + pinkD6: "#ffd6d6", + black40: "#404040", + green17: "#8daf17", + greenE9: "#dcffe9", + green13: "#00ba13", + blue5F: "#05335f", + blue7E: "#15517e", + blueFF: "#f2f9ff", + blue65: "#65a9ff", + blueE3: "#4c7fe3", + blueED: "#4690ed", + blueDF: "#14b5df", + blue52: "#132c52", + blue3A: "#00253a", + blueCD: "#1064cd", }, }, screens: { + res0_5: "1525px", + res0_75: "1490px", res1: "1410px", - res1_2:"1270px", + res1_1: "1315px", + res1_2: "1270px", res2: "1230px", }, },