Danovin
/
danovin
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reza added some changes

Browse Source
master
RezaAshrafi77 3 years ago
parent 5cfa1c519f
commit f0e7f8005c
26 changed files with 448 additions and 264 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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

12
src/AppRouter.js
Unescape View File

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

2
src/Redux/reducers/book.js
Unescape View File

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

8
src/views/Auth/Login/Cellphone/index.js
Unescape View File

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

6
src/views/Contact/index.js
Unescape View File

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

2
src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
Unescape View File

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

45
src/views/MyBooks/BreadCrumb/index.js
Unescape View File

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

8
src/views/MyBooks/BreadCrumb/index.scss
Unescape View File

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

120
src/views/MyBooks/index.js
Unescape View File

@ -5,6 +5,7 @@ import { Link } from "react-router-dom";
import Navbar from "../Home/Navbar/index"; import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index"; import Footer from "../Home/Footer/index";
import BreadCrumbs from "./BreadCrumb/index";
import sciense_6 from "~/assets/images/olum6.jpg"; import sciense_6 from "~/assets/images/olum6.jpg";
import sciense_8 from "~/assets/images/olum8.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 sciense_7 from "~/assets/images/olum7.jpg";
import shimi_10 from "~/assets/images/shimi10.jpg"; import shimi_10 from "~/assets/images/shimi10.jpg";
import zist_10 from "~/assets/images/zist10.jpg"; import zist_10 from "~/assets/images/zist10.jpg";
import "./index.scss";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const maxMobileSize = 550; const maxMobileSize = 550;
@ -21,6 +22,10 @@ const fontSize = {
h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 20, h1: window.innerWidth > maxMobileSize ? 24 : window.innerWidth / 20,
a: window.innerHeight > maxMobileSize ? 15 : window.innerWidth / 30, 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 { class MyBooks extends React.Component {
@ -29,13 +34,19 @@ class MyBooks extends React.Component {
} }
render() { render() {
const { books } = this.props; const { list } = this.props;
return ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<> <>
<div className="mybooks d-flex flex-column"> <div className="mybooks d-flex flex-column">
<Navbar /> <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> </div>
<Footer /> <Footer />
</> </>
@ -46,7 +57,7 @@ class MyBooks extends React.Component {
<Navbar /> <Navbar />
{/* <h1 style={{ fontSize: fontSize.mobile.h1 }}>کتابهای من</h1> */} {/* <h1 style={{ fontSize: fontSize.mobile.h1 }}>کتابهای من</h1> */}
<div className="d-flex flex-wrap p-1"> <div className="d-flex flex-wrap p-1">
{books.map((item, i) => ( {list.map((item, i) => (
<Item data={item} key={i} id={i} /> <Item data={item} key={i} id={i} />
))} ))}
</div> </div>
@ -69,76 +80,37 @@ export default connect(
const Item = (props) => { const Item = (props) => {
const { data, id } = props; const { data, id } = props;
return ( return (
<div className="mobile-products-product d-flex flex-column"> <>
<img src={data.imageUrl} alt={"عکس مجصول"} /> {window.innerWidth < 1000 &&
<div className="mobile-products-product__info d-flex flex-column"> data.condition === 2 &&
<h1 style={{ fontSize: fontSize.mobile.h1 }}>{data.title}</h1> data.product.productType === (1 || 3) ? (
</div> <div className="mobile-products-product d-flex flex-column">
</div> <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,
},
},
],
};

14
src/views/MyBooks/index.scss
Unescape View File

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

7
src/views/Product/index.scss
Unescape View File

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

12
src/views/QR/BookContent/index.js
Unescape View File

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

92
src/views/QR/BookContent/index.scss
Unescape View File

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

6
src/views/QR/Image/Modal/index.js
Unescape View File

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

1
src/views/QR/Image/Modal/index.scss
Unescape View File

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

24
src/views/QR/Image/index.js
Unescape View File

@ -1,5 +1,6 @@
import React, { Component, useState } from "react"; import React, { Component, useState } from "react";
import Modal from "./Modal/index"; import Modal from "./Modal/index";
import PhotoLibraryRoundedIcon from "@material-ui/icons/PhotoLibraryRounded";
import "./index.scss"; import "./index.scss";
@ -8,6 +9,10 @@ const maxMobileSize = 550;
const fontSize = { const fontSize = {
mobile: { mobile: {
span: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 10, 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) { export default function QRImage(props) {
@ -194,8 +199,23 @@ export default function QRImage(props) {
return ( return (
<> <>
{window.innerWidth < 1000 ? mobileImages() : null} {window.innerWidth < 1000 ? (
{window.innerWidth > 1000 ? desktopImages() : null} <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
src/views/QR/Image/index.scss
Unescape View File

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

80
src/views/QR/PDF/index.js
Unescape View File

@ -1,12 +1,20 @@
import React from "react"; import React from "react";
import PictureAsPdfRoundedIcon from "@material-ui/icons/PictureAsPdfRounded";
import "./index.scss"; import "./index.scss";
const maxDesktopSize = 1250; const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = { const fontSize = {
desktop: { 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 ( return (
<> <>
{window.innerWidth > 1000 ? ( {window.innerWidth > 1000 ? (
<a <div className="d-flex flex-column">
href={props.data.file} <h3 style={{ fontSize: fontSize.desktop.h3 }}>
download <PictureAsPdfRoundedIcon style={{ fontSize: 30 }} /> فایل PDF
className="pdf-box d-flex flex-column" </h3>
id="pdf" <a
> href={"https://dnvn.ir/api/v1/file/${props.data.fileIds}"}
<h2 style={{fontSize: fontSize.desktop.h2 }} className="d-flex align-items-center"> download
<span></span> className="pdf-box d-flex flex-column"
{props.data.title} id="pdf"
</h2> >
<div></div> <h2
</a> 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} ) : null}
{window.innerWidth < 1000 ? ( {window.innerWidth < 1000 ? (
<a <div className="d-flex flex-column">
href={props.data.file} <h3 style={{ fontSize: fontSize.mobile.h3 }}>
id="pdf" <PictureAsPdfRoundedIcon style={{ fontSize: 30 }} /> فایل PDF
download </h3>
className="mobile-pdf-box d-flex flex-column" <a
> href={"https://dnvn.ir/api/v1/file/${props.data.fileIds}"}
<h2 className="d-flex align-items-center"> id="pdf"
<span></span> download
{props.data.title} className="mobile-pdf-box d-flex flex-column"
</h2> >
<div></div> <h2
</a> 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} ) : null}
</> </>
); );

16
src/views/QR/PDF/index.scss
Unescape View File

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

81
src/views/QR/PowerPoint/index.js
Unescape View File

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

10
src/views/QR/PowerPoint/index.scss
Unescape View File

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

43
src/views/QR/VideoBox/index.js
Unescape View File

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

24
src/views/QR/VideoBox/index.scss
Unescape View File

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

4
src/views/QR/VoiceBox/index.js
Unescape View File

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

75
src/views/QR/index.js
Unescape View File

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

11
src/views/QR/index.scss
Unescape View File

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

8
src/views/Support/index.js
Unescape View File

@ -29,14 +29,10 @@ class Support extends Component {
<div className="mobile-contact d-flex flex-column align-items-center"> <div className="mobile-contact d-flex flex-column align-items-center">
<Navbar page={"contact"} /> <Navbar page={"contact"} />
<div className="mobile-contact__form d-flex flex-column"> <div className="mobile-contact__form 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>
<Input label={"نام‌و‌نام خانوادگی"} name={"name"} /> <Input label={"نام‌و‌نام خانوادگی"} name={"name"} />
<Input label={"شماره تماس"} name={"mobile"} /> <Input label={"شماره تماس"} name={"mobile"} />
<Select options={["همه", "پرفروش"]} /> {/* <Select options={["همه", "پرفروش"]} /> */}
<Input label={"موضوع پیام"} name={"subject"} /> <Input label={"موضوع پیام"} name={"subject"} />
<textarea <textarea
placeholder="متن پیام" placeholder="متن پیام"

Write Preview
Loading…
Cancel
Save