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

reza added inital light mode

Browse Source
master
Reza 3 years ago
parent a3c35eb82d
commit 157d4e8f0c
26 changed files with 607 additions and 356 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. 2
      src/views/About/index.tsx
  3. 27
      src/views/Auth/Login/index.scss
  4. 18
      src/views/Auth/Login/index.tsx
  5. 10
      src/views/Auth/SignUp/index.scss
  6. 48
      src/views/Auth/SignUp/index.tsx
  7. 14
      src/views/Auth/index.tsx
  8. 10
      src/views/Course/Lesson/index.scss
  9. 33
      src/views/Course/Lesson/index.tsx
  10. 328
      src/views/Course/index.scss
  11. 22
      src/views/Course/index.tsx
  12. 13
      src/views/Faq/index.scss
  13. 12
      src/views/Faq/index.tsx
  14. 65
      src/views/Home/AppDownload/index.scss
  15. 18
      src/views/Home/AppDownload/index.tsx
  16. 1
      src/views/Home/Footer/index.scss
  17. 7
      src/views/Home/Footer/index.tsx
  18. 4
      src/views/Home/index.tsx
  19. 16
      src/views/Subscription/SubscribeRadio/index.scss
  20. 31
      src/views/Subscription/SubscribeRadio/index.tsx
  21. 37
      src/views/Subscription/index.tsx
  22. 3
      src/views/VideoTube/AddComment/index.tsx
  23. 14
      src/views/VideoTube/LessonPlayList/index.scss
  24. 23
      src/views/VideoTube/LessonPlayList/index.tsx
  25. 182
      src/views/VideoTube/index.scss
  26. 22
      src/views/VideoTube/index.tsx

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

@ -12,6 +12,9 @@
background-color: $gray1 !important; background-color: $gray1 !important;
border: none !important; border: none !important;
} }
.MuiButton-root{
color: black !important;
}
} }
&__dark{ &__dark{
background-color: black; background-color: black;

2
src/views/About/index.tsx
Unescape View File

@ -14,7 +14,7 @@ function About({ fury, advantages, keywords, keywords2, first, theme, setTheme }
<div <div
className={_.join([ className={_.join([
"about main d-flex flex-column", "about main d-flex flex-column",
theme === "dark" ? "main__light" : "main__dark", theme === "dark" ? "main__dark" : "main__light",
], " ")} ], " ")}
> >
<Navbar /> <Navbar />

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

@ -3,6 +3,30 @@
height: 100vh; height: 100vh;
position: relative; position: relative;
font-family: numeralLight; font-family: numeralLight;
&__light {
.MuiFormControl-root label{
background-color: white !important;
}
b{
color: black !important;
}
.login {
&__back {
a {
color: black !important;
}
}
&__options {
color: black;
a {
color: $green4;
}
}
}
}
&__dark {
background-color: black;
}
&__options { &__options {
color: #b5b5b5; color: #b5b5b5;
a { a {
@ -23,7 +47,6 @@
.MuiButtonBase-root { .MuiButtonBase-root {
padding: 0px !important; padding: 0px !important;
} }
background: black;
.footer { .footer {
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
@ -129,7 +152,6 @@
@media screen and (min-width: 641px) and (max-width: 1007px) { @media screen and (min-width: 641px) and (max-width: 1007px) {
.login { .login {
background: black;
.footer { .footer {
display: none !important; display: none !important;
} }
@ -190,7 +212,6 @@
@media screen and (max-width: 640px) { @media screen and (max-width: 640px) {
.login { .login {
background: black;
section { section {
// background-color: red; // background-color: red;
width: 90%; width: 90%;

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

@ -12,14 +12,14 @@ import arrow from "../../../assets/icons/dropdown.png";
import onInput from "../../../util/onInput"; import onInput from "../../../util/onInput";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { user } from "../../../redux/actions"; import { user } from "../../../redux/actions";
import _ from "lodash";
interface LoginFields { interface LoginFields {
username?: string; username?: string;
password?: string; password?: string;
} }
function Login({login, ...props}: any) { function Login({ login, theme, ...props }: any) {
const [loginFields, setSignUpFiels] = useState<LoginFields | undefined>( const [loginFields, setSignUpFiels] = useState<LoginFields | undefined>(
undefined undefined
); );
@ -29,11 +29,17 @@ function Login({login, ...props}: any) {
// const usernameInput = useRef<any>(); // const usernameInput = useRef<any>();
// const passwordInput = useRef<any>(); // const passwordInput = useRef<any>();
useEffect(() => { useEffect(() => {}, []);
}, []);
return ( return (
<div className="login d-flex flex-column align-items-center justify-content-center"> <div
className={_.join(
[
"login d-flex flex-column align-items-center justify-content-center",
theme === "light" ? "login__light" : "login__dark",
],
" "
)}
>
<Navbar /> <Navbar />
<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">

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

@ -3,10 +3,18 @@
height: 100vh; height: 100vh;
position: relative; position: relative;
font-family: numeralLight; font-family: numeralLight;
&__light{
background-color: white;
b{
color: black !important;
}
input{
background-color: white !important;
}
}
img { img {
// transform: rotate(-90deg); // transform: rotate(-90deg);
} }
background: black;
.footer { .footer {
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;

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

@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect } from "react"; import React, { useState, useRef, useEffect } from "react";
import {useHistory} from 'react-router-dom'; import { useHistory } from "react-router-dom";
import Navbar from "../../../components/Navbar"; import Navbar from "../../../components/Navbar";
import Footer from "../../Home/Footer"; import Footer from "../../Home/Footer";
import Timer from "../../../components/Timer"; import Timer from "../../../components/Timer";
@ -8,16 +8,16 @@ 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 arrowLeft from "../../../assets/icons/arrow-left.png";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { user } from "../../../redux/actions"; import { user } from "../../../redux/actions";
import _ from "lodash";
interface SignUpFields { interface SignUpFields {
cellphone?: String; cellphone?: String;
otp?: String; otp?: String;
} }
function SignUp({ sendOtp, sendPhoneNumber, loginFlag }: any) { function SignUp({ sendOtp, sendPhoneNumber, loginFlag, theme }: 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
@ -66,7 +66,7 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag }: any) {
}, []); }, []);
useEffect(() => { useEffect(() => {
if(signUpFields?.otp?.length === 4){ if (signUpFields?.otp?.length === 4) {
sendOtp({ sendOtp({
cellphone: signUpFields?.cellphone, cellphone: signUpFields?.cellphone,
otp: signUpFields?.otp, otp: signUpFields?.otp,
@ -74,7 +74,7 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag }: any) {
applicationToken: "22", applicationToken: "22",
}); });
} }
},[signUpFields]); }, [signUpFields]);
useEffect(() => { useEffect(() => {
if (level === "phonenumber") { if (level === "phonenumber") {
@ -85,13 +85,21 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag }: any) {
}, [level]); }, [level]);
useEffect(() => { useEffect(() => {
if(loginFlag){ if (loginFlag) {
history.push('/'); history.push("/");
} }
},[loginFlag]); }, [loginFlag]);
const light = theme === "light";
return ( return (
<div className="signup d-flex flex-column align-items-center justify-content-center"> <div
className={_.join(
[
"signup d-flex flex-column align-items-center justify-content-center",
light ? "signup__light" : "signup__dark",
],
" "
)}
>
<Navbar /> <Navbar />
{level === "phonenumber" && ( {level === "phonenumber" && (
<section className="d-flex flex-column"> <section className="d-flex flex-column">
@ -167,7 +175,10 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag }: any) {
ارسال مجدد کد در <Timer seconds={60} refresh={setResend} /> دیگر ارسال مجدد کد در <Timer seconds={60} refresh={setResend} /> دیگر
</p> </p>
) : ( ) : (
<p className="signup__info d-flex justify-content-center" onClick={() => checkPhoneNumber()}> <p
className="signup__info d-flex justify-content-center"
onClick={() => checkPhoneNumber()}
>
دوباره ارسال کنید دوباره ارسال کنید
</p> </p>
)} )}
@ -178,9 +189,12 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag }: any) {
); );
} }
export default connect((state : any) => ({ export default connect(
loginFlag : state.user.setLogin, (state: any) => ({
}), { loginFlag: state.user.setLogin,
sendOtp: user.otp_login, }),
sendPhoneNumber: user.otp, {
})(SignUp); sendOtp: user.otp_login,
sendPhoneNumber: user.otp,
}
)(SignUp);

14
src/views/Auth/index.tsx
Unescape View File

@ -2,17 +2,23 @@ import React, {useState, useEffect} from 'react';
import SignUp from './SignUp/index'; import SignUp from './SignUp/index';
import Profile from './Profile/index'; import Profile from './Profile/index';
import Login from './Login/index'; import Login from './Login/index';
import {connect} from 'react-redux';
export default function Auth(props : any) {
function Auth(props : any) {
const [page, setPage] = useState(props.page); const [page, setPage] = useState(props.page);
useEffect(() => { useEffect(() => {
setPage(() => props.page); setPage(() => props.page);
},[props.page]); },[props.page]);
return ( return (
<> <>
{ page === 'signup' && <SignUp /> } { page === 'signup' && <SignUp theme={props.theme} /> }
{ page === 'login' && <Login setPage={setPage} /> } { page === 'login' && <Login theme={props.theme} setPage={setPage} /> }
{ page === 'profile' && <Profile /> } { page === 'profile' && <Profile theme={props.theme} /> }
</> </>
) )
} }
export default connect((state : any) => ({
theme : state.publicApi.theme,
}))(Auth);

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

@ -2,6 +2,16 @@
transition: all 0.3s; transition: all 0.3s;
overflow : hidden; overflow : hidden;
border-bottom: 1px solid $gray9; border-bottom: 1px solid $gray9;
&__light{
header{
background-color : white !important;
border: 1px solid $gray9;
}
.lesson__files *{
color: black !important;
}
}
&__active{ &__active{
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;

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

@ -6,6 +6,7 @@ import document from "../../../assets/icons/document.png";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { book, publicApi } from "../../../redux/actions"; import { book, publicApi } from "../../../redux/actions";
import location from "../../../util/location"; import location from "../../../util/location";
import _ from "lodash";
function Lesson({ function Lesson({
toggle, toggle,
@ -13,6 +14,7 @@ function Lesson({
activeCategory, activeCategory,
realCategories, realCategories,
vodDuration, vodDuration,
theme,
}: any) { }: any) {
const [selectedLesson, setSelectedLesson] = useState(null); const [selectedLesson, setSelectedLesson] = useState(null);
const duration = (value: number) => { const duration = (value: number) => {
@ -22,10 +24,20 @@ function Lesson({
}; };
const setCategory = (catId: any, videoId: any) => { const setCategory = (catId: any, videoId: any) => {
localStorage.removeItem("bookId"); localStorage.removeItem("bookId");
localStorage.setItem("category", location.getId() + "," + catId + "," + videoId); localStorage.setItem(
"category",
location.getId() + "," + catId + "," + videoId
);
}; };
const light = theme === "light";
return ( return (
<div className="lesson d-flex flex-column"> <div
className={_.join([
"lesson d-flex flex-column",
light ? "lesson__light" : "lesson__dark",
], " ")}
>
<header <header
className="desktop justify-content-between align-items-center" className="desktop justify-content-between align-items-center"
onClick={() => toggle(lesson[0].categoryId)} onClick={() => toggle(lesson[0].categoryId)}
@ -76,9 +88,9 @@ function Lesson({
height: height:
lesson[0].categoryId === activeCategory lesson[0].categoryId === activeCategory
? lesson.length * ? lesson.length *
(window.innerWidth > 1007 (window.innerWidth > 1007
? window.innerWidth / 33 + 20 ? window.innerWidth / 33 + 20
: window.innerWidth / 33 + 45) : window.innerWidth / 33 + 45)
: "0px", : "0px",
}} }}
> >
@ -110,13 +122,20 @@ function Lesson({
</div> </div>
<ul className="d-flex"> <ul className="d-flex">
<li>{data.type !== "pdf" && duration(data.duration)}</li> <li>{data.type !== "pdf" && duration(data.duration)}</li>
<Link to={"/video/"+ data.id} onClick={() => setCategory(lesson[0].categoryId, data.name)}> <Link
to={"/video/" + data.id}
onClick={() => setCategory(lesson[0].categoryId, data.name)}
>
<li>{"مشاهده"}</li> <li>{"مشاهده"}</li>
</Link> </Link>
{/* <li>{data.download ? "دانلود" : <img src={lock} alt="" />}</li> */} {/* <li>{data.download ? "دانلود" : <img src={lock} alt="" />}</li> */}
</ul> </ul>
</li> </li>
{selectedLesson === data.id && <p style={{ fontSize: 11, padding: "10px 60px 10px 20px" }}>توضیحات مرتبط با این درس</p>} {selectedLesson === data.id && (
<p style={{ fontSize: 11, padding: "10px 60px 10px 20px" }}>
توضیحات مرتبط با این درس
</p>
)}
</div> </div>
))} ))}
</ul> </ul>

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

@ -1,170 +1,177 @@
@import './Lesson/index.scss'; @import "./Lesson/index.scss";
.course{ .course {
&__header{ &__light {
.course__options--rate {
color: black;
}
.course__options--button {
background-color: white !important;
color: black;
}
}
&__header {
padding: 30px 0px 45px; padding: 30px 0px 45px;
border-bottom:2px solid $gray5; border-bottom: 2px solid $gray5;
} }
&__info{ &__info {
&--image{ &--image {
margin-left: 20px; margin-left: 20px;
img{ img {
border-top-left-radius: 9px; border-top-left-radius: 9px;
border-top-right-radius: 9px; border-top-right-radius: 9px;
border-bottom-right-radius: 9px; border-bottom-right-radius: 9px;
border-bottom-left-radius: 24px; border-bottom-left-radius: 24px;
} }
} }
&--description{ &--description {
padding-top: 5px; padding-top: 5px;
a{ a {
color: $gray5; color: $gray5;
} }
li{ li {
color: $gray5; color: $gray5;
} }
h1{ h1 {
color: white; color: white;
margin-top: 12px; margin-top: 12px;
} }
p{ p {
color: $gray6; color: $gray6;
margin-top: 25px; margin-top: 25px;
} }
.course-info-items{ .course-info-items {
padding: 10px; padding: 10px;
background-color: #08793d23; background-color: #08793d23;
border-radius: 10px; border-radius: 10px;
i{ i {
color: $green; color: $green;
} }
} }
} }
} }
&__options{ &__options {
&--rate{ &--rate {
border: 2px solid $gray7; border: 2px solid $gray7;
box-shadow: 0px 0px 20px #f7ff0179; box-shadow: 0px 0px 20px #f7ff0179;
border-radius: 15px; border-radius: 15px;
padding-top: 20px; padding-top: 20px;
color: white; color: white;
} }
&--button{ &--button {
background-color: #313131; background-color: #313131;
border: 1px solid $gray7; border: 1px solid $gray7;
color: white; color: white;
padding: 8px; padding: 8px;
text-align: center; text-align: center;
margin-top: 15px; margin-top: 15px;
&:hover{ &:hover {
color: white; color: white;
} }
} }
} }
&__list{ &__list {
margin-bottom: 30px; margin-bottom: 30px;
border-radius: 10px; border-radius: 10px;
&--header{ &--header {
padding: 20px 0px 20px !important; padding: 20px 0px 20px !important;
border: 0px !important; border: 0px !important;
h2{ h2 {
color: $green; color: $green;
} }
p{ p {
color: $gray7; color: $gray7;
} }
} }
} }
} }
@media screen and (min-width: 1441px) { @media screen and (min-width: 1441px) {
.course{ .course {
main { main {
max-width: 1350px; max-width: 1350px;
} }
&__info{ &__info {
flex: 4; flex: 4;
&--image{ &--image {
img{ img {
// width: 320px; // width: 320px;
height: 420px; height: 420px;
} }
} }
&--description{ &--description {
a{ a {
font-size: 17px; font-size: 17px;
} }
li{ li {
font-size: 17px; font-size: 17px;
} }
h1{ h1 {
font-size: 50px; font-size: 50px;
} }
p{ p {
font-size: 16px; font-size: 16px;
} }
.course-info-items{ .course-info-items {
width: 220px; width: 220px;
margin-top: 20px; margin-top: 20px;
& img{ & img {
margin-left: 5px; margin-left: 5px;
width : 50px; width: 50px;
} }
i{ i {
font-size: 18px; font-size: 18px;
font-family: numeralLight; font-family: numeralLight;
} }
p{ p {
font-size: 14px; font-size: 14px;
margin: 0px; margin: 0px;
} }
} }
} }
} }
&__options{ &__options {
flex: 2; flex: 2;
&--rate{ &--rate {
width: 315px; width: 315px;
height: 200px; height: 200px;
margin-bottom: 30px; margin-bottom: 30px;
&__number{ &__number {
div{ div {
font-size: 20px; font-size: 20px;
} }
i{ i {
font-size: 15px; font-size: 15px;
} }
b{ b {
font-size: 50px; font-size: 50px;
} }
span{ span {
font-size: 18px; font-size: 18px;
transform: translateY(4px); transform: translateY(4px);
margin-right: 10px; margin-right: 10px;
} }
} }
h2{ h2 {
margin-top: 15px; margin-top: 15px;
font-size: 20px; font-size: 20px;
} }
} }
&--button{ &--button {
width: 315px; width: 315px;
height: 66px; height: 66px;
padding: 0px 30px; padding: 0px 30px;
font-size: 18px; font-size: 18px;
border-radius: 40px; border-radius: 40px;
} }
} }
&__list{ &__list {
&--header{ &--header {
h2{ h2 {
font-size: 25px; font-size: 25px;
} }
p{ p {
font-size: 13px; font-size: 13px;
} }
} }
@ -173,84 +180,83 @@
} }
@media screen and (min-width: 1008px) and (max-width: 1440px) { @media screen and (min-width: 1008px) and (max-width: 1440px) {
.course{ .course {
main { main {
max-width: 1250px; max-width: 1250px;
padding: 0px 10px; padding: 0px 10px;
} }
&__info{ &__info {
flex: 3; flex: 3;
&--image{ &--image {
img{ img {
// width: 250px; // width: 250px;
height: 350px; height: 350px;
} }
} }
&--description{ &--description {
h1{ h1 {
font-size: calc(100vw / 50); font-size: calc(100vw / 50);
} }
p{ p {
font-size: calc(100vw / 100);; font-size: calc(100vw / 100);
} }
.course-info-items{ .course-info-items {
width: 45%; width: 45%;
margin-top: 20px; margin-top: 20px;
& img{ & img {
margin-left: 10px; margin-left: 10px;
width : 40px; width: 40px;
} }
i{ i {
font-size: calc(100vw / 120); font-size: calc(100vw / 120);
font-family: numeralLight; font-family: numeralLight;
} }
p{ p {
font-size: calc(100vw / 130); font-size: calc(100vw / 130);
margin: 0px; margin: 0px;
} }
} }
} }
} }
&__options{ &__options {
flex: 2; flex: 2;
&--rate{ &--rate {
width: 70%; width: 70%;
height: 160px; height: 160px;
margin-bottom: 30px; margin-bottom: 30px;
&__number{ &__number {
margin-bottom: 15px; margin-bottom: 15px;
i{ i {
font-size: calc(100vw / 100); font-size: calc(100vw / 100);
} }
b{ b {
font-size: calc(100vw / 50); font-size: calc(100vw / 50);
} }
span{ span {
font-size: 18px; font-size: 18px;
transform: translateY(4px); transform: translateY(4px);
margin-right: 10px; margin-right: 10px;
} }
} }
h2{ h2 {
margin-top: 5px; margin-top: 5px;
font-size: calc(100vw / 80); font-size: calc(100vw / 80);
} }
} }
&--button{ &--button {
width: 70%; width: 70%;
height: 59px; height: 59px;
padding: 0px 30px; padding: 0px 30px;
font-size: calc(100vw / 100); font-size: calc(100vw / 100);
border-radius: 40px; border-radius: 40px;
} }
} }
&__list{ &__list {
&--header{ &--header {
h2{ h2 {
font-size: calc(100vw / 65); font-size: calc(100vw / 65);
} }
p{ p {
font-size: calc(100vw / 100); font-size: calc(100vw / 100);
} }
} }
@ -259,95 +265,94 @@
} }
@media screen and (min-width: 641px) and (max-width: 1007px) { @media screen and (min-width: 641px) and (max-width: 1007px) {
.course{ .course {
background : black; background: black;
main { main {
max-width: 900px; max-width: 900px;
padding: 0px 20px; padding: 0px 20px;
p{ p {
margin-top: 20px; margin-top: 20px;
color: $gray6; color: $gray6;
font-size: calc(100vw / 45); font-size: calc(100vw / 45);
} }
} }
&__header{ &__header {
padding: 0px; padding: 0px;
padding-bottom: 20px; padding-bottom: 20px;
padding-top: 20px; padding-top: 20px;
} }
&__info{ &__info {
flex: 3; flex: 3;
&--image{ &--image {
img{ img {
// width: 200px; // width: 200px;
height: 280px; height: 280px;
} }
} }
&--description{ &--description {
a{ a {
font-size: calc(100vw / 50); font-size: calc(100vw / 50);
} }
// li{ // li{
// font-size: calc(100vw / 90); // font-size: calc(100vw / 90);
// } // }
h1{ h1 {
font-size: calc(100vw / 25); font-size: calc(100vw / 25);
margin-top: 0px; margin-top: 0px;
} }
i{ i {
color: $green; color: $green;
font-size: calc(100vw / 40); font-size: calc(100vw / 40);
} }
} }
} }
&__options{ &__options {
// display : none !important; // display : none !important;
flex: 2; flex: 2;
&--rate{ &--rate {
// width: 70%; // width: 70%;
// height: 160px; // height: 160px;
// margin-bottom: 30px; // margin-bottom: 30px;
border: none; border: none;
box-shadow: 0px 0px 0px #f7ff01b3; box-shadow: 0px 0px 0px #f7ff01b3;
&__number{ &__number {
i{ i {
font-size: calc(100vw / 40); font-size: calc(100vw / 40);
color: white; color: white;
} }
b{ b {
font-size: calc(100vw / 40); font-size: calc(100vw / 40);
} }
span{ span {
font-size: calc(100vw / 28); font-size: calc(100vw / 28);
transform: translateY(4px); transform: translateY(4px);
} }
} }
h2{ h2 {
margin-top: 5px; margin-top: 5px;
font-size: calc(100vw / 40); font-size: calc(100vw / 40);
} }
} }
&--button{ &--button {
width: 48%; width: 48%;
// height: 59px; // height: 59px;
padding: 10px 5px; padding: 10px 5px;
font-size: calc(100vw / 45); font-size: calc(100vw / 45);
border-radius: 30px; border-radius: 30px;
color: $gray6; color: $gray6;
margin-top: 30px; margin-top: 30px;
img{ img {
width: 30px; width: 30px;
} }
} }
} }
&__list{ &__list {
&--header{ &--header {
h2{ h2 {
font-size: calc(100vw / 35); font-size: calc(100vw / 35);
margin-top: 20px; margin-top: 20px;
} }
p{ p {
margin-top: 0px; margin-top: 0px;
font-size: calc(100vw / 50); font-size: calc(100vw / 50);
color: $gray7; color: $gray7;
@ -358,95 +363,94 @@
} }
@media screen and (max-width: 640px) { @media screen and (max-width: 640px) {
.course{ .course {
background : black; background: black;
margin-top: 20px; margin-top: 20px;
&__header{ &__header {
padding: 0px; padding: 0px;
padding-bottom: 20px; padding-bottom: 20px;
} }
main { main {
max-width: 500px; max-width: 500px;
padding: 0px 10px; padding: 0px 10px;
p{ p {
margin-top: 20px; margin-top: 20px;
color: $gray7; color: $gray7;
font-size: calc(100vw / 30); font-size: calc(100vw / 30);
} }
} }
&__info{ &__info {
flex: 3; flex: 3;
&--image{ &--image {
img{ img {
width: 150px; width: 150px;
height: 220px; height: 220px;
} }
} }
&--description{ &--description {
a{ a {
font-size: calc(100vw / 30); font-size: calc(100vw / 30);
} }
li{ li {
font-size: calc(100vw / 90); font-size: calc(100vw / 90);
} }
h1{ h1 {
font-size: calc(100vw / 18); font-size: calc(100vw / 18);
margin-top: 0px; margin-top: 0px;
} }
i{ i {
color: $green; color: $green;
font-size: calc(100vw / 30); font-size: calc(100vw / 30);
} }
} }
} }
&__options{ &__options {
// display : none !important; // display : none !important;
flex: 2; flex: 2;
&--rate{ &--rate {
// width: 70%; // width: 70%;
// height: 160px; // height: 160px;
// margin-bottom: 30px; // margin-bottom: 30px;
border: none; border: none;
box-shadow: 0px 0px 0px #f7ff01b3; box-shadow: 0px 0px 0px #f7ff01b3;
&__number{ &__number {
i{ i {
font-size: calc(100vw / 40); font-size: calc(100vw / 40);
color: white; color: white;
} }
b{ b {
font-size: calc(100vw / 30); font-size: calc(100vw / 30);
} }
span{ span {
font-size: calc(100vw / 28); font-size: calc(100vw / 28);
transform: translateY(4px); transform: translateY(4px);
} }
} }
h2{ h2 {
margin-top: 5px; margin-top: 5px;
font-size: calc(100vw / 40); font-size: calc(100vw / 40);
} }
} }
&--button{ &--button {
width: 48%; width: 48%;
// height: 59px; // height: 59px;
padding: 5px 5px; padding: 5px 5px;
font-size: calc(100vw / 35); font-size: calc(100vw / 35);
border-radius: 40px; border-radius: 40px;
color: $gray6; color: $gray6;
img{ img {
width: 25px; width: 25px;
} }
} }
} }
&__list{ &__list {
&--header{ &--header {
h2{ h2 {
font-size: calc(100vw / 25); font-size: calc(100vw / 25);
margin-top: 20px; margin-top: 20px;
} }
p{ p {
margin-top: 0px; margin-top: 0px;
font-size: calc(100vw / 35); font-size: calc(100vw / 35);
color: $gray6; color: $gray6;
@ -454,4 +458,4 @@
} }
} }
} }
} }

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

@ -14,8 +14,9 @@ import { connect } from "react-redux";
import { publicApi } from "../../redux/actions"; import { publicApi } from "../../redux/actions";
import scroll from "../../util/scroll"; import scroll from "../../util/scroll";
import Loader from "../../components/Loader"; import Loader from "../../components/Loader";
import _ from "lodash";
function Course({ getInfo, info, categories, loading }: any) { function Course({ getInfo, info, categories, loading, theme }: any) {
const [links, setLinks] = useState([ const [links, setLinks] = useState([
{ link: "/", name: "صفحه اصلی" }, { link: "/", name: "صفحه اصلی" },
{ link: "/courses", name: "دوره‌ها" }, { link: "/courses", name: "دوره‌ها" },
@ -25,7 +26,7 @@ function Course({ getInfo, info, categories, loading }: any) {
useEffect(() => { useEffect(() => {
scroll.goToTop(); scroll.goToTop();
getInfo({ getInfo({
bookId: location.getId() bookId: location.getId(),
}); });
}, []); }, []);
@ -36,9 +37,16 @@ function Course({ getInfo, info, categories, loading }: any) {
localStorage.setItem("bookId", location.getId()); localStorage.setItem("bookId", location.getId());
localStorage.removeItem("category"); localStorage.removeItem("category");
}; };
const light = theme === "light";
return ( return (
<div <div
className="course main d-flex flex-column" className={_.join(
[
"course main d-flex flex-column",
light ? "course__light" : "course__dark",
],
" "
)}
style={{ filter: loading ? "blur(8px)" : "" }} style={{ filter: loading ? "blur(8px)" : "" }}
> >
<Navbar /> <Navbar />
@ -59,7 +67,10 @@ function Course({ getInfo, info, categories, loading }: any) {
<i>{info?.vodTeacher}</i> <i>{info?.vodTeacher}</i>
</div> </div>
<div className="d-flex " style={{ minWidth: 150 }}> <div className="d-flex " style={{ minWidth: 150 }}>
<div className="course-info-items d-flex align-items-center justify-content-around" style={{ minWidth: 150 }}> <div
className="course-info-items d-flex align-items-center justify-content-around"
style={{ minWidth: 150 }}
>
<img src={slide} alt="" /> <img src={slide} alt="" />
<div className="d-flex flex-column" style={{ minWidth: 100 }}> <div className="d-flex flex-column" style={{ minWidth: 100 }}>
<i>{info?.vodDuration} ساعت درس </i> <i>{info?.vodDuration} ساعت درس </i>
@ -156,7 +167,7 @@ function Course({ getInfo, info, categories, loading }: any) {
{/* <p>در این قسمت شاید یک متن جهت زیباسازی قرار بگیرد </p> */} {/* <p>در این قسمت شاید یک متن جهت زیباسازی قرار بگیرد </p> */}
</header> </header>
{categories?.map((lesson: any, i: any) => ( {categories?.map((lesson: any, i: any) => (
<Lesson key={i} lesson={lesson} /> <Lesson key={i} lesson={lesson} theme={theme} />
))} ))}
</section> </section>
</main> </main>
@ -175,6 +186,7 @@ export default connect(
info: state.publicApi.bookInfo, info: state.publicApi.bookInfo,
categories: state.publicApi.categories, categories: state.publicApi.categories,
loading: state.publicApi.loading, loading: state.publicApi.loading,
theme: state.publicApi.theme,
}), }),
{ getInfo: publicApi.bookInfo } { getInfo: publicApi.bookInfo }
)(Course); )(Course);

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

@ -1,4 +1,17 @@
.faq { .faq {
&__light{
.faq{
&__list{
li{
background-color: white !important;
border: 1px solid black !important;
p{
color: black !important;
}
}
}
}
}
header { header {
width: 100%; width: 100%;
margin: 0px auto; margin: 0px auto;

12
src/views/Faq/index.tsx
Unescape View File

@ -7,6 +7,7 @@ import whiteDropdown from "../../assets/icons/white-dropdown.png";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { faq } from "../../redux/actions"; import { faq } from "../../redux/actions";
import scroll from "../../util/scroll.js"; import scroll from "../../util/scroll.js";
import _ from "lodash";
function Faq({ function Faq({
list, list,
@ -15,13 +16,21 @@ function Faq({
searchFaq, searchFaq,
searchResult, searchResult,
search, search,
theme,
}: any) { }: any) {
useEffect(() => { useEffect(() => {
getList(); getList();
scroll.goToTop(); scroll.goToTop();
}, []); }, []);
const light = theme === "light";
return ( return (
<div className="faq main d-flex flex-column"> <div
className={_.join([
"faq main d-flex flex-column",
light ? "faq__light" : "faq__dark",
], " ")}
>
<Navbar /> <Navbar />
<main className="d-flex flex-column"> <main className="d-flex flex-column">
<header className="d-flex flex-column"> <header className="d-flex flex-column">
@ -97,6 +106,7 @@ export default connect(
list: state.faq.list, list: state.faq.list,
searchResult: state.faq.searchResult, searchResult: state.faq.searchResult,
search: state.faq.search, search: state.faq.search,
theme: state.publicApi.theme,
}), }),
{ getList: faq.list, selectFaq: faq.selectFaq, searchFaq: faq.searchFaq } { getList: faq.list, selectFaq: faq.selectFaq, searchFaq: faq.searchFaq }
)(Faq); )(Faq);

65
src/views/Home/AppDownload/index.scss
Unescape View File

@ -1,16 +1,22 @@
.app-download{ .app-download {
width: 100%; width: 100%;
margin: 0px auto; margin: 0px auto;
padding: 30px 0px; padding: 30px 0px;
color: white; color: white;
background : url(../../../assets/images/object__footer.svg) no-repeat; background: url(../../../assets/images/object__footer.svg) no-repeat;
background-size : 100% 100%; background-size: 100% 100%;
background-position : 0px 0px; background-position: 0px 0px;
h1{ h1 {
font-family: numeralBold; font-family: numeralBold;
} }
&__figure{ &__light {
&--screen{ h1 {
color: black !important;
}
}
&__figure {
&--screen {
width: 220px; width: 220px;
height: 185px; height: 185px;
border-top: 12px solid black; border-top: 12px solid black;
@ -20,21 +26,22 @@
border-top-right-radius: 30px; border-top-right-radius: 30px;
background-color: $gray12; background-color: $gray12;
} }
&--details{ &--details {
width: 320px; width: 320px;
padding: 10px; padding: 10px;
background-color: black; background-color: black;
border-radius: 10px; border-radius: 10px;
h2,p{ h2,
p {
margin: 0px; margin: 0px;
margin-right: 5px; margin-right: 5px;
} }
h2{ h2 {
color: white; color: white;
font-family: numeralBold; font-family: numeralBold;
margin-bottom: 5px; margin-bottom: 5px;
} }
p{ p {
color: $yellow; color: $yellow;
font-family: numeralLight; font-family: numeralLight;
} }
@ -43,20 +50,20 @@
} }
@media screen and (min-width: 1441px) { @media screen and (min-width: 1441px) {
.app-download{ .app-download {
max-width: 1350px; max-width: 1350px;
h1{ h1 {
font-size: 40px; font-size: 40px;
line-height: 2em; line-height: 2em;
} }
&__figure{ &__figure {
h2{ h2 {
font-size: 16px; font-size: 16px;
} }
p{ p {
font-size: 13px; font-size: 13px;
} }
&--screen{ &--screen {
width: 300px; width: 300px;
height: 255px; height: 255px;
border-top: 12px solid black; border-top: 12px solid black;
@ -66,22 +73,23 @@
border-top-right-radius: 30px; border-top-right-radius: 30px;
background-color: $gray12; background-color: $gray12;
} }
&--details{ &--details {
width: 440px; width: 440px;
padding: 10px; padding: 10px;
background-color: black; background-color: black;
border-radius: 10px; border-radius: 10px;
h2,p{ h2,
p {
margin: 0px; margin: 0px;
margin-right: 5px; margin-right: 5px;
} }
h2{ h2 {
color: white; color: white;
font-family: numeralBold; font-family: numeralBold;
margin-bottom: 5px; margin-bottom: 5px;
font-size: 17px; font-size: 17px;
} }
p{ p {
color: $yellow; color: $yellow;
font-family: numeralLight; font-family: numeralLight;
font-size: 13px; font-size: 13px;
@ -92,23 +100,22 @@
} }
@media screen and (min-width: 1008px) and (max-width: 1440px) { @media screen and (min-width: 1008px) and (max-width: 1440px) {
.app-download{ .app-download {
max-width: 1250px; max-width: 1250px;
h1{ h1 {
font-size: calc(100vw / 40); font-size: calc(100vw / 40);
line-height: 2em; line-height: 2em;
} }
&__figure{ &__figure {
h2{ h2 {
font-size: calc(100vw / 120); font-size: calc(100vw / 120);
} }
p{ p {
font-size: calc(100vw / 150); font-size: calc(100vw / 150);
} }
img{ img {
width: 40px; width: 40px;
} }
} }
} }
}
}

18
src/views/Home/AppDownload/index.tsx
Unescape View File

@ -1,13 +1,21 @@
import React from "react"; import React from "react";
import ar from "../../../assets/icons/ar.png"; import ar from "../../../assets/icons/ar.png";
import download from "../../../assets/icons/download.png"; import download from "../../../assets/icons/download.png";
import _ from "lodash";
export default function AppDownload() { export default function AppDownload(props: any) {
const { theme } = props;
return ( return (
<section className="app-download desktop justify-content-between align-items-center"> <section
<h1> className={_.join(
دریافت اپلیکیشن دانوین [
</h1> "app-download desktop justify-content-between align-items-center",
theme === "light" ? "app-download__light" : "app-download__dark",
],
" "
)}
>
<h1>دریافت اپلیکیشن دانوین</h1>
<figure className="app-download__figure d-flex flex-column align-items-center"> <figure className="app-download__figure d-flex flex-column align-items-center">
<div className="app-download__figure--screen"></div> <div className="app-download__figure--screen"></div>
<div className="app-download__figure--details d-flex justify-content-between align-items-center"> <div className="app-download__figure--details d-flex justify-content-between align-items-center">

1
src/views/Home/Footer/index.scss
Unescape View File

@ -11,6 +11,7 @@
&__container{ &__container{
width: 100%; width: 100%;
margin : 0px auto; margin : 0px auto;
padding: 0px 10px;
p{ p{
margin: 0px; margin: 0px;
color: $gray; color: $gray;

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

@ -1,9 +1,10 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import scroll from "../../../util/scroll"; import scroll from "../../../util/scroll";
import {connect} from 'react-redux';
import _ from 'lodash'; import _ from 'lodash';
export default function Footer(props: any) { function Footer(props: any) {
const { links, theme } = props; const { links, theme } = props;
useEffect(() => { useEffect(() => {
scroll.goToTop() scroll.goToTop()
@ -30,6 +31,10 @@ export default function Footer(props: any) {
); );
} }
export default connect((state : any) => ({
theme : state.publicApi.theme,
}))(Footer)
Footer.defaultProps = { Footer.defaultProps = {
links: [ links: [
{ name: "تعرفه‌ها", link: "/subscribe" }, { name: "تعرفه‌ها", link: "/subscribe" },

4
src/views/Home/index.tsx
Unescape View File

@ -76,8 +76,8 @@ function Home({
/> />
<Books list={gradeFilterBooks ? gradeFilterBooks : courseList} theme={theme} /> <Books list={gradeFilterBooks ? gradeFilterBooks : courseList} theme={theme} />
<Blogs theme={theme} /> <Blogs theme={theme} />
<AppDownload /> <AppDownload theme={theme} />
<Footer theme={theme} /> <Footer />
</div> </div>
{vocal ? ( {vocal ? (
<Vocal setVocal={setVocal} setInputValue={setInputValue} /> <Vocal setVocal={setVocal} setInputValue={setInputValue} />

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

@ -5,13 +5,15 @@
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
transition: all 0.5s; transition: all 0.5s;
&__name{ &__name{
border-top-right-radius: 10px; border-top-right-radius: 10px;
border-bottom-right-radius: 10px; border-bottom-right-radius: 10px;
h2{ h2{
color: white !important; color: white;
margin-bottom: 0px; margin-bottom: 0px;
} }
} }
&__factor{ &__factor{
border-top-left-radius: 10px; border-top-left-radius: 10px;
@ -62,6 +64,18 @@
background-color: rgba(255, 255, 255, 0.18); background-color: rgba(255, 255, 255, 0.18);
} }
} }
&__light{
h2{
color: black !important;
}
.subscribe-radio{
&-active{
h2{
color: white !important;
}
}
}
}
} }
@media screen and (min-width: 1441px) { @media screen and (min-width: 1441px) {

31
src/views/Subscription/SubscribeRadio/index.tsx
Unescape View File

@ -4,25 +4,28 @@ import CircleRoundedIcon from "@mui/icons-material/CircleRounded";
import RadioButtonUncheckedRoundedIcon from "@mui/icons-material/RadioButtonUncheckedRounded"; import RadioButtonUncheckedRoundedIcon from "@mui/icons-material/RadioButtonUncheckedRounded";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { product, userProduct } from "../../../redux/actions"; import { product, userProduct } from "../../../redux/actions";
import _ from "lodash";
function SubscribeRadio({ data, selectedVOD, selectVOD }: any) { function SubscribeRadio({ data, selectedVOD, selectVOD, theme }: any) {
const submitVOD = (value : any) => { const submitVOD = (value: any) => {
if(selectedVOD?.id === data.id){ if (selectedVOD?.id === data.id) {
selectVOD(null); selectVOD(null);
}else{ } else {
selectVOD(data) selectVOD(data);
} }
} };
const light = theme === "light";
return ( return (
<div <div
className={ className={_.join(
"subscribe-radio d-flex" + [
" " + "subscribe-radio d-flex",
(selectedVOD?.id === data.id ? "subscribe-radio-active" : "") selectedVOD?.id === data.id ? "subscribe-radio-active" : "",
} light ? "subscribe-radio__light" : "subscribe-radio__dark",
onClick={() => ],
submitVOD(data) " "
} )}
onClick={() => submitVOD(data)}
> >
<div className="subscribe-radio__name d-flex align-items-center"> <div className="subscribe-radio__name d-flex align-items-center">
<CustomCheckbox <CustomCheckbox

37
src/views/Subscription/index.tsx
Unescape View File

@ -7,26 +7,50 @@ import { connect } from "react-redux";
import { product, userFactor } from "../../redux/actions"; import { product, userFactor } from "../../redux/actions";
import scroll from "../../util/scroll"; import scroll from "../../util/scroll";
import Loader from "../../components/Loader"; import Loader from "../../components/Loader";
import _ from "lodash";
function Subscription({ listVOD, getList, loading, selectedVOD, payment, verify }: any) { function Subscription({
listVOD,
getList,
loading,
selectedVOD,
payment,
verify,
theme,
}: any) {
useEffect(() => { useEffect(() => {
getList(); getList();
scroll.goToTop(); scroll.goToTop();
}, []); }, []);
const light = theme === "light";
return ( return (
<div className={"subscription main d-flex flex-column"}> <div
className={_.join(
[
"subscription main d-flex flex-column",
],
" "
)}
>
<Navbar /> <Navbar />
<main className={"d-flex flex-column" + " " + (loading && "blur")}> <main className={"d-flex flex-column" + " " + (loading && "blur")}>
<h1>خرید اشتراک دانوین</h1> <h1>خرید اشتراک دانوین</h1>
<p> <p>
اینجا هم برای هر کتاب امکان خرید اشتراک جداگانه هست و هم اشتراک های مدت دار. با خرید اشتراک های مدت دار دانوین می تونید در هزینه هاتون صرفه جویی کنید. اینجا هم برای هر کتاب امکان خرید اشتراک جداگانه هست و هم اشتراک های
مدت دار. با خرید اشتراک های مدت دار دانوین می تونید در هزینه هاتون
صرفه جویی کنید.
</p> </p>
{listVOD?.map((subscribe: any, i: any) => ( {listVOD?.map((subscribe: any, i: any) => (
<SubscribeRadio data={subscribe} key={i} /> <SubscribeRadio theme={theme} data={subscribe} key={i} />
))} ))}
<DiscountCode /> <DiscountCode />
<div className="d-flex justify-content-end py-4"> <div className="d-flex justify-content-end py-4">
<button className="submit submit-large" onClick={() => payment({ productId: selectedVOD.id })}>تایید و پرداخت</button> <button
className="submit submit-large"
onClick={() => payment({ productId: selectedVOD.id })}
>
تایید و پرداخت
</button>
</div> </div>
</main> </main>
<Footer /> <Footer />
@ -43,7 +67,8 @@ export default connect(
(state: any) => ({ (state: any) => ({
listVOD: state.product.listVOD, listVOD: state.product.listVOD,
loading: state.product.loading, loading: state.product.loading,
selectedVOD: state.product.selectedVOD selectedVOD: state.product.selectedVOD,
theme: state.publicApi.theme,
}), }),
{ {
getList: product.listVOD, getList: product.listVOD,

3
src/views/VideoTube/AddComment/index.tsx
Unescape View File

@ -2,7 +2,8 @@ import React from "react";
import Avatar from "@mui/material/Avatar"; import Avatar from "@mui/material/Avatar";
import user3 from "../../../assets/images/user3.png"; import user3 from "../../../assets/images/user3.png";
export default function AddComment() { export default function AddComment(props : any) {
const { theme } = props;
return ( return (
<> <>
<Avatar style={{ width: 60, height: 60, marginLeft: 10 }} /> <Avatar style={{ width: 60, height: 60, marginLeft: 10 }} />

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

@ -1,6 +1,20 @@
.lesson-playlist{ .lesson-playlist{
width: 100%; width: 100%;
padding-bottom : 10px; padding-bottom : 10px;
&__light{
.lesson-playlist{
h3{
background-color : inherit !important;
border: 1px solid $gray9 !important;
}
&__item{
*{
color: black !important;
}
}
}
}
header{ header{
background-color: inherit !important; background-color: inherit !important;
margin-bottom: 5px; margin-bottom: 5px;

23
src/views/VideoTube/LessonPlayList/index.tsx
Unescape View File

@ -2,6 +2,7 @@ import React, { useEffect } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { publicApi } from "../../../redux/actions"; import { publicApi } from "../../../redux/actions";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import _ from "lodash";
function LessonPlayList({ function LessonPlayList({
category, category,
@ -10,6 +11,7 @@ function LessonPlayList({
catergories, catergories,
realCategories, realCategories,
vods, vods,
theme,
}: any) { }: any) {
const bookId = localStorage.getItem("bookId"); const bookId = localStorage.getItem("bookId");
useEffect(() => { useEffect(() => {
@ -20,23 +22,32 @@ function LessonPlayList({
) as HTMLElement; ) as HTMLElement;
const elementHeight: any = (listItem as any)?.offsetHeight; const elementHeight: any = (listItem as any)?.offsetHeight;
const listHeight: any = (list as any).offsetHeight; const listHeight: any = (list as any).offsetHeight;
const index = vods?.findIndex(( const index = vods?.findIndex(
(item: any) => item?.name === selectedVideo?.name (item: any) => item?.name === selectedVideo?.name
)); );
console.log(index); console.log(index);
console.log(listHeight,elementHeight * (Number(index) + 1)); console.log(listHeight, elementHeight * (Number(index) + 1));
if( elementHeight * (Number(index) + 1) > listHeight){ if (elementHeight * (Number(index) + 1) > listHeight) {
list.scrollTo(0, (elementHeight * (Number(index) + 1)) + elementHeight); list.scrollTo(0, elementHeight * (Number(index) + 1) + elementHeight);
} }
localStorage.removeItem("scroll-list"); localStorage.removeItem("scroll-list");
} }
}, [vods]); }, [vods]);
const light = theme === "light";
return ( return (
<> <>
{ {
<div className="lesson-playlist d-flex flex-column"> <div
className={_.join(
[
"lesson-playlist d-flex flex-column",
light ? "lesson-playlist__light" : "lesson-playlist__dark",
],
" "
)}
>
{bookId && ( {bookId && (
<header> <header>
<h3> <h3>

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

@ -1,59 +1,86 @@
@import './Attachments/index.scss'; @import "./Attachments/index.scss";
@import './Book/index.scss'; @import "./Book/index.scss";
@import './Comment/index.scss'; @import "./Comment/index.scss";
@import './LessonPlayList/index.scss'; @import "./LessonPlayList/index.scss";
.video-tube { .video-tube {
&__light {
h1,
p {
color: black !important;
}
.video-tube {
&__content {
&--comments {
color: black !important;
}
&--addComment {
textarea {
background-color: white !important;
color: black !important;
}
}
}
&__sidebar{
header{
background-color: white !important;
*{
color: black !important;
}
}
}
}
}
&__content { &__content {
margin-left: 15px; margin-left: 15px;
&--display { &--display {
border-bottom: 1px solid $gray8; border-bottom: 1px solid $gray8;
padding-bottom: 30px; padding-bottom: 30px;
video{ video {
border: 1px solid $gray8; border: 1px solid $gray8;
} }
span{ span {
color: $green4; color: $green4;
padding: 15px 0px; padding: 15px 0px;
} }
h1{ h1 {
color: white; color: white;
margin-bottom: 20px; margin-bottom: 20px;
} }
p{ p {
color: white; color: white;
} }
} }
&--comments{ &--comments {
color: white; color: white;
border-bottom: 1px solid $gray8; border-bottom: 1px solid $gray8;
padding-bottom: 30px; padding-bottom: 30px;
header{ header {
padding: 20px 0px; padding: 20px 0px;
h2{ h2 {
margin: 0px; margin: 0px;
} }
} }
button{ button {
background-color: inherit; background-color: inherit;
border: none; border: none;
color: $green; color: $green;
} }
} }
&--addComment{ &--addComment {
padding: 15px 0px; padding: 15px 0px;
textarea{ textarea {
width: 100%; width: 100%;
border-radius: 12px; border-radius: 12px;
background-color: $gray8; background-color: $gray8;
padding: 10px; padding: 10px;
color: white; color: white;
&:focus{ &:focus {
outline: none; outline: none;
} }
&::placeholder{ &::placeholder {
color: $gray4; color: $gray4;
} }
} }
@ -142,10 +169,10 @@
header { header {
width: 100%; width: 100%;
color: white; color: white;
h2{ h2 {
margin: 0px; margin: 0px;
} }
span{ span {
background-color: #00fff74f; background-color: #00fff74f;
color: $blue2; color: $blue2;
padding: 5px 8px; padding: 5px 8px;
@ -164,31 +191,31 @@
&__content { &__content {
flex: 8; flex: 8;
&--display { &--display {
span{ span {
font-size: 16px; font-size: 16px;
} }
h1{ h1 {
font-size: 24px; font-size: 24px;
} }
p{ p {
font-size: 16px; font-size: 16px;
} }
} }
&--comments{ &--comments {
header{ header {
h2{ h2 {
font-size: 20px; font-size: 20px;
} }
} }
button{ button {
font-size: 14px; font-size: 14px;
} }
} }
&--addComment{ &--addComment {
width: 60%; width: 60%;
textarea{ textarea {
font-size: 14px; font-size: 14px;
&::placeholder{ &::placeholder {
font-size: 14px; font-size: 14px;
} }
} }
@ -233,11 +260,11 @@
h2 { h2 {
font-size: 16px; font-size: 16px;
} }
span{ span {
font-size: 11px; font-size: 11px;
} }
} }
&___list{ &___list {
padding: 15px 12px; padding: 15px 12px;
// background-color: #08793d58; // background-color: #08793d58;
} }
@ -256,37 +283,37 @@
&__content { &__content {
flex: 8; flex: 8;
&--display { &--display {
video{ video {
width: 100%; width: 100%;
} }
span{ span {
font-size: calc(100vw / 100); font-size: calc(100vw / 100);
} }
h1{ h1 {
font-size: calc(100vw / 60); font-size: calc(100vw / 60);
} }
p{ p {
font-size: calc(100vw / 100); font-size: calc(100vw / 100);
} }
} }
&--comments{ &--comments {
header{ header {
h2{ h2 {
font-size: calc(100vw / 80); font-size: calc(100vw / 80);
} }
} }
button{ button {
font-size: calc(100vw / 90); font-size: calc(100vw / 90);
} }
} }
&--addComment{ &--addComment {
width: 60%; width: 60%;
button{ button {
font-size: calc(100vw / 110); font-size: calc(100vw / 110);
} }
textarea{ textarea {
font-size: calc(100vw / 90); font-size: calc(100vw / 90);
&::placeholder{ &::placeholder {
font-size: calc(100vw / 90); font-size: calc(100vw / 90);
} }
} }
@ -331,11 +358,11 @@
h2 { h2 {
font-size: calc(100vw / 85); font-size: calc(100vw / 85);
} }
span{ span {
font-size: calc(100vw / 120); font-size: calc(100vw / 120);
} }
} }
&___list{ &___list {
padding: 15px 12px; padding: 15px 12px;
background-color: #ffffff00; background-color: #ffffff00;
} }
@ -346,7 +373,7 @@
@media screen and (min-width: 641px) and (max-width: 1007px) { @media screen and (min-width: 641px) and (max-width: 1007px) {
.video-tube { .video-tube {
background : black; background: black;
main { main {
max-width: 900px; max-width: 900px;
margin-top: 10px; margin-top: 10px;
@ -358,38 +385,38 @@
margin: 0px; margin: 0px;
&--display { &--display {
padding: 0px; padding: 0px;
video{ video {
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 10px;
} }
span{ span {
font-size: calc(100vw / 40); font-size: calc(100vw / 40);
} }
h1{ h1 {
font-size: calc(100vw / 30); font-size: calc(100vw / 30);
} }
p{ p {
font-size: calc(100vw / 40); font-size: calc(100vw / 40);
} }
} }
&--comments{ &--comments {
header{ header {
h2{ h2 {
font-size: calc(100vw / 40); font-size: calc(100vw / 40);
} }
} }
button{ button {
font-size: calc(100vw / 50); font-size: calc(100vw / 50);
} }
} }
&--addComment{ &--addComment {
width: 100%; width: 100%;
button{ button {
font-size: calc(100vw / 45); font-size: calc(100vw / 45);
} }
textarea{ textarea {
font-size: calc(100vw / 45); font-size: calc(100vw / 45);
&::placeholder{ &::placeholder {
font-size: calc(100vw / 45); font-size: calc(100vw / 45);
} }
} }
@ -404,7 +431,7 @@
background-color: #2c2c2c; background-color: #2c2c2c;
img { img {
transform: translateY(-5px); transform: translateY(-5px);
width : 40px; width: 40px;
} }
h2 { h2 {
font-size: calc(100vw / 40); font-size: calc(100vw / 40);
@ -434,11 +461,11 @@
h2 { h2 {
font-size: calc(100vw / 40); font-size: calc(100vw / 40);
} }
span{ span {
font-size: calc(100vw / 55); font-size: calc(100vw / 55);
} }
} }
&___list{ &___list {
padding: 15px 12px; padding: 15px 12px;
background-color: #ffffff00; background-color: #ffffff00;
} }
@ -449,7 +476,7 @@
@media screen and (max-width: 640px) { @media screen and (max-width: 640px) {
.video-tube { .video-tube {
background : black; background: black;
margin-top: 20px; margin-top: 20px;
main { main {
max-width: 500px; max-width: 500px;
@ -462,38 +489,38 @@
margin: 0px; margin: 0px;
&--display { &--display {
padding: 0px; padding: 0px;
video{ video {
width: 100%; width: 100%;
margin-bottom: 10px; margin-bottom: 10px;
} }
span{ span {
font-size: calc(100vw / 40); font-size: calc(100vw / 40);
} }
h1{ h1 {
font-size: calc(100vw / 30); font-size: calc(100vw / 30);
} }
p{ p {
font-size: calc(100vw / 40); font-size: calc(100vw / 40);
} }
} }
&--comments{ &--comments {
header{ header {
h2{ h2 {
font-size: calc(100vw / 30); font-size: calc(100vw / 30);
} }
} }
button{ button {
font-size: calc(100vw / 37); font-size: calc(100vw / 37);
} }
} }
&--addComment{ &--addComment {
width: 100%; width: 100%;
button{ button {
font-size: calc(100vw / 40); font-size: calc(100vw / 40);
} }
textarea{ textarea {
font-size: calc(100vw / 35); font-size: calc(100vw / 35);
&::placeholder{ &::placeholder {
font-size: calc(100vw / 35); font-size: calc(100vw / 35);
} }
} }
@ -508,7 +535,7 @@
background-color: #2c2c2c; background-color: #2c2c2c;
img { img {
transform: translateY(-5px); transform: translateY(-5px);
width : 30px; width: 30px;
} }
h2 { h2 {
font-size: calc(100vw / 30); font-size: calc(100vw / 30);
@ -538,11 +565,11 @@
h2 { h2 {
font-size: calc(100vw / 30); font-size: calc(100vw / 30);
} }
span{ span {
font-size: calc(100vw / 45); font-size: calc(100vw / 45);
} }
} }
&___list{ &___list {
padding: 15px 12px; padding: 15px 12px;
background-color: #08793d58; background-color: #08793d58;
} }
@ -550,4 +577,3 @@
} }
} }
} }

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

@ -10,6 +10,7 @@ import Video from "../../components/JolPlayer";
import listIcon from "../../assets/icons/list.png"; import listIcon from "../../assets/icons/list.png";
import { connect } from "react-redux"; import { connect } from "react-redux";
import _ from "lodash";
import scroll from "../../util/scroll.js"; import scroll from "../../util/scroll.js";
import location from "../../util/location.js"; import location from "../../util/location.js";
import { book, publicApi } from "../../redux/actions"; import { book, publicApi } from "../../redux/actions";
@ -24,6 +25,7 @@ function VodTube({
categories, categories,
setVideoActive, setVideoActive,
allBooks, allBooks,
theme,
}: any) { }: any) {
const videoListTag = useRef(null); const videoListTag = useRef(null);
useEffect(() => { useEffect(() => {
@ -43,10 +45,17 @@ function VodTube({
} }
}, [allBooks]); }, [allBooks]);
const light = theme === "light";
return ( return (
<> <>
<div <div
className="video-tube main d-flex flex-column" className={_.join(
[
"video-tube main d-flex flex-column",
light ? "video-tube__light" : "video-tube__dark",
],
" "
)}
style={{ filter: loading ? "blur(8px)" : "" }} style={{ filter: loading ? "blur(8px)" : "" }}
> >
<Navbar /> <Navbar />
@ -76,7 +85,7 @@ function VodTube({
</div> </div>
</section> </section>
<section className="desktop video-tube__content--addComment"> <section className="desktop video-tube__content--addComment">
<AddComment /> <AddComment theme={theme} />
</section> </section>
</div> </div>
<div className="video-tube__sidebar d-flex flex-column"> <div className="video-tube__sidebar d-flex flex-column">
@ -98,11 +107,11 @@ function VodTube({
> >
{localStorage.getItem("bookId") {localStorage.getItem("bookId")
? categories?.map((video: any, i: any) => ( ? categories?.map((video: any, i: any) => (
<LessonPlayList category={video} key={i} /> <LessonPlayList theme={theme} category={video} key={i} />
)) ))
: info?.vods.map((video: any, i: any) => ( : info?.vods.map((video: any, i: any) => (
<LessonPlayList category={video} key={i} /> <LessonPlayList theme={theme} category={video} key={i} />
))} ))}
</div> </div>
</section> </section>
{info?.attachments.length > 0 && ( {info?.attachments.length > 0 && (
@ -165,6 +174,7 @@ export default connect(
loading: state.publicApi.loading, loading: state.publicApi.loading,
categories: state.publicApi.categories, categories: state.publicApi.categories,
allBooks: state.publicApi.bookInfo?.vods, allBooks: state.publicApi.bookInfo?.vods,
theme: state.publicApi.theme,
}), }),
{ {
getInfo: publicApi.bookInfo, getInfo: publicApi.bookInfo,

Write Preview
Loading…
Cancel
Save