Reza_ashrafi
/
danovin_vod
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reza designed all

Browse Source
master
RezaAshrafi77 3 years ago
parent 4786fab50f
commit 65f7fc3da1
25 changed files with 1890 additions and 129 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/components/Navbar/index.scss
  2. 4
      src/components/StyledRating/index.tsx
  3. 22
      src/components/Textarea/index.scss
  4. 33
      src/custom.scss
  5. 279
      src/views/Auth/Login/index.scss
  6. 15
      src/views/Auth/Login/index.tsx
  7. 154
      src/views/Auth/SignUp/index.scss
  8. 69
      src/views/Auth/SignUp/index.tsx
  9. 282
      src/views/Contact/index.scss
  10. 76
      src/views/Contact/index.tsx
  11. 82
      src/views/Course/Lesson/index.scss
  12. 74
      src/views/Course/Lesson/index.tsx
  13. 199
      src/views/Course/index.scss
  14. 66
      src/views/Course/index.tsx
  15. 78
      src/views/Faq/index.scss
  16. 2
      src/views/Home/Footer/index.tsx
  17. 45
      src/views/Subscription/DiscountCode/index.scss
  18. 70
      src/views/Subscription/SubscribeRadio/index.scss
  19. 38
      src/views/Subscription/index.scss
  20. 26
      src/views/VideoTube/Attachments/index.scss
  21. 32
      src/views/VideoTube/Book/index.scss
  22. 38
      src/views/VideoTube/Comment/index.scss
  23. 90
      src/views/VideoTube/LessonPlayList/index.scss
  24. 207
      src/views/VideoTube/index.scss
  25. 35
      src/views/VideoTube/index.tsx

3
src/components/Navbar/index.scss
Unescape View File

@ -100,6 +100,7 @@
@media screen and (min-width: 641px) and (max-width: 1007px){ @media screen and (min-width: 641px) and (max-width: 1007px){
.nav{ .nav{
background-color: black;
&__container{ &__container{
max-width: 900px; max-width: 900px;
&--buttons{ &--buttons{
@ -121,7 +122,7 @@
@media screen and (max-width: 640px){ @media screen and (max-width: 640px){
.nav{ .nav{
background-color: hsla(0, 0%, 31%, 1); background-color: black;
&__container{ &__container{
max-width: 500px; max-width: 500px;
&--buttons{ &--buttons{

4
src/components/StyledRating/index.tsx
Unescape View File

@ -12,8 +12,8 @@ export default function StyledRating(props : any) {
name="customized-color" name="customized-color"
defaultValue={2} defaultValue={2}
precision={0.5} precision={0.5}
icon={<StarIcon style={{ fontSize : 40, color : '#FFED00' }} />} icon={<StarIcon style={{ fontSize : 20, color : '#FFED00' }} />}
emptyIcon={<StarIcon style={{ fontSize : 40, color : '#494949' }} />} emptyIcon={<StarIcon style={{ fontSize : 20, color : '#494949' }} />}
/> />
</> </>
) )

22
src/components/Textarea/index.scss
Unescape View File

@ -29,9 +29,27 @@
@media screen and (min-width: 1008px) and (max-width: 1440px) { @media screen and (min-width: 1008px) and (max-width: 1440px) {
.custom-textarea{ .custom-textarea{
font-size: calc(100vw / 72); font-size: calc(100vw / 85);
&::placeholder{ &::placeholder{
font-size: calc(100vw / 72); font-size: calc(100vw / 85);
}
}
}
@media screen and (min-width: 641px) and (max-width: 1007px) {
.custom-textarea{
font-size: calc(100vw / 40);
&::placeholder{
font-size: calc(100vw / 40);
}
}
}
@media screen and (max-width: 640px) {
.custom-textarea{
font-size: calc(100vw / 30);
&::placeholder{
font-size: calc(100vw / 30);
} }
} }
} }

33
src/custom.scss
Unescape View File

@ -5,6 +5,10 @@
border: 0px; border: 0px;
} }
.mobile, .desktop{
display: flex;
}
.submit-large{ .submit-large{
padding: 12px 24px; padding: 12px 24px;
} }
@ -126,8 +130,9 @@
} }
.MuiSelect-select:focus { .MuiSelect-select:focus {
background-color: inherit !important; // background-color: inherit !important;
color: #4d4d4d !important; // color: #4d4d4d !important;
border: 1px solid #707070;
} }
.MuiMenu-list { .MuiMenu-list {
@ -163,6 +168,9 @@
max-width: 1350px; max-width: 1350px;
} }
} }
.mobile{
display: none !important;
}
} }
@media screen and (min-width: 1008px) and (max-width: 1440px){ @media screen and (min-width: 1008px) and (max-width: 1440px){
@ -174,4 +182,25 @@
max-width: 1250px; max-width: 1250px;
} }
} }
.mobile{
display: none !important;
}
}
@media screen and (min-width: 641px) and (max-width: 1007px) {
.desktop{
display: none !important;
}
.submit-large{
font-size: calc(100vw / 38);
}
}
@media screen and (max-width: 640px) {
.desktop{
display: none !important;
}
.submit-large{
font-size: calc(100vw / 25);
}
} }

279
src/views/Auth/Login/index.scss
Unescape View File

@ -10,7 +10,7 @@
} }
} }
img { img {
transform: rotate(-90deg); // transform: rotate(-90deg);
} }
.MuiButtonBase-root{ .MuiButtonBase-root{
padding: 0px !important; padding: 0px !important;
@ -278,3 +278,280 @@
} }
} }
} }
@media screen and (min-width: 641px) and (max-width: 1007px) {
.login {
background: black;
.footer{
display: none !important;
}
section {
// background-color: red;
width: 90%;
max-width: 700px;
height: calc(100% - 60px);
justify-content: center;
b {
color: white;
font-size: calc(100vw / 30);
margin-bottom: 30px;
font-weight: 500;
}
button {
background-color: #84de56;
color: white;
font-size: calc(100vw / 30);
width : 100%;
max-width: 400px;
margin: 50px auto 0px;
padding: 10px 0px;
border: 0px;
border-radius: 10px;
}
}
&__info {
width: 300px;
margin: 40px auto 0px;
text-align: center;
color: white;
font-size: calc(100vw / 40);
a {
color: #84de56;
}
}
&__back {
position: fixed;
top: 100px;
margin-bottom: 40px;
left: 30px;
a {
color: white;
font-size: calc(100vw / 110);
}
img{
width : 50px;
}
}
&__options{
padding-top: 20px;
div{
font-size: calc(100vw / 40);
}
a{
font-size: calc(100vw / 45);
}
}
.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: 10px 14px !important;
font-family: numeralLight;
font-size: calc(100vw / 30);
background-color: #2A2A2A;
&:focus{
border: 0.2px solid #84de56 !important;
border-radius: 10px;
transform : translateY(0px);
z-index: 100;
}
}
.MuiInputLabel-outlined {
font-family: numeralLight !important;
display: inline !important;
position: absolute;
text-align: right !important;
right: 15px;
top: calc(50%);
padding: 0px !important;
transform: translate(0px, -50%) 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: #2A2A2A;
width: fit-content;
text-align: center;
color: #B5B5B5 !important;
letter-spacing: -1px;
font-size: calc(100vw / 40);
z-index: 110;
}
.Mui-focused {
color: rgba(0, 0, 0, 1) !important;
border-color: #84de56 !important;
// background-color: white;
color: #84de56 !important;
}
.MuiInputBase-input {
height: auto !important;
}
}
}
@media screen and (max-width: 640px) {
.login {
background: black;
section {
// background-color: red;
width: 90%;
max-width: 400px;
height: calc(100% - 60px);
// transform: scale(0.9);
justify-content: center;
// align-items: center;
b {
color: white;
font-size: calc(100vw / 18);
margin-bottom: 30px;
font-weight: 500;
}
button {
// position: absolute;
// top: 100px;
// left: 20px;
margin-top: 25px;
background-color: #84de56;
color: white;
font-size: calc(100vw / 25);
padding: 10px 0px;
border: 0px;
border-radius: 10px;
}
}
&__info {
width: 300px;
margin: 40px auto 0px;
text-align: center;
color: white;
font-size: calc(100vw / 30);
a {
color: #84de56;
}
}
&__back {
position: fixed;
top: 70px;
left : 20px;
margin-bottom: 40px;
a {
color: white;
font-size: calc(100vw / 110);
}
img{
// transform: scale()
}
}
&__options{
div{
font-size: calc(100vw / 30);
}
a{
font-size: calc(100vw / 30);
}
}
.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: 10px 14px !important;
font-family: numeralLight;
font-size: calc(100vw / 20);
background-color: #2A2A2A;
&:focus{
border: 0.2px solid #84de56 !important;
border-radius: 10px;
transform : translateY(0px);
z-index: 100;
}
}
.MuiInputLabel-outlined {
font-family: numeralLight !important;
display: inline !important;
position: absolute;
text-align: right !important;
right: 15px;
top: calc(50%);
padding: 0px !important;
transform: translate(0px, -50%) 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: #2A2A2A;
width: fit-content;
text-align: center;
color: #B5B5B5 !important;
letter-spacing: -1px;
font-size: calc(100vw / 30);
z-index: 110;
border-radius: 50%;
}
.Mui-focused {
color: rgba(0, 0, 0, 1) !important;
border-color: #84de56 !important;
// background-color: white;
color: #84de56 !important;
}
.MuiInputBase-input {
height: auto !important;
}
}
}

15
src/views/Auth/Login/index.tsx
Unescape View File

@ -2,14 +2,15 @@ import React, { useState } from "react";
import Navbar from "../../../components/Navbar/index"; import Navbar from "../../../components/Navbar/index";
import Footer from "../../../views/Home/Footer/index"; import Footer from "../../../views/Home/Footer/index";
import Input from "../../../components/Input/index"; import Input from "../../../components/Input/index";
import CustomCheckbox from '../../../components/CustomCheckbox/index'; import CustomCheckbox from "../../../components/CustomCheckbox/index";
import CheckBoxOutlineBlankTwoToneIcon from "@mui/icons-material/CheckBoxOutlineBlankTwoTone"; import CheckBoxOutlineBlankTwoToneIcon from "@mui/icons-material/CheckBoxOutlineBlankTwoTone";
import CheckBoxRoundedIcon from "@mui/icons-material/CheckBoxRounded"; import CheckBoxRoundedIcon from "@mui/icons-material/CheckBoxRounded";
import arrowLeft from "../../../assets/icons/arrow-left.png";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import arrow from "../../../assets/icons/dropdown.png"; import arrow from "../../../assets/icons/dropdown.png";
import onInput from "../../../util/onInput"; import onInput from "../../../util/onInput";
import { connect, useSelector } from "react-redux"; import { connect } from "react-redux";
import { user } from "../../../redux/actions"; import { user } from "../../../redux/actions";
import "./index.scss"; import "./index.scss";
@ -32,8 +33,14 @@ function Login(props: any) {
<section className="d-flex flex-column"> <section className="d-flex flex-column">
<div className="login__back d-flex justify-content-end"> <div className="login__back d-flex justify-content-end">
<Link to="/sign-up" className="d-flex align-items-center"> <Link to="/sign-up" className="d-flex align-items-center">
بازگشت به صفحه قبل {window.innerWidth > 1007 ? (
<img src={arrow} /> <>
بازگشت به صفحه قبل
<img src={arrow} />
</>
) : (
<img src={arrowLeft} alt="" />
)}
</Link> </Link>
</div> </div>
<b> <b>

154
src/views/Auth/SignUp/index.scss
Unescape View File

@ -4,7 +4,7 @@
position: relative; position: relative;
font-family: numeralLight; font-family: numeralLight;
img { img {
transform: rotate(-90deg); // transform: rotate(-90deg);
} }
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
@ -156,4 +156,156 @@
font-size: calc(100vw / 110); font-size: calc(100vw / 110);
} }
} }
}
@media screen and (min-width: 641px) and (max-width: 1007px) {
.signup {
background: black;
.footer{
display: none !important;
}
section {
width: 90%;
max-width: 700px;
height: calc(100% - 60px);
justify-content: center;
b {
color: white;
font-size: calc(100vw / 35);
margin-bottom: 70px;
font-weight: 500;
p{
// font-size: calc(100vw / 30) !important;
}
}
input {
text-align: center;
background-color: #2a2a2a;
border: 1px solid #a2a2a2;
border-radius: 8px;
font-size: calc(100vw / 30);
padding: 10px 14px;
color: #84de56;
direction: ltr;
&:focus {
border: 1px solid #84de56;
&::placeholder {
color: #84de56;
opacity: 0.3;
}
}
}
button {
background-color: #84de56;
color: white;
font-size: calc(100vw / 30);
padding: 10px 0px;
border: 0px;
border-radius: 10px;
width: 100%;
max-width: 400px;
margin: 50px auto 0px;
}
}
&__info {
width: 400px;
margin: 20px auto 0px;
text-align: center;
color: white;
font-size: calc(100vw / 40);
a {
color: #84de56;
}
}
&__back {
position: fixed;
top: 100px;
left: 30px;
margin-bottom: 50px;
a {
color: white;
font-size: calc(100vw / 110);
}
img{
width: 50px;
}
}
&__error{
margin-top: 10px;
color: rgb(255, 115, 115);
font-size: calc(100vw / 110);
}
}
}
@media screen and (max-width: 640px) {
.signup {
background: black;
section {
width: 90%;
max-width: 400px;
height: calc(100% - 60px);
justify-content: center;
b {
color: white;
font-size: calc(100vw / 20);
margin-bottom: 30px;
font-weight: 500;
p{
// font-size: calc(100vw / 30) !important;
}
}
input {
text-align: center;
background-color: #2a2a2a;
border: 1px solid #a2a2a2;
border-radius: 8px;
font-size: calc(100vw / 20);
padding: 10px 14px;
color: white;
direction: ltr;
&:focus {
border: 1px solid #84de56;
&::placeholder {
color: #84de56;
opacity: 0.3;
}
}
}
button {
margin-top: 20px;
background-color: #84de56;
color: white;
font-size: calc(100vw / 20);
padding: 10px 0px;
border: 0px;
border-radius: 10px;
}
}
&__info {
width: 300px;
margin: 20px auto 0px;
text-align: center;
color: white;
font-size: calc(100vw / 30);
a {
color: #84de56;
}
}
&__back {
position: fixed;
top: 70px;
left: 20px;
margin-bottom: 50px;
a {
color: white;
font-size: calc(100vw / 110);
}
}
&__error{
margin-top: 10px;
color: rgb(255, 115, 115);
font-size: calc(100vw / 110);
}
}
} }

69
src/views/Auth/SignUp/index.tsx
Unescape View File

@ -4,19 +4,19 @@ import Footer from "../../../views/Home/Footer/index";
import onInput from "../../../util/onInput"; import onInput from "../../../util/onInput";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import arrow from "../../../assets/icons/dropdown.png"; import arrow from "../../../assets/icons/dropdown.png";
import arrowLeft from "../../../assets/icons/arrow-left.png";
import "./index.scss"; import "./index.scss";
import { connect, useSelector } from "react-redux"; import { connect, useSelector } from "react-redux";
import { user } from "../../../redux/actions"; import { user } from "../../../redux/actions";
interface SignUpFields { interface SignUpFields {
cellphone?: String; cellphone?: String;
otp?: String; otp?: String;
} }
function SignUp(props : any) { function SignUp(props: any) {
const [level, setLevel] = useState("phonenumber"); const [level, setLevel] = useState("phonenumber");
const [signUpFields, setSignUpFiels] = useState<SignUpFields | undefined>( const [signUpFields, setSignUpFiels] = useState<SignUpFields | undefined>(
undefined undefined
@ -28,35 +28,32 @@ function SignUp(props : any) {
}; };
const submitPhoneNumber = () => { const submitPhoneNumber = () => {
if(signUpFields?.cellphone?.slice(0,2) === '09' && signUpFields?.cellphone.length === 11){ if (
signUpFields?.cellphone?.slice(0, 2) === "09" &&
signUpFields?.cellphone.length === 11
) {
setLevel("otp"); setLevel("otp");
props.submitOtp({cellphone : signUpFields?.cellphone}); props.submitOtp({ cellphone: signUpFields?.cellphone });
setError(undefined); setError(undefined);
}else{ } else {
setError('شماره موبایل خود را چک کنید.'); setError("شماره موبایل خود را چک کنید.");
} }
} };
const submitOTP = () => { const submitOTP = () => {
if( signUpFields?.otp?.length === 4){ if (signUpFields?.otp?.length === 4) {
props.submitOtp({cellphone : signUpFields?.cellphone}); props.submitOtp({ cellphone: signUpFields?.cellphone });
setError(undefined); setError(undefined);
}else{ } else {
setError('کد وارد شده را چک کنید.'); setError("کد وارد شده را چک کنید.");
} }
} };
return ( return (
<div className="signup d-flex flex-column align-items-center justify-content-center"> <div className="signup d-flex flex-column align-items-center justify-content-center">
<Navbar /> <Navbar />
{level === "phonenumber" && ( {level === "phonenumber" && (
<section className="d-flex flex-column"> <section className="d-flex flex-column">
{/* <div className="signup__back d-flex justify-content-end">
<Link to="/sign-up" className="d-flex align-items-center">
بازگشت به صفحه قبل
<img src={arrow} />
</Link>
</div> */}
<b> <b>
ثبت نام ثبت نام
<br /> <br />
@ -76,7 +73,10 @@ function SignUp(props : any) {
} }
/> />
<span className="signup__error">{error}</span> <span className="signup__error">{error}</span>
<button type="submit" onClick={() => submitPhoneNumber()}> ادامه</button> <button type="submit" onClick={() => submitPhoneNumber()}>
{" "}
ادامه
</button>
<p className="signup__info"> <p className="signup__info">
با ثبت نام در سرویس ویدئویی دانوین قوانین با ثبت نام در سرویس ویدئویی دانوین قوانین
<Link to="/"> شرایط استفاده و حریم خصوصی </Link> <Link to="/"> شرایط استفاده و حریم خصوصی </Link>
@ -86,18 +86,25 @@ function SignUp(props : any) {
)} )}
{level === "otp" && ( {level === "otp" && (
<section className="d-flex flex-column"> <section className="d-flex flex-column">
<div className="signup__back d-flex justify-content-end" onClick={() => setLevel('phonenumber')}> <div
className="signup__back d-flex justify-content-end"
onClick={() => setLevel("phonenumber")}
>
<Link to="/sign-up" className="d-flex align-items-center"> <Link to="/sign-up" className="d-flex align-items-center">
بازگشت به صفحه قبل {window.innerWidth > 1007 ? (
<img src={arrow} /> <>
بازگشت به صفحه قبل
<img src={arrow} />
</>
) : (
<img src={arrowLeft} alt="" />
)}
</Link> </Link>
</div> </div>
<b> <b>
تاییدیه شماره موبایل تاییدیه شماره موبایل
<br /> <br />
<p> <p>کد ارسال شده به شماره {signUpFields?.cellphone} را وارد کنید.</p>
کد ارسال شده به شماره {signUpFields?.cellphone} را وارد کنید.
</p>
</b> </b>
<input <input
type="text" type="text"
@ -110,8 +117,10 @@ function SignUp(props : any) {
)) ))
} }
/> />
<span className="signup__error">{error}</span> <span className="signup__error">{error}</span>
<button type="submit" onClick={() => submitOTP()}>ادامه</button> <button type="submit" onClick={() => submitOTP()}>
ادامه
</button>
<p className="signup__info"></p> <p className="signup__info"></p>
</section> </section>
)} )}
@ -120,5 +129,7 @@ function SignUp(props : any) {
); );
} }
export default connect(() => ({ export default connect(() => ({}), {
}), {submitSignUp : user.otp_login, submitOtp : user.otp})(SignUp); submitSignUp: user.otp_login,
submitOtp: user.otp,
})(SignUp);

282
src/views/Contact/index.scss
Unescape View File

@ -30,6 +30,23 @@
} }
} }
} }
&__tab{
margin-bottom: 30px;
border-radius: 10px !important;
border: 1px solid #4DD35B;
button{
width: 50%;
padding: 10px 0px;
border: none;
background-color: inherit;
border-radius: 10px !important;
color: #4DD35B;
}
&--active{
background-color: #4DD35B !important;
color: white !important;
}
}
} }
@media screen and (min-width: 1441px) { @media screen and (min-width: 1441px) {
@ -138,11 +155,11 @@
.contact{ .contact{
main{ main{
max-width: 1250px; max-width: 1250px;
padding: 60px 10px; padding: 40px 10px;
header{ header{
padding-bottom: 20px; padding-bottom: 20px;
h1{ h1{
font-size: calc(100vw / 35); font-size: calc(100vw / 45);
} }
} }
} }
@ -155,10 +172,10 @@
margin-right: 20px; margin-right: 20px;
&--data{ &--data{
h2{ h2{
font-size: calc(100vw / 60); font-size: calc(100vw / 70);
} }
p{ p{
font-size: calc(100vw / 80); font-size: calc(100vw / 90);
} }
} }
@ -187,8 +204,11 @@
.MuiOutlinedInput-input { .MuiOutlinedInput-input {
padding: 15px 14px !important; padding: 15px 14px !important;
font-family: numeralLight; font-family: numeralLight;
font-size: 20px; font-size: calc(100vw / 80);
background-color: #272727; background-color: #272727;
color: #84de56;
line-height: 1.5;
border-radius: 10px;
&:focus{ &:focus{
border: 0.2px solid #84de56 !important; border: 0.2px solid #84de56 !important;
border-radius: 10px; border-radius: 10px;
@ -201,7 +221,7 @@
position: absolute; position: absolute;
text-align: right !important; text-align: right !important;
right: 15px; right: 15px;
top: 22px; top: 18px;
padding: 0px !important; padding: 0px !important;
transform: translate(0px, 0px) scale(1) !important; transform: translate(0px, 0px) scale(1) !important;
} }
@ -224,7 +244,255 @@
font-size: 16px; font-size: 16px;
} }
.Mui-focused { .Mui-focused {
color: rgba(0, 0, 0, 1) !important; // color: rgba(0, 0, 0, 1) !important;
border-color: #84de56 !important;
// background-color: white;
color: #84de56 !important;
}
.MuiInputBase-input {
height: auto !important;
}
}
}
@media screen and (min-width: 641px) and (max-width: 1007px) {
.contact{
background : black;
main{
max-width: 900px;
padding: 30px 20px;
header{
padding-bottom: 20px;
h1{
font-size: calc(100vw / 27);
}
}
}
&__tab{
button{
font-size: calc(100vw / 37);
}
}
&__form{
&--name{
width: 100%;
}
button{
// width: 100%;
}
}
&__info{
&--data{
width : 100% !important;
background-color: #83de564b;
padding: 10px;
border-radius: 10px;
h2{
font-size: calc(100vw / 35);
color: #4DD35B;
}
p{
text-align: center;
margin-top: 10px;
font-size: calc(100vw / 40);
}
}
&--map{
border : none;
padding-top: 0px;
height: 260px;
}
}
.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: calc(100vw / 40);
background-color: #272727;
color: #84de56;
line-height: 1.5;
border-radius: 10px;
&: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: 15px;
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: #272727;
width: fit-content;
text-align: center;
color: #B5B5B5 !important;
letter-spacing: -1px;
font-size: calc(100vw / 40);
}
.Mui-focused {
// color: rgba(0, 0, 0, 1) !important;
border-color: #84de56 !important;
// background-color: white;
color: #84de56 !important;
}
.MuiInputBase-input {
height: auto !important;
}
}
}
@media screen and (max-width: 640px) {
.contact{
background : black;
main{
max-width: 500px;
padding: 40px 10px;
header{
padding-bottom: 20px;
h1{
font-size: calc(100vw / 18);
}
}
}
&__tab{
button{
font-size: calc(100vw / 30);
}
}
&__form{
&--name{
width: 100%;
}
button{
// width: 100%;
}
}
&__info{
&--data{
width : 100% !important;
background-color: #83de564b;
padding: 10px;
border-radius: 10px;
h2{
font-size: calc(100vw / 27);
color: #4DD35B;
}
p{
text-align: center;
margin-top: 10px;
font-size: calc(100vw / 32);
}
}
&--map{
border : none;
padding-top: 0px;
height: 260px;
}
}
.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: calc(100vw / 30);
background-color: #272727;
color: #84de56;
line-height: 1.5;
border-radius: 10px;
&: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: 15px;
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: #272727;
width: fit-content;
text-align: center;
color: #B5B5B5 !important;
letter-spacing: -1px;
font-size: calc(100vw / 30);
}
.Mui-focused {
// color: rgba(0, 0, 0, 1) !important;
border-color: #84de56 !important; border-color: #84de56 !important;
// background-color: white; // background-color: white;
color: #84de56 !important; color: #84de56 !important;

76
src/views/Contact/index.tsx
Unescape View File

@ -18,7 +18,7 @@ interface FormData {
function Contact({ departmans, selectedDepartman, contactData }: any) { function Contact({ departmans, selectedDepartman, contactData }: any) {
const [formData, setFormData] = useState<FormData | undefined>(undefined); const [formData, setFormData] = useState<FormData | undefined>(undefined);
const [unit, setUnit] = useState("info");
const onChange = (e: any) => { const onChange = (e: any) => {
setFormData({ ...formData, [e.target.name]: e.target.value }); setFormData({ ...formData, [e.target.name]: e.target.value });
}; };
@ -30,9 +30,78 @@ function Contact({ departmans, selectedDepartman, contactData }: any) {
<header> <header>
<h1>تماس با ما</h1> <h1>تماس با ما</h1>
</header> </header>
<div className="d-flex py-5"> <div className="mobile d-flex flex-column">
<div className="d-flex contact__tab">
<button
className={unit === "info" ? "contact__tab--active" : ""}
onClick={() => setUnit("info")}
>
اطلاعات تماس
</button>
<button
className={unit === "form" ? "contact__tab--active" : ""}
onClick={() => setUnit("form")}
>
فرم تماس
</button>
</div>
{unit === "info" && (
<section className="contact__info d-flex flex-column py-3">
<div className="d-flex flex-column">
{contactData.map((item: any, i: any) => (
<div
className="contact__info--data d-flex flex-column"
key={i}
>
<h2>{item.name}</h2>
<p>{item.value}</p>
</div>
))}
</div>
<div className="contact__info--map d-flex">
<Location />
</div>
</section>
)}
{unit === "form" && (
<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>
<Select
onChange={onChange}
options={departmans}
name="departman"
label={"انتخاب دپارتمان"}
selectedOptions={selectedDepartman}
/>
<Textarea placeholder="متن پیام را اینجا تایپ کنید" />
<div className="d-flex justify-content-end py-4">
<button className="submit submit-large">ارسال پیام</button>
</div>
</form>
</section>
)}
</div>
<div className="desktop py-5">
<section className="contact__form d-flex flex-column"> <section className="contact__form d-flex flex-column">
<form action=""> <form action="" className="main-311">
<div className="contact__form--name"> <div className="contact__form--name">
<Input <Input
name="name" name="name"
@ -75,7 +144,6 @@ function Contact({ departmans, selectedDepartman, contactData }: any) {
</div> </div>
<div className="contact__info--map d-flex"> <div className="contact__info--map d-flex">
<Location /> <Location />
</div> </div>
</section> </section>
</div> </div>

82
src/views/Course/Lesson/index.scss
Unescape View File

@ -94,3 +94,85 @@
} }
} }
} }
@media screen and (min-width: 641px) and (max-width: 1007px) {
.lesson {
border-radius: 10px;
margin-bottom: 15px;
header {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
h4 {
font-size: calc(100vw / 40);
}
div {
font-size: calc(100vw / 50);
}
img{
width: 30px;
}
}
&__duration{
text-align: center;
}
&__files{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 15px 5px !important;
&--sample{
img{
width: 30px;
}
li{
font-size: calc(100vw / 40);
width: 100px;
}
h5{
font-size: calc(100vw/ 43);
margin-right: 10px;
}
}
}
}
}
@media screen and (max-width: 640px) {
.lesson {
border-radius: 10px;
margin-bottom: 15px;
header {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
h4 {
font-size: calc(100vw / 30);
}
div {
font-size: calc(100vw / 35);
}
img{
width: 30px;
}
}
&__duration{
text-align: center;
}
&__files{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 15px 5px !important;
&--sample{
img{
width: 30px;
}
li{
font-size: calc(100vw / 33);
width: 60px;
}
h5{
font-size: calc(100vw/ 33);
margin-right: 5px;
}
}
}
}
}

74
src/views/Course/Lesson/index.tsx
Unescape View File

@ -1,17 +1,20 @@
import React from 'react'; import React from "react";
import whiteDropdown from "../../../assets/icons/white-dropdown.png"; import whiteDropdown from "../../../assets/icons/white-dropdown.png";
import whitePlay from "../../../assets/icons/white-play.png"; import whitePlay from "../../../assets/icons/white-play.png";
import document from "../../../assets/icons/document.png"; import document from "../../../assets/icons/document.png";
import lock from "../../../assets/icons/lock.png"; import lock from "../../../assets/icons/lock.png";
import './index.scss'; import "./index.scss";
import {connect} from 'react-redux'; import { connect } from "react-redux";
import {book} from '../../../redux/actions'; import { book } from "../../../redux/actions";
function Lesson(props : any) { function Lesson(props: any) {
const {lesson} = props; const { lesson } = props;
return ( return (
<div className="lesson d-flex flex-column"> <div className="lesson d-flex flex-column">
<header className="d-flex justify-content-between align-items-center" onClick={() => props.toggle(lesson.id)}> <header
className="desktop justify-content-between align-items-center"
onClick={() => props.toggle(lesson.id)}
>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<img src={whiteDropdown} alt="" /> <img src={whiteDropdown} alt="" />
<h4>{lesson.title}</h4> <h4>{lesson.title}</h4>
@ -20,43 +23,40 @@ function Lesson(props : any) {
مدت زمان درس {lesson.duration} مدت زمان درس {lesson.duration}
</div> </div>
</header> </header>
{ <header
lesson.active && <ul className="lesson__files d-flex flex-column"> className="mobile justify-content-between align-items-center"
{ onClick={() => props.toggle(lesson.id)}
lesson.files.map((data:any, i:any) => ( >
<div className="d-flex flex-column">
<h4>{lesson.title}</h4>
<span> مدت زمان درس {lesson.duration}</span>
</div>
<div className="lesson__duration d-flex">
<img src={whiteDropdown} alt="" />
</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"> <li className="lesson__files--sample d-flex justify-content-between align-items-center">
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
{ {data.type === "video" && <img src={whitePlay} alt="" />}
data.type === 'video' && <img src={whitePlay} alt="" /> {data.type === "document" && <img src={document} alt="" />}
}
{
data.type === 'document' && <img src={document} alt="" />
}
<h5>{data.name}</h5> <h5>{data.name}</h5>
</div> </div>
<ul className="d-flex"> <ul className="d-flex">
<li>{data.type !== 'document' && data.duration}</li> <li>{data.type !== "document" && data.duration}</li>
<li> <li>{data.view && "مشاهده"}</li>
{ <li>{data.download ? "دانلود" : <img src={lock} alt="" />}</li>
data.view && 'مشاهده'
}
</li>
<li>
{
data.download ? 'دانلود' : <img src={lock} alt="" />
}
</li>
</ul> </ul>
</li> </li>
)) ))}
} </ul>
</ul> )}
}
</div> </div>
) );
} }
export default connect((state : any) => ({ export default connect((state: any) => ({}), { toggle: book.setLessonActive })(
Lesson
}),{toggle : book.setLessonActive})(Lesson); );

199
src/views/Course/index.scss
Unescape View File

@ -2,8 +2,7 @@
main{ main{
header{ header{
padding: 70px 0px 45px; padding: 70px 0px 45px;
border-bottom:3px solid #4a4a4a; border-bottom:2px solid #4a4a4a;
} }
} }
&__info{ &__info{
@ -262,4 +261,200 @@
} }
} }
} }
}
@media screen and (min-width: 641px) and (max-width: 1007px) {
.course{
background : black;
main {
max-width: 900px;
padding: 0px 20px;
header{
padding: 0px;
padding-bottom: 20px;
padding-top: 20px;
}
p{
margin-top: 20px;
color: #d3d3d3;
font-size: calc(100vw / 45);
}
}
&__info{
flex: 3;
&--image{
img{
width: 200px;
height: 280px;
}
}
&--description{
a{
font-size: calc(100vw / 50);
}
// li{
// font-size: calc(100vw / 90);
// }
h1{
font-size: calc(100vw / 25);
margin-top: 0px;
}
i{
color: #4DD35B;
font-size: calc(100vw / 40);
}
}
}
&__options{
// display : none !important;
flex: 2;
&--rate{
// width: 70%;
// height: 160px;
// margin-bottom: 30px;
border: none;
box-shadow: 0px 0px 0px #f7ff01b3;
&__number{
i{
font-size: calc(100vw / 40);
color: white;
}
b{
font-size: calc(100vw / 40);
}
span{
font-size: calc(100vw / 28);
transform: translateY(4px);
}
}
h2{
margin-top: 5px;
font-size: calc(100vw / 40);
}
}
&--button{
width: 48%;
// height: 59px;
padding: 10px 5px;
font-size: calc(100vw / 45);
border-radius: 30px;
color: #D3D3D3;
margin-top: 30px;
img{
width: 30px;
}
}
}
&__list{
header{
h2{
font-size: calc(100vw / 35);
margin-top: 20px;
}
p{
margin-top: 0px;
font-size: calc(100vw / 50);
color: #d3d3d3;
}
}
}
}
}
@media screen and (max-width: 640px) {
.course{
background : black;
main {
max-width: 500px;
padding: 0px 10px;
header{
padding: 0px;
padding-bottom: 20px;
}
p{
margin-top: 20px;
color: #d3d3d3;
font-size: calc(100vw / 30);
}
}
&__info{
flex: 3;
&--image{
img{
width: 150px;
height: 220px;
}
}
&--description{
a{
font-size: calc(100vw / 30);
}
li{
font-size: calc(100vw / 90);
}
h1{
font-size: calc(100vw / 18);
margin-top: 0px;
}
i{
color: #4DD35B;
font-size: calc(100vw / 30);
}
}
}
&__options{
// display : none !important;
flex: 2;
&--rate{
// width: 70%;
// height: 160px;
// margin-bottom: 30px;
border: none;
box-shadow: 0px 0px 0px #f7ff01b3;
&__number{
i{
font-size: calc(100vw / 40);
color: white;
}
b{
font-size: calc(100vw / 30);
}
span{
font-size: calc(100vw / 28);
transform: translateY(4px);
}
}
h2{
margin-top: 5px;
font-size: calc(100vw / 40);
}
}
&--button{
width: 48%;
// height: 59px;
padding: 5px 5px;
font-size: calc(100vw / 35);
border-radius: 40px;
color: #D3D3D3;
img{
width: 25px;
}
}
}
&__list{
header{
h2{
font-size: calc(100vw / 25);
margin-top: 20px;
}
p{
margin-top: 0px;
font-size: calc(100vw / 35);
color: #d3d3d3;
}
}
}
}
} }

66
src/views/Course/index.tsx
Unescape View File

@ -32,22 +32,11 @@ function Course({ lessons }: any) {
}); });
}, []); }, []);
const InfoItems = (props: any) => {
return (
<div className="course-info-items d-flex align-items-center justify-content-between">
<img src="" alt="" />
<div className="d-flex flex-column">
<i></i>
<p></p>
</div>
</div>
);
};
return ( return (
<div className="course main d-flex flex-column"> <div className="course main d-flex flex-column">
<Navbar /> <Navbar />
<main> <main>
<header className="d-flex align-items-end"> <header className="desktop align-items-end">
<div className="course__info d-flex"> <div className="course__info d-flex">
<div className="course__info--image d-flex align-items-end"> <div className="course__info--image d-flex align-items-end">
<img src={course?.thumbnailUrl} alt="" /> <img src={course?.thumbnailUrl} alt="" />
@ -56,15 +45,6 @@ function Course({ lessons }: any) {
<div> <div>
<BreadCrumbs links={links} /> <BreadCrumbs links={links} />
<h1>{course?.title?.slice(0, 25)}</h1> <h1>{course?.title?.slice(0, 25)}</h1>
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و
مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی
تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای
کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و
آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم
افزارها شناخت بیشتری دارد.
</p>
</div> </div>
<div className="d-flex justify-content-between"> <div className="d-flex justify-content-between">
<div className="course-info-items d-flex align-items-center justify-content-around"> <div className="course-info-items d-flex align-items-center justify-content-around">
@ -109,6 +89,50 @@ function Course({ lessons }: any) {
</Link> </Link>
</div> </div>
</header> </header>
<header className="mobile flex-column">
<div className="course__info d-flex">
<div className="course__info--image d-flex align-items-end">
<img src={course?.thumbnailUrl} alt="" />
</div>
<div className="course__info--description d-flex flex-column justify-content-between">
<BreadCrumbs links={links} />
<h1>{course?.title?.slice(0, 25)}</h1>
<i>240 ساعت</i>
<div className="course__options--rate d-flex align-items-center justify-content-between">
<div className="course__options--rate__number d-flex flex-column align-items-center">
<h2>میانگین رای کاربران</h2>
<div>
<b>10</b>
<i>/2</i>
</div>
</div>
<StyledRating />
</div>
</div>
</div>
<div className="course__options d-flex align-items-center justify-content-between">
<button className="course__options--button d-flex align-items-center justify-content-around">
اضافه کردن به علاقه‌مندی‌ها
<img src={bookmark} alt="" />
</button>
<Link
to="/"
className="course__options--button d-flex align-items-center justify-content-around"
>
مشاهده پیشنمایش دوره
<img src={play} alt="" />
</Link>
</div>
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در
ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و
کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی
در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را
می طلبد تا با نرم افزارها شناخت بیشتری دارد.
</p>
</header>
<section className="course__list d-flex flex-column"> <section className="course__list d-flex flex-column">
<header> <header>
<h2>سر فصل دوره</h2> <h2>سر فصل دوره</h2>

78
src/views/Faq/index.scss
Unescape View File

@ -27,7 +27,8 @@
margin-right: 2px; margin-right: 2px;
width: 70px; width: 70px;
height: 60px; height: 60px;
border-radius: 5px; border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
} }
} }
&__list { &__list {
@ -35,7 +36,7 @@
margin: 0px auto !important; margin: 0px auto !important;
padding-top: 30px !important; padding-top: 30px !important;
li{ li{
background-color: #242424; background-color: #272727;
margin-bottom: 15px; margin-bottom: 15px;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: 5px;
@ -119,3 +120,76 @@
} }
} }
} }
@media screen and (min-width: 641px) and (max-width: 1007px) {
.faq {
background : black;
padding: 50px 20px 20px;
header {
max-width: 700px;
h1 {
font-size: calc(100vw / 25);
}
p {
font-size: calc(100vw / 35);
margin-bottom: 30px;
}
input {
padding: 5px 10px 5px 0px;
font-size: calc(100vw / 40);
}
img {
width: 35px;
}
button{
width: 60px;
height: 55px;
}
}
&__list{
max-width: 700px;
strong{
font-size: calc(100vw / 40);
}
p{
font-size: calc(100vw / 45);
}
}
}
}
@media screen and (max-width: 640px) {
.faq {
background : black;
padding: 50px 20px 20px;
header {
max-width: 700px;
h1 {
font-size: calc(100vw / 18);
}
p {
font-size: calc(100vw / 30);
margin-bottom: 30px;
}
input {
padding: 5px 10px 5px 0px;
font-size: calc(100vw / 30);
}
img {
width: 30px;
}
button{
width: 50px;
height: 45px;
}
}
&__list{
strong{
font-size: calc(100vw / 30);
}
p{
font-size: calc(100vw / 34);
}
}
}
}

2
src/views/Home/Footer/index.tsx
Unescape View File

@ -5,7 +5,7 @@ import './index.scss';
export default function Footer(props: any) { export default function Footer(props: any) {
const { links } = props; const { links } = props;
return ( return (
<footer className="footer d-flex"> <footer className="footer desktop">
<div className="footer__container d-flex justify-content-between align-items-center"> <div className="footer__container d-flex justify-content-between align-items-center">
<ul className="d-flex"> <ul className="d-flex">
{links.map((item: any, i: any) => ( {links.map((item: any, i: any) => (

45
src/views/Subscription/DiscountCode/index.scss
Unescape View File

@ -64,4 +64,49 @@
font-size: calc(100vw / 90); font-size: calc(100vw / 90);
} }
} }
}
@media screen and (min-width: 641px) and (max-width: 1007px) {
.discount-code{
padding: 10px;
h3{
font-size: calc(100vw / 40);
}
input{
padding: 10px;
width: 300px;
font-size: calc(100vw / 45);
&::placeholder{
font-size: calc(100vw / 50);
}
margin-right: 5px;
}
button{
width : 90px;
font-size: calc(100vw / 40);
}
}
}
@media screen and (max-width: 640px) {
.discount-code{
padding: 10px;
h3{
font-size: calc(100vw / 34);
max-width: 100px;
}
input{
padding: 10px;
width: 180px;
font-size: calc(100vw / 30);
&::placeholder{
font-size: calc(100vw / 40);
}
margin-right: 5px;
}
button{
width : 60px;
font-size: calc(100vw / 30);
}
}
} }

70
src/views/Subscription/SubscribeRadio/index.scss
Unescape View File

@ -133,4 +133,74 @@
} }
} }
} }
}
@media screen and (min-width: 641px) and (max-width: 1007px) {
.subscribe-radio{
min-height: 70px;
&__name{
flex: 7;
h2{
font-size: calc(100vw / 35);
margin-right: 10px;
}
}
&__factor{
flex: 3;
&--tag{
font-size: calc(100vw / 55);
}
&--off{
b{
font-size: calc(100vw / 50);
}
i{
font-size: calc(100vw / 60);
}
}
&--finalPrice{
i{
font-size: calc(100vw / 45);
}
strong{
font-size: calc(100vw / 30);
}
}
}
}
}
@media screen and (max-width: 640px) {
.subscribe-radio{
min-height: 70px;
&__name{
flex: 7;
h2{
font-size: calc(100vw / 25);
margin-right: 10px;
}
}
&__factor{
flex: 3;
&--tag{
font-size: calc(100vw / 45);
}
&--off{
b{
font-size: calc(100vw / 30);
}
i{
font-size: calc(100vw / 45);
}
}
&--finalPrice{
i{
font-size: calc(100vw / 45);
}
strong{
font-size: calc(100vw / 20);
}
}
}
}
} }

38
src/views/Subscription/index.scss
Unescape View File

@ -39,4 +39,40 @@
} }
} }
} }
} }
@media screen and (min-width: 641px) and (max-width : 1007px) {
.subscription{
background : black;
padding: 80px 20px 0px;
main{
margin-top: 0px;
max-width: 900px;
h1{
font-size: calc(100vw / 30);
}
p{
font-size: calc(100vw / 40);
}
}
}
}
@media screen and (max-width : 640px) {
.subscription{
background : black;
padding: 80px 10px 0px;
main{
margin-top: 0px;
max-width: 500px;
// transform: scale(0.8) translateY(-20px);
h1{
font-size: calc(100vw / 18);
}
p{
font-size: calc(100vw / 30);
}
}
}
}

26
src/views/VideoTube/Attachments/index.scss
Unescape View File

@ -41,4 +41,30 @@
font-size: calc(100vw / 100); font-size: calc(100vw / 100);
} }
} }
}
@media screen and (min-width: 641px) and (max-width: 1007px) {
.download-attachments{
width: calc(100% - 20px);
padding: 10px 0px;
a{
font-size: calc(100vw / 50);
}
h4{
font-size: calc(100vw / 50);
}
}
}
@media screen and (max-width: 640px) {
.download-attachments{
width: calc(100% - 20px);
padding: 10px 0px;
a{
font-size: calc(100vw / 40);
}
h4{
font-size: calc(100vw / 40);
}
}
} }

32
src/views/VideoTube/Book/index.scss
Unescape View File

@ -41,3 +41,35 @@
} }
} }
} }
@media screen and (min-width: 641px) and (max-width: 1007px) {
.video-tube-suggest{
width: 30%;
img{
width: 200px;
// height: 180px;
}
h4{
font-size: calc(100vw / 43);
}
p{
font-size: calc(100vw / 52);
}
}
}
@media screen and (max-width: 640px) {
.video-tube-suggest{
width: 30%;
img{
width: 100px;
// height: 180px;
}
h4{
font-size: calc(100vw / 36);
}
p{
font-size: calc(100vw / 43);
}
}
}

38
src/views/VideoTube/Comment/index.scss
Unescape View File

@ -47,4 +47,42 @@
font-size: calc(100vw / 90); font-size: calc(100vw / 90);
} }
} }
}
@media screen and (min-width: 641px) and (max-width: 1007px) {
.video-tube-comment{
width: 95%;
p{
font-size: calc(100vw / 50);
strong{
font-size: calc(100vw / 45);
margin-left: 5px;
}
}
button{
font-size: calc(100vw / 50) !important;
}
span{
font-size: calc(100vw / 45);
}
}
}
@media screen and (max-width: 640px) {
.video-tube-comment{
width: 95%;
p{
font-size: calc(100vw / 42);
strong{
font-size: calc(100vw / 35);
margin-left: 5px;
}
}
button{
font-size: calc(100vw / 40) !important;
}
span{
font-size: calc(100vw / 35);
}
}
} }

90
src/views/VideoTube/LessonPlayList/index.scss
Unescape View File

@ -131,4 +131,94 @@
} }
} }
} }
}
@media screen and (min-width: 641px) and (max-width: 1007px) {
.lesson-playlist{
width: 100%;
header{
padding: 10px 50px 0px 0px !important;
h3{
font-size: calc(100vw / 45);
}
span{
}
}
&__item{
padding: 10px 0px 5px 0px;
cursor: pointer;
&--count{
font-size: calc(100vw / 35);
width : 50px;
text-align: center;
}
&--text{
max-width: 55%;
h4{
font-size: calc(100vw / 45);
}
p{
font-size: calc(100vw / 50);
}
}
&--video{
width: 182px;
// height: 90px;
position: relative;
video{
width : 100%;
height : 100%;
}
span{
font-size: calc(100vw / 45);
}
}
}
}
}
@media screen and (max-width: 640px) {
.lesson-playlist{
width: 100%;
header{
padding: 10px 40px 0px 0px !important;
h3{
font-size: calc(100vw / 38);
}
span{
}
}
&__item{
padding: 10px 0px 5px 0px;
cursor: pointer;
&--count{
font-size: calc(100vw / 25);
width : 40px;
text-align: center;
}
&--text{
max-width: 55%;
h4{
font-size: calc(100vw / 35);
}
p{
font-size: calc(100vw / 40);
}
}
&--video{
width: 132px;
height: 90px;
position: relative;
video{
width : 100%;
height : 100%;
}
span{
font-size: calc(100vw / 40);
}
}
}
}
} }

207
src/views/VideoTube/index.scss
Unescape View File

@ -344,3 +344,210 @@
} }
} }
} }
@media screen and (min-width: 641px) and (max-width: 1007px) {
.video-tube {
background : black;
main {
max-width: 900px;
margin-top: 10px;
padding: 0px 10px;
flex-direction: column;
}
&__content {
flex: 8;
margin: 0px;
&--display {
padding: 0px;
video{
width: 100%;
margin-bottom: 10px;
}
span{
font-size: calc(100vw / 40);
}
h1{
font-size: calc(100vw / 30);
}
p{
font-size: calc(100vw / 40);
}
}
&--comments{
header{
h2{
font-size: calc(100vw / 40);
}
}
button{
font-size: calc(100vw / 50);
}
}
&--addComment{
width: 100%;
button{
font-size: calc(100vw / 45);
}
textarea{
font-size: calc(100vw / 45);
&::placeholder{
font-size: calc(100vw / 45);
}
}
}
}
&__sidebar {
flex: 4;
&--playlist {
max-height: 450px;
header {
padding: 12px 12px;
background-color: #2c2c2c;
img {
transform: translateY(-5px);
width : 40px;
}
h2 {
font-size: calc(100vw / 40);
}
p {
font-size: calc(100vw / 55);
}
}
}
&--attachments {
max-height: 250px;
header {
padding: 14px 12px;
background-color: #2c2c2c;
h2 {
font-size: calc(100vw / 40);
}
p {
font-size: calc(100vw / 55);
}
}
}
&--suggests {
header {
padding: 14px 12px;
background-color: #8bd09746;
h2 {
font-size: calc(100vw / 40);
}
span{
font-size: calc(100vw / 55);
}
}
&___list{
padding: 15px 12px;
background-color: #08793d58;
}
}
}
}
}
@media screen and (max-width: 640px) {
.video-tube {
background : black;
main {
max-width: 500px;
margin-top: 0px;
padding: 0px 10px;
flex-direction: column;
}
&__content {
flex: 8;
margin: 0px;
&--display {
padding: 0px;
video{
width: 100%;
margin-bottom: 10px;
}
span{
font-size: calc(100vw / 40);
}
h1{
font-size: calc(100vw / 30);
}
p{
font-size: calc(100vw / 40);
}
}
&--comments{
header{
h2{
font-size: calc(100vw / 30);
}
}
button{
font-size: calc(100vw / 37);
}
}
&--addComment{
width: 100%;
button{
font-size: calc(100vw / 40);
}
textarea{
font-size: calc(100vw / 35);
&::placeholder{
font-size: calc(100vw / 35);
}
}
}
}
&__sidebar {
flex: 4;
&--playlist {
max-height: calc(60vh);
header {
padding: 8px 12px;
background-color: #2c2c2c;
img {
transform: translateY(-5px);
width : 30px;
}
h2 {
font-size: calc(100vw / 30);
}
p {
font-size: calc(100vw / 45);
}
}
}
&--attachments {
max-height: 200px;
header {
padding: 14px 12px;
background-color: #2c2c2c;
h2 {
font-size: calc(100vw / 30);
}
p {
font-size: calc(100vw / 45);
}
}
}
&--suggests {
header {
padding: 10px 12px;
background-color: #8bd09746;
h2 {
font-size: calc(100vw / 30);
}
span{
font-size: calc(100vw / 45);
}
}
&___list{
padding: 15px 12px;
background-color: #08793d58;
}
}
}
}
}

35
src/views/VideoTube/index.tsx
Unescape View File

@ -12,8 +12,7 @@ import listIcon from "../../assets/icons/list.png";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { book } from "../../redux/actions"; import { book } from "../../redux/actions";
import user from "../../assets/images/user3.png";
import user from '../../assets/images/user3.png';
function VodTube({ videoList, getList, list, selectedVideo, comments }: any) { function VodTube({ videoList, getList, list, selectedVideo, comments }: any) {
useEffect(() => { useEffect(() => {
@ -28,24 +27,22 @@ function VodTube({ videoList, getList, list, selectedVideo, comments }: any) {
<video controls> <video controls>
<source src={selectedVideo.src} /> <source src={selectedVideo.src} />
</video> </video>
<span>درس دوم / بیست و یکم</span> <span className="desktop">درس دوم / بیست و یکم</span>
<h1>{selectedVideo.name}</h1> <h1 className="desktop">{selectedVideo.name}</h1>
<p>{selectedVideo.text}</p> <p className="desktop">{selectedVideo.text}</p>
</section> </section>
<section className="video-tube__content--comments d-flex flex-column"> <section className="desktop video-tube__content--comments flex-column">
<header className="d-flex justify-content-between align-items-center"> <header className="d-flex justify-content-between align-items-center">
<h2>نظرات</h2> <h2>نظرات</h2>
<button>بستن نظرات</button> <button>بستن نظرات</button>
</header> </header>
<div className="video-tube__content-comments___list d-flex flex-column"> <div className="video-tube__content-comments___list d-flex flex-column">
{ {comments?.map((comment: any, i: any) => (
comments?.map((comment : any, i : any) => ( <Comment comment={comment} key={i} />
<Comment comment={comment} key={i} /> ))}
))
}
</div> </div>
</section> </section>
<section className="video-tube__content--addComment d-flex"> <section className="desktop video-tube__content--addComment">
<AddComment /> <AddComment />
</section> </section>
</div> </div>
@ -88,7 +85,21 @@ function VodTube({ videoList, getList, list, selectedVideo, comments }: any) {
))} ))}
</div> </div>
</section> </section>
<section className="mobile video-tube__content--comments 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>
</div> </div>
<section className="mobile video-tube__content--addComment">
<AddComment />
</section>
</main> </main>
<Footer /> <Footer />
</div> </div>

Write Preview
Loading…
Cancel
Save