amir hosein gorji 3 years ago
parent 73f4f7ad3d
commit e6ced3736d
  1. 4
      src/App.css
  2. 6
      src/AppRouter.js
  3. BIN
      src/assets/icons/back.png
  4. 43
      src/views/Activation/index.js
  5. 21
      src/views/Activation/index.scss
  6. 12
      src/views/Auth/Profile/index.js
  7. 10
      src/views/Cart/index.js
  8. 45
      src/views/Download/BreadCrumb/index.js
  9. 8
      src/views/Download/BreadCrumb/index.scss
  10. 63
      src/views/Download/Item/index.js
  11. 93
      src/views/Download/index.js
  12. 20
      src/views/Download/index.scss
  13. 33
      src/views/Home/Navbar/Mobile/index.js
  14. 9
      src/views/Home/Navbar/Mobile/index.scss
  15. 2
      src/views/Home/index.scss
  16. 1
      src/views/MyBooks/index.js
  17. 10
      src/views/Product/index.js
  18. 2
      src/views/Products/index.scss
  19. 5
      src/views/QR/index.js
  20. 8
      src/views/QRScan/index.js
  21. 2
      src/views/QRScan/index.scss

@ -3,7 +3,9 @@
direction: rtl;
font-family: numeralLight;
}
#root {
height: 100vh;
}
@font-face {
font-family: numeralMedium;
src: url(assets/IRANSans/Farsi_numerals/IRANSans\(FaNum\)_Medium.ttf);

@ -26,6 +26,7 @@ import Chatroom from "./views/ChatRoom/index";
import Cart from "./views/Cart/index";
import MyBooks from "./views/MyBooks/index";
import AR from "./views/AR/index";
import Download from "./views/Download/index";
import Support from "./views/Support/index";
import Callback from "./views/Callback/index";
import NewProfile from "./views/NewProfile/index";
@ -60,7 +61,7 @@ class AppRouter extends Component {
}
componentDidMount() {
//sthis.props.getUserProductList();
if (proxy.status()) this.props.getUserProductList();
}
render() {
@ -425,6 +426,9 @@ class AppRouter extends Component {
/>
)}
</Route>
<Route exact path={"/download"}>
<Download />
</Route>
<Route exact path={"/chatroom/:id"}>
{mobile ? (
proxy.status() ? (

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

@ -6,7 +6,9 @@ import Footer from "../Home/Footer/index";
import { Link } from "react-router-dom";
import analytics from "../../assets/icons/analytics.svg";
import ReplayIcon from "@material-ui/icons/Replay";
import Scanner from "../QRScan/Scanner/index";
import qrcode from "~/assets/icons/drawer-qr.png";
import "./index.scss";
const maxDesktopSize = 1250;
@ -99,30 +101,50 @@ class Activation extends Component {
{window.innerWidth < 1000 ? (
<div className="mobile-activation d-flex flex-column align-items-center">
<Navbar />
<div
style={{ fontSize: fontSize.mobile.span }}
className="mobile-activation__back d-flex"
>
<Link to="/" style={{ fontSize: fontSize.mobile.span }}>
بازگشت
</Link>
</div>
<header className="mobile-activation__header d-flex flex-column align-items-center">
<img src={analytics} alt="فعال سازی کتاب" />
<h1 style={{ fontSize: fontSize.mobile.h1 }}>
فعال سازی کتاب الکترونیک
</h1>
</header>
<div className="mobile-activation__description d-flex">
<span>.</span>
<p style={{ fontSize: fontSize.mobile.p }}>
برای خدمات هوشمند کتاب کد فعال سازی را اینجا وارد نمایید
</p>
</div>
</header>
{/* <div className="qr-scan__box--select d-flex">
<select
onChange={(e) =>
this.setState({ facingMode: e.target.value })
}
>
<option value="environment">دوربین عقب</option>
<option value="user">دوربین جلو</option>
</select>
</div>
<div className="qr-scan__box--camera d-flex justify-content-center align-items-center">
{this.state.value !== null ? (
<div
style={{ zIndex: 1000 }}
onClick={() => this.setState({ value: null })}
>
<ReplayIcon style={{ fontSize: 40, color: "grey" }} />
</div>
) : (
<Scanner parent={this} />
)}
</div> */}
<form
className="mobile-activation__form d-flex flex-column"
// onSubmit={() => console.log()}
>
<div className="inputBox d-flex">
<Link to="/qr-scan" className="qrb">
<img src={qrcode} alt="qr" />
</Link>
<input
id="code"
type="text"
@ -132,6 +154,7 @@ class Activation extends Component {
placeholder={"FC5DFD : مثال"}
style={{ fontSize: fontSize.mobile.form }}
/>
</div>
<button style={{ fontSize: fontSize.mobile.form }} type="submit">
ثبت کد فعال سازی
</button>

@ -6,7 +6,7 @@
direction: rtl;
padding-top: 70px;
overflow-x: hidden;
height: 100%;
&__back {
width: 100%;
justify-content: flex-end;
@ -57,15 +57,28 @@
position: fixed;
bottom: 20px;
background-color: white !important;
.inputBox {
background-color: #aaaaaa;
border-radius: 10px;
height: 50px;
.qrb {
cursor: pointer;
margin: auto;
width: 50px;
}
img {
margin: auto;
padding: 0 10px;
}
input {
width: 100%;
background-color: #f6f6f6;
background-color: #dbdbdb;
color: #4d4d4f;
text-align: center;
direction: ltr;
border: 0px;
padding: 15px 0px;
border-radius: 10px;
border-radius: 10px 0 0 10px;
&:focus {
outline: 0px;
}
@ -73,6 +86,8 @@
color: #afafaf;
}
}
}
button {
display: inline;
font-family: numeralLight;

@ -16,6 +16,7 @@ import logo from "../../../assets/icons/logo.png";
import pic from "../../../assets/images/pic.png";
import "./index.scss";
import { useHistory } from "react-router-dom";
import Navbar from "../../Home/Navbar/index";
function Navigate({ path }) {
let history = useHistory();
return <>{history.push(path)}</>;
@ -403,11 +404,17 @@ class Profile extends Component {
) : null}
{window.innerWidth < 1000 ? (
profile ? (
<>
<Navbar />
<div className="mobile-auth-profile d-flex flex-column">
<img src={logo} alt="دانوین" />
<br />
{/* <img src={logo} alt="دانوین" /> */}
<div className="d-flex align-items-center">
<div className="d-flex flex-column">
<h1 style={{ fontSize: fontSize.mobile.h1 }}>حساب کاربری</h1>
<h1 style={{ fontSize: fontSize.mobile.h1 }}>
حساب کاربری
</h1>
<p style={{ fontSize: fontSize.mobile.p }}>
لطفا مشحصات خود را به صورت کامل وارد نمایید
</p>
@ -560,6 +567,7 @@ class Profile extends Component {
<button onClick={() => this.onSubmit()}>ذخیره</button>{" "}
</div>
</div>
</>
) : (
<div
className="d-flex justify-content-center align-items-center"

@ -48,6 +48,7 @@ class Cart extends Component {
componentDidUpdate(prevProps, prevState) {
if (this.props.list.length > 0) {
console.log("h1", this.props.factorInfo);
if (
this.props.factorInfo === null &&
this.state.controlFactorInfoRepeat
@ -67,6 +68,8 @@ class Cart extends Component {
if (this.props.list.length !== 1) {
this.props.getInfo({ id: wantedId });
}
} else {
this.props.getFactorInfo({});
}
}
@ -272,7 +275,12 @@ class Cart extends Component {
))}
</div>
</div> */}
<button className="mobile-cart__submit">پرداخت</button>
<button
className="mobile-cart__submit"
onClick={() => this.props.payFactor({ userId: userId })}
>
پرداخت
</button>
</div>
) : (
<div

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

@ -8,6 +8,7 @@ import clsx from "clsx";
import logo from "../../../../assets/icons/logoMobile.png";
import ar from "../../../../assets/icons/ar.png";
import qr from "../../../../assets/icons/qr.png";
import back from "../../../../assets/icons/back.png";
import hamburger from "../../../../assets/icons/hamburger.png";
import search from "../../../../assets/icons/navbarSearch.png";
@ -64,35 +65,51 @@ export default function MobileNavbar(props) {
);
return (
<nav className="mobile-navbar d-flex">
<div
className="mobile-navbar__logo"
// style={{ transform: page !== "home" ? "translateX(-29px)" : "none" }}
>
<Link to="/">
<img src={logo} alt="لوگو" />
</Link>
</div>
<div
className="mobile-navbar__menu"
onClick={toggleDrawer("right", true)}
>
<img src={hamburger} alt="منو" />
</div>
<Link
to="/"
className="mobile-navbar__logo"
style={{ transform: page !== "home" ? "translateX(-29px)" : "none" }}
>
<img src={logo} alt="لوگو" />
</Link>
<div className="mobile-navbar__left">
{page === "home" ? (
{page === "home" || page === "download" ? (
<Link to={"/products"}>
<img src={search} alt="جستجو" />
</Link>
) : (
<div className="d-flex align-items-center">
{window.location.pathname !== "/products" &&
window.location.pathname !== "/mybooks" &&
window.location.pathname !== "/profile" && (
<Link to={"/products"}>
<img src={search} alt="جستجو" />
</Link>
)}
{window.location.pathname !== "/qr-scan" &&
window.location.pathname !== "/profile" && (
<Link to={"/qr-scan"}>
<img src={qr} alt="QR" />
</Link>
)}
{window.location.pathname !== "/ar" &&
window.location.pathname !== "/profile" && (
<Link to={"/ar"}>
<img src={ar} alt="AR" />
</Link>
)}
<Link to={"/"}>
<img src={back} alt="بازگشت" />
</Link>
</div>
)}
</div>

@ -7,7 +7,8 @@
align-items: center;
background-color: white;
z-index: 400;
padding: 10px 10px 0px;
padding: 0px 10px 0px;
height: 50px;
&__menu {
justify-self: flex-start;
img {
@ -15,7 +16,13 @@
}
}
&__logo {
position: absolute;
width: 100%;
top: 5px;
text-align: center;
z-index: -1;
img {
transform: translate(20px, 0px);
width: 85px;
}
}

@ -15,7 +15,7 @@
padding: 0px 5px;
direction: rtl;
overflow-x: hidden;
padding-top: 70px;
padding-top: 55px;
}
body::-webkit-scrollbar,

@ -74,6 +74,7 @@ class MyBooks extends React.Component {
<>
<div className="mobile-products d-flex flex-column">
<Navbar />
<div className="d-flex flex-wrap p-1">
{!checkEmpty ? (
list.map((item, i) => <Item data={item} key={i} id={i} />)

@ -273,18 +273,20 @@ class Product extends Component {
<Link
to={"/cart"}
style={{
width: "100%",
position: "fixed",
bottom: "0",
width: "calc(100% - 10px)",
color: "white",
backgroundColor: "#7fc75d",
backgroundColor: "#00cc69",
cursor: "pointer",
borderRadius: 8,
textDecoration: "none",
padding: "5px 10px",
margin: "5px 10px 1px",
margin: "5px 5px 5px",
textAlign: "center",
}}
>
رفتن به سبد خرید
سبد خرید
</Link>
</div>
<MaterialModal

@ -24,7 +24,7 @@
padding: 0px;
direction: rtl;
overflow-x: hidden;
padding-top: 70px;
padding-top: 55px;
&__empty {
font-family: numeralLight;
a {

@ -252,9 +252,6 @@ class QR extends Component {
this.content = div;
}}
>
<div className="mobile-qr-scan__back d-flex mb-2">
<Link to="/">بازگشت</Link>
</div>
{qrList.qr.content.map((item, i) => (
<Identifier data={item} key={i} />
))}
@ -262,10 +259,10 @@ class QR extends Component {
</div>
) : (
<div className="mobile-qr__notAccess d-flex flex-column p-3">
<h1>محتوایی برای این صفحه در دسترس نیست.!</h1>
<div className="mobile-qr-scan__back d-flex mb-2">
<Link to="/">بازگشت</Link>
</div>
<h1>محتوایی برای این صفحه در دسترس نیست.!</h1>
</div>
)}
</div>

@ -2,7 +2,7 @@ import React, { Component } from "react";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import { Link } from "react-router-dom";
import history from "./History/index";
import Scanner from "./Scanner/index";
import LastQr from "./LastQr/index";
import Modal from "./Modal/index";
@ -93,10 +93,10 @@ class QRScan extends Component {
{window.innerWidth < 1000 ? (
<>
<div className="mobile-qr-scan d-flex flex-column">
<Navbar />
<div className="mobile-qr-scan__back d-flex">
<Navbar page="home" />
{/* <div className="mobile-qr-scan__back d-flex">
<Link to="/">بازگشت</Link>
</div>
</div> */}
<header className="mobile-qr-scan__header d-flex flex-column"></header>
<section className="mobile-qr-scan__camera d-flex justify-content-center align-items-center">

@ -7,7 +7,7 @@
padding-top: 70px;
overflow-x: hidden;
&__back {
justify-content: flex-end;
justify-content: space-around;
a {
display: inline;
font-family: numeralLight;

Loading…
Cancel
Save