diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..0a77011 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "editor.tabSize": 2 +} \ No newline at end of file diff --git a/src/components/BreadCrumbs/index.scss b/src/components/BreadCrumbs/index.scss index e10f243..79337c9 100644 --- a/src/components/BreadCrumbs/index.scss +++ b/src/components/BreadCrumbs/index.scss @@ -2,7 +2,43 @@ a { text-decoration: none; font-family: numeralLight; - color: #6F7074; + color: #aaa; letter-spacing: -1px; } } + +.MuiBreadcrumbs-separator{ + color: #aaa; +} +@media screen and (min-width: 1441px) { + .MuiBreadcrumbs-li{ + a { + font-size: 14px; + } + } +} + +@media screen and (min-width: 1008px) and (max-width: 1440px) { + .MuiBreadcrumbs-li{ + a { + font-size: calc(100vw / 100); + } + } +} + +@media screen and (min-width: 641px) and (max-width: 1007px) { + .MuiBreadcrumbs-li{ + a { + font-size: calc(100vw / 55); + } + } +} + +@media screen and (max-width: 640px) { + .MuiBreadcrumbs-li{ + a { + font-size: calc(100vw / 35); + } + } +} + diff --git a/src/components/Menu/index.js b/src/components/Menu/index.js index 96d4bf7..eeca07f 100644 --- a/src/components/Menu/index.js +++ b/src/components/Menu/index.js @@ -1,9 +1,12 @@ import * as React from 'react'; -import { styled, alpha } from '@mui/material/styles'; +import {Link} from 'react-router-dom'; +import { styled } from '@mui/material/styles'; import Button from '@mui/material/Button'; import Menu from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; +import {connect} from 'react-redux'; +import { publicApi } from '../../redux/actions'; const StyledMenu = styled((props) => ( ( ))(({ theme }) => ({ })); -export default function CustomizedMenus({items}) { +function CustomizedMenus({items, selectMenu}) { const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); const handleClick = (event) => { setAnchorEl(event.currentTarget); }; - const handleClose = () => { + const handleClose = (value) => { setAnchorEl(null); + selectMenu(value); }; return ( @@ -56,12 +60,18 @@ export default function CustomizedMenus({items}) { > { items.map((item, i) => ( - - {item.name} - + handleClose(item.value)} disableRipple> + + {item.name} + + )) } ); -} \ No newline at end of file +} + +export default connect((state) => ({ + +}), {selectMenu: publicApi.selectMenu,})(CustomizedMenus) \ No newline at end of file diff --git a/src/components/NavbarDrawer/NavbarDrawer.tsx b/src/components/NavbarDrawer/NavbarDrawer.tsx index 96a4027..e076178 100644 --- a/src/components/NavbarDrawer/NavbarDrawer.tsx +++ b/src/components/NavbarDrawer/NavbarDrawer.tsx @@ -231,7 +231,7 @@ const NavbarDrawer = ({ status, logout }: any) => { >
اضافه کردن کاربر
{/* {item.message &&
{item.message}
} */} diff --git a/src/custom.scss b/src/custom.scss index a91917d..41fcdda 100644 --- a/src/custom.scss +++ b/src/custom.scss @@ -10,7 +10,7 @@ display: flex; } -p{ +p { line-height: 1.5; } @@ -221,42 +221,47 @@ p{ display: none !important; } - //JOL PLayer -.tooltip{ +.tooltip { opacity: 1 !important; - transform : translateY(-2px) !important; + transform: translateY(-2px) !important; } - //Menu -.MuiButton-root{ +.MuiButton-root { font-family: numeralLight !important; color: white !important; - span{ + span { margin-left: 0px !important; margin-right: 5px; } } -.MuiPaper-root{ - .MuiList-root{ +.MuiPaper-root { + .MuiList-root { display: flex !important; width: 200px !important; flex-wrap: wrap !important; - li{ + li { width: 100px; display: flex !important; justify-content: center !important; text-align: center !important; padding: 10px 0px !important; - &:nth-child(even){ + a{ + color: white; + width: 100%; + height: 100%; + } + &:nth-child(even) { border-right: 1px solid #555 !important; } } } } + + @media screen and (min-width: 1441px) { .submit { font-size: 16px; @@ -277,6 +282,13 @@ p{ .MuiOutlinedInput-input { font-size: 20px; } + .MuiPaper-root { + .MuiList-root { + li { + font-size: 13px !important; + } + } + } } @media screen and (min-width: 1008px) and (max-width: 1440px) { diff --git a/src/redux/actions-type/public.tsx b/src/redux/actions-type/public.tsx index d9c06d0..328e647 100644 --- a/src/redux/actions-type/public.tsx +++ b/src/redux/actions-type/public.tsx @@ -33,8 +33,13 @@ interface getCity { data: any; } -interface getContactData{ - type : 'public/contact' +interface getContactData { + type: "public/contact"; + data: any; +} + +interface selectMenu { + type: "public/selectMenu"; data: any; } @@ -60,7 +65,8 @@ type PublicAction = | setFaqActive | getProvince | getCity - |getContactData + | getContactData + | selectMenu | loading | error; diff --git a/src/redux/actions/public.tsx b/src/redux/actions/public.tsx index 46a50cd..c740924 100644 --- a/src/redux/actions/public.tsx +++ b/src/redux/actions/public.tsx @@ -27,6 +27,8 @@ const publicApi = { (data = {}) => async (dispatch: Dispatch) => await proxy.get("public/city", data, { dispatch }), + selectMenu: (data: Object) => async (dispatch: Dispatch) => + await dispatch({ type: "public/selectMenu", data: data }), }; export default publicApi; diff --git a/src/redux/reducers/public.tsx b/src/redux/reducers/public.tsx index 2ba892d..9c27170 100644 --- a/src/redux/reducers/public.tsx +++ b/src/redux/reducers/public.tsx @@ -26,6 +26,7 @@ const initialState = { name: "برنامه نویسی", }, ], + selectedMenu : null, contactData: null }; @@ -172,6 +173,8 @@ export default function publicApi(state = initialState, action: PublicAction) { return { ...state, loading: false, error: null, province: data }; case "public/city": return { ...state, loading: false, error: null, city: data }; + case "public/selectMenu": + return { ...state, loading: false, error: null, selectedMenu : data }; case "loading": return { ...state, loading: true }; case "error": diff --git a/src/router.js b/src/router.js index c67647c..7b2b8a0 100644 --- a/src/router.js +++ b/src/router.js @@ -3,19 +3,19 @@ import { BrowserRouter as Router, Route, Switch, - Redirect, } from "react-router-dom"; import { connect } from "react-redux"; -import Auth from "./views/Auth/index"; -import Home from "./views/Home/index"; -import Course from "./views/Course/index"; -import VideoTube from "./views/VideoTube/index"; -import Subscription from "./views/Subscription/index"; -import Contact from "./views/Contact/index"; -import Faq from "./views/Faq/index"; -import PrivateRouter from "./components/PrivateRouter/index"; -import proxy from "./redux/proxy"; +import Auth from "./views/Auth"; +import Home from "./views/Home"; +import Course from "./views/Course"; +import VideoTube from "./views/VideoTube"; +import Subscription from "./views/Subscription"; +import Contact from "./views/Contact"; +import Faq from "./views/Faq"; +import PrivateRouter from "./components/PrivateRouter"; +import Courses from "./views/Courses"; +// import proxy from "./redux/proxy"; function router({ status }) { const home = ( @@ -35,6 +35,9 @@ function router({ status }) { + + + { + const pathname = window.location.pathname; + return pathname.slice(pathname.lastIndexOf('/') + 1, pathname.length); + } +} + +const _location = new location(); + +export default _location; diff --git a/src/views/Auth/Profile/Birthdate/index.scss b/src/views/Auth/Profile/Birthdate/index.scss index 742adc0..531b6b7 100644 --- a/src/views/Auth/Profile/Birthdate/index.scss +++ b/src/views/Auth/Profile/Birthdate/index.scss @@ -2,7 +2,7 @@ width: 100%; border-radius: 10px; padding: 0px 10px; - border: 1px solid #777; + border: 1px solid #333; margin: 10px 0px; label { width: fit-content; diff --git a/src/views/Auth/Profile/Document/index.scss b/src/views/Auth/Profile/Document/index.scss index 42de1ef..53624d2 100644 --- a/src/views/Auth/Profile/Document/index.scss +++ b/src/views/Auth/Profile/Document/index.scss @@ -4,7 +4,7 @@ width: 100%; height: 50px; border-radius: 10px; - border: 2px dashed #777; + border: 2px dashed #333; position: relative; input { width: 100%; diff --git a/src/views/Auth/Profile/GenderSwitch/index.scss b/src/views/Auth/Profile/GenderSwitch/index.scss index 0060721..a95abd0 100644 --- a/src/views/Auth/Profile/GenderSwitch/index.scss +++ b/src/views/Auth/Profile/GenderSwitch/index.scss @@ -10,7 +10,7 @@ cursor: pointer; color: #ccc; background-color: black; - border: 1px solid #777; + border: 1px solid #333; } &__active{ background-color: #84de56 !important; diff --git a/src/views/Auth/Profile/index.scss b/src/views/Auth/Profile/index.scss index 6d2b1cc..3f5a81c 100644 --- a/src/views/Auth/Profile/index.scss +++ b/src/views/Auth/Profile/index.scss @@ -24,7 +24,7 @@ } &__box { width: 100%; - border: 1px solid #777; + border: 1px solid #333; border-radius: 20px; &--section { width: 45%; diff --git a/src/views/Courses/Course/index.scss b/src/views/Courses/Course/index.scss new file mode 100644 index 0000000..3dd0a3b --- /dev/null +++ b/src/views/Courses/Course/index.scss @@ -0,0 +1,117 @@ +.courses-course { + margin-top: 40px; + padding: 10px; + border-bottom: 1px solid #212121; + transition: all 0.5s; + * { + transition: all 0.5s; + color: #aaa; + } + img { + border-radius: 10px; + } + h1 { + transition: all 0.5s; + margin-bottom: 10px; + } + p { + } +} + +@media screen and (min-width: 1441px) { + .courses-course { + &:hover { + background-color: #dddddd21; + border-radius: 10px; + box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6); + img { + transform: translateX(10px) scale(1.14); + } + h1 { + color: #84de56; + } + p { + color: #cececefa; + } + } + img { + height: 150px; + } + h1 { + font-size: 20px; + } + p { + font-size: 13px; + width: 80%; + } + } +} + +@media screen and (min-width: 1008px) and (max-width: 1400px) { + .courses-course { + &:hover { + background-color: #dddddd21; + border-radius: 10px; + box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6); + img { + transform: translateX(10px) scale(1.14); + } + h1 { + color: #84de56; + } + p { + color: #cececefa; + } + } + img { + height: 150px; + } + h1 { + font-size: calc(100vw / 70); + } + p { + font-size: calc(100vw / 100); + width: 80%; + } + } +} + +@media screen and (min-width : 641px) and (max-width: 1007px) { + .courses-course { + margin-top: 20px; + background-color: #aaaaaa21; + border-radius: 10px; + box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6); + img { + max-height: 120px; + } + h1 { + font-size: calc(100vw / 45); + color: #84de56; + } + p { + font-size: calc(100vw / 65); + width: 80%; + } + } +} + +@media screen and (max-width: 640px) { + .courses-course { + margin-top: 20px; + background-color: #aaaaaa21; + border-radius: 10px; + box-shadow: 0px 0px 10px rgba(146, 146, 146, 0.6); + img { + max-height: 120px; + } + h1 { + font-size: calc(100vw / 24); + color: #84de56; + } + p { + font-size: calc(100vw / 40); + width: 80%; + } + } +} diff --git a/src/views/Courses/Course/index.tsx b/src/views/Courses/Course/index.tsx new file mode 100644 index 0000000..9bf09aa --- /dev/null +++ b/src/views/Courses/Course/index.tsx @@ -0,0 +1,19 @@ +import React, { useState } from "react"; +import "./index.scss"; +import { Link } from "react-router-dom"; +import location from "../../../util/location"; + +export default function Course({ data }: any) { + return ( + + +
+

{data.name}

+

+ لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده + از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و +

+
+ + ); +} diff --git a/src/views/Courses/index.scss b/src/views/Courses/index.scss new file mode 100644 index 0000000..fbc0508 --- /dev/null +++ b/src/views/Courses/index.scss @@ -0,0 +1,43 @@ +.courses { + main { + margin-top: 30px; + header { + } + } +} + +@media screen and (min-width: 1441px) { + .courses { + main { + max-width: 700px; + } + } +} + +@media screen and (min-width: 1008px) and (max-width: 1400px) { + .courses { + main { + max-width: 700px; + } + } +} + +@media screen and (min-width: 641px) and (max-width: 1007px) { + .courses { + main { + max-width: 500px; + margin-top: 10px; + } + } +} + +@media screen and (max-width: 640px) { + .courses { + main { + max-width: 500px; + margin-top: 10px; + padding: 0px 10px; + } + } +} + diff --git a/src/views/Courses/index.tsx b/src/views/Courses/index.tsx new file mode 100644 index 0000000..80770bb --- /dev/null +++ b/src/views/Courses/index.tsx @@ -0,0 +1,45 @@ +import React, { useState, useEffect } from "react"; +import Navbar from "../../components/Navbar"; +import Footer from "../../views/Home/Footer"; +import "./index.scss"; +import { book } from "../../redux/actions"; +import { connect } from "react-redux"; +import location from "../../util/location"; +import Course from "./Course"; +import BreadCrumbs from "../../components/BreadCrumbs"; + +function Courses({ getList, list,selectedMenu }: any) { + const [links, setLinks] = useState([ + { link: "/", name: "صفحه اصلی" }, + { link: "/courses", name: "دوره‌ها" }, + { link: "/courses/2", name: "نام کتاب" }, + ]); + useEffect(() => { + getList(); + }, []); + + return ( +
+ +
+
+ +
+ {list + .filter((item: any) => item.gradeId === selectedMenu) + .map((item: any, i: any) => ( + + ))} +
+
+
+ ); +} + +export default connect( + (state: any) => ({ + list: state.book.list, + selectedMenu : state.publicApi.selectedMenu, + }), + { getList: book.list } +)(Courses); diff --git a/src/views/Home/Blogs/Blog/index.scss b/src/views/Home/Blogs/Blog/index.scss index 86c190c..e9c1201 100644 --- a/src/views/Home/Blogs/Blog/index.scss +++ b/src/views/Home/Blogs/Blog/index.scss @@ -7,6 +7,7 @@ border-radius: 10px; padding-bottom: 15px; position: relative; + transition: all 0.3s; &__cover { position: absolute; left: 0px; @@ -39,6 +40,9 @@ .home-blogs-blog { height: 250px; width: 100%; + &:hover{ + transform : scale(0.9); + } h2 { font-size: 20px; } diff --git a/src/views/Home/Blogs/index.tsx b/src/views/Home/Blogs/index.tsx index 5c9e794..128b76c 100644 --- a/src/views/Home/Blogs/index.tsx +++ b/src/views/Home/Blogs/index.tsx @@ -19,7 +19,6 @@ function Blogs(props: any) { return 1; } }; - const { number, blogs } = props; const list = useSelector((state: any) => state.blog.list); useEffect(() => { props.getList(); diff --git a/src/views/Home/Books/Book/index.scss b/src/views/Home/Books/Book/index.scss index e6ab6a0..cc37e47 100644 --- a/src/views/Home/Books/Book/index.scss +++ b/src/views/Home/Books/Book/index.scss @@ -1,7 +1,9 @@ .home-books-book{ - padding: 0px 10px; cursor: pointer; - border-bottom: 1px solid #424242; + transition: all 0.5s; + border: 1px solid black; + padding: 10px; + border-radius: 10px; img{ border-radius: 8px; } @@ -33,6 +35,10 @@ @media screen and (min-width : 1441px){ .home-books-book{ + &:hover{ + transform : scale(0.95); + border: 1px solid #84de56; + } img{ height: 300px; } diff --git a/src/views/Home/Courses/Course/index.scss b/src/views/Home/Courses/Course/index.scss index 9b35c7e..7af0ab4 100644 --- a/src/views/Home/Courses/Course/index.scss +++ b/src/views/Home/Courses/Course/index.scss @@ -1,6 +1,9 @@ .home-courses-course{ - padding: 0px 10px; + padding: 10px 10px; cursor: pointer; + transition: all 0.5s; + border: 1px solid black; + border-radius: 10px; img{ border-radius: 8px; margin: 0px auto; @@ -32,6 +35,10 @@ @media screen and (min-width : 1441px){ .home-courses-course{ + &:hover{ + border: 1px solid #84de56; + transform: scale(0.95); + } img{ height: 300px; } diff --git a/src/views/Home/Courses/index.scss b/src/views/Home/Courses/index.scss index 8a20ab3..15466fa 100644 --- a/src/views/Home/Courses/index.scss +++ b/src/views/Home/Courses/index.scss @@ -1,8 +1,7 @@ .home-courses { width: 100%; margin: 0px auto; - border-top: 1px solid #424242; - border-bottom: 1px solid #424242; + border-top: 1px solid #333; border-bottom: 1px solid #333; position: relative; margin-top: 30px; padding: 20px 10px 50px; diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx index 2505bd3..beebbb7 100644 --- a/src/views/Home/index.tsx +++ b/src/views/Home/index.tsx @@ -65,7 +65,7 @@ function Home({ - +
@@ -162,34 +162,4 @@ Home.defaultProps = { imageUrl: header, }, ], - blogs: [ - { - id: 0, - name: "فیزیک کوانتوم و موارد مشابه", - text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", - imageUrl: blog1, - tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"], - }, - { - id: 1, - name: "فیزیک کوانتوم و موارد مشابه", - text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", - imageUrl: blog2, - tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"], - }, - { - id: 2, - name: "فیزیک کوانتوم و موارد مشابه", - text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", - imageUrl: blog3, - tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"], - }, - { - id: 3, - name: "فیزیک کوانتوم و موارد مشابه", - text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", - imageUrl: blog1, - tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"], - }, - ], };