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
Split 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. 291
      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={`w-full ${isMobile && 'text-xl flex justify-between items-center'} text-red52 text-right px-4 font-bold`}>
<p>نتایج آزمون‌ها</p>
{
{isMobile &&
<p className="text-sm">
مشاهده بیشتر
</p>

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

@ -4,7 +4,7 @@ import moment from "jalali-moment";
import { useState } from 'react';
import avatar1 from "../../assets/img/avatar/pexels-jan-kopřiva-3525908.jpg";
import logoIcon from '../../assets/img/logo.png';
import MobileSideMenu from './MobileSideMenu';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
@ -20,13 +20,16 @@ const Header = ({
let weekdayList = ["یکشنبه", "دوشنبه", "سه‌شنبه", "چهارشنبه", 'پنج‌شنبه', 'جمعه', "شنبه"];
console.log("weekday:");
console.log(weekday);
const [menuPopup, setMenuPopup] = useState(false);
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 ?
<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">
<path d="M3 5H21" 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>
</div>
<Link to='/'> <img src={logoIcon} className="h-10"/> </Link>
<Link to='/shoppingCart'>
<div>
<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"/>
@ -44,6 +48,7 @@ const Header = ({
</svg>
</div>
</Link>
</div> :
<>
<div className="header-profile h-full flex items-center">
@ -92,6 +97,20 @@ const Header = ({
/>
</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;

291
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 { Link } from "react-router-dom";
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";
@ -15,7 +15,7 @@ import img6 from "../../assets/img/Group 1362.svg";
import ShoppingCart from "../../components/ShoppingCart";
import ServicePopUp from "./service";
import Games from "../dashboard2/Games";
import Packages from "../dashboard2/Packages";
// import Packages from "../dashboard2/Packages";
@ -34,14 +34,7 @@ const Services = ({
videos,
pushToCart,
}) => {
const [checked, setChecked] = useState([
false,
false,
false,
false,
false,
false,
]);
const [filterCheck, setFilterCheck] = useState([false, false, false, false]);
const [filter, setFilter] = useState({
search: "",
@ -61,9 +54,9 @@ const Services = ({
classMinute: "",
});
const onChange = (name, value) => {
setFilter({ ...filter, [name]: value });
};
// const onChange = (name, value) => {
// setFilter({ ...filter, [name]: value });
// };
useEffect(() => {
getList();
@ -439,144 +432,146 @@ if (!isMobile){
/>
<div className="w-11/12 border-b border-gray-200"></div>
<div className="flex items-center mx-4 my-4">
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
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)"
{
gameId !== 6 && <div className="flex items-center mx-4 my-4">
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 14.378 14.378"
>
<g id="filter-tick" transform="translate(620 700)">
<path
id="Vector"
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(7.267 5.991)"
fill="none"
stroke="#696969"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="0.6"
/>
<path
id="Vector-2"
data-name="Vector"
d="M0,.7l.7.7L2.217,0"
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)">
<g
id="vuesax_linear_filter-tick"
data-name="vuesax/linear/filter-tick"
transform="translate(-620 -700)"
>
<g id="filter-tick" transform="translate(620 700)">
<path
id="Vector"
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(7.267 5.991)"
fill="none"
stroke="#696969"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="0.6"
/>
<path
id="Vector-4"
id="Vector-2"
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"
stroke="#696969"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="0.6"
/>
</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"
<path
id="Vector-3"
data-name="Vector"
d="M0,0H14.378V14.378H0Z"
transform="translate(14.378 14.378) rotate(180)"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
opacity="0"
/>
<g id="Group" transform="translate(1.983 1.198)">
<path
d="M7.75 12L10.58 14.83L16.25 9.17004"
stroke="#fff"
strokeWidth="1.5"
id="Vector-4"
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"
fill="none"
stroke="#696969"
strokeLinecap="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
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[1]
? "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
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[1]
? "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 className="w-11/12 border-b border-gray-200"></div>
<div
@ -652,6 +647,34 @@ if (!isMobile){
/>
</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>
)

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

@ -21,11 +21,11 @@ const servicePopUp = ({
</svg>
</div>
</div>
<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`}>
<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`}>
<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>
<p className="text-red26 text-sm my-2">
@ -52,7 +52,7 @@ const servicePopUp = ({
</div>}
{
content.id == 3 &&
content.id === 3 &&
<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>
<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>
}
{content.id == 1 && <video className="w-1/2 rounded-md" controls>
{content.id === 1 && <video className="w-1/2 rounded-md" controls>
<source
src={`https://dnvn.ir/api/v1/file/20540`}
type="video/mp4"
@ -95,7 +95,7 @@ const servicePopUp = ({
</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 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',
red25: '#752525',
red52: '#df1452',
red5B : '#c82b5b',
red46OP: 'rgba(255, 246, 246, 0.8)',
grayEC: '#ececec',
red82OP: 'rgba(223, 20, 82, 0.08)',
@ -39,7 +40,8 @@ module.exports = {
blue7E : '#15517e',
blueFF : '#f2f9ff',
blueE3 : '#4c7fe3',
blueDF : '#14b5df'
blueDF : '#14b5df',
blue52 : '#132c52'
},
},
screens: {

Write Preview
Loading…
Cancel
Save