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