reza added products and product

master
Reza_ashrafi 3 years ago
parent 11746080bd
commit 911dea17c0
  1. 2
      public/index.html
  2. 8
      src/AppRouter.js
  3. 10
      src/views/Home/HomeScroll/index.js
  4. 55
      src/views/Home/HomeScroll/index.scss
  5. 108
      src/views/Home/HomeSlider/index.js
  6. 97
      src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
  7. 99
      src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss
  8. 111
      src/views/Home/Navbar/Mobile/index.js
  9. 5
      src/views/Home/index.js
  10. 14
      src/views/Product/Comment/index.js
  11. 29
      src/views/Product/Comment/index.scss
  12. 118
      src/views/Product/index.js
  13. 142
      src/views/Product/index.scss
  14. 35
      src/views/Products/Product/index.js
  15. 64
      src/views/Products/Product/index.scss
  16. 74
      src/views/Products/Select/index.js
  17. 165
      src/views/Products/index.js
  18. 35
      src/views/Products/index.scss

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="false" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"

@ -6,6 +6,8 @@ import Home from './views/Home/index';
import Faq from './views/Faq/index'; import Faq from './views/Faq/index';
import Contact from './views/Contact/index'; import Contact from './views/Contact/index';
import About from './views/About/index'; import About from './views/About/index';
import Products from './views/Products/index';
import Product from './views/Product/index';
class AppRouter extends Component { class AppRouter extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -36,6 +38,12 @@ class AppRouter extends Component {
<Route path={'/about'}> <Route path={'/about'}>
<About /> <About />
</Route> </Route>
<Route exact path={'/products'}>
<Products />
</Route>
<Route exact path={'/products/:id'}>
<Product />
</Route>
</Switch> </Switch>
</Router> </Router>
); );

@ -12,21 +12,21 @@ export default class HomeScroll extends Component {
const { data, height, title,designType, moreText, number } = this.props; const { data, height, title,designType, moreText, number } = this.props;
return ( return (
<div <div
className="home-scroll d-flex flex-column" className="mobile-home-scroll d-flex flex-column"
style={{ height: height }} style={{ height: height }}
> >
<div className="home-scroll__header d-flex"> <div className="mobile-home-scroll__header d-flex">
<div className="home-scroll__header--right d-flex"> <div className="mobile-home-scroll__header--right d-flex">
<h1>{title}</h1> <h1>{title}</h1>
<span></span> <span></span>
</div> </div>
<div className="home-scroll__header--more d-flex"> <div className="mobile-home-scroll__header--more d-flex">
<span>{moreText}</span> <span>{moreText}</span>
<img src={dropdown} alt='فلش' /> <img src={dropdown} alt='فلش' />
</div> </div>
</div> </div>
<div className="home-scroll__list d-flex"> <div className="mobile-home-scroll__list d-flex">
{data.map((item, i) => ( {data.map((item, i) => (
<Item data={item} designType={designType} number={number} key={i} /> <Item data={item} designType={designType} number={number} key={i} />
))} ))}

@ -1,4 +1,59 @@
.home-scroll { .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; margin: 20px 0px;
width: 100%; width: 100%;
&__header{ &__header{

@ -4,37 +4,69 @@ import Simple from "./Simple/index";
import Header from "./Header/index"; import Header from "./Header/index";
import Blog from "./Blog/index"; import Blog from "./Blog/index";
import dropdown from '../../../assets/icons/dropdown.png'; import dropdown from "../../../assets/icons/dropdown.png";
import "./index.scss"; import "./index.scss";
const SimpleHeader = (props) => { const SimpleHeader = (props) => {
return ( return (
<div className="home-scroll__header d-flex"> <>
<div className="home-scroll__header--right d-flex"> {window.innerWidth > 1000 ? (
<h1>{props.title}</h1> <div className="home-scroll__header d-flex">
<span></span> <div className="home-scroll__header--right d-flex">
</div> <h1>{props.title}</h1>
<div className="home-scroll__header--more d-flex"> <span></span>
<span>ادامه لیست</span> </div>
<img src={dropdown} alt="فلش" /> <div className="home-scroll__header--more d-flex">
</div> <span>ادامه لیست</span>
</div> <img src={dropdown} alt="فلش" />
</div>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-home-scroll__header d-flex">
<div className="mobile-home-scroll__header--right d-flex">
<h1>{props.title}</h1>
<span></span>
</div>
<div className="mobile-home-scroll__header--more d-flex">
<span>ادامه لیست</span>
<img src={dropdown} alt="فلش" />
</div>
</div>
) : null}
</>
); );
}; };
const TabHeader = (props) => { const TabHeader = (props) => {
return ( return (
<div className="home-scroll__header d-flex"> <>
<div className="home-scroll__header--right d-flex"> {window.innerWidth > 1000 ? (
<h1>{props.title}</h1> <div className="home-scroll__header d-flex">
<span></span> <div className="home-scroll__header--right d-flex">
</div> <h1>{props.title}</h1>
<div className="home-scroll__header--more d-flex"> <span></span>
<span>ادامه لیست</span> </div>
<img src={dropdown} alt="فلش" /> <div className="home-scroll__header--more d-flex">
</div> <span>ادامه لیست</span>
</div> <img src={dropdown} alt="فلش" />
</div>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-home-scroll__header d-flex">
<div className="mobile-home-scroll__header--right d-flex">
<h1>{props.title}</h1>
<span></span>
</div>
<div className="mobile-home-scroll__header--more d-flex">
<span>ادامه لیست</span>
<img src={dropdown} alt="فلش" />
</div>
</div>
) : null}
</>
); );
}; };
@ -51,8 +83,7 @@ export default class HomeSlider extends Component {
} }
return ( return (
<> <>
{ {window.innerWidth > 1000 ? (
window.innerWidth > 1000 ?
<div <div
className={ className={
title ? "home-slider d-flex flex-column" : "home-slider d-flex" title ? "home-slider d-flex flex-column" : "home-slider d-flex"
@ -68,16 +99,22 @@ export default class HomeSlider extends Component {
pagination={false} pagination={false}
> >
{data.map((item, i) => ( {data.map((item, i) => (
<Item height={height} designType={designType} data={item} key={i} /> <Item
height={height}
designType={designType}
data={item}
key={i}
/>
))} ))}
</Carousel> </Carousel>
</div> : null </div>
} ) : null}
{ {window.innerWidth < 1000 ? (
window.innerWidth < 1000 ?
<div <div
className={ className={
title ? "mobile-home-slider d-flex flex-column" : "mobile-home-slider d-flex" title
? "mobile-home-slider d-flex flex-column"
: "mobile-home-slider d-flex"
} }
> >
{header} {header}
@ -90,14 +127,17 @@ export default class HomeSlider extends Component {
pagination={false} pagination={false}
> >
{data.map((item, i) => ( {data.map((item, i) => (
<Item height={height} designType={designType} data={item} key={i} /> <Item
height={height}
designType={designType}
data={item}
key={i}
/>
))} ))}
</Carousel> </Carousel>
</div> : null </div>
} ) : null}
</> </>
); );
} }
} }

@ -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: <HomeIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
},
{
name: 'تنظیمات',
link: '/',
icon: <SettingsIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
},
{
name: 'به روز رسانی',
link: '/',
icon: <UpdateIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
},
{
name: 'همرسانی',
link: '/',
icon: <ShareIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
},
{
name: 'گزارش ایراد',
link: '/',
icon: <ReportIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
},
{
name: 'خروج',
link: '/',
icon: <ExitToAppIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
onClick: this.props.logout,
},
],
};
}
render() {
return (
<div className="navbar-drawer d-flex flex-column">
<div className="navbar-drawer__header d-flex">
<div className="navbar-drawer__header--right d-fex flex-column">
<h1>رضا</h1>
<div>منوی دسترسی سریع</div>
</div>
<CloseIcon style={{ color: 'white', width: 40, height: 40 }} />
</div>
<div className="navbar-drawer__bottom mt-5">
{this.state.links.map((item, key) => (
<Link
to={item.link}
key={key}
onClick={item.onClick || (() => (item.link === '' ? toast.error(item.toast) : null))}
>
<div className="navbar-drawer__bottom--link d-flex">
{item.icon}
<div>{item.name}</div>
{item.badge && <div class="badge">{item.badge}</div>}
</div>
</Link>
))}
{/* <div className="navbar-drawer__bottom--version d-flex">
<span>نسخه نرمافزار 3.1</span>
</div> */}
</div>
</div>
);
}
}
export default NavbarDrawer;
// export default connect((state) => ({ isLogin: state.user.isLogin }), { logout })(NavbarDrawer);

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

@ -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 logo from "../../../../assets/icons/logoMobile.png";
import hamburger from '../../../../assets/icons/hamburger.png'; import hamburger from "../../../../assets/icons/hamburger.png";
import ar from '../../../../assets/icons/ar.png'; import ar from "../../../../assets/icons/ar.png";
import qr from '../../../../assets/icons/qr.png'; import qr from "../../../../assets/icons/qr.png";
import search from '../../../../assets/icons/navbarSearch.png'; import search from "../../../../assets/icons/navbarSearch.png";
import "./index.scss"; import "./index.scss";
export default class MobileNavbar extends Component {
render() { const useStyles = makeStyles({
return ( list: {
<nav className="mobile-navbar d-flex"> width: window.innerWidth * 0.8,
<div className="mobile-navbar__menu"> },
<img src={hamburger} alt="منو" /> fullList: {
</div> width: "auto",
<div className="mobile-navbar__logo"> direction: "rtl",
<img src={logo} alt="لوگو" /> textAlign: "right",
</div> },
<div className="mobile-navbar__left"> });
<img src={search} alt="جستجو" />
<img src={ar} alt="واقعیت افزوده" className="m-2" /> export default function MobileNavbar(props) {
<img src={qr} alt="کد QR" /> const classes = useStyles();
</div> const [state, setState] = useState({
</nav> 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) => (
<div
className={clsx(classes.list, {
[classes.fullList]: anchor === "top" || anchor === "bottom",
})}
role="presentation"
onClick={toggleDrawer(anchor, false)}
onKeyDown={toggleDrawer(anchor, false)}
>
<NavbarDrawer
setShare={props.setShare}
user={props.user}
logout={props.logout}
needUpdate={props.needUpdate}
/>
</div>
);
return (
<nav className="mobile-navbar d-flex">
<div
className="mobile-navbar__menu"
onClick={toggleDrawer("right", true)}
>
<img src={hamburger} alt="منو" />
</div>
<div className="mobile-navbar__logo">
<img src={logo} alt="لوگو" />
</div>
<div className="mobile-navbar__left">
<img src={search} alt="جستجو" />
<img src={ar} alt="واقعیت افزوده" className="m-2" />
<img src={qr} alt="کد QR" />
</div>
<SwipeableDrawer
anchor="right"
open={state["right"]}
onClose={toggleDrawer("right", false)}
onOpen={toggleDrawer("right", true)}
>
{list(props, "right")}
</SwipeableDrawer>
</nav>
);
} }

@ -182,7 +182,7 @@ export default class Home extends Component {
], ],
}, },
{ {
type: 'scroll', type: window.innerWidth < 1000 ? 'scroll' : '',
title : 'موضوعات', title : 'موضوعات',
moreText: 'تمام موضوعات', moreText: 'تمام موضوعات',
design: 'subjects', design: 'subjects',
@ -485,11 +485,8 @@ export default class Home extends Component {
<Identifier item={item} key={i} /> <Identifier item={item} key={i} />
))} ))}
</div> </div>
<Footer />
</> : null </> : null
} }
</> </>
); );
} }

@ -0,0 +1,14 @@
import React from "react";
import moment from "jalali-moment";
import "./index.scss";
export default function Comment(props) {
const { comment } = props;
return (
<div className="mobile-comment d-flex flex-column">
<strong>{comment.username}</strong>
<p>{comment.text}</p>
<span>{moment(comment.date).format('YYYY/MM/DD')}</span>
</div>
);
}

@ -0,0 +1,29 @@
.mobile-comment{
padding : 30px 20px 20px;
border-radius: 10px;
background-color: #fffac9;
margin-left: 10px;
min-width: calc(100vw / 1.7);
max-width: 200px;
color: #72891edc;
position: relative;
p{
text-align: justify;
font-family: numeralLight;
font-size: calc(100vw / 30);
}
strong{
font-family: numeralMedium;
margin-bottom: 5px;
font-size: calc(100vw / 25);
}
span{
position: absolute;
left: 10px;
top: 10px;
font-family: numeralLight;
font-size: calc(100vw / 30);
}
}

@ -0,0 +1,118 @@
import React, { Component } from "react";
import Footer from "../Home/Footer/index";
import Navbar from "../Home/Navbar/index";
import Comment from './Comment/index';
import book2 from "../../assets/images/book2.png";
import './index.scss';
export default class Product extends Component {
render() {
const {product} = this.props;
return (
<>
{window.innerWidth > 1000 ? (
<>
<div className="product d-flex flex-column">
<Navbar />
</div>
<Footer />
</>
) : null}
{window.innerWidth < 1000 ? (
<>
<div className="mobile-product d-flex flex-column">
<Navbar />
<header className="mobile-product__header d-flex flex-column align-items-center">
<img src={product.image} alt={product.title} />
<h1>{product.title}</h1>
<h2>{product.subTitle}</h2>
<div className="d-flex mt-3">
<button className="mobile-product__header--sampleButton">مطالعه نمومه کتاب</button>
<button className="mobile-product__header--purchase">خرید کتاب</button>
</div>
</header>
<div className="mobile-product__abstraction d-flex flex-column">
<h1>خلاصه کتاب</h1>
<p>{product.abstraction}</p>
</div>
<div className="mobile-product__modules d-flex flex-column">
<h1>این کتاب شامل چه مواردی است؟</h1>
<ul>
{product.modules.map((item, i) => (
<React.Fragment key={i}>
<Item item={item} />
</React.Fragment>
))}
</ul>
</div>
<div className="mobile-product__tips d-flex flex-column">
<h1>نکاتی که هنگام خرید باید به آن توجه داشته باشید؟</h1>
<ul>
{product.tips.map((item, i) => (
<React.Fragment key={i}>
<Item item={item} />
</React.Fragment>
))}
</ul>
</div>
<div className="mobile-product__description d-flex">
<p>{product.description}</p>
</div>
<div className="mobile-product__comments d-flex flex-column">
<h1>نظرات خریداران</h1>
<div className="mobile-product__comments--list d-flex">
{
product.comments.map((item,i) => (
<Comment comment={item} key={i} />
))
}
</div>
</div>
</div>
</>
) : null}
</>
);
}
}
Product.defaultProps = {
product: {
id: 1,
image: book2,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
date: new Date(),
abstraction: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت',
modules: [
'پک هدیه شامل یک عدد جلد سخت',
'عینک واقعیت مجازی',
'کارت گرافیک مناسب جهت اجرای بازی',
],
tips: [
'پک هدیه شامل یک عدد جلد سخت',
'عینک واقعیت مجازی',
'کارت گرافیک مناسب جهت اجرای بازی',
],
description: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشت',
comments: [
{id: 0, username: 'محمدرضا', date: new Date(), text: 'عالی بود. ممنون از سایت زیباتون', score: 4},
{id: 1, username: 'محمدرضا', date: new Date(), text: 'عالی بود. ممنون از سایت زیباتون', score: 2.5},
{id: 2, username: 'محمدرضا', date: new Date(), text: 'عالی بود. ممنون از سایت زیباتون', score: 5},
{id: 3, username: 'محمدرضا', date: new Date(), text: 'عالی بود. ممنون از سایت زیباتون', score: 3.7},
{id: 4, username: 'محمدرضا', date: new Date(), text: 'عالی بود. ممنون از سایت زیباتون', score: 2},
]
},
};
const Item = (props) => {
return(
<li>+ {props.item}</li>
);
}

@ -0,0 +1,142 @@
.mobile-product{
width: 100vw;
max-width: 1250px;
margin: 0px auto;
padding : 0px 10px 40px;
direction: rtl;
padding-top: 90px;
overflow-x: hidden;
&__header{
width: 100%;
img{
height: calc(100vh / 2.7);
}
h1{
margin-top: 10px;
font-family: numeralBold;
font-size: calc(100vw / 20);
color: #7dc241;
letter-spacing: -1px;
}
h2{
font-family: numeralMedium;
font-size: calc(100vw / 28);
color: #6f7074;
}
button{
border: 0px;
font-family: numeralMedium;
font-size: calc(100vw / 25);
padding: 15px 0px;
width: 150px;
letter-spacing: -1px;
}
&--purchase{
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
background-color: #00cc69;
color: white;
}
&--sampleButton{
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
background-color: #efefef;
color: #6f7074;
}
}
&__abstraction{
margin-top: 30px;
width: 100%;
h1{
font-family: numeralBold;
font-size: calc(100vw / 22);
color: #6f7074;
letter-spacing: -1px;
}
p{
font-family: numeralLight;
font-size: calc(100vw / 30);
color: #6f7074;
letter-spacing: -1px;
text-align: justify;
}
}
&__modules{
margin-top: 20px;
width: 100%;
padding: 20px 10px;
background-color: #baffdc2f;
border-radius: 10px;
h1{
font-family: numeralBold;
font-size: calc(100vw / 28);
color: #02733c;
letter-spacing: -1px;
}
ul{
list-style: none;
padding: 0px;
margin: 0px;
margin-top: 10px;
li{
font-family: numeralLight;
font-size: calc(100vw / 28);
color: #02733c;
letter-spacing: -1px;
}
}
}
&__tips{
margin-top: 20px;
width: 100%;
padding: 20px 10px;
background-color: #1f6fb528;
border-radius: 10px;
h1{
font-family: numeralBold;
font-size: calc(100vw / 28);
color: #074f8b;
letter-spacing: -1px;
}
ul{
list-style: none;
padding: 0px;
margin: 0px;
margin-top: 10px;
li{
font-family: numeralLight;
font-size: calc(100vw / 30);
color: #074f8b;
letter-spacing: -1px;
margin-bottom: 3px;
}
}
}
&__description{
width: 100%;
margin-top: 20px;
p{
font-family: numeralLight;
font-size: calc(100vw / 30);
color: #6f7074;
letter-spacing: -1px;
text-align: justify;
}
}
&__comments{
max-width: 100%;
margin-top: 30px;
h1{
font-family: numeralBold;
font-size: calc(100vw / 22);
color: #6f7074;
letter-spacing: -1px;
margin-bottom: 30px;
}
&--list{
width: 100vw;
overflow-x: scroll !important;
transform: translateX(10px);
}
}
}

@ -0,0 +1,35 @@
import React, { Component } from "react";
import { Link } from "react-router-dom";
import './index.scss';
export default class Product extends Component {
render() {
const { product } = this.props;
return (
<article className="mobile-products-product d-flex flex-column">
<Link to={`/products/${product.id}`}>
<img src={product.image} alt={product.title} />
<h1>{product.title}</h1>
<h2>{product.subTitle}</h2>
{product.price ? (
<div className="mobile-products-product__price d-flex justify-content-center">
{product.oldPrice ? (
<div>
<div className="mobile-products-product__price--old d-flex">
{product.oldPrice} تومان
<span></span>
</div>
</div>
) : null}
<div className="mobile-products-product__price--price">
{product.price} تومان
</div>
</div>
) : (
<div className="mobile-products-product__notAvailabe">ناموجود</div>
)}
</Link>
</article>
);
}
}

@ -0,0 +1,64 @@
.mobile-products-product{
width: calc(100% / 3);
padding: 10px;
a{
width : 100%;
text-decoration: none;
&:hover{
}
img{
width: 100%;
height: 170px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
h1{
font-family: numeralBold;
margin-top: 15px;
font-size: calc(100vw / 26);
color: #7dc241;
letter-spacing: -1px;
}
h2{
font-family: numeralLight;
margin-top: 10px;
font-size: calc(100vw / 32);
color: #6f7074;
}
}
&__notAvailabe{
font-family: numeralBold;
font-size: calc(100vw / 46);
width : 100%;
text-align: center;
color: #6f7074;
margin-top: 15px;
}
&__price{
font-size: calc(100vw / 46);
width : 100%;
margin-top: 15px;
text-align: center;
&--old{
font-family: numeralBold;
color: #6f7074;
position: relative;
margin-left: 10px;
align-items:center;
font-size: calc(100vw / 46);
span{
position: absolute;
left: 0px;
width : 100%;
height: 2px;
background-color: rgba(121, 121, 121, 0.534);
transform: rotate(-14deg);
}
}
&--price{
color: #02733c;
font-family: numeralBold;
font-size: calc(100vw / 46);
}
}
}

@ -0,0 +1,74 @@
import React from "react";
import { makeStyles, withStyles } from "@material-ui/core/styles";
import FormControl from "@material-ui/core/FormControl";
import NativeSelect from "@material-ui/core/NativeSelect";
import InputBase from "@material-ui/core/InputBase";
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
const BootstrapInput = withStyles((theme) => ({
root: {
"label + &": {
marginTop: theme.spacing(3),
},
},
input: {
borderRadius: 4,
position: "relative",
backgroundColor: theme.palette.background.paper,
border: "1px solid #a5a5a5",
fontSize: window.innerWidth > 1000 ? 16 : "calc(100vw / 30)",
color: "#a5a5a5",
// maxWidth : 70,
minWidth: window.innerWidth > 420 ? 100 : 80,
height: "35px",
padding: "5px",
transition: theme.transitions.create(["border-color", "box-shadow"]),
// Use the system font instead of the default Roboto font.
fontFamily: "numeralLight",
"&:focus": {
borderRadius: 4,
},
},
}))(InputBase);
const useStyles = makeStyles((theme) => ({
marginLeft: {
// margin: theme.spacing(1),
marginLeft: 8,
},
}));
export default function CustomizedSelects(props) {
const classes = useStyles();
console.log(props);
return (
<div style={{ position: "relative" }}>
<FormControl className={classes.marginLeft}>
<NativeSelect
id="demo-customized-select-native"
value={props.parent.state[props.name]}
onChange={(e) =>
props.parent.setState({ [props.name]: e.target.value })
}
input={<BootstrapInput />}
>
{props.options.map((item) => (
<option key={item.id} value={item.value}>
{item.value}
</option>
))}
</NativeSelect>
</FormControl>
<KeyboardArrowDownIcon
style={{
position: "absolute",
left: 5,
top: 6,
fontSize: 25,
color: "#a5a5a5",
}}
/>
</div>
);
}

@ -0,0 +1,165 @@
import React, { Component } from "react";
import FilterListIcon from "@material-ui/icons/FilterList";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import Select from "./Select/index";
import Product from "./Product/index";
import book1 from "../../assets/images/book1.png";
import book2 from "../../assets/images/book2.png";
import book3 from "../../assets/images/book3.png";
import book4 from "../../assets/images/book4.png";
import book5 from "../../assets/images/book5.png";
import "./index.scss";
export default class Products extends Component {
state = {
firstFilters: [
{ id: 0, value: "محبوب ترین" },
{ id: 1, value: "جدیدترین" },
{ id: 2, value: "ارزان ترین" },
],
dateFilters: [
{ id: 0, value: "1400" },
{ id: 1, value: "`1399" },
{ id: 2, value: "1398" },
],
degreeFilters: [
{ id: 0, value: "اول" },
{ id: 1, value: "دوم" },
{ id: 2, value: "سوم" },
],
first: "",
date: "",
degree: "",
};
render() {
const { dateFilters, degreeFilters, firstFilters } = this.state;
return (
<>
{window.innerWidth > 1000 ? (
<>
<div className="products d-flex flex-column">
<Navbar />
</div>
<Footer />
</>
) : null}
{window.innerWidth < 1000 ? (
<>
<div className="mobile-products d-flex flex-column">
<Navbar />
<div className="mobile-products__filters d-flex">
<div className="d-flex">
<Select name="first" options={firstFilters} parent={this} />
<Select name="date" options={dateFilters} parent={this} />
<Select name="degree" options={degreeFilters} parent={this} />
</div>
<FilterListIcon style={{ fontSize: 40, color: "#a5a5a5" }} />
</div>
<div className="mobile-products__list d-flex flex-wrap">
{this.props.products.map((item, i) => (
<Product product={item} key={i} />
))}
</div>
</div>
</>
) : null}
</>
);
}
}
Products.defaultProps = {
products: [
{
id: 0,
image: book1,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
date: new Date(),
},
{
id: 1,
image: book2,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
date: new Date(),
},
{
id: 2,
image: book3,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
},
{
id: 3,
image: book4,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
},
{
id: 4,
image: book5,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",
},
{
id: 5,
image: book1,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
date: new Date(),
},
{
id: 6,
image: book2,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
date: new Date(),
},
{
id: 7,
image: book3,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
date: new Date(),
},
{
id: 8,
image: book4,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
date: new Date(),
},
{
id: 9,
image: book5,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",
date: new Date(),
},
],
};

@ -0,0 +1,35 @@
.products{
width: 100vw;
max-width: 1250px;
margin: 0px auto;
padding : 0px 10px;
direction: rtl;
}
.mobile-products{
width: 100vw;
max-width: 600px;
margin: 0px auto;
padding: 0px;
direction: rtl;
overflow-x: hidden;
padding-top: 90px;
&__filters{
width: 100%;
align-items: center;
justify-content: space-between;
padding : 0px 10px;
.MuiNativeSelect-icon{
display: none;
}
.MuiNativeSelect-select.MuiNativeSelect-select{
padding-right: 5px !important;
padding-left: 20px;
}
}
&__list{
width : 100%;
padding: 10px 0px;
}
}
Loading…
Cancel
Save