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

Mobile Side Menu Feature Added

Browse Source
main
Pedram Keshavarzi 3 years ago
parent 681ae1bb7e
commit 2bc0a72ba6
6 changed files with 199 additions and 145 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. 2
      src/components/exam/resault/index.js
  2. 25
      src/components/header/Header.js
  3. 10
      src/components/header/MobileSideMenu/index.js
  4. 283
      src/view/services/index.js
  5. 12
      src/view/services/service/index.js
  6. 4
      tailwind.config.js

2
src/components/exam/resault/index.js
Unescape View File

@ -89,7 +89,7 @@ const ExamResults = ({
<div className="exam-result bg-white rounded-lg"> <div className="exam-result bg-white rounded-lg">
<div className={`w-full ${isMobile && 'text-xl flex justify-between items-center'} text-red52 text-right px-4 font-bold`}> <div className={`w-full ${isMobile && 'text-xl flex justify-between items-center'} text-red52 text-right px-4 font-bold`}>
<p>نتایج آزمون‌ها</p> <p>نتایج آزمون‌ها</p>
{ {isMobile &&
<p className="text-sm"> <p className="text-sm">
مشاهده بیشتر مشاهده بیشتر
</p> </p>

25
src/components/header/Header.js
Unescape View File

@ -4,7 +4,7 @@ import moment from "jalali-moment";
import { useState } from 'react'; import { useState } from 'react';
import avatar1 from "../../assets/img/avatar/pexels-jan-kopřiva-3525908.jpg"; import avatar1 from "../../assets/img/avatar/pexels-jan-kopřiva-3525908.jpg";
import logoIcon from '../../assets/img/logo.png'; import logoIcon from '../../assets/img/logo.png';
import MobileSideMenu from './MobileSideMenu';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
@ -20,13 +20,16 @@ const Header = ({
let weekdayList = ["یکشنبه", "دوشنبه", "سه‌شنبه", "چهارشنبه", 'پنج‌شنبه', 'جمعه', "شنبه"]; let weekdayList = ["یکشنبه", "دوشنبه", "سه‌شنبه", "چهارشنبه", 'پنج‌شنبه', 'جمعه', "شنبه"];
console.log("weekday:"); console.log("weekday:");
console.log(weekday); console.log(weekday);
const [menuPopup, setMenuPopup] = useState(false);
return ( return (
<div className={`header w-full h-[8.5%] z-10 bg-white fixed top-0 left-0 flex items-center ${!isMobile && 'shadow-md'} `}> <>
<div className={`header w-full h-[8.5%] z-10 bg-white fixed top-0 left-0 flex items-center ${!isMobile && 'shadow-md'}`}>
{ {
isMobile ? isMobile ?
<div className='flex w-full items-center justify-between rtl px-4'> <div className='flex w-full items-center justify-between rtl px-4'>
<div> <div onClick={() => setMenuPopup(!menuPopup)}>
<svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3 5H21" stroke="#df1452" strokeWidth="1.5" strokeLinecap="round" /> <path d="M3 5H21" stroke="#df1452" strokeWidth="1.5" strokeLinecap="round" />
<path d="M3 10H21" stroke="#df1452" strokeWidth="1.5" strokeLinecap="round" /> <path d="M3 10H21" stroke="#df1452" strokeWidth="1.5" strokeLinecap="round" />
@ -35,6 +38,7 @@ const Header = ({
</svg> </svg>
</div> </div>
<Link to='/'> <img src={logoIcon} className="h-10"/> </Link> <Link to='/'> <img src={logoIcon} className="h-10"/> </Link>
<Link to='/shoppingCart'>
<div> <div>
<svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.5 7.67001V6.70001C7.5 4.45001 9.31 2.24001 11.56 2.03001C14.24 1.77001 16.5 3.88001 16.5 6.51001V7.89001" stroke="#df1452" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/> <path d="M7.5 7.67001V6.70001C7.5 4.45001 9.31 2.24001 11.56 2.03001C14.24 1.77001 16.5 3.88001 16.5 6.51001V7.89001" stroke="#df1452" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round"/>
@ -44,6 +48,7 @@ const Header = ({
</svg> </svg>
</div> </div>
</Link>
</div> : </div> :
<> <>
<div className="header-profile h-full flex items-center"> <div className="header-profile h-full flex items-center">
@ -92,6 +97,20 @@ const Header = ({
/> />
</div> */} </div> */}
</div> </div>
{
isMobile && menuPopup &&
<>
<div className='h-screen top-0 w-full z-30 backdrop-blur fixed'></div>
<div className='w-full flex'>
<MobileSideMenu />
<button className='flex items-center justify-center fixed z-40 top-10 left-5 text-xl font-bold text-red52 w-12 h-12 rounded-xl bg-pinkF5'
onClick={() => setMenuPopup(false)}
>X</button>
</div>
</>
}
</>
); );
} }

10
src/components/header/MobileSideMenu/index.js
Unescape View File

@ -0,0 +1,10 @@
import React from "react";
const MobileSideMenu = () => {
return (
<div className="flex flex-col w-2/3 h-screen top-0 right-0 fixed bg-white z-40">
</div>
)
}
export default MobileSideMenu;

283
src/view/services/index.js
Unescape View File

@ -3,7 +3,7 @@ import { book, publicApi, userProduct } from "../../redux/actions";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import Product from "../../components/Product"; import Product from "../../components/Product";
import ScrollContainer from 'react-indiana-drag-scroll' // import ScrollContainer from 'react-indiana-drag-scroll'
import img1 from "../../assets/img/Group 1344.svg"; import img1 from "../../assets/img/Group 1344.svg";
@ -15,7 +15,7 @@ import img6 from "../../assets/img/Group 1362.svg";
import ShoppingCart from "../../components/ShoppingCart"; import ShoppingCart from "../../components/ShoppingCart";
import ServicePopUp from "./service"; import ServicePopUp from "./service";
import Games from "../dashboard2/Games"; import Games from "../dashboard2/Games";
import Packages from "../dashboard2/Packages"; // import Packages from "../dashboard2/Packages";
@ -34,14 +34,7 @@ const Services = ({
videos, videos,
pushToCart, pushToCart,
}) => { }) => {
const [checked, setChecked] = useState([
false,
false,
false,
false,
false,
false,
]);
const [filterCheck, setFilterCheck] = useState([false, false, false, false]); const [filterCheck, setFilterCheck] = useState([false, false, false, false]);
const [filter, setFilter] = useState({ const [filter, setFilter] = useState({
search: "", search: "",
@ -61,9 +54,9 @@ const Services = ({
classMinute: "", classMinute: "",
}); });
const onChange = (name, value) => { // const onChange = (name, value) => {
setFilter({ ...filter, [name]: value }); // setFilter({ ...filter, [name]: value });
}; // };
useEffect(() => { useEffect(() => {
getList(); getList();
@ -439,144 +432,146 @@ if (!isMobile){
/> />
<div className="w-11/12 border-b border-gray-200"></div> <div className="w-11/12 border-b border-gray-200"></div>
<div className="flex items-center mx-4 my-4"> {
<svg gameId !== 6 && <div className="flex items-center mx-4 my-4">
xmlns="http://www.w3.org/2000/svg" <svg
width="40" xmlns="http://www.w3.org/2000/svg"
height="40" width="40"
viewBox="0 0 14.378 14.378" height="40"
> viewBox="0 0 14.378 14.378"
<g
id="vuesax_linear_filter-tick"
data-name="vuesax/linear/filter-tick"
transform="translate(-620 -700)"
> >
<g id="filter-tick" transform="translate(620 700)"> <g
<path id="vuesax_linear_filter-tick"
id="Vector" data-name="vuesax/linear/filter-tick"
d="M5.691,2.846a2.8,2.8,0,0,1-.407,1.468A2.836,2.836,0,0,1,2.846,5.691,2.768,2.768,0,0,1,1.312,5.23a2.685,2.685,0,0,1-.9-.917A2.807,2.807,0,0,1,0,2.846,2.848,2.848,0,0,1,2.846,0a2.648,2.648,0,0,1,.623.072A2.84,2.84,0,0,1,5.691,2.846Z" transform="translate(-620 -700)"
transform="translate(7.267 5.991)" >
fill="none" <g id="filter-tick" transform="translate(620 700)">
stroke="#696969" <path
strokeLinecap="round" id="Vector"
strokeLinejoin="round" d="M5.691,2.846a2.8,2.8,0,0,1-.407,1.468A2.836,2.836,0,0,1,2.846,5.691,2.768,2.768,0,0,1,1.312,5.23a2.685,2.685,0,0,1-.9-.917A2.807,2.807,0,0,1,0,2.846,2.848,2.848,0,0,1,2.846,0a2.648,2.648,0,0,1,.623.072A2.84,2.84,0,0,1,5.691,2.846Z"
strokeWidth="0.6" transform="translate(7.267 5.991)"
/> fill="none"
<path stroke="#696969"
id="Vector-2" strokeLinecap="round"
data-name="Vector" strokeLinejoin="round"
d="M0,.7l.7.7L2.217,0" strokeWidth="0.6"
transform="translate(9.004 8.136)" />
fill="none"
stroke="#696969"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="0.6"
/>
<path
id="Vector-3"
data-name="Vector"
d="M0,0H14.378V14.378H0Z"
transform="translate(14.378 14.378) rotate(180)"
fill="none"
opacity="0"
/>
<g id="Group" transform="translate(1.983 1.198)">
<path <path
id="Vector-4" id="Vector-2"
data-name="Vector" data-name="Vector"
d="M10.412,1.21V2.54a2.292,2.292,0,0,1-.605,1.4l-1.054.929a2.648,2.648,0,0,0-.623-.072A2.848,2.848,0,0,0,5.284,7.638,2.807,2.807,0,0,0,5.7,9.106a2.685,2.685,0,0,0,.9.917v.2a1.336,1.336,0,0,1-.545,1.03l-.845.545a1.233,1.233,0,0,1-1.875-1.03V7.567A2.342,2.342,0,0,0,2.846,6.3l-2.3-2.42A2.041,2.041,0,0,1,0,2.666V1.27A1.229,1.229,0,0,1,1.21,0H9.2A1.215,1.215,0,0,1,10.412,1.21Z" d="M0,.7l.7.7L2.217,0"
transform="translate(9.004 8.136)"
fill="none" fill="none"
stroke="#696969" stroke="#696969"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
strokeWidth="0.6" strokeWidth="0.6"
/> />
</g> <path
</g> id="Vector-3"
</g> data-name="Vector"
</svg> d="M0,0H14.378V14.378H0Z"
<div transform="translate(14.378 14.378) rotate(180)"
className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
hover:border-red52 hover:text-red52 hover:bg-pinkF5
${
filterCheck[0]
? "border-red52 text-red52 bg-pinkF5"
: "border-gray200 text-gray-400"
}`}
onClick={(prevState) =>
setFilterCheck([
...prevState,
(filterCheck[0] = !filterCheck[0]),
])
}
>
<h3>آنلاین</h3>
{filterCheck[0] && (
<div className="flex w-full" style={{ direction: "ltr" }}>
<div className="w-4 h-4 text-white text-sm rounded-full flex justify-center items-center bg-red52">
<svg
width="37"
height="37"
viewBox="0 0 24 24"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" opacity="0"
> />
<g id="Group" transform="translate(1.983 1.198)">
<path <path
d="M7.75 12L10.58 14.83L16.25 9.17004" id="Vector-4"
stroke="#fff" data-name="Vector"
strokeWidth="1.5" d="M10.412,1.21V2.54a2.292,2.292,0,0,1-.605,1.4l-1.054.929a2.648,2.648,0,0,0-.623-.072A2.848,2.848,0,0,0,5.284,7.638,2.807,2.807,0,0,0,5.7,9.106a2.685,2.685,0,0,0,.9.917v.2a1.336,1.336,0,0,1-.545,1.03l-.845.545a1.233,1.233,0,0,1-1.875-1.03V7.567A2.342,2.342,0,0,0,2.846,6.3l-2.3-2.42A2.041,2.041,0,0,1,0,2.666V1.27A1.229,1.229,0,0,1,1.21,0H9.2A1.215,1.215,0,0,1,10.412,1.21Z"
fill="none"
stroke="#696969"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
strokeWidth="0.6"
/> />
</svg> </g>
</g>
</g>
</svg>
<div
className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
hover:border-red52 hover:text-red52 hover:bg-pinkF5
${
filterCheck[0]
? "border-red52 text-red52 bg-pinkF5"
: "border-gray200 text-gray-400"
}`}
onClick={(prevState) =>
setFilterCheck([
...prevState,
(filterCheck[0] = !filterCheck[0]),
])
}
>
<h3>آنلاین</h3>
{filterCheck[0] && (
<div className="flex w-full" style={{ direction: "ltr" }}>
<div className="w-4 h-4 text-white text-sm rounded-full flex justify-center items-center bg-red52">
<svg
width="37"
height="37"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.75 12L10.58 14.83L16.25 9.17004"
stroke="#fff"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
</div> </div>
</div>
)} )}
</div> </div>
<div <div
className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
hover:border-red52 hover:text-red52 hover:bg-pinkF5 hover:border-red52 hover:text-red52 hover:bg-pinkF5
${ ${
filterCheck[1] filterCheck[1]
? "border-red52 text-red52 bg-pinkF5" ? "border-red52 text-red52 bg-pinkF5"
: "border-gray200 text-gray-400" : "border-gray200 text-gray-400"
}`} }`}
onClick={(prevState) => onClick={(prevState) =>
setFilterCheck([ setFilterCheck([
...prevState, ...prevState,
(filterCheck[0] = !filterCheck[0]), (filterCheck[0] = !filterCheck[0]),
]) ])
} }
> >
<h3>حضوری</h3> <h3>حضوری</h3>
{filterCheck[0] && ( {filterCheck[0] && (
<div className="flex w-full" style={{ direction: "ltr" }}> <div className="flex w-full" style={{ direction: "ltr" }}>
<div className="w-4 h-4 text-white text-sm rounded-full flex justify-center items-center bg-red52"> <div className="w-4 h-4 text-white text-sm rounded-full flex justify-center items-center bg-red52">
<svg <svg
width="37" width="37"
height="37" height="37"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
d="M7.75 12L10.58 14.83L16.25 9.17004" d="M7.75 12L10.58 14.83L16.25 9.17004"
stroke="#fff" stroke="#fff"
strokeWidth="1.5" strokeWidth="1.5"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
/> />
</svg> </svg>
</div>
</div> </div>
</div>
)} )}
</div>
</div> </div>
</div> }
<div className="w-11/12 border-b border-gray-200"></div> <div className="w-11/12 border-b border-gray-200"></div>
<div <div
@ -652,6 +647,34 @@ if (!isMobile){
/> />
</Link> </Link>
))} ))}
{
gameId == 6 &&
<div className="w-full p-8 py-10 flex flex-col justify-between items-center " >
<div className="w-full text-right mb-4">
<h1 className="text-red26 font-bold">افزایش مبلغ دلخواه</h1>
<p className="text-red26 text-sm">لطفا مبلغ دلخواه خود را در کادر روبرو وارد کنید</p>
</div>
<div className="flex w-full mb-4">
<input
placeholder="12,000,000"
className="border border-red5B rounded-lg h-14 w-3/4 text-center rounded-l-none border-l-0 px-4 outline-none"
/><p className="border flex justify-center items-center border-red5B rounded-lg h-14 w-1/4 text-center rounded-r-none border-r-0 px-4">ریال</p>
</div>
<div className="flex w-full mb-4">
<p className="border flex justify-center items-center border-red52 rounded-lg h-14 w-1/5 text-center rounded-l-none border-l-0 px-10">بابت</p>
<input
placeholder="شارژ حساب"
className="border border-red52 rounded-lg h-14 w-4/5 text-center rounded-r-none border-r-0 px-4 outline-none"
/>
</div>
<button className="cursor-pointer text-blue52 border border-blueDF w-full rounded-lg font-bold text-sm px-6 h-14"
style={{background: 'rgba(211, 246, 255, 0.44)'}}>
افزودن به سبد خرید
</button>
</div>
}
</div> </div>
</div> </div>
) )

12
src/view/services/service/index.js
Unescape View File

@ -21,11 +21,11 @@ const servicePopUp = ({
</svg> </svg>
</div> </div>
</div> </div>
<div className={`flex justify-${content.id == 3 ? 'center' : 'between'} mb-20`} style={{direction: content.id == 1 ? 'rtl' : 'ltr'}} > <div className={`flex justify-${content.id === 3 ? 'center' : 'between'} mb-20`} style={{direction: content.id === 1 ? 'rtl' : 'ltr'}} >
{ content.id !== 3 && <div className={`${content.id == 1 ? 'w-1/2' : content.id == 4 ? 'w-2/3' : 'w-full'} my-4 p-2`}> { content.id !== 3 && <div className={`${content.id === 1 ? 'w-1/2' : content.id === 4 ? 'w-2/3' : 'w-full'} my-4 p-2`}>
<h1 className="text-red25 font-black text-md"> <h1 className="text-red25 font-black text-md">
{content.id == 1 ? 'کلاس آنلاین ' : content.id == 4 ? 'کتاب ' : null} {content.id === 1 ? 'کلاس آنلاین ' : content.id === 4 ? 'کتاب ' : null}
{content.title}</h1> {content.title}</h1>
<p className="text-red26 text-sm my-2"> <p className="text-red26 text-sm my-2">
@ -52,7 +52,7 @@ const servicePopUp = ({
</div>} </div>}
{ {
content.id == 3 && content.id === 3 &&
<div className="flex w-11/12 flex-col rounded-xl border border-red82OP"> <div className="flex w-11/12 flex-col rounded-xl border border-red82OP">
<h1 className="px-2 py-6 border-b border-red82OP bg-blueFF rounded-t-xl text-blueE3 text-xl font-bold">آزمون {content.title}</h1> <h1 className="px-2 py-6 border-b border-red82OP bg-blueFF rounded-t-xl text-blueE3 text-xl font-bold">آزمون {content.title}</h1>
<div className="flex w-full border-b border-red82OP text-red26 text-sm font-bold" style={{direction : 'rtl'}}> <div className="flex w-full border-b border-red82OP text-red26 text-sm font-bold" style={{direction : 'rtl'}}>
@ -87,7 +87,7 @@ const servicePopUp = ({
</div> </div>
} }
{content.id == 1 && <video className="w-1/2 rounded-md" controls> {content.id === 1 && <video className="w-1/2 rounded-md" controls>
<source <source
src={`https://dnvn.ir/api/v1/file/20540`} src={`https://dnvn.ir/api/v1/file/20540`}
type="video/mp4" type="video/mp4"
@ -95,7 +95,7 @@ const servicePopUp = ({
</video>} </video>}
{ {
content.id == 4 && <img src={content.image} className="w-1/3 rounded mt-4"/> content.id === 4 && <img src={content.image} className="w-1/3 rounded mt-4" alt="Content"/>
} }
</div> </div>
<div className="flex w-full items-center justify-start mb-8" style={{direction: 'ltr'}}> <div className="flex w-full items-center justify-start mb-8" style={{direction: 'ltr'}}>

4
tailwind.config.js
Unescape View File

@ -26,6 +26,7 @@ module.exports = {
red26: '#521326', red26: '#521326',
red25: '#752525', red25: '#752525',
red52: '#df1452', red52: '#df1452',
red5B : '#c82b5b',
red46OP: 'rgba(255, 246, 246, 0.8)', red46OP: 'rgba(255, 246, 246, 0.8)',
grayEC: '#ececec', grayEC: '#ececec',
red82OP: 'rgba(223, 20, 82, 0.08)', red82OP: 'rgba(223, 20, 82, 0.08)',
@ -39,7 +40,8 @@ module.exports = {
blue7E : '#15517e', blue7E : '#15517e',
blueFF : '#f2f9ff', blueFF : '#f2f9ff',
blueE3 : '#4c7fe3', blueE3 : '#4c7fe3',
blueDF : '#14b5df' blueDF : '#14b5df',
blue52 : '#132c52'
}, },
}, },
screens: { screens: {

Write Preview
Loading…
Cancel
Save