parent
42d5896f63
commit
89e4c31d24
39 changed files with 1861 additions and 264 deletions
|
After Width: | Height: | Size: 379 B |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
@ -0,0 +1,11 @@ |
||||
import React from "react"; |
||||
import Checkbox from "@mui/material/Checkbox"; |
||||
|
||||
export default function CustomCheckbox({ icon, checkedIcon }: any) { |
||||
return ( |
||||
<> |
||||
<Checkbox icon={icon} checkedIcon={checkedIcon} /> |
||||
</> |
||||
|
||||
); |
||||
} |
||||
@ -0,0 +1,84 @@ |
||||
.contact{ |
||||
header{ |
||||
color: white; |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1441px) { |
||||
.contact{ |
||||
main{ |
||||
max-width: 1350px; |
||||
padding-top: 40px; |
||||
} |
||||
.MuiFormControl-root { |
||||
width: 100%; |
||||
margin: 10px auto !important; |
||||
.MuiSelect-iconOutlined { |
||||
display: none; |
||||
} |
||||
.MuiSelect-outlined.MuiSelect-outlined { |
||||
padding-right: 15px; |
||||
} |
||||
color: #797979 !important; |
||||
} |
||||
.MuiOutlinedInput-notchedOutline { |
||||
top: 0px !important; |
||||
} |
||||
.MuiOutlinedInput-notchedOutline { |
||||
border-color: #666666 !important; |
||||
border-width: 1px !important; |
||||
color: green !important; |
||||
border-radius: 10px !important; |
||||
} |
||||
|
||||
.MuiOutlinedInput-input { |
||||
padding: 15px 14px !important; |
||||
font-family: numeralLight; |
||||
font-size: 20px; |
||||
&:focus{ |
||||
border: 0.2px solid #84de56 !important; |
||||
border-radius: 10px; |
||||
transform : translateY(0.5px); |
||||
} |
||||
} |
||||
.MuiInputLabel-outlined { |
||||
font-family: numeralLight !important; |
||||
display: inline !important; |
||||
position: absolute; |
||||
text-align: right !important; |
||||
right: 15px; |
||||
top: 22px; |
||||
padding: 0px !important; |
||||
transform: translate(0px, 0px) scale(1) !important; |
||||
} |
||||
.MuiInputLabel-shrink { |
||||
text-align: center !important; |
||||
display: inline; |
||||
position: absolute; |
||||
right: 0px; |
||||
top: -8px; |
||||
transform: translate(0px, 0px) scale(0.85) !important; |
||||
padding: 0px 10px !important; |
||||
} |
||||
|
||||
label { |
||||
background-color: #2F2F2F; |
||||
width: fit-content; |
||||
text-align: center; |
||||
color: #B5B5B5 !important; |
||||
letter-spacing: -1px; |
||||
font-size: 16px; |
||||
} |
||||
.Mui-focused { |
||||
color: rgba(0, 0, 0, 1) !important; |
||||
border-color: #84de56 !important; |
||||
// background-color: white; |
||||
color: #84de56 !important; |
||||
} |
||||
|
||||
.MuiInputBase-input { |
||||
height: auto !important; |
||||
} |
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,60 @@ |
||||
import React, { useState } from "react"; |
||||
import "./index.scss"; |
||||
import Navbar from "../../components/Navbar/index"; |
||||
import Footer from "../../views/Home/Footer/index"; |
||||
import Input from "../../components/Input/index"; |
||||
import onInput from "../../util/onInput"; |
||||
|
||||
interface FormData { |
||||
name?: string; |
||||
cellphone?: string; |
||||
departman?: string; |
||||
text?: string; |
||||
} |
||||
|
||||
export default function Contact() { |
||||
const [formData, setFormData] = useState<FormData | undefined>(undefined); |
||||
|
||||
const onChange = (e: any) => { |
||||
setFormData({ ...formData, [e.target.name]: e.target.value }); |
||||
}; |
||||
|
||||
return ( |
||||
<div className="contact main d-flex flex-column"> |
||||
<Navbar /> |
||||
<main className="d-flex flex-column"> |
||||
<header> |
||||
<h1>تماس با ما</h1> |
||||
</header> |
||||
<div className="d-flex"> |
||||
<section className="contact__form d-flex flex-column"> |
||||
<form action=""> |
||||
<div className="contact__form--name"> |
||||
<Input |
||||
name="name" |
||||
label="نام" |
||||
align="right" |
||||
// onInput={onInput.englishAndNumberWithoutSpace}
|
||||
onChange={onChange} |
||||
/> |
||||
</div> |
||||
<div className="contact__form--name"> |
||||
<Input |
||||
name="cellphone" |
||||
label="شماره موبایل" |
||||
align="left" |
||||
onInput={onInput.numberOnly} |
||||
onChange={onChange} |
||||
/> |
||||
</div> |
||||
</form> |
||||
</section> |
||||
<section className="contact__info d-flex flex-column"> |
||||
|
||||
</section> |
||||
</div> |
||||
</main> |
||||
<Footer /> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,66 @@ |
||||
.discount-code{ |
||||
width: 100%; |
||||
border: 1px solid #707070; |
||||
border-radius: 10px; |
||||
padding: 20px 30px; |
||||
h3{ |
||||
color: white; |
||||
margin: 0px; |
||||
} |
||||
input{ |
||||
background-color : rgba(255, 255, 255, 0.06); |
||||
border-top-right-radius: 10px; |
||||
border-bottom-right-radius: 10px; |
||||
border: 0px; |
||||
color: white; |
||||
&::placeholder{ |
||||
color: white; |
||||
} |
||||
} |
||||
button{ |
||||
background-color : #9CDF52; |
||||
border-top-left-radius: 10px; |
||||
color: white; |
||||
border-bottom-left-radius: 10px; |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width : 1441px) { |
||||
.discount-code{ |
||||
h3{ |
||||
font-size: 20px; |
||||
} |
||||
input{ |
||||
padding: 20px 10px 20px 0px; |
||||
width: 200px; |
||||
font-size: 14px; |
||||
&::placeholder{ |
||||
font-size: 10px; |
||||
} |
||||
} |
||||
button{ |
||||
padding: 0px 20px; |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||
.discount-code{ |
||||
h3{ |
||||
font-size: calc(100vw / 72); |
||||
} |
||||
input{ |
||||
padding: 20px 10px 20px 0px; |
||||
width: 200px; |
||||
font-size: calc(100vw / 90); |
||||
&::placeholder{ |
||||
font-size: calc(100vw / 110); |
||||
} |
||||
} |
||||
button{ |
||||
padding: 0px 20px; |
||||
font-size: calc(100vw / 90); |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
import React from 'react'; |
||||
import './index.scss'; |
||||
|
||||
export default function DiscountCode() { |
||||
return ( |
||||
<div className="discount-code d-flex align-items-center justify-content-between"> |
||||
<h3>کارت هدیه یا کد تخفیف دارید؟ </h3> |
||||
<div className="d-flex flex-column"> |
||||
<div className="d-flex"> |
||||
<input type="text" placeholder="کد خود را در این قسمت وارد نمائید" /> |
||||
<button>تایید کد</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,133 @@ |
||||
.subscribe-radio{ |
||||
width: 100%; |
||||
border : 1px solid #DFDFDF; |
||||
margin-bottom: 15px; |
||||
border-radius: 10px; |
||||
&__name{ |
||||
padding: 12px; |
||||
border-top-right-radius: 10px; |
||||
border-bottom-right-radius: 10px; |
||||
} |
||||
&__factor{ |
||||
border-top-left-radius: 10px; |
||||
border-bottom-left-radius: 10px; |
||||
background-color: rgba(255, 255, 255, 0.18); |
||||
padding : 10px 20px 10px 0px; |
||||
|
||||
strong, b{ |
||||
color: white; |
||||
} |
||||
&--tag{ |
||||
background-color: yellow; |
||||
padding: 4px 20px; |
||||
border-radius: 30px; |
||||
width: fit-content; |
||||
} |
||||
&--finalPrice{ |
||||
i{ |
||||
color: white; |
||||
margin-right: 10px; |
||||
} |
||||
} |
||||
&--off{ |
||||
color: #707070; |
||||
b{ |
||||
color: #707070; |
||||
position: relative; |
||||
span{ |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 2px; |
||||
top: 50%; |
||||
left: 0px; |
||||
transform: translateY(-50%) rotate(-15deg); |
||||
background-color: rgb(211, 211, 211); |
||||
opacity: 0.5; |
||||
} |
||||
} |
||||
i{ |
||||
margin-right: 10px; |
||||
} |
||||
} |
||||
} |
||||
&-active{ |
||||
box-shadow: 0px 0px 6px #4DD35B; |
||||
background-color: #4DD35B; |
||||
border: none; |
||||
.subscribe-radio__name{ |
||||
} |
||||
.subscribe-radio__factor{ |
||||
background-color: rgba(255, 255, 255, 0.18); |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1441px) { |
||||
.subscribe-radio{ |
||||
height: 120px; |
||||
&__name{ |
||||
flex: 7; |
||||
h2{ |
||||
font-size: 20px; |
||||
margin-right: 40px; |
||||
} |
||||
} |
||||
&__factor{ |
||||
flex: 3; |
||||
&--tag{ |
||||
font-size: 14px; |
||||
} |
||||
&--off{ |
||||
b{ |
||||
font-size: 20px; |
||||
} |
||||
i{ |
||||
font-size: 12px; |
||||
} |
||||
} |
||||
&--finalPrice{ |
||||
i{ |
||||
font-size: 12px; |
||||
} |
||||
strong{ |
||||
font-size: 26px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||
.subscribe-radio{ |
||||
min-height: 100px; |
||||
&__name{ |
||||
flex: 7; |
||||
h2{ |
||||
font-size: calc(100vw / 70); |
||||
margin-right: 40px; |
||||
} |
||||
} |
||||
&__factor{ |
||||
flex: 3; |
||||
&--tag{ |
||||
font-size: calc(100vw / 110); |
||||
} |
||||
&--off{ |
||||
b{ |
||||
font-size: calc(100vw / 80); |
||||
} |
||||
i{ |
||||
font-size: calc(100vw / 115); |
||||
} |
||||
} |
||||
&--finalPrice{ |
||||
i{ |
||||
font-size: calc(100vw / 115); |
||||
} |
||||
strong{ |
||||
font-size: calc(100vw / 64); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,56 @@ |
||||
import React from "react"; |
||||
import "./index.scss"; |
||||
import CustomCheckbox from "../../../components/CustomCheckbox"; |
||||
import CircleRoundedIcon from "@mui/icons-material/CircleRounded"; |
||||
import RadioButtonUncheckedRoundedIcon from "@mui/icons-material/RadioButtonUncheckedRounded"; |
||||
import { connect } from "react-redux"; |
||||
|
||||
function SubscribeRadio({ data, selectedSubscripe }: any) { |
||||
return ( |
||||
<div |
||||
className={ |
||||
"subscribe-radio d-flex" + |
||||
" " + |
||||
(selectedSubscripe.id === data.id ? "subscribe-radio-active" : "") |
||||
} |
||||
> |
||||
<div className="subscribe-radio__name d-flex align-items-center"> |
||||
<CustomCheckbox |
||||
icon={ |
||||
<RadioButtonUncheckedRoundedIcon |
||||
style={{ color: "#707070", fontSize: 50, padding: 0 }} |
||||
/> |
||||
} |
||||
checkedIcon={ |
||||
<CircleRoundedIcon |
||||
style={{ color: "white", fontSize: 50, padding: 0 }} |
||||
/> |
||||
} |
||||
/> |
||||
<h2>{data.name}</h2> |
||||
</div> |
||||
<div className="subscribe-radio__factor d-flex flex-column justify-content-center"> |
||||
{data.offPercent !== 0 && ( |
||||
<div className="subscribe-radio__factor--off d-flex align-items-center"> |
||||
<b>{data.off}<span></span></b> |
||||
<i>تومان</i> |
||||
</div> |
||||
)} |
||||
<div className="subscribe-radio__factor--finalPrice d-flex align-items-center"> |
||||
<strong>{data.finalPrice}</strong> |
||||
<i>تومان</i> |
||||
</div> |
||||
{data.offPercent !== 0 && ( |
||||
<span className="subscribe-radio__factor--tag">{`${data.offPercent}% تخفیف ویژه`}</span> |
||||
)} |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default connect( |
||||
(state: any) => ({ |
||||
selectedSubscripe: state.publicApi.selectedSubscripe, |
||||
}), |
||||
{} |
||||
)(SubscribeRadio); |
||||
@ -0,0 +1,41 @@ |
||||
.subscription { |
||||
main { |
||||
h1,h2{ |
||||
color: white; |
||||
} |
||||
p{ |
||||
color : #969696; |
||||
margin : 5px 0px 35px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width : 1441px) { |
||||
.subscription{ |
||||
main{ |
||||
margin-top: 50px; |
||||
max-width: 700px; |
||||
h1{ |
||||
font-size: 44px; |
||||
} |
||||
p{ |
||||
font-size: 21px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width : 1008px) and (max-width : 1440px) { |
||||
.subscription{ |
||||
main{ |
||||
margin-top: 50px; |
||||
max-width: 700px; |
||||
h1{ |
||||
font-size: calc(100vw / 30); |
||||
} |
||||
p{ |
||||
font-size: calc(100vw / 70); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,34 @@ |
||||
import React from "react"; |
||||
import Navbar from "../../components/Navbar/index"; |
||||
import Footer from "../../views/Home/Footer/index"; |
||||
import SubscribeRadio from "./SubscribeRadio/index"; |
||||
import DiscountCode from "./DiscountCode/index"; |
||||
import {connect} from 'react-redux'; |
||||
import "./index.scss"; |
||||
|
||||
function Subscription({subscribes} : any) { |
||||
return ( |
||||
<div className="subscription main d-flex flex-column"> |
||||
<Navbar /> |
||||
<main className="d-flex flex-column"> |
||||
<h1>خرید اشتراک دانوین</h1> |
||||
<p> |
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده |
||||
از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و |
||||
سطرآنچنان که لازم است و برای شرایط{" "} |
||||
</p> |
||||
{ |
||||
subscribes?.map((subscribe : any , i : any) => ( |
||||
<SubscribeRadio data={subscribe} /> |
||||
)) |
||||
} |
||||
<DiscountCode /> |
||||
</main> |
||||
<Footer /> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default connect((state : any) => ({ |
||||
subscribes : state.publicApi.mockSubscribes, |
||||
}), {})(Subscription); |
||||
@ -0,0 +1,17 @@ |
||||
import React from "react"; |
||||
import Avatar from "@mui/material/Avatar"; |
||||
import user3 from "../../../assets/images/user3.png"; |
||||
|
||||
export default function AddComment() { |
||||
return ( |
||||
<> |
||||
<Avatar src={user3} style={{ width: 65, height: 65, marginLeft: 10 }} /> |
||||
<div className="d-flex flex-column" style={{width : '100%'}}> |
||||
<textarea rows={5} placeholder="نظر خود را در این قسمت بنویسید " /> |
||||
<div className="d-flex justify-content-end"> |
||||
<button>ارسال نظر</button> |
||||
</div> |
||||
</div> |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,44 @@ |
||||
.download-attachments{ |
||||
color: white; |
||||
margin: 0px auto; |
||||
border-bottom: 1px solid #2c2c2c; |
||||
span{ |
||||
|
||||
} |
||||
h4{ |
||||
margin: 0px; |
||||
} |
||||
a{ |
||||
padding: 5px 15px; |
||||
border: 1px solid #707070; |
||||
color: white; |
||||
text-decoration: none; |
||||
border-radius: 8px; |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1441px) { |
||||
.download-attachments{ |
||||
width: calc(100% - 20px); |
||||
padding: 20px 0px; |
||||
a{ |
||||
font-size: 18px; |
||||
} |
||||
h4{ |
||||
font-size: 18px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||
.download-attachments{ |
||||
width: calc(100% - 20px); |
||||
padding: 20px 0px; |
||||
a{ |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
h4{ |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,14 @@ |
||||
import React from 'react'; |
||||
import './index.scss'; |
||||
|
||||
export default function Attachments({file,num} : any) { |
||||
return ( |
||||
<div className="download-attachments d-flex justify-content-between align-items-center"> |
||||
<div className="d-flex"> |
||||
<span>{num}</span> |
||||
<h4>{file.name}</h4> |
||||
</div> |
||||
<a href={file.file} download>دریافت</a> |
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,43 @@ |
||||
.video-tube-suggest{ |
||||
color: white; |
||||
img{ |
||||
border-top-right-radius: 10px; |
||||
border-top-left-radius: 10px; |
||||
border-bottom-right-radius: 10px; |
||||
border-bottom-left-radius: 24px; |
||||
margin-bottom: 10px; |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1441px) { |
||||
.video-tube-suggest{ |
||||
width: 30%; |
||||
img{ |
||||
width: 130px; |
||||
height: 180px; |
||||
} |
||||
h4{ |
||||
font-size: 16px; |
||||
} |
||||
p{ |
||||
font-size: 12px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||
.video-tube-suggest{ |
||||
width: 30%; |
||||
img{ |
||||
width: 130px; |
||||
height: 180px; |
||||
} |
||||
h4{ |
||||
font-size: calc(100vw / 90); |
||||
} |
||||
p{ |
||||
font-size: calc(100vw / 110); |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,13 @@ |
||||
import React from 'react'; |
||||
import './index.scss'; |
||||
|
||||
export default function Book({data} : any) { |
||||
return ( |
||||
<div className="video-tube-suggest d-flex flex-column"> |
||||
<img src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} alt="" /> |
||||
<h4>{data.name}</h4> |
||||
<p>{'لورم ایپسوم و اینجور چیزا'}</p> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
@ -0,0 +1,50 @@ |
||||
.video-tube-comment{ |
||||
padding: 10px 0px; |
||||
color: white; |
||||
div{ |
||||
} |
||||
button{ |
||||
background-color: inherit; |
||||
color: #4DD35B; |
||||
border: none; |
||||
margin-left: 20px; |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1441px){ |
||||
.video-tube-comment{ |
||||
width: 90%; |
||||
p{ |
||||
font-size: 16px; |
||||
strong{ |
||||
font-size: 18px; |
||||
margin-left: 5px; |
||||
} |
||||
} |
||||
button{ |
||||
font-size: 13px; |
||||
} |
||||
span{ |
||||
font-size: 15px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||
.video-tube-comment{ |
||||
width: 90%; |
||||
p{ |
||||
font-size: calc(100vw / 105); |
||||
strong{ |
||||
font-size: calc(100vw / 90); |
||||
margin-left: 5px; |
||||
} |
||||
} |
||||
button{ |
||||
font-size: calc(100vw / 100) !important; |
||||
} |
||||
span{ |
||||
font-size: calc(100vw / 90); |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,21 @@ |
||||
import React from "react"; |
||||
import Avatar from "@mui/material/Avatar"; |
||||
|
||||
import "./index.scss"; |
||||
|
||||
export default function Comment({ comment }: any) { |
||||
return ( |
||||
<div className="video-tube-comment d-flex"> |
||||
<Avatar src={comment.imageUrl} style={{ width: 65, height: 65, marginLeft: 10 }} /> |
||||
<div className="d-flex flex-column"> |
||||
<p> |
||||
<strong>{comment.name}</strong> {comment.text} |
||||
</p> |
||||
<div className="d-flex justify-content-end align-items-center"> |
||||
<button>پاسخ</button> |
||||
<span>{comment.date}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,134 @@ |
||||
.lesson-playlist{ |
||||
width: 100%; |
||||
header{ |
||||
background-color: inherit !important; |
||||
h3{ |
||||
background-color : #707070; |
||||
padding: 5px 10px; |
||||
margin: 0px; |
||||
} |
||||
span{ |
||||
background-color : #707070; |
||||
display: flex; |
||||
flex: 1; |
||||
height : 1px; |
||||
} |
||||
} |
||||
&__item{ |
||||
&--count{ |
||||
color: white; |
||||
} |
||||
&--text{ |
||||
padding: 15px 10px; |
||||
h4{ |
||||
color: white; |
||||
margin: 0px; |
||||
} |
||||
p{ |
||||
color: #767676; |
||||
margin: 0px; |
||||
} |
||||
} |
||||
&--video{ |
||||
span{ |
||||
background-color : #0000006d; |
||||
padding: 0px 5px; |
||||
position: absolute; |
||||
left: 5px; |
||||
bottom: 10px; |
||||
color: white; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
@media screen and (min-width: 1441px) { |
||||
.lesson-playlist{ |
||||
width: 100%; |
||||
header{ |
||||
padding: 10px 40px 0px 0px !important; |
||||
h3{ |
||||
font-size: 16px; |
||||
} |
||||
span{ |
||||
|
||||
} |
||||
} |
||||
&__item{ |
||||
padding: 10px 0px 5px 0px; |
||||
cursor: pointer; |
||||
&--count{ |
||||
font-size: 18px; |
||||
width : 40px; |
||||
text-align: center; |
||||
} |
||||
&--text{ |
||||
max-width: 55%; |
||||
h4{ |
||||
font-size: 17px; |
||||
} |
||||
p{ |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
&--video{ |
||||
width: 142px; |
||||
height: 90px; |
||||
position: relative; |
||||
video{ |
||||
width : 100%; |
||||
height : 100%; |
||||
} |
||||
span{ |
||||
font-size: 18px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||
.lesson-playlist{ |
||||
width: 100%; |
||||
header{ |
||||
padding: 10px 40px 0px 0px !important; |
||||
h3{ |
||||
font-size: calc(100vw / 95); |
||||
} |
||||
span{ |
||||
|
||||
} |
||||
} |
||||
&__item{ |
||||
padding: 10px 0px 5px 0px; |
||||
cursor: pointer; |
||||
&--count{ |
||||
font-size: calc(100vw / 72); |
||||
width : 40px; |
||||
text-align: center; |
||||
} |
||||
&--text{ |
||||
max-width: 55%; |
||||
h4{ |
||||
font-size: calc(100vw / 90); |
||||
} |
||||
p{ |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
} |
||||
&--video{ |
||||
width: 132px; |
||||
height: 90px; |
||||
position: relative; |
||||
video{ |
||||
width : 100%; |
||||
height : 100%; |
||||
} |
||||
span{ |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,29 @@ |
||||
import React from "react"; |
||||
import './index.scss'; |
||||
|
||||
export default function LessonPlayList(props: any) { |
||||
const { lesson } = props; |
||||
return ( |
||||
<div className="lesson-playlist d-flex flex-column"> |
||||
<header className="d-flex align-items-center"> |
||||
<h3>{lesson.name}</h3> |
||||
<span></span> |
||||
</header> |
||||
{lesson.files.map((file : any, i : any) => ( |
||||
<div className="lesson-playlist__item d-flex align-items-center" key={i}> |
||||
<span className="lesson-playlist__item--count">{i+1}</span> |
||||
<div className="lesson-playlist__item--video"> |
||||
<video> |
||||
<source src={file.src} /> |
||||
</video> |
||||
<span>22:05</span> |
||||
</div> |
||||
<div className="lesson-playlist__item--text d-flex flex-column"> |
||||
<h4>{file.name}</h4> |
||||
<p>{file.text}</p> |
||||
</div> |
||||
</div> |
||||
))} |
||||
</div> |
||||
); |
||||
} |
||||
@ -0,0 +1,346 @@ |
||||
.video-tube { |
||||
&__content { |
||||
margin-left: 15px; |
||||
|
||||
&--display { |
||||
border-bottom: 1px solid #707070; |
||||
padding-bottom: 30px; |
||||
video{ |
||||
border: 1px solid #707070; |
||||
} |
||||
span{ |
||||
color: #84DE56; |
||||
padding: 15px 0px; |
||||
} |
||||
h1{ |
||||
color: white; |
||||
} |
||||
p{ |
||||
color: white; |
||||
margin-top: 20px; |
||||
} |
||||
} |
||||
&--comments{ |
||||
color: white; |
||||
border-bottom: 1px solid #707070; |
||||
header{ |
||||
padding: 20px 0px; |
||||
h2{ |
||||
margin: 0px; |
||||
} |
||||
} |
||||
button{ |
||||
background-color: inherit; |
||||
border: none; |
||||
color: #4DD35B; |
||||
} |
||||
} |
||||
&--addComment{ |
||||
padding: 15px 0px; |
||||
button{ |
||||
background-color: #4DD35B; |
||||
border: none; |
||||
color: white; |
||||
border-radius: 20px; |
||||
padding: 8px 12px; |
||||
margin-top: 10px; |
||||
} |
||||
textarea{ |
||||
width: 100%; |
||||
border-radius: 12px; |
||||
background-color: #2D2D2D; |
||||
padding: 10px; |
||||
color: white; |
||||
&:focus{ |
||||
outline: none; |
||||
} |
||||
&::placeholder{ |
||||
color: #666666; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&__sidebar { |
||||
&--playlist { |
||||
border: 1px solid #707070; |
||||
margin-bottom: 30px; |
||||
header { |
||||
width: 100%; |
||||
color: white; |
||||
h2, |
||||
p { |
||||
margin: 0px; |
||||
} |
||||
p { |
||||
margin-top: 5px; |
||||
} |
||||
} |
||||
&___list { |
||||
overflow-y: scroll; |
||||
&::-webkit-scrollbar { |
||||
width: 8px; |
||||
} |
||||
|
||||
/* Track */ |
||||
&::-webkit-scrollbar-track { |
||||
box-shadow: inset 0 0 5px inherit; |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
/* Handle */ |
||||
&::-webkit-scrollbar-thumb { |
||||
background: #bbbbbb; |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
/* Handle on hover */ |
||||
&::-webkit-scrollbar-thumb:hover { |
||||
background: white; |
||||
} |
||||
} |
||||
} |
||||
&--attachments { |
||||
border: 1px solid #707070; |
||||
margin-bottom: 30px; |
||||
header { |
||||
width: 100%; |
||||
color: white; |
||||
h2, |
||||
p { |
||||
margin: 0px; |
||||
} |
||||
p { |
||||
margin-top: 5px; |
||||
} |
||||
} |
||||
&___list { |
||||
overflow-y: scroll; |
||||
&::-webkit-scrollbar { |
||||
width: 8px; |
||||
} |
||||
|
||||
/* Track */ |
||||
&::-webkit-scrollbar-track { |
||||
box-shadow: inset 0 0 5px inherit; |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
/* Handle */ |
||||
&::-webkit-scrollbar-thumb { |
||||
background: #bbbbbb; |
||||
border-radius: 10px; |
||||
} |
||||
|
||||
/* Handle on hover */ |
||||
&::-webkit-scrollbar-thumb:hover { |
||||
background: white; |
||||
} |
||||
} |
||||
} |
||||
&--suggests { |
||||
border: 1px solid #707070; |
||||
header { |
||||
width: 100%; |
||||
color: white; |
||||
h2{ |
||||
margin: 0px; |
||||
} |
||||
span{ |
||||
background-color: #00fff74f; |
||||
color: #00FFF8; |
||||
padding: 5px 8px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1441px) { |
||||
.video-tube { |
||||
main { |
||||
max-width: 1350px; |
||||
margin-top: 30px; |
||||
} |
||||
&__content { |
||||
flex: 8; |
||||
&--display { |
||||
span{ |
||||
font-size: 21px; |
||||
} |
||||
h1{ |
||||
font-size: 36px; |
||||
} |
||||
p{ |
||||
font-size: 25px; |
||||
} |
||||
} |
||||
&--comments{ |
||||
header{ |
||||
h2{ |
||||
font-size: 26px; |
||||
} |
||||
} |
||||
button{ |
||||
font-size: 19px; |
||||
} |
||||
} |
||||
&--addComment{ |
||||
width: 60%; |
||||
button{ |
||||
font-size: 18px; |
||||
} |
||||
textarea{ |
||||
font-size: 18px; |
||||
&::placeholder{ |
||||
font-size: 18px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&__sidebar { |
||||
flex: 4; |
||||
&--playlist { |
||||
max-height: calc(100vh - 140px); |
||||
header { |
||||
padding: 14px 12px; |
||||
background-color: #2c2c2c; |
||||
img { |
||||
transform: translateY(-5px); |
||||
} |
||||
h2 { |
||||
font-size: 18px; |
||||
} |
||||
p { |
||||
font-size: 13px; |
||||
} |
||||
} |
||||
} |
||||
&--attachments { |
||||
max-height: 320px; |
||||
header { |
||||
padding: 14px 12px; |
||||
background-color: #2c2c2c; |
||||
h2 { |
||||
font-size: 18px; |
||||
} |
||||
p { |
||||
font-size: 13px; |
||||
} |
||||
} |
||||
} |
||||
&--suggests { |
||||
header { |
||||
padding: 26px 12px; |
||||
background-color: #8bd09746; |
||||
h2 { |
||||
font-size: 18px; |
||||
} |
||||
span{ |
||||
font-size: 13px; |
||||
} |
||||
} |
||||
&___list{ |
||||
padding: 15px 12px; |
||||
background-color: #08793d58; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||
.video-tube { |
||||
main { |
||||
max-width: 1250px; |
||||
margin-top: 30px; |
||||
padding: 0px 10px; |
||||
} |
||||
&__content { |
||||
flex: 8; |
||||
&--display { |
||||
video{ |
||||
width: 100%; |
||||
} |
||||
span{ |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
h1{ |
||||
font-size: calc(100vw / 60); |
||||
} |
||||
p{ |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
} |
||||
&--comments{ |
||||
header{ |
||||
h2{ |
||||
font-size: calc(100vw / 80); |
||||
} |
||||
} |
||||
button{ |
||||
font-size: calc(100vw / 90); |
||||
} |
||||
} |
||||
&--addComment{ |
||||
width: 60%; |
||||
button{ |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
textarea{ |
||||
font-size: calc(100vw / 90); |
||||
&::placeholder{ |
||||
font-size: calc(100vw / 90); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&__sidebar { |
||||
flex: 4; |
||||
&--playlist { |
||||
max-height: calc(100vh - 140px); |
||||
header { |
||||
padding: 14px 12px; |
||||
background-color: #2c2c2c; |
||||
img { |
||||
transform: translateY(-5px); |
||||
} |
||||
h2 { |
||||
font-size: calc(100vw / 85); |
||||
} |
||||
p { |
||||
font-size: calc(100vw / 120); |
||||
} |
||||
} |
||||
} |
||||
&--attachments { |
||||
max-height: 320px; |
||||
header { |
||||
padding: 14px 12px; |
||||
background-color: #2c2c2c; |
||||
h2 { |
||||
font-size: calc(100vw / 85); |
||||
} |
||||
p { |
||||
font-size: calc(100vw / 120); |
||||
} |
||||
} |
||||
} |
||||
&--suggests { |
||||
header { |
||||
padding: 26px 12px; |
||||
background-color: #8bd09746; |
||||
h2 { |
||||
font-size: calc(100vw / 85); |
||||
} |
||||
span{ |
||||
font-size: calc(100vw / 120); |
||||
} |
||||
} |
||||
&___list{ |
||||
padding: 15px 12px; |
||||
background-color: #08793d58; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,106 @@ |
||||
import React, { useEffect } from "react"; |
||||
import Navbar from "../../components/Navbar/index"; |
||||
import Footer from "../../views/Home/Footer/index"; |
||||
import LessonPlayList from "./LessonPlayList/index"; |
||||
import Attachments from "./Attachments/index"; |
||||
import Book from "./Book/index"; |
||||
import Comment from "./Comment/index"; |
||||
import AddComment from "./AddComment/index"; |
||||
|
||||
import "./index.scss"; |
||||
import listIcon from "../../assets/icons/list.png"; |
||||
import { connect } from "react-redux"; |
||||
import { book } from "../../redux/actions"; |
||||
|
||||
|
||||
import user from '../../assets/images/user3.png'; |
||||
|
||||
function VodTube({ videoList, getList, list, selectedVideo, comments }: any) { |
||||
useEffect(() => { |
||||
getList(); |
||||
}, []); |
||||
return ( |
||||
<div className="video-tube main d-flex flex-column"> |
||||
<Navbar /> |
||||
<main className="d-flex"> |
||||
<div className="video-tube__content d-flex flex-column"> |
||||
<section className="video-tube__content--display d-flex flex-column"> |
||||
<video controls> |
||||
<source src={selectedVideo.src} /> |
||||
</video> |
||||
<span>درس دوم / بیست و یکم</span> |
||||
<h1>{selectedVideo.name}</h1> |
||||
<p>{selectedVideo.text}</p> |
||||
</section> |
||||
<section className="video-tube__content--comments d-flex flex-column"> |
||||
<header className="d-flex justify-content-between align-items-center"> |
||||
<h2>نظرات</h2> |
||||
<button>بستن نظرات</button> |
||||
</header> |
||||
<div className="video-tube__content-comments___list d-flex flex-column"> |
||||
{ |
||||
comments?.map((comment : any, i : any) => ( |
||||
<Comment comment={comment} key={i} /> |
||||
)) |
||||
} |
||||
</div> |
||||
</section> |
||||
<section className="video-tube__content--addComment d-flex"> |
||||
<AddComment /> |
||||
</section> |
||||
</div> |
||||
<div className="video-tube__sidebar d-flex flex-column"> |
||||
<section className="video-tube__sidebar--playlist d-flex flex-column"> |
||||
<header className="d-flex justify-content-between align-items-center"> |
||||
<div className="d-flex flex-column"> |
||||
<h2>{videoList.name}</h2> |
||||
<p>در این قسمت توضیحی کوتاه قرار می گیرد</p> |
||||
</div> |
||||
<img src={listIcon} alt="" /> |
||||
</header> |
||||
<div className="video-tube__sidebar--playlist___list d-flex flex-column"> |
||||
{videoList.lessons?.map((lesson: any, i: any) => ( |
||||
<LessonPlayList lesson={lesson} key={i} num={i + 1} /> |
||||
))} |
||||
</div> |
||||
</section> |
||||
<section className="video-tube__sidebar--attachments d-flex flex-column"> |
||||
<header className="d-flex align-items-center"> |
||||
<div className="d-flex flex-column"> |
||||
<h2>فایل پیوست تمارین این فصل</h2> |
||||
<p>در این قسمت توضیحی کوتاه قرار می گیرد</p> |
||||
</div> |
||||
</header> |
||||
<div className="video-tube__sidebar--attachments___list d-flex flex-column"> |
||||
{videoList.attachments?.map((file: any, i: any) => ( |
||||
<Attachments file={file} key={i} /> |
||||
))} |
||||
</div> |
||||
</section> |
||||
<section className="video-tube__sidebar--suggests d-flex flex-column"> |
||||
<header className="d-flex justify-content-between align-items-center"> |
||||
<h2>پیشنهاد دانوین برای شما</h2> |
||||
<span>تا 50% تخفیف </span> |
||||
</header> |
||||
<div className="video-tube__sidebar--suggests___list d-flex justify-content-between align-items-center"> |
||||
{list?.slice(0, 3).map((item: any, i: any) => ( |
||||
<Book data={item} key={i} /> |
||||
))} |
||||
</div> |
||||
</section> |
||||
</div> |
||||
</main> |
||||
<Footer /> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export default connect( |
||||
(state: any) => ({ |
||||
videoList: state.book.mockVideoList, |
||||
selectedVideo: state.book.selectedVideo, |
||||
list: state.book.list, |
||||
comments: state.book.comments, |
||||
}), |
||||
{ getList: book.list } |
||||
)(VodTube); |
||||
Loading…
Reference in new issue