From 607d02f3404459b8f20cb871105c9150cc15a580 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Fri, 2 Jul 2021 00:36:07 +0430 Subject: [PATCH] reza added qr desktop --- src/views/QR/BookContent/index.js | 105 ++++++++++++++++ src/views/QR/BookContent/index.scss | 145 ++++++++++++++++++++++ src/views/QR/PDF/index.js | 66 ++++++---- src/views/QR/PDF/index.scss | 27 +++++ src/views/QR/PowerPoint/index.js | 18 ++- src/views/QR/PowerPoint/index.scss | 25 ++++ src/views/QR/SubjectsDropdown/index.js | 72 +++++++++++ src/views/QR/SubjectsDropdown/index.scss | 47 +++++++ src/views/QR/VideoBox/index.js | 17 ++- src/views/QR/VideoBox/index.scss | 20 +++ src/views/QR/VoiceBox/index.js | 16 ++- src/views/QR/VoiceBox/index.scss | 25 ++++ src/views/QR/index.js | 79 +++++++++--- src/views/QR/index.scss | 148 +++++++++++++++++++---- 14 files changed, 738 insertions(+), 72 deletions(-) create mode 100644 src/views/QR/BookContent/index.js create mode 100644 src/views/QR/BookContent/index.scss create mode 100644 src/views/QR/SubjectsDropdown/index.js create mode 100644 src/views/QR/SubjectsDropdown/index.scss diff --git a/src/views/QR/BookContent/index.js b/src/views/QR/BookContent/index.js new file mode 100644 index 0000000..e6df51a --- /dev/null +++ b/src/views/QR/BookContent/index.js @@ -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 ( +
+
+

محتویات کتاب

+ +
+ {props.data.map((item, i) => ( + + ))} +
+ ); +} + +const Identifier = (props) => { + return ( + <> + {props.data.type === "voice" ? ( + +

+ + {props.data.title} +

+
+
+ ) : null} + {props.data.type === "video" ? ( + +

+ + {props.data.title} +

+
+ ) : null} + {props.data.type === "pdf" ? ( + +

+ + {props.data.title} +

+
+ ) : null} + {props.data.type === "ppt" ? ( + +

+ + {props.data.title} +

+
+ ) : null} + {props.data.type === "links" ? ( +
+ +
+ ) : null} + + ); +}; + +const Item = (props) => { + return ( +
  • + {props.data.title} +
  • + ); +}; diff --git a/src/views/QR/BookContent/index.scss b/src/views/QR/BookContent/index.scss new file mode 100644 index 0000000..f860371 --- /dev/null +++ b/src/views/QR/BookContent/index.scss @@ -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; + } + } + } + } + +} \ No newline at end of file diff --git a/src/views/QR/PDF/index.js b/src/views/QR/PDF/index.js index 989e0fa..8c8c651 100644 --- a/src/views/QR/PDF/index.js +++ b/src/views/QR/PDF/index.js @@ -1,22 +1,46 @@ -import React from 'react'; +import React from "react"; -import './index.scss'; -export default function PDF(props){ - return( - <> - { - window.innerWidth > 1000 ? -
    -

    {props.data.title}

    -
    : null - } - { - window.innerWidth < 1000 ? - -

    {props.data.title}

    -
    -
    : null - } - - ); -} \ No newline at end of file +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 ? ( + +

    + + {props.data.title} +

    +
    +
    + ) : null} + {window.innerWidth < 1000 ? ( + +

    + + {props.data.title} +

    +
    +
    + ) : null} + + ); +} diff --git a/src/views/QR/PDF/index.scss b/src/views/QR/PDF/index.scss index 2adb442..f0fea6f 100644 --- a/src/views/QR/PDF/index.scss +++ b/src/views/QR/PDF/index.scss @@ -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; + } + } } diff --git a/src/views/QR/PowerPoint/index.js b/src/views/QR/PowerPoint/index.js index a1b1a35..b25ecb4 100644 --- a/src/views/QR/PowerPoint/index.js +++ b/src/views/QR/PowerPoint/index.js @@ -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 ? -
    -

    {props.data.title}

    -
    : null + +

    {props.data.title}

    +
    +
    : null } { window.innerWidth < 1000 ? - +

    {props.data.title}

    : null diff --git a/src/views/QR/PowerPoint/index.scss b/src/views/QR/PowerPoint/index.scss index 779990d..e5d84ab 100644 --- a/src/views/QR/PowerPoint/index.scss +++ b/src/views/QR/PowerPoint/index.scss @@ -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; + } + } } diff --git a/src/views/QR/SubjectsDropdown/index.js b/src/views/QR/SubjectsDropdown/index.js new file mode 100644 index 0000000..73d06ee --- /dev/null +++ b/src/views/QR/SubjectsDropdown/index.js @@ -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 ( +
    +
    setDropdown(!dropdown)} + > +

    + مشاهده فهرست موضوعی کتاب +

    +
    + {dropdown ? ( + + ) : ( + + )} +
    +
    + {dropdown ? ( + <> +
    + + جستجو +
    + + + ) : null} +
    + ); +} + +Dropdown.defaultProps = { + subjects: [ + { id: 0, name: "مقدمه" }, + { id: 1, name: "سخنی با خوانندگان" }, + { id: 2, name: "آتشفشانها و اقیانوسها" }, + { id: 3, name: "نحوه جدایی صفحات کره" }, + ], +}; + +const Item = (props) => { + return ( +
  • {props.data.name}
  • + ); +}; diff --git a/src/views/QR/SubjectsDropdown/index.scss b/src/views/QR/SubjectsDropdown/index.scss new file mode 100644 index 0000000..563686f --- /dev/null +++ b/src/views/QR/SubjectsDropdown/index.scss @@ -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; + } + } +} diff --git a/src/views/QR/VideoBox/index.js b/src/views/QR/VideoBox/index.js index 77893cc..4f68703 100644 --- a/src/views/QR/VideoBox/index.js +++ b/src/views/QR/VideoBox/index.js @@ -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 ? -
    -

    {props.data.title}

    +
    +

    {props.data.title}

    +
    : null } { window.innerWidth < 1000 ? -
    +

    {props.data.title}

    : null diff --git a/src/views/QR/VideoBox/index.scss b/src/views/QR/VideoBox/index.scss index 9e156dd..cd4cb33 100644 --- a/src/views/QR/VideoBox/index.scss +++ b/src/views/QR/VideoBox/index.scss @@ -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; + } } \ No newline at end of file diff --git a/src/views/QR/VoiceBox/index.js b/src/views/QR/VoiceBox/index.js index 795cdca..7f06482 100644 --- a/src/views/QR/VoiceBox/index.js +++ b/src/views/QR/VoiceBox/index.js @@ -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 ? -
    -

    {props.data.title}

    +
    +

    {props.data.title}

    +
    : null } { window.innerWidth < 1000 ? -
    +

    {props.data.title}

    : null diff --git a/src/views/QR/VoiceBox/index.scss b/src/views/QR/VoiceBox/index.scss index 3a3ba6b..f4f016f 100644 --- a/src/views/QR/VoiceBox/index.scss +++ b/src/views/QR/VoiceBox/index.scss @@ -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; + } } \ No newline at end of file diff --git a/src/views/QR/index.js b/src/views/QR/index.js index 93b4053..3b7f961 100644 --- a/src/views/QR/index.js +++ b/src/views/QR/index.js @@ -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 ? ( <> -
    +
    +
    +
    +
    +
    + {QR.title} +
    +
    +

    {QR.title}

    +

    {QR.subTitle}

    +
    + شما در حال مطالعه صفحه {QR.sample.page} هستید. +
    +
    + پیشرفت شما در مطالعه کتاب به {QR.sample.percent} درصد رسیده است. +
    +
    +
    + + +
    +
    +
    +
    + + + + + + + + +
    +
    + { + QR.data.map((item, i) => ( + + )) + } +
    +