parent
924177ecc2
commit
b5a3316ad7
26 changed files with 977 additions and 186 deletions
|
After Width: | Height: | Size: 830 B |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 588 B |
|
After Width: | Height: | Size: 572 B |
|
After Width: | Height: | Size: 876 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 357 B |
|
After Width: | Height: | Size: 977 B |
@ -0,0 +1,8 @@ |
||||
.MuiBreadcrumbs-li{ |
||||
a { |
||||
text-decoration: none; |
||||
font-family: numeralLight; |
||||
color: #6F7074; |
||||
letter-spacing: -1px; |
||||
} |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
import React from "react"; |
||||
import Breadcrumbs from "@mui/material/Breadcrumbs"; |
||||
import { Link } from "react-router-dom"; |
||||
|
||||
import "./index.scss"; |
||||
|
||||
export default function BreadCrumbs(props: any) { |
||||
const { links } = props; |
||||
return ( |
||||
<Breadcrumbs aria-label="breadcrumb"> |
||||
{links.map((item: any, i: any) => ( |
||||
<Link to={item.link} key={i}>{item.name}</Link> |
||||
))} |
||||
</Breadcrumbs> |
||||
); |
||||
} |
||||
@ -0,0 +1,20 @@ |
||||
import React from 'react' |
||||
import StarIcon from '@mui/icons-material/Star'; |
||||
import Rating from '@mui/material/Rating'; |
||||
|
||||
|
||||
|
||||
export default function StyledRating(props : any) { |
||||
const {rate} = props; |
||||
return ( |
||||
<> |
||||
<Rating |
||||
name="customized-color" |
||||
defaultValue={2} |
||||
precision={0.5} |
||||
icon={<StarIcon style={{ fontSize : 40, color : '#FFED00' }} />} |
||||
emptyIcon={<StarIcon style={{ fontSize : 40, color : '#494949' }} />} |
||||
/> |
||||
</> |
||||
) |
||||
} |
||||
@ -0,0 +1,87 @@ |
||||
.lesson { |
||||
header { |
||||
background-color: #414141; |
||||
border: 1px solid #b3b3b3 !important; |
||||
padding: 15px !important; |
||||
h4 { |
||||
color: #9cdf52; |
||||
margin: 0px; |
||||
|
||||
} |
||||
div { |
||||
color: #cccccc; |
||||
} |
||||
img{ |
||||
width: 40px; |
||||
} |
||||
} |
||||
&__files{ |
||||
padding: 30px 15px 20px !important; |
||||
border-left: 1px solid #b3b3b3; |
||||
border-right: 1px solid #b3b3b3; |
||||
border-bottom: 1px solid #b3b3b3; |
||||
& img{ |
||||
width: 40px; |
||||
} |
||||
&--sample{ |
||||
margin-bottom: 15px; |
||||
color: white; |
||||
li{ |
||||
text-align: center; |
||||
} |
||||
h5{ |
||||
margin-right: 30px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1441px) { |
||||
.lesson { |
||||
header { |
||||
h4 { |
||||
font-size: 21px; |
||||
margin-right: 30px; |
||||
} |
||||
div { |
||||
font-size: 18px; |
||||
} |
||||
} |
||||
&__files{ |
||||
&--sample{ |
||||
li{ |
||||
width : 120px; |
||||
font-size: 19px; |
||||
} |
||||
h5{ |
||||
font-size: 19px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||
.lesson { |
||||
header { |
||||
h4 { |
||||
font-size: calc(100vw / 75); |
||||
margin-right: 30px; |
||||
} |
||||
div { |
||||
font-size: calc(100vw / 80); |
||||
} |
||||
} |
||||
&__files{ |
||||
&--sample{ |
||||
li{ |
||||
width : 120px; |
||||
font-size: calc(100vw / 75); |
||||
} |
||||
h5{ |
||||
font-size: calc(100vw/ 75); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,56 @@ |
||||
import React from 'react'; |
||||
import whiteDropdown from "../../../assets/icons/white-dropdown.png"; |
||||
import whitePlay from "../../../assets/icons/white-play.png"; |
||||
import document from "../../../assets/icons/document.png"; |
||||
import lock from "../../../assets/icons/lock.png"; |
||||
import './index.scss'; |
||||
|
||||
export default function Lesson(props : any) { |
||||
const {lesson} = props; |
||||
return ( |
||||
<div className="lesson d-flex flex-column"> |
||||
<header className="d-flex justify-content-between align-items-center"> |
||||
<div className="d-flex align-items-center"> |
||||
<img src={whiteDropdown} alt="" /> |
||||
<h4>{lesson.title}</h4> |
||||
</div> |
||||
<div className="d-flex"> |
||||
مدت زمان درس {lesson.duration} |
||||
</div> |
||||
</header> |
||||
{ |
||||
lesson.active && <ul className="lesson__files d-flex flex-column"> |
||||
{ |
||||
lesson.files.map((data:any, i:any) => ( |
||||
<li className="lesson__files--sample d-flex justify-content-between align-items-center"> |
||||
<div className="d-flex align-items-center"> |
||||
{ |
||||
data.type === 'video' && <img src={whitePlay} alt="" /> |
||||
} |
||||
{ |
||||
data.type === 'document' && <img src={document} alt="" /> |
||||
} |
||||
<h5>{data.name}</h5> |
||||
</div> |
||||
<ul className="d-flex"> |
||||
<li>{data.type !== 'document' && data.duration}</li> |
||||
<li> |
||||
{ |
||||
data.view && 'مشاهده' |
||||
} |
||||
</li> |
||||
<li> |
||||
{ |
||||
data.download ? 'دانلود' : <img src={lock} alt="" /> |
||||
} |
||||
</li> |
||||
</ul> |
||||
</li> |
||||
)) |
||||
} |
||||
</ul> |
||||
} |
||||
|
||||
</div> |
||||
) |
||||
} |
||||
@ -0,0 +1,288 @@ |
||||
.course{ |
||||
background: hsla(0, 0%, 31%, 1); |
||||
background: linear-gradient( |
||||
90deg, |
||||
hsla(0, 0%, 31%, 1) 0%, |
||||
hsla(0, 0%, 0%, 1) 100% |
||||
); |
||||
background: -moz-linear-gradient( |
||||
90deg, |
||||
hsla(0, 0%, 31%, 1) 0%, |
||||
hsla(0, 0%, 0%, 1) 100% |
||||
); |
||||
background: -webkit-linear-gradient( |
||||
90deg, |
||||
hsla(0, 0%, 31%, 1) 0%, |
||||
hsla(0, 0%, 0%, 1) 100% |
||||
); |
||||
width: 100%; |
||||
overflow-x: hidden; |
||||
padding-top: 60px; |
||||
min-height: 100vh; |
||||
font-family: numeralLight; |
||||
&-container{ |
||||
margin: 0px auto; |
||||
width: 100%; |
||||
header{ |
||||
padding: 70px 0px 45px; |
||||
border-bottom:3px solid #4a4a4a; |
||||
|
||||
} |
||||
&__info{ |
||||
&--image{ |
||||
margin-left: 20px; |
||||
img{ |
||||
border-top-left-radius: 9px; |
||||
border-top-right-radius: 9px; |
||||
border-bottom-right-radius: 9px; |
||||
border-bottom-left-radius: 24px; |
||||
} |
||||
} |
||||
&--description{ |
||||
padding-top: 5px; |
||||
a{ |
||||
color: #424242; |
||||
} |
||||
li{ |
||||
color: #424242; |
||||
} |
||||
h1{ |
||||
color: white; |
||||
margin-top: 12px; |
||||
} |
||||
p{ |
||||
color: #D3D3D3; |
||||
margin-top: 25px; |
||||
} |
||||
.course-info-items{ |
||||
padding: 10px; |
||||
background-color: #08793d23; |
||||
border-radius: 10px; |
||||
i{ |
||||
color: #4DD35B; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&__options{ |
||||
&--rate{ |
||||
border: 2px solid #707070; |
||||
box-shadow: 0px 0px 39px #f7ff01b3; |
||||
border-radius: 15px; |
||||
padding-top: 20px; |
||||
color: white; |
||||
} |
||||
&--button{ |
||||
background-color: #313131; |
||||
border: 1px solid #707070; |
||||
color: white; |
||||
padding: 8px; |
||||
text-align: center; |
||||
margin-top: 15px; |
||||
&:hover{ |
||||
color: white; |
||||
} |
||||
} |
||||
} |
||||
&__list{ |
||||
margin-bottom: 30px; |
||||
border-radius: 10px; |
||||
|
||||
header{ |
||||
padding: 40px 0px 20px; |
||||
border: 0px; |
||||
h2{ |
||||
color: #4DD35B; |
||||
} |
||||
p{ |
||||
color: #707070; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
@media screen and (min-width: 1441px) { |
||||
.course{ |
||||
&-container { |
||||
max-width: 1350px; |
||||
&__info{ |
||||
flex: 4; |
||||
&--image{ |
||||
img{ |
||||
width: 320px; |
||||
height: 420px; |
||||
} |
||||
} |
||||
&--description{ |
||||
a{ |
||||
font-size: 17px; |
||||
} |
||||
li{ |
||||
font-size: 17px; |
||||
} |
||||
h1{ |
||||
font-size: 50px; |
||||
} |
||||
p{ |
||||
font-size: 16px; |
||||
} |
||||
.course-info-items{ |
||||
width: 220px; |
||||
margin-top: 20px; |
||||
& img{ |
||||
margin-left: 5px; |
||||
width : 50px; |
||||
} |
||||
i{ |
||||
font-size: 18px; |
||||
font-family: numeralLight; |
||||
} |
||||
p{ |
||||
font-size: 14px; |
||||
margin: 0px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&__options{ |
||||
flex: 2; |
||||
&--rate{ |
||||
width: 315px; |
||||
height: 200px; |
||||
margin-bottom: 30px; |
||||
&__number{ |
||||
div{ |
||||
font-size: 20px; |
||||
} |
||||
i{ |
||||
font-size: 15px; |
||||
} |
||||
b{ |
||||
font-size: 50px; |
||||
} |
||||
span{ |
||||
font-size: 18px; |
||||
transform: translateY(4px); |
||||
margin-right: 10px; |
||||
} |
||||
} |
||||
h2{ |
||||
margin-top: 15px; |
||||
font-size: 20px; |
||||
} |
||||
|
||||
} |
||||
&--button{ |
||||
width: 315px; |
||||
height: 66px; |
||||
padding: 0px 30px; |
||||
font-size: 18px; |
||||
border-radius: 40px; |
||||
} |
||||
} |
||||
&__list{ |
||||
header{ |
||||
h2{ |
||||
font-size: 25px; |
||||
} |
||||
p{ |
||||
font-size: 13px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||
.course{ |
||||
&-container { |
||||
max-width: 1250px; |
||||
padding: 0px 10px; |
||||
&__info{ |
||||
flex: 3; |
||||
&--image{ |
||||
img{ |
||||
width: 250px; |
||||
height: 380px; |
||||
} |
||||
} |
||||
&--description{ |
||||
a{ |
||||
font-size: calc(100vw / 90); |
||||
} |
||||
li{ |
||||
font-size: calc(100vw / 90); |
||||
} |
||||
h1{ |
||||
font-size: calc(100vw / 40); |
||||
} |
||||
p{ |
||||
font-size: calc(100vw / 80);; |
||||
} |
||||
.course-info-items{ |
||||
width: 45%; |
||||
margin-top: 20px; |
||||
& img{ |
||||
margin-left: 10px; |
||||
width : 45px; |
||||
} |
||||
i{ |
||||
font-size: calc(100vw / 95); |
||||
font-family: numeralLight; |
||||
} |
||||
p{ |
||||
font-size: calc(100vw / 100); |
||||
margin: 0px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
&__options{ |
||||
flex: 2; |
||||
&--rate{ |
||||
width: 70%; |
||||
height: 160px; |
||||
margin-bottom: 30px; |
||||
&__number{ |
||||
i{ |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
b{ |
||||
font-size: calc(100vw / 50); |
||||
} |
||||
span{ |
||||
font-size: 18px; |
||||
transform: translateY(4px); |
||||
margin-right: 10px; |
||||
} |
||||
} |
||||
h2{ |
||||
margin-top: 5px; |
||||
font-size: calc(100vw / 80); |
||||
} |
||||
|
||||
} |
||||
&--button{ |
||||
width: 70%; |
||||
height: 59px; |
||||
padding: 0px 30px; |
||||
font-size: calc(100vw / 75); |
||||
border-radius: 40px; |
||||
} |
||||
} |
||||
&__list{ |
||||
header{ |
||||
h2{ |
||||
font-size: calc(100vw / 65); |
||||
} |
||||
p{ |
||||
font-size: calc(100vw / 100); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
Loading…
Reference in new issue