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) { |
export default function PDF(props) { |
||||||
return ( |
return ( |
||||||
<> |
<> |
||||||
{ |
{window.innerWidth > 1000 ? ( |
||||||
window.innerWidth > 1000 ?
|
<a |
||||||
<div className="pdf-box d-flex flex-column">
|
href={props.data.file} |
||||||
<h2>{props.data.title}</h2> |
download |
||||||
</div> : null |
className="pdf-box d-flex flex-column" |
||||||
} |
id="pdf" |
||||||
{ |
> |
||||||
window.innerWidth < 1000 ?
|
<h2 style={{fontSize: fontSize.desktop.h2 }} className="d-flex align-items-center"> |
||||||
<a href={props.data.file} download className="mobile-pdf-box d-flex flex-column">
|
<span></span> |
||||||
<h2 className="d-flex align-items-center"><span></span>{props.data.title}</h2> |
{props.data.title} |
||||||
|
</h2> |
||||||
<div></div> |
<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