parent
ca95749a25
commit
bcebb1ba33
28 changed files with 694 additions and 26 deletions
|
After Width: | Height: | Size: 88 KiB |
|
After Width: | Height: | Size: 87 KiB |
|
After Width: | Height: | Size: 39 KiB |
|
After Width: | Height: | Size: 102 KiB |
@ -0,0 +1,168 @@ |
||||
import React from "react"; |
||||
import { Link } from "react-router-dom"; |
||||
|
||||
import Navbar from "../Home/Navbar/index"; |
||||
import Footer from "../Home/Footer/index"; |
||||
|
||||
import book6 from "../../assets/images/book6.png"; |
||||
import book7 from "../../assets/images/book7.png"; |
||||
import book8 from "../../assets/images/book8.png"; |
||||
import book9 from "../../assets/images/book9.png"; |
||||
import basket from "../../assets/icons/basket.png"; |
||||
|
||||
import "./index.scss"; |
||||
|
||||
const maxDesktopSize = 1250; |
||||
const maxMobileSize = 550; |
||||
|
||||
const fontSize = { |
||||
mobile: { |
||||
h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 15, |
||||
a: window.innerHeight > maxMobileSize ? 15 : window.innerWidth / 30, |
||||
}, |
||||
}; |
||||
|
||||
export default class MyBooks extends React.Component { |
||||
render() { |
||||
const { books } = this.props; |
||||
return ( |
||||
<> |
||||
{window.innerWidth > 1000 ? ( |
||||
<> |
||||
<div className="mybooks d-flex flex-column"> |
||||
<Navbar /> |
||||
</div> |
||||
<Footer /> |
||||
</> |
||||
) : null} |
||||
{window.innerWidth < 1000 ? ( |
||||
<> |
||||
<div className="mobile-mybooks d-flex flex-column"> |
||||
<Navbar /> |
||||
<h1 style={{ fontSize: fontSize.mobile.h1 }}>کتابهای من</h1> |
||||
<div className="d-flex flex-wrap p-1"> |
||||
{books.map((item, i) => ( |
||||
<Item data={item} key={i} id={i} /> |
||||
))} |
||||
</div> |
||||
</div> |
||||
</> |
||||
) : null} |
||||
</> |
||||
); |
||||
} |
||||
} |
||||
|
||||
const Item = (props) => { |
||||
const { data, id } = props; |
||||
return ( |
||||
<div |
||||
className="mobile-mybooks__item d-flex flex-column" |
||||
style={{ |
||||
borderBottomLeftRadius: Number(id) % 2 === 1 ? 30 : 0, |
||||
borderBottomRightRadius: Number(id) % 2 === 0 ? 30 : 0, |
||||
}} |
||||
> |
||||
<img src={data.imageUrl} alt={"عکس مجصول"} /> |
||||
<div className="mobile-mybooks__item--buttons d-flex flex-column"> |
||||
<Link |
||||
style={{ |
||||
background: data.status.digital ? "#FFEE00" : "#FFFFFF", |
||||
fontSize: fontSize.mobile.a, |
||||
color: data.status.ar ? "#4D4D4F" : "#4D4D4F", |
||||
}} |
||||
> |
||||
کتاب دیجیتال |
||||
{ !data.status.digital ? <img src={basket} alt="افزودن به سبد خرید" /> : null} |
||||
</Link> |
||||
<Link |
||||
style={{ |
||||
background: data.status.ar ? "#00CC69" : "#FFFFFF", |
||||
color: data.status.ar ? "#FFFFFF" : "#4D4D4F", |
||||
fontSize: fontSize.mobile.a, |
||||
}} |
||||
> |
||||
واقعیت افزوده |
||||
{ !data.status.ar ? <img src={basket} alt="افزودن به سبد خرید" /> : null} |
||||
</Link> |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
MyBooks.defaultProps = { |
||||
books: [ |
||||
{ |
||||
id: 0, |
||||
link: "", |
||||
imageUrl: book6, |
||||
status: { |
||||
digital: true, |
||||
ar: true, |
||||
}, |
||||
}, |
||||
{ |
||||
id: 1, |
||||
link: "", |
||||
imageUrl: book7, |
||||
status: { |
||||
digital: false, |
||||
ar: true, |
||||
}, |
||||
}, |
||||
{ |
||||
id: 2, |
||||
link: "", |
||||
imageUrl: book8, |
||||
status: { |
||||
digital: true, |
||||
ar: false, |
||||
}, |
||||
}, |
||||
{ |
||||
id: 3, |
||||
link: "", |
||||
imageUrl: book9, |
||||
status: { |
||||
digital: true, |
||||
ar: true, |
||||
}, |
||||
}, |
||||
{ |
||||
id: 4, |
||||
link: "", |
||||
imageUrl: book6, |
||||
status: { |
||||
digital: true, |
||||
ar: true, |
||||
}, |
||||
}, |
||||
{ |
||||
id: 5, |
||||
link: "", |
||||
imageUrl: book7, |
||||
status: { |
||||
digital: true, |
||||
ar: true, |
||||
}, |
||||
}, |
||||
{ |
||||
id: 6, |
||||
link: "", |
||||
imageUrl: book8, |
||||
status: { |
||||
digital: true, |
||||
ar: true, |
||||
}, |
||||
}, |
||||
{ |
||||
id: 7, |
||||
link: "", |
||||
imageUrl: book9, |
||||
status: { |
||||
digital: true, |
||||
ar: true, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
@ -0,0 +1,62 @@ |
||||
.mybooks{ |
||||
width: 100vw; |
||||
max-width: 1250px; |
||||
margin: 0px auto; |
||||
padding : 0px 10px; |
||||
direction: rtl; |
||||
min-height: calc(100vh - 288px); |
||||
} |
||||
|
||||
.mobile-mybooks{ |
||||
width: 100vw; |
||||
max-width: 600px; |
||||
margin: 0px auto; |
||||
padding: 0px; |
||||
direction: rtl; |
||||
overflow-x: hidden; |
||||
padding-top: 70px; |
||||
h1{ |
||||
padding: 0px 10px; |
||||
font-family: numeralBold; |
||||
color: #6F7074; |
||||
margin-bottom: 10px; |
||||
} |
||||
&__item{ |
||||
background-color: #F2F2F2; |
||||
width: calc(100vw / 2 - 15px); |
||||
margin: 5px; |
||||
border-top-left-radius: 30px; |
||||
border-top-right-radius: 30px; |
||||
margin-bottom: 20px; |
||||
& img{ |
||||
width: 100%; |
||||
height: calc(100vh / 3.5); |
||||
border-radius: 30px; |
||||
max-height: 200px; |
||||
margin-bottom: 10px; |
||||
} |
||||
&--buttons{ |
||||
padding: 5px 9px; |
||||
a { |
||||
text-decoration: none; |
||||
width: 100%; |
||||
padding: 8px; |
||||
font-family: numeralLight; |
||||
margin-bottom: 10px; |
||||
border-radius: 10px; |
||||
text-align: center; |
||||
position: relative; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
img{ |
||||
position: absolute; |
||||
top: calc(50% - 8px); |
||||
left: 5px; |
||||
width: 20px; |
||||
height: 20px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,32 @@ |
||||
import React from 'react'; |
||||
import Breadcrumbs from '@material-ui/core/Breadcrumbs'; |
||||
import {Link} from 'react-router-dom'; |
||||
|
||||
import './index.scss'; |
||||
|
||||
function handleClick(event) { |
||||
event.preventDefault(); |
||||
console.info('You clicked a breadcrumb.'); |
||||
} |
||||
|
||||
const maxDesktopSize = 1250; |
||||
const maxMobileSize = 650; |
||||
|
||||
const fontSize = { |
||||
desktop: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, |
||||
mobile : window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 25, |
||||
}; |
||||
|
||||
export default function ActiveLastBreadcrumb() { |
||||
return ( |
||||
<Breadcrumbs aria-label="breadcrumb"> |
||||
<Link style={{ fontSize: window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile}} to={'/'} onClick={handleClick}> |
||||
صفحه اصلی |
||||
</Link> |
||||
<Link style={{ fontSize: window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile, color: '#00CC69'}} to="/products" onClick={handleClick}> |
||||
محصولات |
||||
</Link> |
||||
</Breadcrumbs> |
||||
); |
||||
} |
||||
|
||||
@ -0,0 +1,8 @@ |
||||
.MuiBreadcrumbs-li{ |
||||
a { |
||||
text-decoration: none; |
||||
font-family: numeralLight; |
||||
color: #6F7074; |
||||
letter-spacing: -1px; |
||||
} |
||||
} |
||||
@ -0,0 +1,40 @@ |
||||
import React from 'react'; |
||||
import CloseIcon from '@material-ui/icons/Close'; |
||||
|
||||
import './index.scss'; |
||||
|
||||
const maxDesktopSize = 1250; |
||||
|
||||
const fontSize = { |
||||
h2 : window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 85, |
||||
} |
||||
export default class AppliedFilters extends React.Component { |
||||
render() { |
||||
const {data} = this.props; |
||||
return( |
||||
<div className="products-filters-applied d-flex flex-column"> |
||||
<header className="products-filters-applied__header d-flex align-items-center"> |
||||
<span></span> |
||||
<h2 style={{ fontSize : fontSize.h2 }}>فیلترهای اعمال شده</h2> |
||||
</header> |
||||
<div className="products-filters-applied__items d-flex flex-wrap"> |
||||
{ |
||||
data.map((item,i) => ( |
||||
<Item data={item} key={i} /> |
||||
)) |
||||
} |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
const Item = (props) => { |
||||
const {data} = props; |
||||
return( |
||||
<button className="d-flex align-items-center"> |
||||
<span>{data.name}</span> |
||||
<CloseIcon style={{ fontSize: 20 }} /> |
||||
</button> |
||||
); |
||||
} |
||||
@ -0,0 +1,27 @@ |
||||
.products-filters-applied { |
||||
width: 100%; |
||||
margin-bottom: 20px; |
||||
&__header { |
||||
h2 { |
||||
font-family: numeralBold; |
||||
margin: 0px; |
||||
color: #373737; |
||||
} |
||||
|
||||
span { |
||||
width: 3px; |
||||
border-radius: 100px; |
||||
background-color: #17dfff; |
||||
height: 100%; |
||||
margin-left: 5px; |
||||
min-height: 20px; |
||||
} |
||||
} |
||||
&__items { |
||||
margin-top: 10px; |
||||
box-shadow: 0px 0px 10px #70707028; |
||||
border-radius: 8px; |
||||
min-height: 30px; |
||||
padding: 10px 5px; |
||||
} |
||||
} |
||||
@ -0,0 +1,49 @@ |
||||
import React from 'react'; |
||||
import FormControlLabel from '@material-ui/core/FormControlLabel'; |
||||
import Checkbox from '@material-ui/core/Checkbox'; |
||||
|
||||
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; |
||||
import CheckBoxIcon from '@material-ui/icons/CheckBox'; |
||||
import CloseIcon from '@material-ui/icons/Close'; |
||||
|
||||
import './index.scss'; |
||||
|
||||
const maxDesktopSize = 1250; |
||||
|
||||
const fontSize = { |
||||
h2 : window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 85, |
||||
strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, |
||||
} |
||||
export default class TypicalFilters extends React.Component { |
||||
render() { |
||||
const {data, title, theme} = this.props; |
||||
return( |
||||
<div className="products-filters-typical d-flex flex-column"> |
||||
<header className="products-filters-typical__header d-flex align-items-center"> |
||||
<span style={{ background : theme }}></span> |
||||
<h2 style={{ fontSize : fontSize.h2 }}>{title}</h2> |
||||
</header> |
||||
<div className="products-filters-typical__items d-flex flex-column"> |
||||
{ |
||||
data.map((item,i) => ( |
||||
<Item data={item} key={i} /> |
||||
)) |
||||
} |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
const Item = (props) => { |
||||
const {data} = props; |
||||
return( |
||||
<div className="d-flex align-items-center mt-2"> |
||||
<FormControlLabel |
||||
control={<Checkbox icon={<CheckBoxOutlineBlankIcon style={{ color: '#EAEAEA' }} />} checkedIcon={<CheckBoxIcon style={{ color: '#00CC69' }} />} name="checkedH" />} |
||||
label="" |
||||
/> |
||||
<strong style={{ fontSize: fontSize.strong }}>{data}</strong> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,39 @@ |
||||
.products-filters-typical{ |
||||
width: 100%; |
||||
margin-bottom: 20px; |
||||
&__header{ |
||||
h2{ |
||||
font-family: numeralBold; |
||||
margin: 0px; |
||||
color: #373737; |
||||
} |
||||
|
||||
span{ |
||||
width: 4px; |
||||
border-radius: 4px; |
||||
height: 100%; |
||||
margin-left: 5px; |
||||
min-height: 20px; |
||||
} |
||||
} |
||||
&__items { |
||||
margin-top: 10px; |
||||
box-shadow: 0px 0px 10px #70707028; |
||||
border-radius: 8px; |
||||
min-height: 30px; |
||||
padding: 10px 5px; |
||||
.MuiFormControlLabel-root{ |
||||
margin: 0px; |
||||
} |
||||
.MuiCheckbox-root{ |
||||
padding: 0px; |
||||
|
||||
} |
||||
strong{ |
||||
font-weight: 100; |
||||
color: #6F7074; |
||||
font-family: numeralLight; |
||||
margin-right: 10px; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,21 @@ |
||||
import React from 'react'; |
||||
|
||||
import AppliedFiltesrs from './AppliedFilters/index'; |
||||
import TypicalFilters from './TypicalFilters/index'; |
||||
|
||||
import './index.scss'; |
||||
export default class Filtesrs extends React.Component { |
||||
render() { |
||||
const {parent} = this.props; |
||||
return( |
||||
<div className="products-filters d-flex flex-column"> |
||||
{ |
||||
parent.state.selectedFilters.length !== 0 ? |
||||
<AppliedFiltesrs data={parent.state.selectedFilters} />: null |
||||
} |
||||
<TypicalFilters data={parent.props.subjects} title="دسته بندی موضوعی" theme="#D7FF17" /> |
||||
<TypicalFilters data={parent.props.levels} title="پایه تحصیلی" theme="#FF8917" /> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,3 @@ |
||||
.products-filters{ |
||||
flex: 1; |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
import React from 'react'; |
||||
import Product from '../Product/index'; |
||||
|
||||
import './index.scss'; |
||||
export default class List extends React.Component { |
||||
render() { |
||||
const {parent} = this.props; |
||||
return( |
||||
<div className="products-list d-flex flex-wrap"> |
||||
{ |
||||
parent.props.products.map((item,i) => ( |
||||
<Product product={item} key={i} /> |
||||
)) |
||||
} |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,3 @@ |
||||
.products-list{ |
||||
padding: 20px 20px; |
||||
} |
||||
@ -0,0 +1,36 @@ |
||||
import React from 'react'; |
||||
import SortIcon from '@material-ui/icons/Sort'; |
||||
|
||||
import './index.scss'; |
||||
|
||||
const maxDesktopSize = 1250; |
||||
|
||||
const fontSize = { |
||||
span : window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90, |
||||
li: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95, |
||||
} |
||||
|
||||
export default class Sort extends React.Component { |
||||
render() { |
||||
const {parent} = this.props; |
||||
return( |
||||
<div className="products-sort d-flex align-items-center"> |
||||
<SortIcon style={{ fontSize: 30, color : '#A5A5A5', marginLeft : 10}} /> |
||||
<span style={{ fontSize: fontSize.span }}>مرتب سازی بر اساس</span> |
||||
<ul className="d-flex justify-content-between align-items-center mr-2"> |
||||
{ |
||||
parent.props.sortItems.map((item, i) => ( |
||||
<Item data={item} key={i} /> |
||||
))
|
||||
} |
||||
</ul> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
const Item = (props) => { |
||||
return( |
||||
<li style={{ fontSize: fontSize.li }}>{props.data}</li> |
||||
); |
||||
} |
||||
@ -0,0 +1,21 @@ |
||||
.products-sort{ |
||||
padding: 5px 15px; |
||||
box-shadow: 0px 0px 10px #70707028; |
||||
border-radius: 8px; |
||||
span{ |
||||
font-family: numeralLight; |
||||
color: #373737; |
||||
} |
||||
ul{ |
||||
padding: 0px; |
||||
margin: 0px; |
||||
list-style: none; |
||||
flex: 1; |
||||
padding-right: 60px; |
||||
li{ |
||||
font-family: numeralLight; |
||||
color: #373737; |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue