reza added qr desktop

master
Reza_ashrafi 3 years ago
parent 635a0c1416
commit 607d02f340
  1. 105
      src/views/QR/BookContent/index.js
  2. 145
      src/views/QR/BookContent/index.scss
  3. 66
      src/views/QR/PDF/index.js
  4. 27
      src/views/QR/PDF/index.scss
  5. 18
      src/views/QR/PowerPoint/index.js
  6. 25
      src/views/QR/PowerPoint/index.scss
  7. 72
      src/views/QR/SubjectsDropdown/index.js
  8. 47
      src/views/QR/SubjectsDropdown/index.scss
  9. 17
      src/views/QR/VideoBox/index.js
  10. 20
      src/views/QR/VideoBox/index.scss
  11. 16
      src/views/QR/VoiceBox/index.js
  12. 25
      src/views/QR/VoiceBox/index.scss
  13. 79
      src/views/QR/index.js
  14. 148
      src/views/QR/index.scss

@ -0,0 +1,105 @@
import React, { Component, useState } from "react";
import ppt from "../../../assets/icons/ppt.svg";
import "./index.scss";
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
h2: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 120,
ppt: {
h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
},
voice: {
h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
},
links: {
li: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 110,
},
},
};
export default function BookContent(props) {
return (
<div className="book-content d-flex flex-column mt-4">
<header className="book-content__header d-flex align-items-center">
<h2 style={{ fontSize: fontSize.desktop.h2 }}>محتویات کتاب</h2>
<span></span>
</header>
{props.data.map((item, i) => (
<Identifier data={item} key={i} />
))}
</div>
);
}
const Identifier = (props) => {
return (
<>
{props.data.type === "voice" ? (
<a href="#voice" className="book-content-voice d-flex flex-column">
<h2
style={{ fontSize: fontSize.desktop.voice.h2 }}
className="d-flex align-items-center"
>
<span></span>
{props.data.title}
</h2>
<div></div>
</a>
) : null}
{props.data.type === "video" ? (
<a href="#video" className="book-content-video d-flex">
<h2
style={{ fontSize: fontSize.desktop.ppt.h2 }}
className="d-flex align-items-center"
>
<span></span>
{props.data.title}
</h2>
</a>
) : null}
{props.data.type === "pdf" ? (
<a href="#pdf" className="book-content-pdf d-flex">
<h2
style={{ fontSize: fontSize.desktop.ppt.h2 }}
className="d-flex align-items-center"
>
<span></span>
{props.data.title}
</h2>
</a>
) : null}
{props.data.type === "ppt" ? (
<a href="#ppt" className="book-content-ppt d-flex">
<h2
style={{ fontSize: fontSize.desktop.ppt.h2 }}
className="d-flex align-items-center"
>
<span></span>
{props.data.title}
</h2>
</a>
) : null}
{props.data.type === "links" ? (
<div className="book-content-links d-flex flex-column">
<ul>
{props.data.links.map((item, i) => (
<Item data={item} key={i} />
))}
</ul>
</div>
) : null}
</>
);
};
const Item = (props) => {
return (
<li style={{ fontSize: fontSize.desktop.links.li }}>
<a href={props.data.link}>{props.data.title}</a>
</li>
);
};

@ -0,0 +1,145 @@
.book-content{
width: 100%;
&__header{
margin-bottom: 15px;
span{
height: 1px;
background-color: green;
display: flex;
flex: 1;
}
h2{
font-family: numeralBold;
color: #6F7074;
margin-bottom: 0px;
padding-left: 5px;
}
}
&-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-position: 10px 10px;
h2{
font-family: numeralLight;
color: #0D9189;
padding: 5px;
span{
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #0D9189;
margin-left: 5px;
}
}
}
&-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{
font-family: numeralLight;
color: #FF0808;
padding: 5px;
span{
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #FF0808;
margin-left: 5px;
}
}
}
&-voice{
width: 100%;
border-radius: 10px;
background-color: #8dfac541;
padding: 10px 10px;
margin: 10px 0px;
h2{
font-family: numeralLight;
color: #02733C;
span{
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #00CC69;
margin-left: 5px;
}
}
div{
width: 100%;
height: 40px;
background-color: #02733C;
}
}
&-video{
width: 100%;
border-radius: 10px;
background-color: #8ddbfa41;
padding: 10px 10px;
margin: 10px 0px;
background: url(../../../assets/icons/video-player.svg) no-repeat #8ddbfa41;
background-size: 28px;
background-position: 18px 13px;
text-decoration: none;
h2{
font-family: numeralLight;
color: #021c73;
span{
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #021c73;
margin-left: 5px;
}
}
}
&-links{
width: 100%;
border-radius: 10px;
background-color: #fffac948;
margin: 15px 0px;
text-decoration: none;
padding: 20px 10px;
background: url(../../../assets/icons/attachment.svg) no-repeat #fffac948;
background-size: 37px;
background-position: 10px 50%;
h2{
font-family: numeralMedium;
color: #72891edc;
padding: 5px;
span{
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #72891e;
margin-left: 5px;
}
}
ul{
padding: 0px;
margin: 0px;
padding-right: 15px;
color: #72891e;
li{
font-family: numeralLight;
a{
text-decoration: none;
color: #72891e;
}
}
}
}
}

@ -1,22 +1,46 @@
import React from 'react';
import React from "react";
import './index.scss';
export default function PDF(props){
return(
<>
{
window.innerWidth > 1000 ?
<div className="pdf-box d-flex flex-column">
<h2>{props.data.title}</h2>
</div> : null
}
{
window.innerWidth < 1000 ?
<a href={props.data.file} 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> : null
}
</>
);
}
import "./index.scss";
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
},
};
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>
) : 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>
) : null}
</>
);
}

@ -19,5 +19,32 @@
margin-left: 5px;
}
}
}
.pdf-box{
width: 100%;
border-radius: 10px;
max-width: 400px;
background-color:#ffa9a91e;
margin: 15px auto;
text-decoration: none;
height: calc(100vh / 9);
padding: 20px 10px;
background: url(../../../assets/icons/pdf.svg) no-repeat #ffa9a91e;
background-size: 45px;
background-position: 18px 50%;
h2{
font-family: numeralMedium;
color: #FF0808;
padding: 5px;
span{
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #FF0808;
margin-left: 5px;
}
}
}

@ -1,18 +1,28 @@
import React from 'react';
import './index.scss';
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
},
};
export default function PowerPoint(props){
return(
<>
{
window.innerWidth > 1000 ?
<div className="ppt-box d-flex flex-column">
<h2>{props.data.title}</h2>
</div> : null
<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} download className="mobile-ppt-box d-flex flex-column">
<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

@ -19,5 +19,30 @@
margin-left: 5px;
}
}
}
.ppt-box{
width: 100%;
max-width: 400px;
border-radius: 10px;
background-color : #8dfaf61f;
margin: 15px auto;
text-decoration: none;
height: calc(100vh / 9);
padding: 20px 10px;
background: url(../../../assets/icons/ppt.svg) no-repeat #8dfaf61f;
background-size: 45px;
background-position: 18px 50%;
h2{
font-family: numeralMedium;
color: #0D9189;
padding: 5px;
span{
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #0D9189;
margin-left: 5px;
}
}
}

@ -0,0 +1,72 @@
import React, { Component, useState } from "react";
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
import navbarSearch from "../../../assets/icons/navbarSearch.png";
import "./index.scss";
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
input: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 110,
li: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
},
};
export default function Dropdown(props) {
const [dropdown, setDropdown] = useState(false);
return (
<div className="subjects-dropdown d-flex flex-column mt-3">
<div
className="d-flex align-items-center justify-content-between"
onClick={() => setDropdown(!dropdown)}
>
<h3 style={{ fontSize: fontSize.desktop.h3 }}>
مشاهده فهرست موضوعی کتاب
</h3>
<div>
{dropdown ? (
<KeyboardArrowUpIcon
style={{ color: "#afafaf", fontSize: 30, cursor: "pointer" }}
/>
) : (
<KeyboardArrowDownIcon
style={{ color: "#afafaf", fontSize: 30, cursor: "pointer" }}
/>
)}
</div>
</div>
{dropdown ? (
<>
<div className="subjects-dropdown__search d-flex">
<input type="search" style={{ fontSize: fontSize.desktop.input }} />
<img src={navbarSearch} alt="جستجو" />
</div>
<ul>
{props.subjects.map((item, i) => (
<Item data={item} key={i} />
))}
</ul>
</>
) : null}
</div>
);
}
Dropdown.defaultProps = {
subjects: [
{ id: 0, name: "مقدمه" },
{ id: 1, name: "سخنی با خوانندگان" },
{ id: 2, name: "آتشفشانها و اقیانوسها" },
{ id: 3, name: "نحوه جدایی صفحات کره" },
],
};
const Item = (props) => {
return (
<li style={{fontSize : fontSize.desktop.li }}>{props.data.name}</li>
);
};

@ -0,0 +1,47 @@
.subjects-dropdown {
width: 100%;
padding: 10px;
border: 1px solid #eee;
border-radius: 10px;
h3 {
font-family: numeralBold;
color: #6f7074;
cursor: pointer;
}
&__search{
width: 100%;
position: relative;
margin-top: 5px;
img{
position: absolute;
left: 7px;
top: 7px;
width: 20px;
}
input{
width: 100%;
padding: 5px 5px 5px 35px;
font-family: numeralMedium;
border: 1px solid #afafaf;
border-radius: 5px;
color: #6f7074;
&:focus{
outline: 0px
}
}
}
ul{
direction: rtl;
padding-right: 15px;
padding-top: 5px;
height: 120px;
overflow-y: scroll;
margin-top: 10px;
text-align: right;
li{
font-family: numeralLight;
color: #6f7074;
margin-bottom: 8px;
}
}
}

@ -1,18 +1,29 @@
import React from 'react';
import './index.scss';
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
},
};
export default function VideoBox(props){
return(
<>
{
window.innerWidth > 1000 ?
<div className="video-box d-flex flex-column">
<h2>{props.data.title}</h2>
<div className="video-box d-flex flex-column" id="video">
<h2 style={{fontSize: fontSize.desktop.h2 }} className="d-flex align-items-center"><span></span>{props.data.title}</h2>
<div></div>
</div> : null
}
{
window.innerWidth < 1000 ?
<div className="mobile-video-box d-flex flex-column">
<div className="mobile-video-box d-flex flex-column" id="video">
<h2 className="d-flex align-items-center"><span></span>{props.data.title}</h2>
<div></div>
</div> : null

@ -16,4 +16,24 @@
right: 10px;
top: 20px;
}
}
.video-box{
width: 100%;
max-width: 550px;
border-radius: 10px;
background-color: #eee;
margin: 15px auto;
height: calc(100vh / 3);
position: relative;
h2{
font-family: numeralMedium;
color: #02733C;
padding: 5px;
background-color: #FFFFFF;
color: #4D4D4F;
position: absolute;
right: 10px;
top: 20px;
}
}

@ -1,18 +1,28 @@
import React from 'react';
import './index.scss';
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
},
};
export default function VoiceBox(props){
return(
<>
{
window.innerWidth > 1000 ?
<div className="voice-box d-flex flex-column">
<h2>{props.data.title}</h2>
<div id="voice" className="voice-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>
</div> : null
}
{
window.innerWidth < 1000 ?
<div className="mobile-voice-box d-flex flex-column">
<div className="mobile-voice-box d-flex flex-column" id="voice">
<h2 className="d-flex align-items-center"><span></span>{props.data.title}</h2>
<div></div>
</div> : null

@ -21,4 +21,29 @@
height: 40px;
background-color: #02733C;
}
}
.voice-box{
width: 100%;
max-width: 400px;
border-radius: 10px;
background-color: #8dfac541;
padding: 10px 10px;
margin: 15px auto;
h2{
font-family: numeralLight;
color: #02733C;
span{
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #00CC69;
margin-left: 5px;
}
}
div{
width: 100%;
height: 40px;
background-color: #02733C;
}
}

@ -6,11 +6,30 @@ import VideoBox from "./VideoBox/index";
import PDF from './PDF/index';
import PowerPoint from './PowerPoint/index';
import Links from './Links/index';
import SubjectsDropdown from './SubjectsDropdown/index';
import BookContent from './BookContent/index';
import exit from '../../assets/icons/exit.svg';
import book2 from "../../assets/images/book2.png";
import './index.scss';
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
sidebar: {
h1: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 95,
h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
div: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120,
},
content: {
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 110,
}
},
};
export default class QR extends Component {
render() {
const { QR } = this.props;
@ -18,8 +37,44 @@ export default class QR extends Component {
<>
{window.innerWidth > 1000 ? (
<>
<div className="product-sample d-flex">
<div className="qr d-flex flex-column">
<Navbar />
<div className="d-flex">
<section className="qr__sidebar d-flex flex-column">
<header className="qr__sidebar--header d-flex">
<div className="qr__sidebar--header__right d-flex">
<img src={QR.image} alt={QR.title} />
</div>
<div className="qr__sidebar--header__left d-flex flex-column">
<h1 style={{ fontSize: fontSize.desktop.sidebar.h1 }}>{QR.title}</h1>
<h2 style={{ fontSize: fontSize.desktop.sidebar.h2 }}>{QR.subTitle}</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> رسیده است.
</div>
</div>
</header>
<SubjectsDropdown />
<BookContent data={QR.data} />
</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 className="d-flex justify-content-center align-items-center">+</span>
<span className="d-flex justify-content-center align-items-center">+</span>
<span className="d-flex justify-content-center align-items-center">+</span>
<span className="d-flex justify-content-center align-items-center">+</span>
</div>
</header>
{
QR.data.map((item, i) => (
<Identifier data={item} key={i} />
))
}
</section>
</div>
</div>
<Footer />
</>
@ -28,21 +83,7 @@ export default class QR extends Component {
<>
<div className="mobile-qr d-flex flex-column">
<Navbar />
<header className="mobile-qr__header d-flex">
<div className="mobile-qr__header--right d-flex">
<img src={QR.image} alt={QR.title} />
</div>
<div className="mobile-qr__header--left d-flex flex-column">
<h1>{QR.title}</h1>
<h2>{QR.subTitle}</h2>
<div>
شما در حال مطالعه <strong>صفحه {QR.sample.page}</strong> هستید.
</div>
<div>
پیشرفت شما در مطالعه کتاب به <span>{QR.sample.percent} درصد</span> رسیده است.
</div>
</div>
</header>
<div className="d-flex pt-3">
<div className="mobile-qr__buttons d-flex flex-column">
@ -50,7 +91,7 @@ export default class QR extends Component {
<div className="mobile-qr__content d-flex flex-column">
{
QR.data.map((item, i) => (
<Identifier data={item} />
<Identifier data={item} key={i} />
))
}
</div>
@ -150,11 +191,11 @@ const Identifier = (props) => {
<>
{
props.data.type === 'p' ?
<p>{props.data.text}</p> : null
<p style={{fontSize: window.innerWidth > 1250 ? fontSize.desktop.content.p : ''}}>{props.data.text}</p> : null
}
{
props.data.type === 'h1' ?
<h1>{props.data.text}</h1> : null
<h1 style={{fontSize: window.innerWidth > 1250 ? fontSize.desktop.content.h1 : ''}}>{props.data.text}</h1> : null
}
{
props.data.type === 'voice'?

@ -1,44 +1,44 @@
.mobile-qr{
.mobile-qr {
width: 100vw;
max-width: 1250px;
max-width: 650px;
margin: 0px auto;
padding : 0px 0px 40px;
padding: 0px 0px 40px;
direction: rtl;
padding-top: 70px;
overflow-x: hidden;
&__header{
&__header {
padding: 0px 10px;
width: 100%;
&--right{
img{
&--right {
img {
height: 130px;
}
}
&--left{
justify-content:center;
margin-right : 30px;
h1{
&--left {
justify-content: center;
margin-right: 30px;
h1 {
font-family: numeralBold;
font-size: calc(100vw / 25);
color: #7DC241;
color: #7dc241;
letter-spacing: -1px;
}
h2{
h2 {
font-family: numeralBold;
font-size: calc(100vw / 32);
color: #6F7074;
color: #6f7074;
}
div{
div {
font-family: numeralLight;
font-size: calc(100vw / 30);
color: #6F7074;
color: #6f7074;
letter-spacing: -1px;
strong{
strong {
font-family: numeralMedium;
font-size: calc(100vw / 30);
color: #05dfba;
}
span{
span {
font-family: numeralMedium;
font-size: calc(100vw / 30);
font-weight: 600;
@ -46,20 +46,20 @@
}
}
}
&__buttons{
&__buttons {
width: 35px;
background-color: #eee;
}
&__content{
&__content {
width: calc(100% - 35px);
padding: 0px 10px;
h1{
h1 {
font-family: numeralBold;
font-size: calc(100vw / 22);
color: #6f7074;
letter-spacing: -1px;
}
p{
p {
font-family: numeralLight;
font-size: calc(100vw / 30);
color: #6f7074;
@ -67,4 +67,108 @@
text-align: justify;
}
}
}
}
.qr {
width: 100vw;
max-width: 1250px;
margin: 0px auto;
padding: 0px 0px 40px;
direction: rtl;
overflow-x: hidden;
min-height: calc(100vh - 288px);
.qr__sidebar {
flex: 1;
&--header {
width: 100%;
&__right {
img {
height: 90px;
border-radius: 5px;
}
}
&__left {
justify-content: center;
margin-right: 10px;
h1 {
font-family: numeralBold;
color: #7dc241;
letter-spacing: -1px;
}
h2 {
font-family: numeralBold;
color: #6f7074;
}
div {
font-family: numeralLight;
color: #6f7074;
letter-spacing: -1px;
strong {
font-family: numeralMedium;
color: #05dfba;
}
span {
font-family: numeralMedium;
font-weight: 600;
}
}
}
}
}
.qr__content {
flex: 3;
background-color: #fafafa;
border-radius: 10px;
margin-right: 20px;
padding: 10px;
&--header {
width: 100%;
padding: 10px;
&__tools {
padding: 8px;
background-color: #eee;
border-radius: 10px;
width: 160px;
justify-content: space-between;
span {
width: 30px;
height: 30px;
background-color: #ddd;
}
}
}
h1 {
font-family: numeralBold;
color: #6f7074;
letter-spacing: -1px;
}
p {
font-family: numeralLight;
color: #6f7074;
letter-spacing: -1px;
text-align: justify;
}
}
// &__buttons{
// width: 35px;
// background-color: #eee;
// }
// &__content{
// width: calc(100% - 35px);
// padding: 0px 10px;
// h1{
// font-family: numeralBold;
// font-size: calc(100vw / 22);
// color: #6f7074;
// letter-spacing: -1px;
// }
// p{
// font-family: numeralLight;
// font-size: calc(100vw / 30);
// color: #6f7074;
// letter-spacing: -1px;
// text-align: justify;
// }
// }
}

Loading…
Cancel
Save