parent
73f4f7ad3d
commit
e6ced3736d
21 changed files with 520 additions and 207 deletions
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,45 @@ |
||||
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(props) { |
||||
const { name } = props; |
||||
return ( |
||||
<Breadcrumbs aria-label="breadcrumb"> |
||||
<Link |
||||
style={{ |
||||
fontSize: |
||||
window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile, |
||||
}} |
||||
to={"/"} |
||||
> |
||||
صفحه اصلی |
||||
</Link> |
||||
<Link |
||||
style={{ |
||||
fontSize: |
||||
window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile, |
||||
color: "#00CC69", |
||||
}} |
||||
to={"/download"} |
||||
> |
||||
دریافت افزونه واقعیت افزوده |
||||
</Link> |
||||
</Breadcrumbs> |
||||
); |
||||
} |
||||
@ -0,0 +1,8 @@ |
||||
.MuiBreadcrumbs-li{ |
||||
a { |
||||
text-decoration: none; |
||||
font-family: numeralLight; |
||||
color: #6F7074; |
||||
letter-spacing: -1px; |
||||
} |
||||
} |
||||
@ -0,0 +1,63 @@ |
||||
import React, { Component } from "react"; |
||||
|
||||
const maxMobileSize = 550; |
||||
const maxDesktopSize = 1250; |
||||
|
||||
const fontSize = { |
||||
mobile: { |
||||
h1: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 26, |
||||
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 34, |
||||
div: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 32, |
||||
}, |
||||
desktop: { |
||||
h1: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 70, |
||||
div: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85, |
||||
old: window.innerWidth > maxDesktopSize ? 9 : window.innerWidth / 120, |
||||
}, |
||||
}; |
||||
const grades = [ |
||||
"پیش دبستان", |
||||
"اول", |
||||
"دوم", |
||||
"سوم", |
||||
"چهارم", |
||||
"پنجم", |
||||
"ششم", |
||||
"هفتم", |
||||
"هشتم", |
||||
"نهم", |
||||
"دهم", |
||||
"یازدهم", |
||||
"دوازدهم", |
||||
]; |
||||
export default class Item extends Component { |
||||
render() { |
||||
const { data } = this.props; |
||||
console.log({ data }); |
||||
return ( |
||||
<> |
||||
{window.innerWidth < 1000 ? ( |
||||
<a |
||||
href={`https://ar.dnvn.ir/lunch?id=${data.id}`} |
||||
target="_blank" |
||||
className="mobile-products-product d-flex flex-column" |
||||
> |
||||
<img |
||||
src={`https://dnvn.ir/api/v1/file/${data["product.book.fileIds"]}`} |
||||
alt={data.title} |
||||
/> |
||||
<div className="mobile-products-product__info d-flex flex-column"> |
||||
<h1 style={{ fontSize: fontSize.mobile.h1 }}> |
||||
{data["product.book.name"]}{" "} |
||||
{grades[+data["product.book.gradeId"]]} |
||||
</h1> |
||||
</div> |
||||
</a> |
||||
) : null} |
||||
{window.innerWidth > 1000 ? ( |
||||
<article className="products-product d-flex flex-column align-items"></article> |
||||
) : null} |
||||
</> |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,93 @@ |
||||
import React, { Component } from "react"; |
||||
import { connect } from "react-redux"; |
||||
import { userProduct } from "~/Redux/actions"; |
||||
import { Link } from "react-router-dom"; |
||||
import Navbar from "../Home/Navbar/index"; |
||||
import Footer from "../Home/Footer/index"; |
||||
import Loader from "~/components/Loader/index"; |
||||
import Item from "./Item/index"; |
||||
import BreadCrumbs from "./BreadCrumb/index"; |
||||
|
||||
import "./index.scss"; |
||||
|
||||
const maxDesktopSize = 1250; |
||||
const maxMobileSize = 550; |
||||
|
||||
const fontSize = { |
||||
mobile: { |
||||
h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 20, |
||||
a: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 30, |
||||
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30, |
||||
}, |
||||
desktop: { |
||||
h1: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70, |
||||
a: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 85, |
||||
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 90, |
||||
}, |
||||
}; |
||||
|
||||
class AR extends Component { |
||||
componentDidMount() { |
||||
window.scrollTo(0, 0); |
||||
this.props.getMyList({ isActive: 1, productType: 3 }); |
||||
} |
||||
|
||||
render() { |
||||
const { arList, loading } = this.props; |
||||
|
||||
return ( |
||||
<div className="ar d-flex flex-column"> |
||||
<Navbar page="home" /> |
||||
{window.innerWidth > 1000 ? <BreadCrumbs /> : null} |
||||
<div |
||||
className="mybooks__list--empty d-flex flex-column justify-content-center align-items-center" |
||||
style={{ width: "95vw" }} |
||||
> |
||||
<div |
||||
class="mobile-home-static__flex--right d-flex flex-column" |
||||
style={{ padding: "40px 10px" }} |
||||
> |
||||
<img |
||||
src="https://dnvn.ir/api/v1/file/1851" |
||||
alt="واقعیت افزوده" |
||||
width="150" |
||||
/> |
||||
</div> |
||||
|
||||
<p |
||||
style={{ |
||||
textAlign: "center", |
||||
fontSize: |
||||
window.innerWidth > 1000 |
||||
? fontSize.desktop.p |
||||
: fontSize.mobile.p, |
||||
}} |
||||
> |
||||
برای استفاده از بخش واقعیت افزوده می بایست افزونه آن را نصب نمایید |
||||
</p> |
||||
<a |
||||
href="https://dnvn.ir/ar.apk" |
||||
style={{ |
||||
color: "white", |
||||
fontSize: 18, |
||||
width: "80%", |
||||
textAlign: "center", |
||||
}} |
||||
> |
||||
دریافت افزونه |
||||
</a> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
export default connect( |
||||
(state) => ({ |
||||
arList: state.userProduct.myList || [], |
||||
loading: state.loading, |
||||
}), |
||||
{ |
||||
getMyList: userProduct.myList, |
||||
} |
||||
)(AR); |
||||
@ -0,0 +1,20 @@ |
||||
.mobile-ar { |
||||
width: 100vw; |
||||
max-width: 1250px; |
||||
margin: 0px auto; |
||||
padding: 0px 10px 40px; |
||||
direction: rtl; |
||||
padding-top: 70px; |
||||
overflow-x: hidden; |
||||
} |
||||
|
||||
.ar { |
||||
width: 100vw; |
||||
max-width: 1250px; |
||||
min-height: calc(100vh - 288px); |
||||
margin: 0px auto; |
||||
padding: 0px 10px; |
||||
direction: rtl; |
||||
overflow-x: hidden; |
||||
padding-top: 100px; |
||||
} |
||||
Loading…
Reference in new issue