FutureExams(responsive/down)

main
alireza khaji 2 years ago
parent cc92bba036
commit 17a72d870d
  1. 2
      src/components/Calendar/index.js
  2. 20
      src/view/my-services/FutureExams.js
  3. 2
      src/view/my-services/MyOrders.js
  4. 4
      src/view/my-services/MyServices.js
  5. 26
      src/view/my-services/index.css
  6. 62
      tailwind.config.js

@ -30,7 +30,7 @@ const SimpleCalendar = () => {
} }
return ( return (
<div className=" w-full "> <div className="w-full h-full">
{/* <Calendar {/* <Calendar
value={selectedDay} value={selectedDay}

@ -3,7 +3,7 @@ import img2 from "../../assets/img/usgs-hoS3dzgpHzw-unsplash.jpg";
import stickynote from "../../assets/img/stickynote.svg"; 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'
const FutureExams = () => { const FutureExams = () => {
let data = [ let data = [
{ {
@ -66,7 +66,17 @@ const FutureExams = () => {
const hoverHandle2 = (index) => { const hoverHandle2 = (index) => {
let frontBox = document.querySelectorAll(".frontBox"); let frontBox = document.querySelectorAll(".frontBox");
let description = document.querySelectorAll(".frontBox-description"); let description = document.querySelectorAll(".frontBox-description");
if(window.innerWidth>=1490){
frontBox[index].style.transform = "translateY(60%)"; 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 = frontBox[index].style.background =
"linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)"; "linear-gradient(0deg, rgba(223,20,82,1) 65%, rgba(255,255,255,0) 100%)";
description[index].style.display = "none"; description[index].style.display = "none";
@ -79,11 +89,11 @@ const FutureExams = () => {
{/* ----title-------- */} {/* ----title-------- */}
<Title titleText="آزمونهای پیشرو" /> <Title titleText="آزمونهای پیشرو" />
{/* ----body-------- */} {/* ----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) => ( {data?.map((item, index) => (
<div <div
key={index} 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)} onMouseEnter={() => hoverHandler(index)}
onMouseLeave={() => hoverHandle2(index)} onMouseLeave={() => hoverHandle2(index)}
> >
@ -110,11 +120,11 @@ const FutureExams = () => {
<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"> <div className="text-xs res1:text-[10px] res0_5:text-xs text-white text-right">
{item.date} {item.date}
</div> </div>
</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} ساعت {item.time}
</div> </div>
</div> </div>

@ -108,7 +108,7 @@ const MyOrders = () => {
{item.products.map((ITEM, INDEX) => ( {item.products.map((ITEM, INDEX) => (
<div <div
key={INDEX} 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>
))} ))}
</div> </div>

@ -1,3 +1,4 @@
import SimpleCalendar from "../../components/Calendar";
import Exams from "./Exams"; import Exams from "./Exams";
import MyCourse from "./MyCourse"; import MyCourse from "./MyCourse";
import MyOrders from "./MyOrders"; import MyOrders from "./MyOrders";
@ -10,6 +11,9 @@ const MyServices=()=>{
<div className="MyServices w-[93.5%] h-[100vh] pt-[4%] pb-2 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-[49%] flex flex-row-reverse 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>
<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">
<div className="w-[70%] h-full flex flex-row-reverse justify-between"> <div className="w-[70%] h-full flex flex-row-reverse justify-between">

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

@ -23,40 +23,42 @@ module.exports = {
color17: "#CB1F1F", color17: "#CB1F1F",
color18: "#E2E2E2", color18: "#E2E2E2",
color19: "#959595", //register input label color19: "#959595", //register input label
red26: '#521326', red26: "#521326",
red25: '#752525', red25: "#752525",
red52: '#df1452', red52: "#df1452",
red5B : '#c82b5b', red5B: "#c82b5b",
red46OP: 'rgba(255, 246, 246, 0.8)', red46OP: "rgba(255, 246, 246, 0.8)",
grayEC: '#ececec', grayEC: "#ececec",
grayFD : '#fdfdfd', grayFD: "#fdfdfd",
grayE0 : '#e0e0e0', grayE0: "#e0e0e0",
gray81 : '#818181', gray81: "#818181",
gray70 : '#707070', gray70: "#707070",
gray37: '#373737', gray37: "#373737",
grayAB: '#a5a8ab', grayAB: "#a5a8ab",
red82OP: 'rgba(223, 20, 82, 0.08)', red82OP: "rgba(223, 20, 82, 0.08)",
pinkF5: '#fff1f5', pinkF5: "#fff1f5",
pinkD6 : '#ffd6d6', pinkD6: "#ffd6d6",
black40: '#404040', black40: "#404040",
green17 : '#8daf17', green17: "#8daf17",
greenE9 : '#dcffe9', greenE9: "#dcffe9",
green13: '#00ba13', green13: "#00ba13",
blue5F : '#05335f', blue5F: "#05335f",
blue7E : '#15517e', blue7E: "#15517e",
blueFF : '#f2f9ff', blueFF: "#f2f9ff",
blue65 : '#65a9ff', blue65: "#65a9ff",
blueE3 : '#4c7fe3', blueE3: "#4c7fe3",
blueED : '#4690ed', blueED: "#4690ed",
blueDF : '#14b5df', blueDF: "#14b5df",
blue52 : '#132c52', blue52: "#132c52",
blue3A : '#00253a', blue3A: "#00253a",
blueCD : '#1064cd', blueCD: "#1064cd",
}, },
}, },
screens: { screens: {
res0_5: "1525px",
res0_75: "1490px",
res1: "1410px", res1: "1410px",
res1_1: "1315px",
res1_2: "1270px", res1_2: "1270px",
res2: "1230px", res2: "1230px",
}, },

Loading…
Cancel
Save