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