reza added some changes

master
RezaAshrafi77 3 years ago
parent 06543d34bf
commit 1d4a139246
  1. 1
      src/AppRouter.js
  2. 8
      src/Redux/actions/user.js
  3. 5
      src/Redux/proxy.js
  4. 17
      src/Redux/reducers/qr.js
  5. 28
      src/Redux/reducers/user.js
  6. 2
      src/views/AR/index.scss
  7. 71
      src/views/About/index.scss
  8. 7
      src/views/Auth/Login/Cellphone/index.scss
  9. 49
      src/views/Auth/Login/Code/index.js
  10. 32
      src/views/Auth/Login/Code/index.scss
  11. 29
      src/views/Auth/Login/Timer/index.js
  12. 2
      src/views/Auth/Login/index.js
  13. 7
      src/views/Auth/Profile/index.js
  14. 2
      src/views/Auth/index.scss
  15. 36
      src/views/Cart/Discount/index.js
  16. 33
      src/views/Cart/index.scss
  17. 49
      src/views/Contact/Select/index.js
  18. 4
      src/views/Contact/index.js
  19. 11
      src/views/Contact/index.scss
  20. 2
      src/views/Faq/index.scss
  21. 25
      src/views/Home/Membership/Input/index.js
  22. 1
      src/views/Home/Membership/index.scss
  23. 26
      src/views/Home/Navbar/Mobile/index.scss
  24. 8
      src/views/Home/Navbar/index.scss
  25. 2
      src/views/Home/index.scss
  26. 22
      src/views/MyBooks/index.scss
  27. 4
      src/views/Product/index.js
  28. 2
      src/views/Product/index.scss
  29. 29
      src/views/Products/index.scss
  30. 111
      src/views/QR/index.js
  31. 20
      src/views/QR/index.scss
  32. 4
      src/views/QRScan/Scanner/index.js
  33. 3
      src/views/QRScan/index.scss

@ -102,6 +102,7 @@ class AppRouter extends Component {
export default connect(
(state) => ({
profile: state.user.status.profile || {},
// status: state.user.status,
}),
{}
)(AppRouter);

@ -2,8 +2,16 @@ import proxy from "../proxy";
const user = {
otp: (data, history) => async (dispatch) =>
await proxy.login("public/sendOTP", data, { history, dispatch }),
// otp:
// (data = {}) =>
// async (dispatch) =>
// dispatch({ type: "public/sendOTP", payload: data }),
otp_login: (data, history) => async (dispatch) =>
await proxy.login("user/otp/login", data, { history, dispatch }),
// otp_login:
// (data = {}) =>
// async (dispatch) =>
// dispatch({ type: "user/otp/login", payload: data }),
register: (data, history) => async (dispatch) =>
await proxy.login("user/register", data, { history, dispatch }),
switchRole: (data, history) => async (dispatch) =>

@ -1,15 +1,14 @@
import { ApiConfig } from "./../constants/defaultValues";
import axios from "axios";
let { baseUrl, apiKey } = ApiConfig;
let { baseUrl } = ApiConfig;
let access = window.localStorage.getItem("access");
baseUrl = baseUrl + "/";
const baseUrl2 = "https://dnvn.ir/api/v1";
const Axios = axios.create({
withCredentials: true,
validateStatus: null,
baseURL: baseUrl,
headers: access ? { Authorization: `Bearer ${access}` } : {},
//headers: access ? { Authorization: `Bearer ${access}` } : {},
});
class Proxy {
get = async (url, params, opt = {}) =>

@ -56,7 +56,22 @@ export default function qr(state = initialState, action) {
return {
...state,
loading: false,
list: action.payload === "Zist10-13" ? [] : null,
list:
action.payload === "Zist10-13"
? [
{
type: "pdf",
title: "فایل پی دی اف ارائه درس آتشفشان",
link: "",
},
]
: [
{
type: "h1",
text: "صفحهای یافت نشد",
file: null,
},
],
error: null,
};
/////////////

@ -1,4 +1,4 @@
import proxy from '../proxy';
import proxy from "../proxy";
const initialState = {
status: proxy.status(),
loading: false,
@ -10,27 +10,29 @@ const initialState = {
export default function user(state = initialState, action) {
let { type, data } = action;
switch (type) {
case 'user/login':
case 'user/register':
case 'user/otp/login':
case 'user/switchRole':
case "user/login":
case "user/register":
case "user/switchRole":
case "public/sendOTP":
case "user/otp/login":
return { ...state, loading: false, status: data, error: null };
case 'user/logout':
case "user/logout":
return { ...state, loading: false, status: proxy.status(), error: null };
case 'user/getUserRole':
case "user/getUserRole":
return { ...state, loading: false, userRoles: data, error: null };
case 'user/list':
case "user/list":
return { ...state, loading: false, list: data, error: null };
case 'user/domains':
case "user/domains":
return { ...state, loading: false, domains: data, error: null };
case 'mothers/list':
case "mothers/list":
return { ...state, loading: false, mothers: data, error: null };
/////////////
case 'loading':
case "loading":
return { ...state, loading: true };
case 'error':
case "error":
return { ...state, loading: false, error: data.message };
default:
return state;
}
}
}

@ -4,7 +4,7 @@
margin: 0px auto;
padding: 0px 10px 40px;
direction: rtl;
padding-top: 90px;
padding-top: 70px;
overflow-x: hidden;
}

@ -19,7 +19,7 @@
display: inline;
letter-spacing: -2px;
font-family: numeralBold;
background-color: #00CC69;
background-color: #00cc69;
color: white;
}
p {
@ -35,7 +35,7 @@
h2 {
display: inline;
font-family: numeralBold;
background-color: #00CC69;
background-color: #00cc69;
color: white;
}
ul {
@ -45,7 +45,7 @@
margin-top: 5px;
li {
display: inline;
border-bottom: 2px solid #00CC69;
border-bottom: 2px solid #00cc69;
font-family: numeralLight;
color: #6d6d6d;
}
@ -56,34 +56,31 @@
width: 60%;
height: 100%;
position: relative;
& img{
& img {
position: absolute;
}
&__1{
top:0px;
&__1 {
top: 0px;
left: 100px;
z-index: 100;
height: 470px;
width: 470px
width: 470px;
}
&__2{
&__2 {
left: 430px;
bottom: 80px;
z-index: 150;
height: 235px;
width: 235px;
}
&__3{
&__3 {
bottom: 0px;
left: 310px;
z-index: 200;
height: 200px;
width: 200px;
}
&__4{
&__4 {
top: 50px;
left: 0px;
z-index: 150;
@ -101,7 +98,7 @@
&--right {
width: 48%;
height: 100%;
& img{
& img {
width: 100%;
}
}
@ -114,7 +111,7 @@
h1 {
display: inline;
font-family: numeralBold;
background-color: #00CC69;
background-color: #00cc69;
color: white;
}
ul {
@ -133,20 +130,20 @@
}
}
.mobile-about{
.mobile-about {
width: 100vw;
max-width: 650px;
margin: 0px auto;
padding : 0px 10px 40px;
padding: 0px 10px 40px;
direction: rtl;
padding-top: 90px;
padding-top: 70px;
overflow-x: hidden;
&__fury{
&__fury {
h1 {
display: inline;
letter-spacing: -2px;
font-family: numeralBold;
background-color: #00CC69;
background-color: #00cc69;
color: white;
}
p {
@ -157,25 +154,23 @@
letter-spacing: -1px;
}
}
&__images{
&__images {
position: relative;
height: 330px;
width: 100%;
& img{
& img {
position: absolute;
}
&--1{
top:0px;
&--1 {
top: 0px;
left: calc(100vw / 8);
z-index: 100;
height: calc(100vw - 100px);
width: calc(100vw - 100px);
max-width: 275px;
max-height: 275px;
}
&--2{
&--2 {
right: -20px;
bottom: 70px;
z-index: 150;
@ -183,9 +178,8 @@
width: calc(100vw / 2.5);
max-width: 150px;
max-height: 150px;
}
&--3{
&--3 {
bottom: -10px;
right: -10px;
z-index: 200;
@ -193,9 +187,8 @@
width: calc(100vw / 3);
max-width: 125px;
max-height: 125px;
}
&--4{
&--4 {
top: 50px;
left: -20px;
z-index: 150;
@ -205,12 +198,12 @@
max-height: 125px;
}
}
&__keys{
transform : translateY(-40px);
&__keys {
transform: translateY(-40px);
h2 {
display: inline;
font-family: numeralBold;
background-color: #00CC69;
background-color: #00cc69;
color: white;
}
ul {
@ -220,23 +213,23 @@
margin-top: 5px;
li {
display: inline;
border-bottom: 2px solid #00CC69;
border-bottom: 2px solid #00cc69;
font-family: numeralLight;
color: #6d6d6d;
}
}
}
&__video{
&__video {
img {
width: 100%;
}
}
&__advantages{
&__advantages {
margin-top: 30px;
h1 {
display: inline;
font-family: numeralBold;
background-color: #00CC69;
background-color: #00cc69;
color: white;
// margin-bottom: 20px;
}
@ -254,4 +247,4 @@
}
}
}
}
}

@ -89,6 +89,7 @@
max-width: 500px;
margin: 0px auto;
padding: 10px;
position: relative;
img {
margin-bottom: 30px;
position: relative;
@ -120,7 +121,7 @@
text-align: right;
position: absolute;
left: 65px;
top: 7px;
top: 8px;
direction: ltr;
font-family: numeralLight;
color: #a5a5a5;
@ -135,7 +136,7 @@
text-align: left;
background-color: #f2f2f2;
border: none;
padding: 0px 5px 0px 83px;
padding: 0px 5px 0px 81px;
border-radius: 5px;
&:focus {
outline: 0px;
@ -153,7 +154,7 @@
}
}
&__footer {
position: fixed;
position: absolute;
bottom: 40px;
div {
font-family: numeralLight;

@ -1,4 +1,5 @@
import React, { Component } from "react";
import { Link } from "react-router-dom";
import Timer from "../Timer/index";
import logo from "../../../../assets/icons/logo.png";
@ -7,6 +8,7 @@ import pic from "../../../../assets/images/pic.png";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
@ -14,6 +16,13 @@ const fontSize = {
button: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85,
div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
},
mobile: {
h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 13,
p: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 27,
input: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 85,
button: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 85,
div: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
},
};
export default class Code extends Component {
constructor(props) {
@ -87,10 +96,10 @@ export default class Code extends Component {
<div className="auth-code__box d-flex">
<div
style={{ width: "48%", height: "100%" }}
className="d-flex flex-column justify-content-center align-items-center"
className="d-flex flex-column justify-content-center align-items-center p-5"
>
<img src={logo} alt="دانوین" />
<div className="auth-code__box--codes d-flex">
<div className="auth-code__box--codes d-flex justify-content-around">
<label htmlFor="code1">
<input
id="code1"
@ -168,13 +177,14 @@ export default class Code extends Component {
ثبت
</button>
{!this.state.resendStatus ? (
<Timer seconds={10} parent={this} />
<Timer seconds={60} parent={this} />
) : (
<div
style={{
color: "#A5A5A5",
fontFamily: "numeralMedium",
fontFamily: "numeralLight",
fontSize: fontSize.desktop.div,
cursor: "pointer",
}}
className="timer d-flex mt-4"
onClick={() => this.setState({ resendStatus: false })}
@ -185,8 +195,9 @@ export default class Code extends Component {
<div
style={{
color: "#A5A5A5",
fontFamily: "numeralMedium",
fontFamily: "numeralLight",
fontSize: fontSize.desktop.div,
cursor: "pointer",
}}
className="timer d-flex mt-2"
onClick={() =>
@ -197,27 +208,27 @@ export default class Code extends Component {
</div>
</div>
<div style={{ width: "48%", height: "100%" }} className="d-flex">
<img
{/* <img
src={pic}
alt="عکس"
style={{ width: "100%", height: "100%" }}
/>
/> */}
</div>
</div>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-auth-code d-flex flex-column">
<div className="mobile-auth-code d-flex flex-column p-3">
<img src={logo} alt="دانوین" />
<div style={{ maxHeight: 60 }} className="d-flex flex-column mb-3">
<h1>دانوین</h1>
<p>
<div style={{ width: "100%" }} className="d-flex flex-column mb-1">
<h1 style={{ fontSize: fontSize.mobile.h1 }}>دانوین</h1>
<p style={{ fontSize: fontSize.mobile.p }}>
یک کد تائیدیه به شماره{" "}
<span>{this.props.parent.state.cellphone}</span> ارسال شد <br />
آن را در قسمت زیر وارد کنید.
</p>
</div>
<div className="mobile-auth-code__codes d-flex">
<div className="mobile-auth-code__codes d-flex justify-content-around">
<label htmlFor="code1">
<input
id="code1"
@ -290,10 +301,14 @@ export default class Code extends Component {
</div>
<button>ثبت</button>
{!this.state.resendStatus ? (
<Timer seconds={10} parent={this} />
<Timer seconds={60} parent={this} />
) : (
<div
style={{ color: "#A5A5A5", fontFamily: "numeralLight" }}
style={{
color: "#A5A5A5",
fontFamily: "numeralLight",
fontSize: fontSize.mobile.div,
}}
className="timer d-flex mt-4"
onClick={() => this.setState({ resendStatus: false })}
>
@ -301,7 +316,11 @@ export default class Code extends Component {
</div>
)}
<div
style={{ color: "#A5A5A5", fontFamily: "numeralLight" }}
style={{
color: "#A5A5A5",
fontFamily: "numeralLight",
fontSize: fontSize.mobile.div,
}}
className="timer d-flex mt-2"
onClick={() =>
this.props.parent.setState({ page: 0, cellphone: "" })

@ -8,8 +8,15 @@
border-radius: 20px;
justify-content: space-between;
height: 80%;
background: url(../../../../assets/images/auth_bg.png);
background-position: -58px -60px;
background-size: calc(100% + 150px) calc(100% + 200px);
background-repeat: no-repeat;
height: 80%;
max-height: 600px;
img {
margin-bottom: 30px;
width: 200px;
}
button {
margin-top: 20px;
@ -24,6 +31,9 @@
}
&--codes {
direction: ltr;
width: 100%;
max-width: 300px;
position: relative;
input {
max-width: 60px;
max-height: 60px;
@ -55,52 +65,50 @@
align-items: center;
direction: ltr;
position: relative;
max-width: 360px;
// max-width: 360px;
margin: 0px auto;
img {
margin-bottom: 30px;
position: relative;
bottom: 40px;
}
h1 {
width: 100%;
font-family: numeralBold;
font-size: calc(100vw / 15);
color: #6f7074;
position: relative;
bottom: 40px;
}
p {
font-family: numeralLight;
font-size: calc(100vw / 25);
color: #6f7074;
letter-spacing: -1px;
position: relative;
bottom: 40px;
}
button {
margin-top: 20px;
width: 100%;
max-width: 300px;
border: 0px;
font-family: numeralMedium;
font-family: numeralLight;
background-color: #6cbe44;
color: white;
border-radius: 7px;
padding: 8px;
font-size: calc(100vw / 20);
margin-top: 30px;
}
div {
letter-spacing: -1px;
color: #6cbe44;
}
&__codes {
direction: ltr;
width: 100%;
input {
max-width: 60px;
max-height: 60px;
background-color: #f2f2f2;
border: 0px;
margin: 0px 10px;
margin: 0px;
color: #6f7074;
text-align: center;
direction: ltr;
font-size: calc(100vw / 15);
border-radius: 5px;
padding: 10px 15px;
&:focus {

@ -2,11 +2,15 @@ import { Component } from "react";
import "./index.css";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
},
mobile: {
div: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
},
};
export default class Timer extends Component {
constructor(props) {
@ -87,11 +91,30 @@ export default class Timer extends Component {
) : null}
{window.innerWidth < 1000 ? (
<div className="timer d-flex mt-4">
<div style={{ color: "#a5a5a5", marginLeft: 5 }}>
<div
style={{
color: "#a5a5a5",
marginLeft: 5,
fontSize: fontSize.mobile.div,
}}
>
زمان باقیمانده تا انقضای کد
</div>
<div>{this.state.time.s}</div>:
<div>{this.state.time.m + this.state.time.h * 60}</div>
<div
style={{
fontSize: fontSize.mobile.div,
}}
>
{this.state.time.s}
</div>
:
<div
style={{
fontSize: fontSize.mobile.div,
}}
>
{this.state.time.m + this.state.time.h * 60}
</div>
</div>
) : null}
</>

@ -26,6 +26,8 @@ class Login extends Component {
userToken: "1",
applicationToken: "11",
});
localStorage.setItem("refresh", "sff234r324rf423dfsdfsaf");
localStorage.setItem("userData", "srrfsadf");
}
resend = () => {

@ -37,7 +37,7 @@ class Profile extends Component {
username: "",
address: "",
gender: "",
userRoleId: "",
userRoleId: "معلم",
nationalId: "",
provinceId: "",
cityId: "",
@ -66,9 +66,8 @@ class Profile extends Component {
componentDidMount() {
const { getProfile, profile } = this.props;
// if (!profile) {
// getProfile();
// }
getProfile();
}
onSubmit = (e) => {

@ -1,5 +1,7 @@
.auth {
width: 100%;
height: 100vh;
min-height: 100vh;
overflow-x: hidden;
min-height: 450px;
}

@ -1,5 +1,5 @@
import React from 'react';
import './index.scss';
import React from "react";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
@ -7,35 +7,35 @@ const maxMobileSize = 550;
const fontSize = {
desktop: {
h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 55,
input : window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75,
button : window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75,
input: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75,
button: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75,
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90,
},
mobile: {
h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24,
p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32,
input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20,
button: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20,
button: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25,
},
};
const DiscoutCode = (props) => {
return (
<>
{window.innerWidth > 1000 ? (
<div className="discount-code d-flex flex-column">
<h2 style={{ fontSize: fontSize.desktop.h2 }}>کد تخفیف</h2>
<p style={{ fontSize: fontSize.desktop.p }}>
اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید و دکمه ثبت کد را
بزنید
</p>
<div className="discount-code__box d-flex align-items-center">
<input style={{ fontSize: fontSize.desktop.input }} type="text" />
<button style={{ fontSize: fontSize.desktop.button }}>ثبت کد</button>
<h2 style={{ fontSize: fontSize.desktop.h2 }}>کد تخفیف</h2>
<p style={{ fontSize: fontSize.desktop.p }}>
اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید و دکمه ثبت کد را
بزنید
</p>
<div className="discount-code__box d-flex align-items-center">
<input style={{ fontSize: fontSize.desktop.input }} type="text" />
<button style={{ fontSize: fontSize.desktop.button }}>
ثبت کد
</button>
</div>
</div>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-discount-code d-flex flex-column">
@ -46,7 +46,7 @@ const DiscoutCode = (props) => {
</p>
<div className="mobile-discount-code__box d-flex align-items-center">
<input style={{ fontSize: fontSize.mobile.input }} type="text" />
<button style={{ fontSize: fontSize.desktop.button }}>ثبت کد</button>
<button style={{ fontSize: fontSize.mobile.button }}>ثبت کد</button>
</div>
</div>
) : null}
@ -54,4 +54,4 @@ const DiscoutCode = (props) => {
);
};
export default DiscoutCode;
export default DiscoutCode;

@ -5,24 +5,24 @@
padding: 0px;
font-family: numeralLight;
padding-top: 100px;
&__totalPrice{
&__totalPrice {
padding: 20px 0px;
border-bottom: 1px dotted #A5A5A5;
border-bottom: 1px dotted #a5a5a5;
padding-bottom: 20px;
h3{
h3 {
font-family: numeralLight;
color: #00CC69;
color: #00cc69;
margin: 0px;
}
div{
div {
margin-right: 20px;
strong{
strong {
font-family: numeralBold;
color: #4D4D4F;
color: #4d4d4f;
margin-left: 5px;
}
span{
span {
font-family: numeralLight;
color: #848484;
}
@ -31,14 +31,13 @@
&__right {
flex: 4;
padding: 10px 0px 0px;
}
&__left {
flex: 1.2;
box-shadow: 0px 0px 13px #d5d5d5b0;
border-radius: 13px;
margin-right: 30px;
&--header {
h2 {
font-family: numeralBold;
@ -50,7 +49,7 @@
letter-spacing: -1px;
}
}
&--submit{
&--submit {
justify-self: flex-end;
padding: 12px;
width: 100%;
@ -70,10 +69,10 @@
margin: 0px auto;
padding: 0px 10px 40px;
direction: rtl;
padding-top: 60px;
padding-top: 70px;
overflow-x: hidden;
font-family: numeralLight;
&__submit{
&__submit {
justify-self: flex-end;
padding: 12px;
width: 100%;
@ -88,9 +87,9 @@
font-family: numeralBold;
color: #373737;
}
&__payMethods {
border-bottom: 1px dotted #A5A5A5;
border-bottom: 1px dotted #a5a5a5;
margin-top: 20px;
padding-bottom: 20px;
h2 {
@ -102,9 +101,5 @@
color: #a5a5a5;
letter-spacing: -1px;
}
}
}

@ -1,40 +1,25 @@
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 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";
const BootstrapInput = withStyles((theme) => ({
root: {
'label + &': {
"label + &": {
marginTop: theme.spacing(3),
},
},
input: {
width : 350,
width: 350,
borderRadius: 4,
position: 'relative',
position: "relative",
backgroundColor: theme.palette.background.paper,
border: '0px solid #cecece',
fontSize: 16,
padding: '10px 26px 10px 12px',
transition: theme.transitions.create(['border-color', 'box-shadow']),
border: "0px solid #cecece",
fontSize: 14,
padding: "10px 26px 10px 12px",
transition: theme.transitions.create(["border-color", "box-shadow"]),
// Use the system font instead of the default Roboto font.
fontFamily: [
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
].join(','),
'&:focus': {
borderRadius: 4,
},
},
}))(InputBase);
@ -47,7 +32,7 @@ const useStyles = makeStyles((theme) => ({
export default function CustomizedSelects(props) {
const classes = useStyles();
const [age, setAge] = React.useState('');
const [age, setAge] = React.useState("");
const handleChange = (event) => {
setAge(event.target.value);
};
@ -60,11 +45,9 @@ export default function CustomizedSelects(props) {
onChange={handleChange}
input={<BootstrapInput />}
>
{
props.options.map(item => (
<option value={item}>{item}</option>
))
}
{props.options.map((item) => (
<option value={item}>{item}</option>
))}
</NativeSelect>
</FormControl>
</div>

@ -21,8 +21,8 @@ const fontSize = {
},
mobile: {
h1: window.innerWidth > maxMobileSize ? 25 : window.innerWidth / 16,
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 28,
span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 28,
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 34,
span: window.innerWidth > maxMobileSize ? 15 : window.innerWidth / 32,
},
};
export default class Contact extends Component {

@ -163,7 +163,8 @@
padding: 0px 10px;
direction: rtl;
overflow-x: hidden;
padding-top: 90px;
padding-top: 70px;
padding-bottom: 50px;
&__form {
width: 100%;
justify-content: space-between;
@ -200,7 +201,9 @@
right: -5px;
top: -8px;
transform: translate(0px, 0px) scale(0.75) !important;
padding-right: 15px !important;
padding-right: 0px !important;
width: fit-content;
padding: 0px 6px !important;
}
label {
@ -209,6 +212,8 @@
text-align: center;
color: #797979 !important;
letter-spacing: -1px;
font-family: numeralLight !important;
font-size: 14px;
}
.Mui-focused {
color: rgba(0, 0, 0, 0.54) !important;
@ -222,7 +227,6 @@
p {
font-family: numeralLight;
color: #6f7074;
letter-spacing: -1px;
}
button {
@ -249,6 +253,7 @@
border: 1px solid #c4c4c5;
padding: 10px 8px;
color: #6f7074;
font-size: 14px;
&::placeholder {
color: #797979;
}

@ -64,7 +64,7 @@
padding: 0px 10px;
direction: rtl;
overflow-x: hidden;
padding-top: 90px;
padding-top: 70px;
&__header {
margin-top: 30px;
width: 100%;

@ -1,14 +1,16 @@
import React from 'react';
import TextField from '@material-ui/core/TextField';
import { makeStyles } from '@material-ui/core/styles';
import React from "react";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles((theme) => ({
root: {
'& .MuiTextField-root': {
width: '200px',
position : 'relative',
marginRight : 10,
"& .MuiTextField-root": {
width: "200px",
position: "relative",
marginRight: 30,
},
input: {
border: "0px",
},
},
}));
@ -19,7 +21,12 @@ export default function FormPropsTextFields(props) {
return (
<form className={classes.root} noValidate autoComplete="off">
<div>
<TextField id="outlined-basic" name={props.name} label={props.label} variant="outlined" />
<TextField
id="outlined-basic"
name={props.name}
label={props.label}
variant="outlined"
/>
</div>
</form>
);

@ -41,6 +41,7 @@
right: 4px;
top: 12px;
transform: translate(0px, 0px) scale(1) !important;
border: 0px !important;
}
.MuiInputLabel-shrink {
display: inline;

@ -1,26 +1,26 @@
.mobile-navbar{
.mobile-navbar {
width: 100%;
position: fixed;
top : 0px;
left : 0px;
top: 0px;
left: 0px;
justify-content: space-between;
align-items: center;
background-color: white;
z-index: 400;
padding: 15px 10px;
&__menu{
img{
width : calc(100vw / 12);
&__menu {
img {
width: 25px;
}
}
&__logo{
img{
width: calc(100vw / 4);
&__logo {
img {
width: 80px;
}
}
&__left{
img{
width : calc(100vw / 15);
&__left {
img {
width: 25px;
}
}
}
}

@ -1,11 +1,11 @@
.navbar{
.navbar {
width: 100%;
max-width: 1250px;
position: fixed !important;
top: 0px !important;
overflow-x: hidden;
background-color:white !important;
z-index: 200;
background-color: white !important;
z-index: 300;
// margin: 0px auto !important;
}

@ -14,5 +14,5 @@
padding: 0px 10px;
direction: rtl;
overflow-x: hidden;
padding-top: 90px;
padding-top: 70px;
}

@ -1,14 +1,14 @@
.mybooks{
.mybooks {
width: 100vw;
max-width: 1250px;
margin: 0px auto;
padding : 0px 10px;
padding: 0px 10px;
direction: rtl;
min-height: calc(100vh - 288px);
padding-top: 100px;
}
.mobile-mybooks{
.mobile-mybooks {
width: 100vw;
max-width: 600px;
margin: 0px auto;
@ -16,27 +16,27 @@
direction: rtl;
overflow-x: hidden;
padding-top: 70px;
h1{
h1 {
padding: 0px 10px;
font-family: numeralBold;
color: #6F7074;
color: #6f7074;
margin-bottom: 10px;
}
&__item{
background-color: #F2F2F2;
&__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{
& img {
width: 100%;
height: calc(100vh / 3.5);
border-radius: 30px;
max-height: 200px;
margin-bottom: 10px;
}
&--buttons{
&--buttons {
padding: 5px 9px;
a {
text-decoration: none;
@ -50,7 +50,7 @@
display: flex;
align-items: center;
justify-content: space-between;
img{
img {
position: absolute;
top: calc(50% - 8px);
left: 5px;
@ -60,4 +60,4 @@
}
}
}
}
}

@ -65,9 +65,9 @@ export default class Product extends Component {
</header>
<div className="product__comments d-flex flex-column">
<div className="d-flex justify-content-between">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>
<h3 style={{ fontSize: fontSize.desktop.h1 }}>
نظرات خریداران
</h1>
</h3>
<button>
ارسال نظر
<img src={send_comment} alt="ارسال نظر" />

@ -4,7 +4,7 @@
margin: 0px auto;
padding: 0px 10px 40px;
direction: rtl;
padding-top: 90px;
padding-top: 70px;
overflow-x: hidden;
&__header {
width: 100%;

@ -1,44 +1,43 @@
.products{
.products {
width: 100vw;
max-width: 1250px;
margin: 0px auto;
padding : 0px 10px;
padding: 0px 10px;
direction: rtl;
min-height: calc(100vh - 288px);
padding-top: 100px;
&__body{
&__body {
margin-top: 20px;
&--left{
&--left {
flex: 4;
padding-right: 20px;
}
}
}
.mobile-products{
.mobile-products {
width: 100vw;
max-width: 600px;
margin: 0px auto;
padding: 0px;
direction: rtl;
overflow-x: hidden;
padding-top: 90px;
&__filters{
padding-top: 70px;
&__filters {
width: 100%;
align-items: center;
justify-content: space-between;
padding : 0px 10px;
.MuiNativeSelect-icon{
justify-content: space-between;
padding: 0px 10px;
.MuiNativeSelect-icon {
display: none;
}
.MuiNativeSelect-select.MuiNativeSelect-select{
.MuiNativeSelect-select.MuiNativeSelect-select {
padding-right: 5px !important;
padding-left: 20px;
}
}
&__list{
width : 100%;
&__list {
width: 100%;
padding: 10px 0px;
}
}
}

@ -1,4 +1,5 @@
import React, { Component } from "react";
import { Link } from "react-router-dom";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import VoiceBox from "./VoiceBox/index.js";
@ -9,6 +10,7 @@ import Links from "./Links/index";
import SubjectsDropdown from "./SubjectsDropdown/index";
import BookContent from "./BookContent/index";
import NightsStayOutlinedIcon from "@material-ui/icons/NightsStayOutlined";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import { connect } from "react-redux";
import { qr } from "~/Redux/actions";
@ -24,6 +26,7 @@ class QR extends Component {
state = {
theme: true,
zoom: [10, 10],
menu: true,
};
handleZoom = (type) => {
@ -43,6 +46,10 @@ class QR extends Component {
}));
}
};
componentDidMount() {
console.log(typeof this.props.qrList);
}
render() {
const { QR, qrList } = this.props;
const fontSize = {
@ -145,51 +152,40 @@ class QR extends Component {
<>
<div className="mobile-qr d-flex flex-column">
<Navbar />
{qrList.length === 0 && qrList !== null ? (
<div className="d-flex flex-column">
<div className="d-flex justify-content-end">بازگشت</div>
<h1>فایلی در این صفحه موجود نیست.</h1>
</div>
) : null}
{qrList !== null ? (
<div className="d-flex pt-3">
<div className="d-flex p-3">
{this.state.menu ? (
<div className="mobile-qr__buttons d-flex flex-column align-items-center">
<img src={exit} alt="خروج" />
<div>
<img
src={exit}
alt="خروج"
onClick={() =>
this.setState({ menu: !this.state.menu })
}
/>
</div>
<button>نمایش تمامی محتواها</button>
<a
href="#voice"
className="mobile-qr__buttons--voice mobile-qr__buttons--media"
></a>
<a
href="#video"
className="mobile-qr__buttons--video mobile-qr__buttons--media"
></a>
<a
href="#ppt"
className="mobile-qr__buttons--ppt mobile-qr__buttons--media"
></a>
<a
href="#pdf"
className="mobile-qr__buttons--pdf mobile-qr__buttons--media"
></a>
<a
href="#links"
className="mobile-qr__buttons--attachment mobile-qr__buttons--media"
></a>
</div>
<div className="mobile-qr__content d-flex flex-column">
{qrList.map((item, i) => (
<Identifier data={item} key={i} />
<MenuIdentifier data={item} key={i} />
))}
</div>
) : (
<div className="mobile-qr__buttons d-flex flex-column align-items-center">
<MoreVertIcon
style={{ fontSize: 40, color: "grey" }}
onClick={() => this.setState({ menu: !this.state.menu })}
/>
</div>
)}
<div className="mobile-qr__content d-flex flex-column">
<div className="mobile-qr-scan__back d-flex mb-2">
<Link to="/">بازگشت</Link>
</div>
{qrList.map((item, i) => (
<Identifier data={item} key={i} />
))}
</div>
) : null}
{qrList === null ? (
<div className="d-flex flex-column align-items-center">
<div className="d-flex justify-content-end">بازگشت</div>
<h1 className="align-center">404</h1>
</div>
) : null}
</div>
</div>
</>
) : null}
@ -254,3 +250,40 @@ const Identifier = (props) => {
</>
);
};
const MenuIdentifier = (props) => {
return (
<>
{props.data.type === "voice" ? (
<a
href="#voice"
className="mobile-qr__buttons--voice mobile-qr__buttons--media"
></a>
) : null}
{props.data.type === "video" ? (
<a
href="#video"
className="mobile-qr__buttons--video mobile-qr__buttons--media"
></a>
) : null}
{props.data.type === "pdf" ? (
<a
href="#pdf"
className="mobile-qr__buttons--pdf mobile-qr__buttons--media"
></a>
) : null}
{props.data.type === "ppt" ? (
<a
href="#ppt"
className="mobile-qr__buttons--ppt mobile-qr__buttons--media"
></a>
) : null}
{props.data.type === "links" ? (
<a
href="#links"
className="mobile-qr__buttons--attachment mobile-qr__buttons--media"
></a>
) : null}
</>
);
};

@ -51,15 +51,19 @@
padding-top: 10px 0px;
text-align: center;
overflow-x: hidden;
height: 100vh;
height: calc(100vh - 88px);
position: fixed;
top: 100px;
right: 0px;
top: 85px;
right: 5px;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none;
width: 0px;
}
&--media {
width: 100%;
height: 50px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
border-radius: 8px;
transform: translateY(120px);
margin-top: 10px;
}
@ -99,11 +103,15 @@
width: 140px;
transform: rotate(-90deg) translateX(-65px);
}
& img {
width: 20px;
height: 20px;
}
}
&__content {
margin-right: 40px;
width: calc(100% - 40px);
padding: 0px 10px;
padding-right: 10px;
h1 {
font-family: numeralBold;
font-size: calc(100vw / 22);

@ -30,7 +30,7 @@ export default class Scanner extends Component {
delay={300}
onError={this.handleError}
onScan={this.handleScan}
style={{ width: "100%" }}
style={{ width: "100%", maxWidth: 300 }}
facingMode={facingMode[this.props.parent.state.facingMode]}
/>
) : null}
@ -39,7 +39,7 @@ export default class Scanner extends Component {
delay={300}
onError={this.handleError}
onScan={this.handleScan}
style={{ width: "100%", maxWidth: 300 }}
style={{ width: "100%" }}
facingMode={this.props.parent.state.facingMode}
/>
) : null}

@ -4,7 +4,7 @@
margin: 0px auto;
padding: 0px 10px 40px;
direction: rtl;
padding-top: 90px;
padding-top: 70px;
overflow-x: hidden;
&__back {
justify-content: flex-end;
@ -23,7 +23,6 @@
}
}
&__header {
margin-top: 30px;
width: 100%;
h1 {
font-family: numeralBold;

Loading…
Cancel
Save