parent
							
								
									14aed3c7b3
								
							
						
					
					
						commit
						7ca18bbe67
					
				
				 30 changed files with 842 additions and 597 deletions
			
			
		| @ -0,0 +1,79 @@ | ||||
| 
 | ||||
| import './index.scss'; | ||||
| 
 | ||||
| const maxDesktopSize = 1250; | ||||
| const maxMobileSize = 550; | ||||
| 
 | ||||
| const fontSize = { | ||||
|   desktop: { | ||||
|     h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, | ||||
|     th: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80, | ||||
|     h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 55, | ||||
|     h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, | ||||
|     strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, | ||||
|     span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95, | ||||
|   }, | ||||
|   mobile: { | ||||
|     h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13, | ||||
|     h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, | ||||
|     h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, | ||||
|     strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, | ||||
|     span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34, | ||||
|     p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, | ||||
|     input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, | ||||
|   }, | ||||
| }; | ||||
| const DeliveryMethod = (props) => { | ||||
|   return ( | ||||
|     <> | ||||
|       {window.innerWidth > 1000 ? ( | ||||
|         <div | ||||
|           className="delivery-methods d-flex justify-content-between align-items-center" | ||||
|           style={{ | ||||
|             background: | ||||
|               props.parent.state.selectedDelivery === props.data | ||||
|                 ? "#ccffcc" | ||||
|                 : "white", | ||||
|           }} | ||||
|           onClick={() => | ||||
|             props.parent.setState({ selectedDelivery: props.data }) | ||||
|           } | ||||
|         > | ||||
|           <strong style={{ fontSize: fontSize.desktop.strong }}> | ||||
|             {props.data.name} | ||||
|           </strong> | ||||
|           <div className="d-flex flex-column align-items-center"> | ||||
|             <h3 style={{ fontSize: fontSize.desktop.h3 }}> | ||||
|               {props.data.price} | ||||
|             </h3> | ||||
|             <span style={{ fontSize: fontSize.desktop.span }}>تومان</span> | ||||
|           </div> | ||||
|         </div> | ||||
|       ) : null} | ||||
|       {window.innerWidth < 1000 ? ( | ||||
|         <div | ||||
|           className="mobile-delivery-methods d-flex justify-content-between align-items-center" | ||||
|           style={{ | ||||
|             background: | ||||
|               props.parent.state.selectedDelivery === props.data | ||||
|                 ? "#ccffcc" | ||||
|                 : "white", | ||||
|           }} | ||||
|           onClick={() => | ||||
|             props.parent.setState({ selectedDelivery: props.data }) | ||||
|           } | ||||
|         > | ||||
|           <strong style={{ fontSize: fontSize.mobile.strong }}> | ||||
|             {props.data.name} | ||||
|           </strong> | ||||
|           <div className="d-flex flex-column align-items-center"> | ||||
|             <h3 style={{ fontSize: fontSize.mobile.h3 }}>{props.data.price}</h3> | ||||
|             <span style={{ fontSize: fontSize.mobile.span }}>تومان</span> | ||||
|           </div> | ||||
|         </div> | ||||
|       ) : null} | ||||
|     </> | ||||
|   ); | ||||
| }; | ||||
| 
 | ||||
| export default DeliveryMethod; | ||||
| @ -0,0 +1,48 @@ | ||||
| .mobile-delivery-methods { | ||||
|   padding: 6px; | ||||
|   border-radius: 10px; | ||||
|   border: 1px solid #88a9ff; | ||||
|   margin-top: 10px; | ||||
|   width: 48%; | ||||
|   h3, | ||||
|   strong, | ||||
|   span { | ||||
|     font-family: numeralLight; | ||||
|     font-weight: 100; | ||||
|     margin: 0px; | ||||
|   } | ||||
|   strong { | ||||
|     // width: 50%; | ||||
|     color: #678ef8; | ||||
|     letter-spacing: -1px; | ||||
|   } | ||||
|   h3, | ||||
|   span { | ||||
|     color: #02a255; | ||||
|     font-family: numeralMedium; | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| .delivery-methods { | ||||
|   padding: 6px; | ||||
|   border-radius: 10px; | ||||
|   border: 1px solid #88a9ff; | ||||
|   margin-top: 10px; | ||||
|   h3, | ||||
|   strong, | ||||
|   span { | ||||
|     font-family: numeralLight; | ||||
|     font-weight: 100; | ||||
|     margin: 0px; | ||||
|   } | ||||
|   strong { | ||||
|     width: 50%; | ||||
|     color: #678ef8; | ||||
|     letter-spacing: -1px; | ||||
|   } | ||||
|   h3, | ||||
|   span { | ||||
|     color: #02a255; | ||||
|     font-family: numeralMedium; | ||||
|   } | ||||
| } | ||||
| @ -0,0 +1,57 @@ | ||||
| import React from 'react'; | ||||
| import './index.scss'; | ||||
| 
 | ||||
| const maxDesktopSize = 1250; | ||||
| const maxMobileSize = 550; | ||||
| 
 | ||||
| const fontSize = { | ||||
|   desktop: { | ||||
|     h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 55, | ||||
|     input : window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75, | ||||
|     button : window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 75, | ||||
|     p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, | ||||
|   }, | ||||
|   mobile: { | ||||
|     h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, | ||||
|     p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, | ||||
|     input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, | ||||
|     button: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, | ||||
| 
 | ||||
|   }, | ||||
| }; | ||||
| 
 | ||||
| 
 | ||||
| const DiscoutCode = (props) => { | ||||
|   return ( | ||||
|     <> | ||||
|       {window.innerWidth > 1000 ? ( | ||||
|         <div className="discount-code d-flex flex-column"> | ||||
|         <h2 style={{ fontSize: fontSize.desktop.h2 }}>کد تخفیف</h2> | ||||
|         <p style={{ fontSize: fontSize.desktop.p }}> | ||||
|           اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید و دکمه ثبت کد را | ||||
|           بزنید | ||||
|         </p> | ||||
|         <div className="discount-code__box d-flex align-items-center"> | ||||
|           <input style={{ fontSize: fontSize.desktop.input }} type="text" /> | ||||
|           <button style={{ fontSize: fontSize.desktop.button }}>ثبت کد</button> | ||||
|         </div> | ||||
|       </div> | ||||
|       ) : null} | ||||
|       {window.innerWidth < 1000 ? ( | ||||
|         <div className="mobile-discount-code d-flex flex-column"> | ||||
|           <h2 style={{ fontSize: fontSize.mobile.h2 }}>کد تخفیف</h2> | ||||
|           <p style={{ fontSize: fontSize.mobile.p }}> | ||||
|             اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید و دکمه ثبت کد را | ||||
|             بزنید | ||||
|           </p> | ||||
|           <div className="mobile-discount-code__box d-flex align-items-center"> | ||||
|             <input style={{ fontSize: fontSize.mobile.input }} type="text" /> | ||||
|             <button style={{ fontSize: fontSize.desktop.button }}>ثبت کد</button> | ||||
|           </div> | ||||
|         </div> | ||||
|       ) : null} | ||||
|     </> | ||||
|   ); | ||||
| }; | ||||
| 
 | ||||
| export default DiscoutCode; | ||||
| @ -0,0 +1,83 @@ | ||||
| .discount-code { | ||||
|   border-bottom: 1px dotted #A5A5A5; | ||||
|   margin-top: 20px; | ||||
|   padding-bottom: 20px; | ||||
|   h2 { | ||||
|     font-family: numeralBold; | ||||
|     color: #2580ec; | ||||
|   } | ||||
|   p { | ||||
|     font-family: numeralLight; | ||||
|     color: #a5a5a5; | ||||
|     letter-spacing: -1px; | ||||
|   } | ||||
|   &__box{ | ||||
|     border: 1px solid #2b95ff; | ||||
|     padding: 5px; | ||||
|     border-radius: 10px; | ||||
|     input { | ||||
|       color: #2b95ff; | ||||
|       font-family: numeralLight; | ||||
|       text-align: center; | ||||
|       padding: 0px; | ||||
|       border-radius: 10px; | ||||
|       border: 0px; | ||||
|       flex: 1; | ||||
|       direction: ltr; | ||||
|       &:focus{ | ||||
|         outline : none; | ||||
|       } | ||||
|     } | ||||
|     button { | ||||
|       border-radius: 10px; | ||||
|       background-color: #2b95ff; | ||||
|       font-family: numeralLight; | ||||
|       color: white; | ||||
|       padding: 5px 10px; | ||||
|       border: 0px; | ||||
|       width: 80px; | ||||
|     } | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| .mobile-discount-code { | ||||
|   border-bottom: 1px dotted #A5A5A5; | ||||
|   margin-top: 20px; | ||||
|   padding-bottom: 20px; | ||||
|   h2 { | ||||
|     font-family: numeralBold; | ||||
|     color: #2580ec; | ||||
|   } | ||||
|   p { | ||||
|     font-family: numeralLight; | ||||
|     color: #a5a5a5; | ||||
|     letter-spacing: -1px; | ||||
|   } | ||||
|   &__box{ | ||||
|     border: 1px solid #2b95ff; | ||||
|     padding: 5px; | ||||
|     border-radius: 10px; | ||||
|     input { | ||||
|       color: #2b95ff; | ||||
|       font-family: numeralLight; | ||||
|       text-align: center; | ||||
|       padding: 5px; | ||||
|       border-radius: 10px; | ||||
|       border: 0px; | ||||
|       flex: 1; | ||||
|       direction: ltr; | ||||
|       &:focus{ | ||||
|         outline : none; | ||||
|       } | ||||
|     } | ||||
|     button { | ||||
|       border-radius: 10px; | ||||
|       background-color: #2b95ff; | ||||
|       font-family: numeralLight; | ||||
|       color: white; | ||||
|       padding: 10px 20px; | ||||
|       border: 0px; | ||||
|     } | ||||
|   } | ||||
|    | ||||
| } | ||||
| @ -0,0 +1,75 @@ | ||||
| import React, { Component } from 'react'; | ||||
| import './index.scss'; | ||||
| 
 | ||||
| const maxDesktopSize = 1250; | ||||
| const maxMobileSize = 550; | ||||
| 
 | ||||
| const fontSize = { | ||||
|   desktop: { | ||||
|     h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40, | ||||
|     th: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80, | ||||
|     h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 55, | ||||
|     h3: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, | ||||
|     strong: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 90, | ||||
|     span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95, | ||||
|   }, | ||||
|   mobile: { | ||||
|     h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13, | ||||
|     h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24, | ||||
|     h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, | ||||
|     strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30, | ||||
|     span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34, | ||||
|     p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32, | ||||
|     input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20, | ||||
|   }, | ||||
| }; | ||||
| 
 | ||||
| const Factor = (props) => { | ||||
|   const { list, parent } = props; | ||||
| 
 | ||||
|   const totalPrice = () => { | ||||
|     let total = 0; | ||||
|     for (let i = 0; i < parent.state.list.length; i++) { | ||||
|       total += parent.state.list[i].price * parent.state.list[i].number; | ||||
|     } | ||||
|     return total; | ||||
|   }; | ||||
|   return ( | ||||
|     <> | ||||
|       {window.innerWidth < 1000 ? ( | ||||
|         <div className="mobile-factor d-flex flex-column"> | ||||
|           <div className="d-flex justify-content-between"> | ||||
|             <strong>مبلغ سبد خرید</strong> | ||||
|             <span>{totalPrice()} تومان</span> | ||||
|           </div> | ||||
|           <div className="d-flex justify-content-between"> | ||||
|             <strong>هزینه ارسال</strong> | ||||
|             <span>{props.parent.state.selectedDelivery.price} تومان</span> | ||||
|           </div> | ||||
|           <div className="d-flex justify-content-between"> | ||||
|             <strong>میزان تخفیف</strong> | ||||
|             <span>{props.parent.state.discount} تومان</span> | ||||
|           </div> | ||||
|         </div> | ||||
|       ) : null} | ||||
|       {window.innerWidth > 1000 ? ( | ||||
|         <div className="factor d-flex flex-column"> | ||||
|           <div className="d-flex justify-content-between"> | ||||
|             <strong>مبلغ سبد خرید</strong> | ||||
|             <span>{totalPrice()} تومان</span> | ||||
|           </div> | ||||
|           <div className="d-flex justify-content-between"> | ||||
|             <strong>هزینه ارسال</strong> | ||||
|             <span>{props.parent.state.selectedDelivery.price} تومان</span> | ||||
|           </div> | ||||
|           <div className="d-flex justify-content-between"> | ||||
|             <strong>میزان تخفیف</strong> | ||||
|             <span>{props.parent.state.discount} تومان</span> | ||||
|           </div> | ||||
|         </div> | ||||
|       ) : null} | ||||
|     </> | ||||
|   ); | ||||
| }; | ||||
| 
 | ||||
| export default Factor; | ||||
| @ -0,0 +1,53 @@ | ||||
| .mobile-factor{ | ||||
|   border-bottom: 1px dotted #A5A5A5; | ||||
|   margin-top: 20px; | ||||
|   padding-bottom: 20px; | ||||
|   h2 { | ||||
|     font-family: numeralBold; | ||||
|     color: #2580ec; | ||||
|   } | ||||
|   p { | ||||
|     font-family: numeralLight; | ||||
|     color: #a5a5a5; | ||||
|     letter-spacing: -1px; | ||||
|   } | ||||
|   div{ | ||||
|     margin-bottom: 10px; | ||||
|     strong{ | ||||
|       font-family: numeralLight; | ||||
|       color: #373737; | ||||
|       font-weight: 300; | ||||
|     } | ||||
|     span{ | ||||
|       font-family: numeralLight; | ||||
|       color: #373737; | ||||
|     } | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| .factor{ | ||||
|   border-bottom: 1px dotted #A5A5A5; | ||||
|   margin-top: 20px; | ||||
|   padding-bottom: 20px; | ||||
|   h2 { | ||||
|     font-family: numeralBold; | ||||
|     color: #2580ec; | ||||
|   } | ||||
|   p { | ||||
|     font-family: numeralLight; | ||||
|     color: #a5a5a5; | ||||
|     letter-spacing: -1px; | ||||
|   } | ||||
|   div{ | ||||
|     margin-bottom: 10px; | ||||
|     strong{ | ||||
|       font-family: numeralLight; | ||||
|       color: #373737; | ||||
|       font-weight: 300; | ||||
|     } | ||||
|     span{ | ||||
|       font-family: numeralLight; | ||||
|       color: #373737; | ||||
|     } | ||||
|   } | ||||
| } | ||||
| @ -1,87 +0,0 @@ | ||||
| import React from "react"; | ||||
| import DeleteOutlineOutlinedIcon from "@material-ui/icons/DeleteOutlineOutlined"; | ||||
| 
 | ||||
| import "./index.scss"; | ||||
| 
 | ||||
| const maxDesktopSize = 1250; | ||||
| 
 | ||||
| const fontSize = { | ||||
|   desktop: { | ||||
|     info: { | ||||
|       strong: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, | ||||
|       p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, | ||||
|       span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95, | ||||
|     }, | ||||
|     price: { | ||||
|       strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 60, | ||||
|       span: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95, | ||||
|     }, | ||||
|     counter: { | ||||
|       button: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 65, | ||||
|       span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 65, | ||||
|     }, | ||||
|     delete: { | ||||
|       span: window.innerWidth > maxDesktopSize ? 15 : window.innerWidth / 75, | ||||
|     }, | ||||
|   }, | ||||
| }; | ||||
| 
 | ||||
| export default function Item(props) { | ||||
|   const { data, handleCounter, handleDelete } = props; | ||||
|   return ( | ||||
|     <tr className="cart-item d-flex align-items-center"> | ||||
|         <td className="cart-item__info d-flex"> | ||||
|           <img src={data.image} alt={data.title} /> | ||||
|           <div className="d-flex flex-column justify-content-center"> | ||||
|             <strong style={{ fontSize: fontSize.desktop.info.strong }}> | ||||
|               {data.title} | ||||
|             </strong> | ||||
|             <p style={{ fontSize: fontSize.desktop.info.p }}>{data.subTitle}</p> | ||||
|             <span style={{ fontSize: fontSize.desktop.info.span }}> | ||||
|               {data.options}بسته الحاقی: | ||||
|             </span> | ||||
|           </div> | ||||
|         </td> | ||||
|         <td className="cart-item__price d-flex flex-column justify-content-center align-items-center"> | ||||
|             <strong style={{ fontSize: fontSize.desktop.price.strong }}> | ||||
|               {data.price} تومان | ||||
|             </strong> | ||||
|             <span style={{ fontSize: fontSize.desktop.price.span }}> | ||||
|               {data.slicePrice} قیمت هر واحد | ||||
|             </span> | ||||
|         </td> | ||||
|         <td className="cart-item__counter d-flex align-items-center"> | ||||
|             <div className="cart-item__counter--box d-flex justify-content-around align-items-center"> | ||||
|               <button | ||||
|                 onClick={() => handleCounter("increase", data.id)} | ||||
|                 style={{ fontSize: fontSize.desktop.counter.button }} | ||||
|               > | ||||
|                 + | ||||
|               </button> | ||||
|               <span style={{ fontSize: fontSize.desktop.counter.span }}> | ||||
|                 {data.number} | ||||
|               </span> | ||||
|               <button | ||||
|                 onClick={() => data.number > 1 ? handleCounter("decrease", data.id) : handleDelete(data.id)} | ||||
|                 style={{ fontSize: fontSize.desktop.counter.button }} | ||||
|               > | ||||
|                 - | ||||
|               </button> | ||||
|             </div> | ||||
|         </td> | ||||
|         <td className="cart-item__delete d-flex align-items-center justify-content-center"> | ||||
|             <DeleteOutlineOutlinedIcon | ||||
|               style={{ color: "#FC120A", fontSize: 30, marginLeft: 5 }} | ||||
|               onClick={() => handleDelete(data.id)} | ||||
|             /> | ||||
|             <span | ||||
|               onClick={() => handleDelete(data.id)} | ||||
|               style={{ fontSize: fontSize.desktop.delete.span }} | ||||
|             > | ||||
|               حذف | ||||
|             </span> | ||||
|         </td> | ||||
|       
 | ||||
|     </tr> | ||||
|   ); | ||||
| } | ||||
| @ -1,71 +0,0 @@ | ||||
| .cart-item{ | ||||
|   // justify-content: space-between; | ||||
|   border-top: 1px solid #eee; | ||||
|   padding: 15px 0px; | ||||
|   &__info{ | ||||
|     flex: 3; | ||||
|     // flex-shrink: 1; | ||||
|     img{ | ||||
|       height: 100px; | ||||
|       border-radius: 10px; | ||||
|       margin-left: 10px; | ||||
|     } | ||||
|     div{ | ||||
|       strong{ | ||||
|         font-family: numeralBold; | ||||
|         color: #373737; | ||||
|       } | ||||
|       p{ | ||||
|         font-family: numeralLight; | ||||
|         color: #00CC69; | ||||
|         margin: 0px; | ||||
|         letter-spacing: -1px; | ||||
|       } | ||||
|       span{ | ||||
|         font-family: numeralLight; | ||||
|         color: #2580EC; | ||||
|         letter-spacing: -1px; | ||||
|       } | ||||
|     } | ||||
|   } | ||||
|   &__price{ | ||||
|     flex: 1.5; | ||||
|     flex-shrink: 1; | ||||
|     color: #4D4D4F; | ||||
|     strong{ | ||||
|       font-family: numeralBold; | ||||
|     } | ||||
|     span{ | ||||
|       font-family: numeralLight; | ||||
|     } | ||||
|   } | ||||
|   &__counter{ | ||||
|     flex: 1.5; | ||||
|     flex-shrink: 1; | ||||
|     justify-content:  center; | ||||
|     &--box{ | ||||
|       padding: 5px 10px; | ||||
|       border: 1px solid rgb(177, 177, 177); | ||||
|       border-radius: 8px; | ||||
|       button{ | ||||
|         border: 0px; | ||||
|         background-color: white; | ||||
|         color: #4D4D4F; | ||||
|       } | ||||
|       span{ | ||||
|         margin: 0px 15px; | ||||
|         color: #4D4D4F; | ||||
| 
 | ||||
|       } | ||||
|     } | ||||
|      | ||||
|   } | ||||
|   &__delete{ | ||||
|     flex: 1; | ||||
|     margin-left: 20px; | ||||
|     span{ | ||||
|       font-family: numeralLight; | ||||
|       color : #FC120A; | ||||
|     } | ||||
|   } | ||||
| } | ||||
| @ -1,7 +1,11 @@ | ||||
| .navbar{ | ||||
|   width: 100%; | ||||
|   position: fixed; | ||||
|   top: 0px; | ||||
|   left: 0px; | ||||
|   max-width: 1250px; | ||||
|   position: fixed !important; | ||||
|   top: 0px !important; | ||||
|   overflow-x: hidden; | ||||
| } | ||||
|   background-color:white !important; | ||||
|   z-index: 200; | ||||
|    | ||||
|   // margin: 0px auto !important; | ||||
| } | ||||
|  | ||||
					Loading…
					
					
				
		Reference in new issue