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. 12
      src/view/my-services/MyServices.js
  5. 26
      src/view/my-services/index.css
  6. 64
      tailwind.config.js

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

@ -3,7 +3,7 @@ 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 Title from "./Title";
import './index.css'
const FutureExams = () => {
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-------- */}
<Title titleText="آزمونهای پیشرو" />
{/* ----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)}
>
@ -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>

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

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

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

Loading…
Cancel
Save