reza added some changes

master
RezaAshrafi77 3 years ago
parent 5cfa1c519f
commit f0e7f8005c
  1. 12
      src/AppRouter.js
  2. 2
      src/Redux/reducers/book.js
  3. 8
      src/views/Auth/Login/Cellphone/index.js
  4. 6
      src/views/Contact/index.js
  5. 2
      src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
  6. 45
      src/views/MyBooks/BreadCrumb/index.js
  7. 8
      src/views/MyBooks/BreadCrumb/index.scss
  8. 120
      src/views/MyBooks/index.js
  9. 14
      src/views/MyBooks/index.scss
  10. 7
      src/views/Product/index.scss
  11. 12
      src/views/QR/BookContent/index.js
  12. 92
      src/views/QR/BookContent/index.scss
  13. 6
      src/views/QR/Image/Modal/index.js
  14. 1
      src/views/QR/Image/Modal/index.scss
  15. 24
      src/views/QR/Image/index.js
  16. 1
      src/views/QR/Image/index.scss
  17. 80
      src/views/QR/PDF/index.js
  18. 16
      src/views/QR/PDF/index.scss
  19. 81
      src/views/QR/PowerPoint/index.js
  20. 10
      src/views/QR/PowerPoint/index.scss
  21. 43
      src/views/QR/VideoBox/index.js
  22. 24
      src/views/QR/VideoBox/index.scss
  23. 4
      src/views/QR/VoiceBox/index.js
  24. 75
      src/views/QR/index.js
  25. 11
      src/views/QR/index.scss
  26. 8
      src/views/Support/index.js

@ -43,7 +43,7 @@ class AppRouter extends Component {
const mobile = window.innerWidth < 1000 ? true : false;
let home = mobile ? (
<Route exact path={"/"}>
{proxy.status ? (
{proxy.status() ? (
this.props.profile ? (
<Home />
) : (
@ -123,7 +123,15 @@ class AppRouter extends Component {
<QR />
</Route>
<Route exact path={"/auth"}>
<Auth />
{proxy.status() ? (
<Redirect
to={{
pathname: "/",
}}
/>
) : (
<Auth />
)}
</Route>
<Route exact path={"/profile"}>
<Auth page={"profile"} />

@ -94,8 +94,6 @@ export default function book(state = initialState, action) {
? bySubjectFilter.filter((item1) => item1.name.indexOf(search) !== -1)
: bySubjectFilter;
console.log(bySearchFilter);
if (sort === "گران ترین") {
finalSort = bySearchFilter.sort((item1, item2) => {
return item1.product[0].price - item2.product[0].price;

@ -78,10 +78,6 @@ export default class Cellphone extends Component {
</button>
</form>
<div className="auth-cellphone__box--footer d-flex flex-column justify-content-center align-items-center">
<div style={{ fontSize: fontSize.desktop.div }}>
{" "}
حساب کاربری ندارید ؟ همین حالا<button>ثبت نام کنید</button>
</div>
<div style={{ fontSize: fontSize.desktop.div }}>
شرایط استفاده و حریم خصوصی
</div>
@ -147,10 +143,6 @@ export default class Cellphone extends Component {
style={{ fontSize: fontSize.mobile.div }}
className="mobile-auth-cellphone__footer d-flex flex-column justify-content-center align-items-center"
>
<div>
{" "}
حساب کاربری ندارید ؟ همین حالا <button>ثبت نام کنید</button>
</div>
<div>شرایط استفاده و حریم خصوصی</div>
</div>
</div>

@ -36,11 +36,11 @@ class Contact extends Component {
}
render() {
const { loading, contactData } = this.props;
const { contactData } = this.props;
return (
<>
{window.innerWidth > 1000 ? (
!loading ? (
contactData ? (
<>
<div className="contact d-flex flex-column align-items-center">
<Navbar page={"contact"} />
@ -107,7 +107,7 @@ class Contact extends Component {
)
) : null}
{window.innerWidth < 1000 ? (
!loading ? (
contactData ? (
<div className="mobile-contact d-flex flex-column align-items-center">
<Navbar page={"contact"} />
<div className="mobile-contact__form d-flex flex-column">

@ -164,7 +164,7 @@ NavbarDrawer.defaultProps = {
},
{
name: "بلاگ",
link: "/blog",
link: "/blogs",
icon: <img src={mobileBlog} alt="بلاگ" />,
toast: "",
message: "",

@ -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={"/mybooks"}
>
کتابهای من
</Link>
</Breadcrumbs>
);
}

@ -0,0 +1,8 @@
.MuiBreadcrumbs-li{
a {
text-decoration: none;
font-family: numeralLight;
color: #6F7074;
letter-spacing: -1px;
}
}

@ -5,6 +5,7 @@ import { Link } from "react-router-dom";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import BreadCrumbs from "./BreadCrumb/index";
import sciense_6 from "~/assets/images/olum6.jpg";
import sciense_8 from "~/assets/images/olum8.jpg";
@ -12,7 +13,7 @@ import sciense_9 from "~/assets/images/olum9.jpg";
import sciense_7 from "~/assets/images/olum7.jpg";
import shimi_10 from "~/assets/images/shimi10.jpg";
import zist_10 from "~/assets/images/zist10.jpg";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
@ -21,6 +22,10 @@ const fontSize = {
h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 20,
a: window.innerHeight > maxMobileSize ? 15 : window.innerWidth / 30,
},
desktop: {
h1: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
a: window.innerHeight > maxDesktopSize ? 15 : window.innerWidth / 85,
},
};
class MyBooks extends React.Component {
@ -29,13 +34,19 @@ class MyBooks extends React.Component {
}
render() {
const { books } = this.props;
const { list } = this.props;
return (
<>
{window.innerWidth > 1000 ? (
<>
<div className="mybooks d-flex flex-column">
<Navbar />
<BreadCrumbs />
<div className="mybooks__list d-flex flex-wrap p-1">
{list.map((item, i) => (
<Item data={item} key={i} id={i} />
))}
</div>
</div>
<Footer />
</>
@ -46,7 +57,7 @@ class MyBooks extends React.Component {
<Navbar />
{/* <h1 style={{ fontSize: fontSize.mobile.h1 }}>کتابهای من</h1> */}
<div className="d-flex flex-wrap p-1">
{books.map((item, i) => (
{list.map((item, i) => (
<Item data={item} key={i} id={i} />
))}
</div>
@ -69,76 +80,37 @@ export default connect(
const Item = (props) => {
const { data, id } = props;
return (
<div className="mobile-products-product d-flex flex-column">
<img src={data.imageUrl} alt={"عکس مجصول"} />
<div className="mobile-products-product__info d-flex flex-column">
<h1 style={{ fontSize: fontSize.mobile.h1 }}>{data.title}</h1>
</div>
</div>
<>
{window.innerWidth < 1000 &&
data.condition === 2 &&
data.product.productType === (1 || 3) ? (
<div className="mobile-products-product d-flex flex-column">
<img
src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`}
alt={"عکس مجصول"}
/>
<div className="mobile-products-product__info d-flex flex-column">
<h1 style={{ fontSize: fontSize.mobile.h1 }}>
{data.product.book.name}
</h1>
</div>
</div>
) : null}
{window.innerWidth > 1000 &&
data.condition === 2 &&
data.product.productType === (1 || 3) ? (
<div className="products-product d-flex flex-column">
<img
src={`https://dnvn.ir/api/v1/file/${data.product.book.fileIds}`}
alt={"عکس مجصول"}
/>
<div className="mobile-products-product__info d-flex flex-column">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>
{data.product.book.name}
</h1>
</div>
</div>
) : null}
</>
);
};
MyBooks.defaultProps = {
books: [
{
id: 0,
title: "علوم ششم",
link: "",
imageUrl: sciense_6,
status: {
digital: true,
ar: true,
},
},
{
id: 1,
link: "",
title: "علوم هشتم",
imageUrl: sciense_8,
status: {
digital: false,
ar: true,
},
},
{
id: 2,
link: "",
title: "علوم نهم",
imageUrl: sciense_9,
status: {
digital: true,
ar: false,
},
},
{
id: 3,
link: "",
title: "علوم هفتم",
imageUrl: sciense_7,
status: {
digital: true,
ar: true,
},
},
{
id: 6,
link: "",
title: "شیمی دهم",
imageUrl: shimi_10,
status: {
digital: true,
ar: true,
},
},
{
id: 7,
link: "",
title: "زیست دهم",
imageUrl: zist_10,
status: {
digital: true,
ar: true,
},
},
],
};

@ -0,0 +1,14 @@
.mybooks {
width: 100vw;
max-width: 1250px;
margin: 0px auto;
padding: 0px 10px 40px;
direction: rtl;
overflow-x: hidden;
min-height: calc(100vh - 288px);
padding-top: 70px;
&__list {
max-width: 1000px;
margin: 0px auto;
}
}

@ -37,10 +37,10 @@
&--purchase {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
color: #c24141 !important;
border: 1px solid #c24141 !important;
border-right: 0px solid white;
background-color: #efefef;
color: #6f7074 !important;
flex: 1;
margin-right: 2px;
}
&--digitalButton {
border-top-right-radius: 8px;
@ -48,6 +48,7 @@
background-color: #efefef;
color: #6f7074 !important;
flex: 1;
margin-left: 2px;
}
&--sampleButton {
border-radius: 8px;

@ -1,7 +1,7 @@
import React, { Component, useState } from "react";
import ppt from "../../../assets/icons/ppt.svg";
import MaterialAudioPlayer from '../VoiceBox/Material-audio-player/index';
import MaterialAudioPlayer from "../VoiceBox/Material-audio-player/index";
import "./index.scss";
@ -46,7 +46,7 @@ const Identifier = (props) => {
className="d-flex align-items-center"
>
<span></span>
{props.data.title}
{props.data.name}
</h2>
<MaterialAudioPlayer />
</a>
@ -58,7 +58,7 @@ const Identifier = (props) => {
className="d-flex align-items-center"
>
<span></span>
{props.data.title}
{props.data.name}
</h2>
</a>
) : null}
@ -69,7 +69,7 @@ const Identifier = (props) => {
className="d-flex align-items-center"
>
<span></span>
{props.data.title}
{props.data.name}
</h2>
</a>
) : null}
@ -80,7 +80,7 @@ const Identifier = (props) => {
className="d-flex align-items-center"
>
<span></span>
{props.data.title}
{props.data.name}
</h2>
</a>
) : null}
@ -100,7 +100,7 @@ const Identifier = (props) => {
const Item = (props) => {
return (
<li style={{ fontSize: fontSize.desktop.links.li }}>
<a href={props.data.link}>{props.data.title}</a>
<a href={props.data.link}>{props.data.name}</a>
</li>
);
};

@ -1,112 +1,111 @@
.book-content{
.book-content {
width: 100%;
&__header{
&__header {
margin-bottom: 15px;
span{
span {
height: 1px;
background-color: green;
background-color: rgb(165, 165, 165);
display: flex;
flex: 1;
}
h2{
h2 {
font-family: numeralBold;
color: #6F7074;
color: #6f7074;
margin-bottom: 0px;
padding-left: 5px;
}
}
&-ppt{
&-ppt {
width: 100%;
border-radius: 10px;
margin: 10px 0px;
text-decoration: none;
padding: 10px 10px;
background: url(../../../assets/icons/ppt.svg) no-repeat #8dfaf61f;
background-size: 40px;
background-size: 35px;
background-position: 10px 10px;
h2{
h2 {
font-family: numeralLight;
color: #0D9189;
color: #0d9189;
padding: 5px;
span{
span {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #0D9189;
background-color: #0d9189;
margin-left: 5px;
}
}
}
&-pdf{
&-pdf {
width: 100%;
border-radius: 10px;
margin: 10px 0px;
text-decoration: none;
padding: 10px 10px;
background: url(../../../assets/icons/pdf.svg) no-repeat #ffa9a91e;
background-size: 37px;
background-position: 10px 10px;
h2{
background-size: 35px;
background-position: 10px 5px;
h2 {
font-family: numeralLight;
color: #FF0808;
color: #ff0808;
padding: 5px;
span{
span {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #FF0808;
background-color: #ff0808;
margin-left: 5px;
}
}
}
&-voice{
&-voice {
width: 100%;
border-radius: 10px;
background-color: #8dfac541;
padding: 10px 10px;
margin: 10px 0px;
text-decoration: none;
.MuiPaper-elevation1{
.MuiPaper-elevation1 {
box-shadow: none !important;
}
.MuiGrid-container{
.MuiGrid-container {
flex-wrap: nowrap !important;
flex-direction: row-reverse;
background-color: rgba(255,255,255,0) !important;
background-color: rgba(255, 255, 255, 0) !important;
padding: 0px !important;
}
.MuiGrid-item{
.MuiGrid-item {
display: flex !important;
flex-direction: row !important;
padding: 0px !important;
margin-right: 5px !important;
p{
color: #02A255 !important;
p {
color: #02a255 !important;
}
}
.MuiSvgIcon-root{
color: #37D386 !important;
.MuiSvgIcon-root {
color: #37d386 !important;
font-size: 50px !important;
}
.MuiSlider-root{
color: #37D386;
.MuiSlider-root {
color: #37d386;
}
h2{
h2 {
font-family: numeralLight;
color: #02733C;
span{
color: #02733c;
span {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #00CC69;
background-color: #00cc69;
margin-left: 5px;
}
}
}
&-video{
&-video {
width: 100%;
border-radius: 10px;
background-color: #8ddbfa41;
@ -116,10 +115,10 @@
background-size: 28px;
background-position: 18px 13px;
text-decoration: none;
h2{
h2 {
font-family: numeralLight;
color: #021c73;
span{
span {
width: 7px;
height: 7px;
border-radius: 50%;
@ -128,7 +127,7 @@
}
}
}
&-links{
&-links {
width: 100%;
border-radius: 10px;
background-color: #fffac948;
@ -138,11 +137,11 @@
background: url(../../../assets/icons/attachment.svg) no-repeat #fffac948;
background-size: 37px;
background-position: 10px 50%;
h2{
h2 {
font-family: numeralMedium;
color: #72891edc;
padding: 5px;
span{
span {
width: 10px;
height: 10px;
border-radius: 50%;
@ -150,19 +149,18 @@
margin-left: 5px;
}
}
ul{
ul {
padding: 0px;
margin: 0px;
padding-right: 15px;
color: #72891e;
li{
li {
font-family: numeralLight;
a{
a {
text-decoration: none;
color: #72891e;
}
}
}
}
}
}

@ -20,7 +20,7 @@ export default function Modal(props) {
<>
{window.innerWidth > 1000 ? null : (
<div
className="qr-image-modal d-flex"
className="mobile-qr-image-modal d-flex"
onTouchStart={(e) => setClientX(e.touches[0].clientX)}
onTouchEnd={(e) => handleTouch(e.changedTouches[0].clientX)}
>
@ -37,14 +37,14 @@ export default function Modal(props) {
/>
<div
className="qr-image-modal__slide d-flex justify-content-center align-items-center"
className="mobile-qr-image-modal__slide d-flex justify-content-center align-items-center"
onClick={() => handleNavigation("right", selectedImage)}
>
<ChevronRightRoundedIcon style={{ fontSize: 35, color: "white" }} />
</div>
<img src={`https://dnvn.ir/api/v1/file/${selectedImage}`} />
<div
className="qr-image-modal__slide d-flex justify-content-center align-items-center"
className="mobile-qr-image-modal__slide d-flex justify-content-center align-items-center"
onClick={() => handleNavigation("left", selectedImage)}
>
<ChevronLeftRoundedIcon style={{ fontSize: 35, color: "white" }} />

@ -16,7 +16,6 @@
width: calc(100% - 70px);
height: 100%;
object-fit: contain;
margin: 20px 0px;
}
}

@ -1,5 +1,6 @@
import React, { Component, useState } from "react";
import Modal from "./Modal/index";
import PhotoLibraryRoundedIcon from "@material-ui/icons/PhotoLibraryRounded";
import "./index.scss";
@ -8,6 +9,10 @@ const maxMobileSize = 550;
const fontSize = {
mobile: {
span: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 10,
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25,
},
desktop: {
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 80,
},
};
export default function QRImage(props) {
@ -194,8 +199,23 @@ export default function QRImage(props) {
return (
<>
{window.innerWidth < 1000 ? mobileImages() : null}
{window.innerWidth > 1000 ? desktopImages() : null}
{window.innerWidth < 1000 ? (
<div className="d-flex flex-column">
<h3 style={{ fontSize: fontSize.mobile.h3 }}>
<PhotoLibraryRoundedIcon style={{ fontSize: 30 }} /> عکسها{" "}
</h3>
{mobileImages()}
</div>
) : null}
{window.innerWidth > 1000 ? (
<div className="d-flex flex-column">
<h3 style={{ fontSize: fontSize.desktop.h3 }}>
<PhotoLibraryRoundedIcon style={{ fontSize: 30 }} />
عکسها
</h3>
{desktopImages()}
</div>
) : null}
</>
);
}

@ -1,6 +1,7 @@
.mobile-qr-image {
width: 100%;
justify-content: space-between;
margin: 0px 0px 20px;
&__single {
width: 100%;
border-radius: 10px;

@ -1,12 +1,20 @@
import React from "react";
import PictureAsPdfRoundedIcon from "@material-ui/icons/PictureAsPdfRounded";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 100,
div: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 100,
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 80,
},
mobile: {
h2: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 30,
div: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 30,
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25,
},
};
@ -14,32 +22,52 @@ export default function PDF(props) {
return (
<>
{window.innerWidth > 1000 ? (
<a
href={props.data.file}
download
className="pdf-box d-flex flex-column"
id="pdf"
>
<h2 style={{fontSize: fontSize.desktop.h2 }} className="d-flex align-items-center">
<span></span>
{props.data.title}
</h2>
<div></div>
</a>
<div className="d-flex flex-column">
<h3 style={{ fontSize: fontSize.desktop.h3 }}>
<PictureAsPdfRoundedIcon style={{ fontSize: 30 }} /> فایل PDF
</h3>
<a
href={"https://dnvn.ir/api/v1/file/${props.data.fileIds}"}
download
className="pdf-box d-flex flex-column"
id="pdf"
>
<h2
style={{ fontSize: fontSize.desktop.h2 }}
className="d-flex align-items-center"
>
<span></span>
{props.data.name}
</h2>
<div style={{ fontSize: fontSize.desktop.div }}>
برای دانلود این فایل روی اینجا کلیک کن
</div>
</a>
</div>
) : null}
{window.innerWidth < 1000 ? (
<a
href={props.data.file}
id="pdf"
download
className="mobile-pdf-box d-flex flex-column"
>
<h2 className="d-flex align-items-center">
<span></span>
{props.data.title}
</h2>
<div></div>
</a>
<div className="d-flex flex-column">
<h3 style={{ fontSize: fontSize.mobile.h3 }}>
<PictureAsPdfRoundedIcon style={{ fontSize: 30 }} /> فایل PDF
</h3>
<a
href={"https://dnvn.ir/api/v1/file/${props.data.fileIds}"}
id="pdf"
download
className="mobile-pdf-box d-flex flex-column"
>
<h2
style={{ fontSize: fontSize.mobile.h2 }}
className="d-flex align-items-center"
>
<span></span>
{props.data.name}
</h2>
<div style={{ fontSize: fontSize.mobile.div }}>
برای دانلود این فایل روی اینجا کلیک کن
</div>
</a>
</div>
) : null}
</>
);

@ -2,7 +2,7 @@
width: 100%;
border-radius: 10px;
background-color: #ffa9a91e;
margin: 15px 0px;
margin: 0px 0px 20px;
text-decoration: none;
height: calc(100vh / 9);
padding: 20px 10px;
@ -22,6 +22,11 @@
margin-left: 5px;
}
}
div {
text-decoration: none;
color: #ff0808;
font-family: numeralLight;
}
}
.pdf-box {
@ -32,9 +37,9 @@
margin: 15px auto;
text-decoration: none;
height: calc(100vh / 9);
padding: 20px 10px;
padding: 3px 10px;
background: url(../../../assets/icons/pdf.svg) no-repeat #ffa9a91e;
background-size: 45px;
background-size: 40px;
background-position: 18px 50%;
h2 {
font-family: numeralMedium;
@ -48,4 +53,9 @@
margin-left: 5px;
}
}
div {
text-decoration: none;
color: #ff0808;
font-family: numeralLight;
}
}

@ -1,32 +1,65 @@
import React from 'react';
import './index.scss';
import SlideshowRoundedIcon from "@material-ui/icons/SlideshowRounded";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop: {
h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 100,
div: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 100,
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 80,
},
mobile: {
h2: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 30,
div: window.innerWidth > maxMobileSize ? 13 : window.innerWidth / 30,
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25,
},
};
export default function PowerPoint(props){
return(
<>
{
window.innerWidth > 1000 ?
<a href={props.data.file} id="ppt" download className="ppt-box d-flex flex-column">
<h2 style={{fontSize: fontSize.desktop.h2 }} className="d-flex align-items-center"><span></span>{props.data.title}</h2>
<div></div>
</a> : null
}
{
window.innerWidth < 1000 ?
<a href={props.data.file} id="ppt" download className="mobile-ppt-box d-flex flex-column">
<h2 className="d-flex align-items-center"><span></span>{props.data.title}</h2>
<div></div>
</a> : null
}
</>
);
}
export default function PowerPoint(props) {
return (
<>
{window.innerWidth > 1000 ? (
<div className="d-flex flex-column">
<h3 style={{ fontSize: fontSize.desktop.h3 }}>
<SlideshowRoundedIcon style={{ fontSize: 30 }} /> فایل PDF
</h3>
<a
href={`https://dnvn.ir/api/v1/file/${props.data.fileIds}`}
id="ppt"
download
className="ppt-box d-flex flex-column"
>
<h2
style={{ fontSize: fontSize.desktop.h2 }}
className="d-flex align-items-center"
>
<span></span>
{props.data.name}
</h2>
<div style={{ fontSize: fontSize.desktop.div }}>
برای دانلود این فایل روی اینجا کلیک کن
</div>
</a>
</div>
) : null}
{window.innerWidth < 1000 ? (
<a
href={`https://dnvn.ir/api/v1/file/${props.data.fileIds}`}
id="ppt"
download
className="mobile-ppt-box d-flex flex-column"
>
<h2 className="d-flex align-items-center">
<span></span>
{props.data.name}
</h2>
<div style={{ fontSize: fontSize.desktop.div }}>
برای دانلود این فایل روی اینجا کلیک کن
</div>
</a>
) : null}
</>
);
}

@ -22,6 +22,11 @@
margin-left: 5px;
}
}
div {
text-decoration: none;
color: #ff0808;
font-family: numeralLight;
}
}
.ppt-box {
@ -48,4 +53,9 @@
margin-left: 5px;
}
}
div {
text-decoration: none;
color: #ff0808;
font-family: numeralLight;
}
}

@ -2,31 +2,44 @@ import React from "react";
import { VideoCard } from "material-ui-player";
import ReactVideoJsPlayer from "./React-video-js-player/index";
import PlayCircleFilledRoundedIcon from "@material-ui/icons/PlayCircleFilledRounded";
import "./index.scss";
const maxMobileSize = 550;
const fontSize = {
mobile: {
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25,
},
desktop: {
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 80,
},
};
export default function VideoBox(props) {
const { data } = props;
return (
<>
{window.innerWidth > 1000 ? (
<div className="video-box d-flex flex-column" id="video">
<h2
style={{ fontSize: props.fontSize.desktop.content.h2 }}
className="d-flex align-items-center"
>
<span></span>
{data.title}
</h2>
<ReactVideoJsPlayer fileId={data.fileIds} />
<div className="d-flex flex-column">
<h3 style={{ fontSize: fontSize.desktop.h3 }}>
<PlayCircleFilledRoundedIcon style={{ fontSize: 35 }} />
فیلمها
</h3>
<div className="video-box d-flex flex-column" id="video">
<ReactVideoJsPlayer fileId={data.fileIds} />
</div>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-video-box d-flex flex-column" id="video">
<h2 className="d-flex align-items-center">
<span></span>
{data.title}
</h2>
<ReactVideoJsPlayer fileId={data.fileIds} />
<div className="d-flex flex-column">
<h3 style={{ fontSize: fontSize.mobile.h3 }}>
<PlayCircleFilledRoundedIcon style={{ fontSize: 35 }} /> فیلمها
</h3>
<div className="mobile-video-box d-flex flex-column" id="video">
<ReactVideoJsPlayer fileId={data.fileIds} />
</div>
</div>
) : null}
</>

@ -1,24 +1,24 @@
.mobile-video-box{
.mobile-video-box {
width: 100%;
border-radius: 10px;
background-color: #eee;
margin: 15px 0px;
margin: 0px 0px 20px;
height: calc(100vh / 4);
position: relative;
h2{
h2 {
font-family: numeralMedium;
font-size: calc(100vw / 35);
color: #02733C;
color: #02733c;
padding: 5px;
background-color: #FFFFFF;
color: #4D4D4F;
background-color: #ffffff;
color: #4d4d4f;
position: absolute;
right: 10px;
top: 20px;
}
}
.video-box{
.video-box {
width: 100%;
max-width: 550px;
border-radius: 10px;
@ -27,14 +27,14 @@
height: calc(100vh / 2.5);
min-height: 300px;
position: relative;
h2{
h2 {
font-family: numeralMedium;
color: #02733C;
color: #02733c;
padding: 5px;
background-color: #FFFFFF;
color: #4D4D4F;
background-color: #ffffff;
color: #4d4d4f;
position: absolute;
right: 10px;
top: 20px;
}
}
}

@ -13,7 +13,7 @@ export default function VoiceBox(props) {
className="d-flex align-items-center"
>
<span></span>
{data.title}
{data.name}
</h2>
<MaterialAudioPlayer data={data.fileIds} />
</div>
@ -22,7 +22,7 @@ export default function VoiceBox(props) {
<div className="mobile-voice-box d-flex flex-column" id="voice">
<h2 className="d-flex align-items-center">
<span></span>
{props.data.title}
{data.name}
</h2>
<MaterialAudioPlayer data={data.fileIds} />
</div>

@ -23,7 +23,20 @@ import sciense_7 from "../../assets/images/sciense-7.png";
import "./index.scss";
const maxDesktopSize = 1250;
const grades = [
"اول",
"دوم",
"سوم",
"چهارم",
"پنجم",
"ششم",
"هفتم",
"هشتم",
"نهم",
"دهم",
"یازدهم",
"دوازدهم",
];
class QR extends Component {
state = {
theme: true,
@ -86,10 +99,14 @@ class QR extends Component {
},
};
// if (this.content.clientHeight < window.innerHeight - 60) {
// this.buttons.style.display = "none";
// }
return (
<>
{window.innerWidth > 1000 ? (
!this.props.loading ? (
qrList ? (
<>
<div className="qr d-flex flex-column">
<Navbar />
@ -98,36 +115,33 @@ class QR extends Component {
<section className="qr__sidebar d-flex flex-column p-2">
<header className="qr__sidebar--header d-flex">
<div className="qr__sidebar--header__right d-flex">
<img src={QR.image} alt={QR.title} />
<img
src={`https://dnvn.ir/api/v1/file/${qrList.book.fileIds}`}
alt={qrList.book.name}
/>
</div>
<div className="qr__sidebar--header__left d-flex flex-column">
<h1 style={{ fontSize: fontSize.desktop.sidebar.h1 }}>
{QR.title}
{qrList.book.name}
</h1>
<h2 style={{ fontSize: fontSize.desktop.sidebar.h2 }}>
{QR.subTitle}
پایه {grades[qrList.book.gradeId]}
</h2>
<div
style={{ fontSize: fontSize.desktop.sidebar.div }}
>
شما در حال مطالعه{" "}
<strong>صفحه {QR.sample.page}</strong> هستید.
</div>
<div
style={{ fontSize: fontSize.desktop.sidebar.div }}
>
پیشرفت شما در مطالعه کتاب به{" "}
<span>{QR.sample.percent} درصد</span> رسیده است.
<strong>صفحه {qrList.book.pagesNum}</strong> هستید.
</div>
</div>
</header>
<SubjectsDropdown />
<BookContent data={qrList.content} />
{/* <SubjectsDropdown /> */}
<BookContent data={qrList.qr.content} />
</section>
<section className="qr__content d-flex flex-column">
<header className="qr__content--header d-flex justify-content-end">
<div className="qr__content--header__tools d-flex">
<span
{/* <span
className="d-flex justify-content-center align-items-center"
onClick={() =>
this.setState({ theme: !this.state.theme })
@ -139,7 +153,7 @@ class QR extends Component {
color: this.state.theme ? "#7dc241" : "white",
}}
/>
</span>
</span> */}
<span
className="d-flex justify-content-center align-items-center"
onClick={() => this.handleZoom("increase")}
@ -154,7 +168,7 @@ class QR extends Component {
</span>
</div>
</header>
{qrList.content.map((item, i) => (
{qrList.qr.content.map((item, i) => (
<Identifier fontSize={fontSize} data={item} key={i} />
))}
</section>
@ -177,14 +191,19 @@ class QR extends Component {
)
) : null}
{window.innerWidth < 1000 ? (
!this.props.loading ? (
qrList ? (
<>
<div className="mobile-qr d-flex flex-column">
<Navbar />
{qrList ? (
<div className="d-flex p-3">
{this.state.menu ? (
<div className="mobile-qr__buttons d-flex flex-column align-items-center">
<div
className="mobile-qr__buttons d-flex flex-column align-items-center"
ref={(div) => {
this.buttons = div;
}}
>
<div>
<img
src={exit}
@ -195,12 +214,17 @@ class QR extends Component {
/>
</div>
<button>نمایش تمامی محتواها</button>
{qrList.content.map((item, i) => (
{qrList.qr.content.map((item, i) => (
<MenuIdentifier data={item} key={i} />
))}
</div>
) : (
<div className="mobile-qr__buttons d-flex flex-column align-items-center">
<div
className="mobile-qr__buttons d-flex flex-column align-items-center"
ref={(div) => {
this.buttons = div;
}}
>
<MoreVertIcon
style={{ fontSize: 40, color: "grey" }}
onClick={() =>
@ -209,11 +233,16 @@ class QR extends Component {
/>
</div>
)}
<div className="mobile-qr__content d-flex flex-column">
<div
className="mobile-qr__content d-flex flex-column"
ref={(div) => {
this.content = div;
}}
>
<div className="mobile-qr-scan__back d-flex mb-2">
<Link to="/">بازگشت</Link>
</div>
{qrList.content.map((item, i) => (
{qrList.qr.content.map((item, i) => (
<Identifier data={item} key={i} />
))}
</div>

@ -6,6 +6,10 @@
direction: rtl;
padding-top: 70px;
overflow-x: hidden;
h3 {
color: rgb(85, 85, 85);
font-family: numeralLight;
}
&__notAccess {
justify-content: center;
h1 {
@ -210,7 +214,7 @@
padding: 8px;
background-color: #eee;
border-radius: 10px;
width: 130px;
// width: 130px;
justify-content: space-between;
span {
cursor: pointer;
@ -219,6 +223,7 @@
background-color: #ddd;
color: #7dc241;
font-size: 20px;
margin: 3px;
}
}
}
@ -233,6 +238,10 @@
letter-spacing: -1px;
text-align: justify;
}
h3 {
font-family: numeralLight;
color: #4e4e4e;
}
}
// &__buttons{

@ -29,14 +29,10 @@ class Support extends Component {
<div className="mobile-contact d-flex flex-column align-items-center">
<Navbar page={"contact"} />
<div className="mobile-contact__form d-flex flex-column">
<h1 style={{ fontSize: fontSize.mobile.h1 }}>تماس با ما</h1>
<p style={{ fontSize: fontSize.mobile.p }}>
برای ارتباط با دنیای شگفت انگیز دانوین از فرم زیر استفاده کنید و
پس از انتخاب دپارتمان مد نظر پیام خود را ارسال کنید.
</p>
<h1 style={{ fontSize: fontSize.mobile.h1 }}>پشتیبانی</h1>
<Input label={"نامونام خانوادگی"} name={"name"} />
<Input label={"شماره تماس"} name={"mobile"} />
<Select options={["همه", "پرفروش"]} />
{/* <Select options={["همه", "پرفروش"]} /> */}
<Input label={"موضوع پیام"} name={"subject"} />
<textarea
placeholder="متن پیام"

Loading…
Cancel
Save