diff --git a/public/index.html b/public/index.html index aa069f2..7fb41f7 100644 --- a/public/index.html +++ b/public/index.html @@ -3,7 +3,7 @@ - + + + + + + + ); diff --git a/src/views/Home/HomeScroll/index.js b/src/views/Home/HomeScroll/index.js index fbef5b7..5826856 100644 --- a/src/views/Home/HomeScroll/index.js +++ b/src/views/Home/HomeScroll/index.js @@ -12,21 +12,21 @@ export default class HomeScroll extends Component { const { data, height, title,designType, moreText, number } = this.props; return (
-
-
+
+

{title}

-
+
{moreText} فلش
-
+
{data.map((item, i) => ( ))} diff --git a/src/views/Home/HomeScroll/index.scss b/src/views/Home/HomeScroll/index.scss index 0937597..fb7c49c 100644 --- a/src/views/Home/HomeScroll/index.scss +++ b/src/views/Home/HomeScroll/index.scss @@ -1,4 +1,59 @@ .home-scroll { + margin: 20px 0px; + width: 100%; + &__header{ + height : 50px; + width: 100%; + justify-content: space-between; + align-items: center; + padding : 0px 6px; + &--right{ + position: relative; + h1{ + font-size: calc(100vw / 60); + font-family: numeralBold; + letter-spacing: -1px; + } + span{ + position: absolute; + width: 40%; + height: 3px; + border-radius: 10px; + background-color: #7dc241; + bottom : 0px; + right: 0px; + } + } + + &--more{ + span{ + font-size: calc(100vw / 75); + color: #7dc241; + font-family: numeralMedium; + } + img{ + width: 15px; + height: 12px; + transform: rotate(90deg); + } + margin-bottom: 5px; + align-items: center; + } + } + &__list{ + height : 100%; + width : 100%; + overflow-x: scroll; + transform : translateX(0px); + a{ + margin: 0px 6px; + } + } + +} + + +.mobile-home-scroll { margin: 20px 0px; width: 100%; &__header{ @@ -50,4 +105,4 @@ } } -} +} \ No newline at end of file diff --git a/src/views/Home/HomeSlider/index.js b/src/views/Home/HomeSlider/index.js index f1330e7..9960e85 100644 --- a/src/views/Home/HomeSlider/index.js +++ b/src/views/Home/HomeSlider/index.js @@ -4,37 +4,69 @@ import Simple from "./Simple/index"; import Header from "./Header/index"; import Blog from "./Blog/index"; -import dropdown from '../../../assets/icons/dropdown.png'; +import dropdown from "../../../assets/icons/dropdown.png"; import "./index.scss"; const SimpleHeader = (props) => { return ( -
-
-

{props.title}

- -
-
- ادامه لیست - فلش -
-
+ <> + {window.innerWidth > 1000 ? ( +
+
+

{props.title}

+ +
+
+ ادامه لیست + فلش +
+
+ ) : null} + {window.innerWidth < 1000 ? ( +
+
+

{props.title}

+ +
+
+ ادامه لیست + فلش +
+
+ ) : null} + ); }; const TabHeader = (props) => { return ( -
-
-

{props.title}

- -
-
- ادامه لیست - فلش -
-
+ <> + {window.innerWidth > 1000 ? ( +
+
+

{props.title}

+ +
+
+ ادامه لیست + فلش +
+
+ ) : null} + {window.innerWidth < 1000 ? ( +
+
+

{props.title}

+ +
+
+ ادامه لیست + فلش +
+
+ ) : null} + ); }; @@ -51,8 +83,7 @@ export default class HomeSlider extends Component { } return ( <> - { - window.innerWidth > 1000 ? + {window.innerWidth > 1000 ? (
{data.map((item, i) => ( - + ))} -
: null - } - { - window.innerWidth < 1000 ? +
+ ) : null} + {window.innerWidth < 1000 ? (
{header} - {data.map((item, i) => ( - + ))} -
: null - } - +
+ ) : null} - ); } } diff --git a/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js b/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js new file mode 100644 index 0000000..8d2e4c0 --- /dev/null +++ b/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js @@ -0,0 +1,97 @@ +import React, { Component } from 'react'; +import { Link } from 'react-router-dom'; +import { toast } from 'react-toastify'; + +import HomeIcon from '@material-ui/icons/Home'; +import CloseIcon from '@material-ui/icons/Close'; +import ExitToAppIcon from '@material-ui/icons/ExitToApp'; +import SettingsIcon from '@material-ui/icons/Settings'; +import UpdateIcon from '@material-ui/icons/Update'; +import ReportIcon from '@material-ui/icons/Report'; +import ShareIcon from '@material-ui/icons/Share'; +// import { logout } from '../../../../Redux/actions/user'; +// import { connect } from 'react-redux'; + +import './NavbarDrawer.scss'; +class NavbarDrawer extends Component { + constructor(props) { + super(props); + this.state = { + links: [ + { + name: 'صفحه اصلی', + link: '/', + icon: , + toast: '', + }, + { + name: 'تنظیمات', + link: '/', + icon: , + toast: '', + }, + { + name: 'به روز رسانی', + link: '/', + icon: , + toast: '', + }, + { + name: 'همرسانی', + link: '/', + icon: , + toast: '', + }, + { + name: 'گزارش ایراد', + link: '/', + icon: , + toast: '', + }, + { + name: 'خروج', + link: '/', + icon: , + toast: '', + onClick: this.props.logout, + }, + ], + }; + } + + render() { + return ( +
+
+
+

رضا

+
منوی دسترسی سریع
+
+ +
+
+ {this.state.links.map((item, key) => ( + (item.link === '' ? toast.error(item.toast) : null))} + > +
+ {item.icon} +
{item.name}
+ {item.badge &&
{item.badge}
} +
+ + ))} + + {/*
+ نسخه نرم‌افزار 3.1 +
*/} +
+
+ ); + } +} + +export default NavbarDrawer; +// export default connect((state) => ({ isLogin: state.user.isLogin }), { logout })(NavbarDrawer); diff --git a/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss b/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss new file mode 100644 index 0000000..236fafb --- /dev/null +++ b/src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss @@ -0,0 +1,99 @@ +.MuiDrawer-paperAnchorRight { + background: linear-gradient(180deg, #00cba2 16.9%, #ffffff 17%) !important; + &::-webkit-scrollbar { + display: none; + width: 0px; + } +} +.navbar-drawer { + font-family: numeralLight; + // background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 22%) !important; + text-align: right !important; + direction: rtl; + padding: 30px 10px 10px 10px; + &__header { + height: 60px; + background-color: #00cba2; + width: 100%; + align-items: center; + justify-content: space-between; + padding: 0px 8px; + &--right { + & h1 { + margin-bottom: 0px; + font-size: 24px; + color: white; + letter-spacing: -1px; + } + & div { + color: white; + font-size: 12px; + letter-spacing: -1px; + } + } + & img { + width: 22px; + height: 22px; + position: relative; + bottom: 35px; + } + } + &__bottom { + width: 100%; + margin-top: 50px !important; + &--link { + width: 100%; + align-items: center; + padding: 15px 10px; + & img { + width: 20px; + height: 20px; + margin-left: 20px; + } + & .badge { + background-color: rgb(160, 60, 209); + margin: 5px; + } + } + &--button { + width: 100%; + height: 100px; + color: white; + padding: 15px 10px; + cursor: pointer; + & img { + width: 20px; + height: 20px; + margin-left: 20px; + } + } + &--version { + position: absolute; + bottom: 5px; + left: 0px; + width: 100%; + height: 32px; + font-size: 14px; + justify-content: center; + align-items: center; + & span { + color: #cfcfcf; + font-size: 14px; + } + } + } +} + +.navbar-drawer__bottom a { + width: 100%; + height: 100px; + color: #666; + text-decoration: none; +} +.navbar-drawer__bottom a:hover { + color: #666; +} + +.navbar-drawer__bottom--link .navbar-drawer__bottom--link div { + font-size: 16px; +} diff --git a/src/views/Home/Navbar/Mobile/index.js b/src/views/Home/Navbar/Mobile/index.js index 9fe86ae..2d97ef2 100644 --- a/src/views/Home/Navbar/Mobile/index.js +++ b/src/views/Home/Navbar/Mobile/index.js @@ -1,28 +1,91 @@ -import React, { Component } from "react"; +import React, { useState, Component } from "react"; +import { makeStyles } from "@material-ui/core/styles"; +import { SwipeableDrawer } from "@material-ui/core"; +import NavbarDrawer from "./NavbarDrawer/NavbarDrawer.js"; +import clsx from "clsx"; -import logo from '../../../../assets/icons/logoMobile.png'; -import hamburger from '../../../../assets/icons/hamburger.png'; -import ar from '../../../../assets/icons/ar.png'; -import qr from '../../../../assets/icons/qr.png'; -import search from '../../../../assets/icons/navbarSearch.png'; +import logo from "../../../../assets/icons/logoMobile.png"; +import hamburger from "../../../../assets/icons/hamburger.png"; +import ar from "../../../../assets/icons/ar.png"; +import qr from "../../../../assets/icons/qr.png"; +import search from "../../../../assets/icons/navbarSearch.png"; import "./index.scss"; -export default class MobileNavbar extends Component { - render() { - return ( - - ); - } + +const useStyles = makeStyles({ + list: { + width: window.innerWidth * 0.8, + }, + fullList: { + width: "auto", + direction: "rtl", + textAlign: "right", + }, +}); + +export default function MobileNavbar(props) { + const classes = useStyles(); + const [state, setState] = useState({ + top: false, + left: false, + bottom: false, + right: false, + searchFlag: false, + }); + + const toggleDrawer = (anchor, open) => (event) => { + if ( + event && + event.type === "keydown" && + (event.key === "Tab" || event.key === "Shift") + ) { + return; + } + + setState({ [anchor]: open }); + }; + + const list = (props, anchor) => ( +
+ +
+ ); + return ( + + ); } diff --git a/src/views/Home/index.js b/src/views/Home/index.js index 577d28a..3b15886 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -182,7 +182,7 @@ export default class Home extends Component { ], }, { - type: 'scroll', + type: window.innerWidth < 1000 ? 'scroll' : '', title : 'موضوعات', moreText: 'تمام موضوعات', design: 'subjects', @@ -485,11 +485,8 @@ export default class Home extends Component { ))}
-