parent
635a0c1416
commit
607d02f340
14 changed files with 738 additions and 72 deletions
@ -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"; |
||||
|
||||
const maxDesktopSize = 1250; |
||||
|
||||
const fontSize = { |
||||
desktop: { |
||||
h2: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 120, |
||||
}, |
||||
}; |
||||
|
||||
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> |
||||
{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 |
||||
}
|
||||
</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} |
||||
</> |
||||
); |
||||
} |
||||
@ -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; |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue