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

Compare commits

base: Reza_ashrafi:f4c3d552f5e6c298d1a73664096eb5b328cef91b
Branches Tags
Reza_ashrafi:master
...
compare: Reza_ashrafi:157d4e8f0cba01d1201572c1f080b892f0b25541
Branches Tags
Reza_ashrafi:master

2 Commits
f4c3d552f5 ... 157d4e8f0c

Author SHA1 Message Date
Reza 157d4e8f0c reza added inital light mode
3 years ago
Reza a3c35eb82d reza changed home theme
3 years ago
37 changed files with 801 additions and 408 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
  1. 9
      src/components/GradeFilter/index.scss
  2. 9
      src/components/GradeFilter/index.tsx
  3. 46
      src/components/HomeSearchBox/index.scss
  4. 15
      src/components/HomeSearchBox/index.tsx
  5. 17
      src/components/Navbar/index.scss
  6. 29
      src/components/Navbar/index.tsx
  7. 3
      src/views/About/index.tsx
  8. 27
      src/views/Auth/Login/index.scss
  9. 18
      src/views/Auth/Login/index.tsx
  10. 10
      src/views/Auth/SignUp/index.scss
  11. 48
      src/views/Auth/SignUp/index.tsx
  12. 14
      src/views/Auth/index.tsx
  13. 10
      src/views/Course/Lesson/index.scss
  14. 33
      src/views/Course/Lesson/index.tsx
  15. 328
      src/views/Course/index.scss
  16. 22
      src/views/Course/index.tsx
  17. 13
      src/views/Faq/index.scss
  18. 12
      src/views/Faq/index.tsx
  19. 65
      src/views/Home/AppDownload/index.scss
  20. 18
      src/views/Home/AppDownload/index.tsx
  21. 6
      src/views/Home/Books/Book/index.scss
  22. 44
      src/views/Home/Books/Book/index.tsx
  23. 4
      src/views/Home/Books/index.tsx
  24. 6
      src/views/Home/Courses/Course/index.scss
  25. 38
      src/views/Home/Courses/Course/index.tsx
  26. 4
      src/views/Home/Courses/index.tsx
  27. 7
      src/views/Home/Footer/index.scss
  28. 13
      src/views/Home/Footer/index.tsx
  29. 13
      src/views/Home/index.tsx
  30. 16
      src/views/Subscription/SubscribeRadio/index.scss
  31. 31
      src/views/Subscription/SubscribeRadio/index.tsx
  32. 37
      src/views/Subscription/index.tsx
  33. 3
      src/views/VideoTube/AddComment/index.tsx
  34. 14
      src/views/VideoTube/LessonPlayList/index.scss
  35. 23
      src/views/VideoTube/LessonPlayList/index.tsx
  36. 182
      src/views/VideoTube/index.scss
  37. 22
      src/views/VideoTube/index.tsx

9
src/components/GradeFilter/index.scss
Unescape View File

@ -8,6 +8,15 @@
&__box{ &__box{
display: none !important; display: none !important;
} }
&__light{
color: black;
background-color: white;
border: 1px solid black;
.grade-filter__list{
background-color: white;
border: 1px solid black;
}
}
h1{ h1{
margin: 0px; margin: 0px;
padding: 0px 15px; padding: 0px 15px;

9
src/components/GradeFilter/index.tsx
Unescape View File

@ -1,11 +1,11 @@
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { book } from "../../redux/actions"; import { book } from "../../redux/actions";
import _ from 'lodash';
import dropdown from "../../assets/icons/dropdown.png"; import dropdown from "../../assets/icons/dropdown.png";
function GradeFilter({selectedGrade, gradeFilter, grades, gradeDropdown, setGradeDropdown}: any) { function GradeFilter({selectedGrade, gradeFilter, grades, gradeDropdown, setGradeDropdown, theme}: any) {
const [arrowTop, setArrowTop] = useState(false); const [arrowTop, setArrowTop] = useState(false);
useEffect(() => { useEffect(() => {
@ -20,13 +20,13 @@ function GradeFilter({selectedGrade, gradeFilter, grades, gradeDropdown, setGrad
} }
return ( return (
<section className="grade-filter d-flex align-items-center"> <section className={_.join(["grade-filter d-flex align-items-center", theme === 'light' ? 'grade-filter__light' : 'grade-filter__dark']," ")}>
<h1 className="d-flex align-items-center"> <h1 className="d-flex align-items-center">
پایه تحصیلی پایه تحصیلی
<span className="desktop"></span> <span className="desktop"></span>
</h1> </h1>
<div <div
className="grade-filter__box d-flex" className="grade-filter__box mobile"
onClick={(e : any) => setDropdown(e)} onClick={(e : any) => setDropdown(e)}
> >
{selectedGrade ? ( {selectedGrade ? (
@ -75,6 +75,7 @@ function GradeFilter({selectedGrade, gradeFilter, grades, gradeDropdown, setGrad
export default connect( export default connect(
(state: any) => ({ (state: any) => ({
selectedGrade: state.book.selectedGrade, selectedGrade: state.book.selectedGrade,
theme : state.publicApi.theme,
}), }),
{ gradeFilter: book.gradeFilter } { gradeFilter: book.gradeFilter }
)(GradeFilter); )(GradeFilter);

46
src/components/HomeSearchBox/index.scss
Unescape View File

@ -5,24 +5,56 @@
* { * {
transition: all 0.5s; transition: all 0.5s;
} }
&__dark{
form {
button {
background-color: $gray1;
}
input {
background-color: $gray5;
border: 0px;
color: $gray6;
&::placeholder {
color: $gray6;
}
&:focus {
outline: 2px solid $green !important;
}
}
}
}
&__light{
form {
button {
background-color: $gray1;
border: none;
}
input {
border: 1px solid $gray5 !important;
color: black;
background-color: white !important;
&::placeholder {
color: black !important;
}
&:focus {
outline: 2px solid $green !important;
}
}
}
}
form { form {
button { button {
background-color: $gray1;
margin-right: 3px; margin-right: 3px;
border-top-left-radius: 9px; border-top-left-radius: 9px;
border-bottom-left-radius: 9px; border-bottom-left-radius: 9px;
border: 0px;
} }
input { input {
width: 100%; width: 100%;
background-color: $gray5;
border: 0px;
border-top-right-radius: 9px; border-top-right-radius: 9px;
border-bottom-right-radius: 9px; border-bottom-right-radius: 9px;
color: $gray6;
&::placeholder { &::placeholder {
padding-right: 0px; padding-right: 0px;
color: $gray6;
opacity: 0.4; opacity: 0.4;
} }
&:focus { &:focus {
@ -195,7 +227,7 @@
background: $gray1; background: $gray1;
&::placeholder { &::placeholder {
font-size: calc(100vw / 34); font-size: calc(100vw / 34);
color: white !important; color: white;
} }
} }
button { button {

15
src/components/HomeSearchBox/index.tsx
Unescape View File

@ -1,5 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
import _ from "lodash";
import { book } from "../../redux/actions"; import { book } from "../../redux/actions";
import search from "../../assets/icons/search.png"; import search from "../../assets/icons/search.png";
import voice from "../../assets/icons/voice.png"; import voice from "../../assets/icons/voice.png";
@ -11,6 +12,7 @@ function HomeSearchBox({
setInputValue, setInputValue,
sortFilter, sortFilter,
selectedSort, selectedSort,
theme,
}: any) { }: any) {
const submitInput = (value: any) => { const submitInput = (value: any) => {
setInputValue(value); setInputValue(value);
@ -21,7 +23,17 @@ function HomeSearchBox({
sortFilter({ search: inputValue, sort: value }); sortFilter({ search: inputValue, sort: value });
}; };
return ( return (
<section className="home-search-box d-flex flex-column align-items-center"> <section
className={_.join(
[
"home-search-box d-flex flex-column align-items-center",
theme === "light"
? "home-search-box__light"
: "home-search-box__dark",
],
" "
)}
>
<form className="d-flex" onSubmit={(e) => e.preventDefault()}> <form className="d-flex" onSubmit={(e) => e.preventDefault()}>
<input <input
type="search" type="search"
@ -73,6 +85,7 @@ function HomeSearchBox({
export default connect( export default connect(
(state: any) => ({ (state: any) => ({
selectedSort: state.book.selectedSort, selectedSort: state.book.selectedSort,
theme: state.publicApi.theme,
}), }),
{ sortFilter: book.sortFilter } { sortFilter: book.sortFilter }
)(HomeSearchBox); )(HomeSearchBox);

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

@ -1,13 +1,24 @@
.nav{ .nav{
width: 100%; width: 100%;
background-color: black;
height: 60px; height: 60px;
padding: 0px 10px; padding: 0px 10px;
position: fixed !important; position: fixed !important;
top: 0px !important; top: 0px !important;
left: 0px; left: 0px;
z-index: 150; z-index: 150;
&__light{
background-color: white;
.nav___share{
background-color: $gray1 !important;
border: none !important;
}
.MuiButton-root{
color: black !important;
}
}
&__dark{
background-color: black;
}
&__container{ &__container{
width: 100%; width: 100%;
font-family: numeralLight; font-family: numeralLight;
@ -115,7 +126,6 @@
@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{
@ -137,7 +147,6 @@
@media screen and (max-width: 640px){ @media screen and (max-width: 640px){
.nav{ .nav{
background-color: black;
&__container{ &__container{
max-width: 500px; max-width: 500px;
&--buttons{ &--buttons{

29
src/components/Navbar/index.tsx
Unescape View File

@ -6,8 +6,10 @@ import NavbarDrawer from "../NavbarDrawer/NavbarDrawer";
import clsx from "clsx"; import clsx from "clsx";
import proxy from "../../redux/proxy"; import proxy from "../../redux/proxy";
import { makeStyles } from "@mui/styles"; import { makeStyles } from "@mui/styles";
import Menu from '../Menu/index'; import Menu from "../Menu/index";
import logoIcon from '../../assets/icons/logo.png'; import logoIcon from "../../assets/icons/logo.png";
import { connect } from "react-redux";
import _ from "lodash";
const useStyles = makeStyles({ const useStyles = makeStyles({
list: { list: {
@ -20,7 +22,7 @@ const useStyles = makeStyles({
}, },
}); });
export default function Navbar(props: any) { function Navbar(props: any) {
const status = proxy.status(); const status = proxy.status();
const classes = useStyles(); const classes = useStyles();
const [state, setState] = useState({ const [state, setState] = useState({
@ -30,7 +32,7 @@ export default function Navbar(props: any) {
right: false, right: false,
searchFlag: false, searchFlag: false,
}); });
const { page } = props; const { page, theme } = props;
const toggleDrawer = (anchor: any, open: any) => (event: any) => { const toggleDrawer = (anchor: any, open: any) => (event: any) => {
console.log("on"); console.log("on");
@ -63,11 +65,18 @@ export default function Navbar(props: any) {
const userStatus = proxy.status(); const userStatus = proxy.status();
return ( return (
<nav className="nav align-items-center justify-content-center"> <nav
className={_.join([
"nav align-items-center justify-content-center",
theme === "light" ? "nav__light" : "nav__dark",
], " ")}
>
<div className="nav__container d-flex align-items-center justify-content-between"> <div className="nav__container d-flex align-items-center justify-content-between">
<ul className="nav__container--links desktop align-items-center"> <ul className="nav__container--links desktop align-items-center">
<li className="nav___logo d-flex align-items-center"> <li className="nav___logo d-flex align-items-center">
<Link to="/"><img src={logoIcon} alt="" /></Link> <Link to="/">
<img src={logoIcon} alt="" />
</Link>
<span></span> <span></span>
</li> </li>
<li> <li>
@ -76,7 +85,7 @@ export default function Navbar(props: any) {
</ul> </ul>
<MenuRoundedIcon <MenuRoundedIcon
className="mobile" className="mobile"
style={{ color: "white", fontSize: 40 }} style={{ color: theme === "dark" ? "white" : "black", fontSize: 40 }}
onClick={toggleDrawer("right", true)} onClick={toggleDrawer("right", true)}
/> />
<ul className="nav__container--buttons d-flex align-items-center"> <ul className="nav__container--buttons d-flex align-items-center">
@ -102,6 +111,10 @@ export default function Navbar(props: any) {
); );
} }
export default connect((state: any) => ({
theme: state.publicApi.theme,
}))(Navbar);
Navbar.defaultProps = { Navbar.defaultProps = {
grades: [ grades: [
{ {
@ -153,4 +166,4 @@ Navbar.defaultProps = {
value: 12, value: 12,
}, },
], ],
} };

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

@ -14,9 +14,8 @@ 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",
], " ")} ], " ")}
onClick={() => setTheme('dark')}
> >
<Navbar /> <Navbar />
<main className="d-flex flex-column align-items-center"> <main className="d-flex flex-column align-items-center">

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">

6
src/views/Home/Books/Book/index.scss
Unescape View File

@ -4,6 +4,12 @@
border: 1px solid black; border: 1px solid black;
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 10px;
&__light{
border: none;
h2{
color: black !important;
}
}
img{ img{
border-radius: 8px; border-radius: 8px;
} }

44
src/views/Home/Books/Book/index.tsx
Unescape View File

@ -1,18 +1,36 @@
import React from "react"; import React from "react";
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
import { connect } from "react-redux";
import _ from "lodash";
export default function Book(props: any) { function Book(props: any) {
const { data } = props; const { data, theme } = props;
const desc: any = { const desc: any = {
"ریاضی": 'ریاضی از ریاضت میاد ولی دانوین آسون و لذت بخشش کرده', ریاضی: "ریاضی از ریاضت میاد ولی دانوین آسون و لذت بخشش کرده",
'علوم تجربی': "علوم تجربی تو دانوین واقعا تجربی و محسوس میشه", "علوم تجربی": "علوم تجربی تو دانوین واقعا تجربی و محسوس میشه",
'زیست شناسی': "زیست را در دانوین باید زیست", "زیست شناسی": "زیست را در دانوین باید زیست",
'شیمی': 'شیمی اینجا می فهمه کیمیا یعنی چی', شیمی: "شیمی اینجا می فهمه کیمیا یعنی چی",
'فیزیک': "با دانوین فیزیکو با یه لنز جدید ببنید" فیزیک: "با دانوین فیزیکو با یه لنز جدید ببنید",
} };
return ( return (
<Link to={`/courses/${data.id}`} className="home-books-book d-flex flex-column" draggable={'false'}> <Link
<img src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} alt={data.name} draggable={'false'} /> to={`/courses/${data.id}`}
className={_.join(
[
"home-books-book d-flex flex-column",
theme === "light"
? "home-books-book__light"
: "home-books-book__dark",
],
" "
)}
draggable={"false"}
>
<img
src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
alt={data.name}
draggable={"false"}
/>
<footer className="d-flex"> <footer className="d-flex">
<div className="home-books-book__info d-flex flex-column"> <div className="home-books-book__info d-flex flex-column">
<h2>{data.name}</h2> <h2>{data.name}</h2>
@ -22,3 +40,7 @@ export default function Book(props: any) {
</Link> </Link>
); );
} }
export default connect((state: any) => ({
theme: state.publicApi.theme,
}))(Book);

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

@ -30,13 +30,13 @@ function Books({list, number}: any) {
showArrows={true} showArrows={true}
pagination={false} pagination={false}
> >
{list?.map((item: Object, i: Number) => ( {list?.map((item: Object, i: any) => (
<Book data={item} key={i} /> <Book data={item} key={i} />
))} ))}
</Carousel> </Carousel>
) : ( ) : (
<div className="home-books__list d-flex"> <div className="home-books__list d-flex">
{list?.map((item: Object, i: Number) => ( {list?.map((item: Object, i: any) => (
<Book data={item} key={i} /> <Book data={item} key={i} />
))} ))}
</div> </div>

6
src/views/Home/Courses/Course/index.scss
Unescape View File

@ -4,6 +4,12 @@
transition: all 0.5s; transition: all 0.5s;
border: 1px solid black; border: 1px solid black;
border-radius: 10px; border-radius: 10px;
&__light{
border: none;
h2{
color: black !important;
}
}
img{ img{
border-radius: 8px; border-radius: 8px;
margin: 0px auto; margin: 0px auto;

38
src/views/Home/Courses/Course/index.tsx
Unescape View File

@ -1,15 +1,35 @@
import React from "react"; import React from "react";
import Avatar from "@mui/material/Avatar"; import Avatar from "@mui/material/Avatar";
import {Link} from 'react-router-dom'; import { Link } from "react-router-dom";
import { connect } from "react-redux";
import _ from "lodash";
function Course(props: any) {
export default function Course(props: any) { const { data, theme } = props;
const { data } = props;
return ( return (
<Link to={`/courses/${data.id}`} className="home-courses-course d-flex flex-column" draggable={'false'}> <Link
<img src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} alt={data.name} draggable={'false'} /> to={`/courses/${data.id}`}
className={_.join(
[
"home-courses-course d-flex flex-column",
theme === "light"
? "home-courses-course__light"
: "home-courses-course__dark",
],
" "
)}
draggable={"false"}
>
<img
src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
alt={data.name}
draggable={"false"}
/>
<footer className="d-flex"> <footer className="d-flex">
<Avatar src={`https://dnvn.ir/api/v1/file/${data.fileIds}`} style={{ width: 40, height: 40 }} /> <Avatar
src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
style={{ width: 40, height: 40 }}
/>
<div className="home-courses-course__info d-flex flex-column"> <div className="home-courses-course__info d-flex flex-column">
<h2>{data.name}</h2> <h2>{data.name}</h2>
{/* {window.innerWidth > 1007 ? ( {/* {window.innerWidth > 1007 ? (
@ -35,3 +55,7 @@ export default function Course(props: any) {
</Link> </Link>
); );
} }
export default connect((state: any) => ({
theme: state.publicApi.theme,
}))(Course);

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

@ -36,13 +36,13 @@ function Courses({ number, courses, selectedSort }: any) {
showArrows={true} showArrows={true}
pagination={false} pagination={false}
> >
{courses?.map((item: Object, i: Number) => ( {courses?.map((item: Object, i:any) => (
<Course data={item} key={i} /> <Course data={item} key={i} />
))} ))}
</Carousel> </Carousel>
) : ( ) : (
<div className="home-courses__list d-flex"> <div className="home-courses__list d-flex">
{courses?.map((item: Object, i: Number) => ( {courses?.map((item: Object, i: any) => (
<Course data={item} key={i} /> <Course data={item} key={i} />
))} ))}
</div> </div>

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

@ -2,9 +2,16 @@
width: 100%; width: 100%;
font-family: numeralLight; font-family: numeralLight;
background-color: #1a1a1a; background-color: #1a1a1a;
&__light{
background-color: white;
p,a{
color: black !important;
}
}
&__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;

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

@ -1,15 +1,16 @@
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';
function Footer(props: any) {
export default function Footer(props: any) { const { links, theme } = props;
const { links } = props;
useEffect(() => { useEffect(() => {
scroll.goToTop() scroll.goToTop()
}, []); }, []);
return ( return (
<footer className="footer desktop"> <footer className={_.join(["footer desktop", theme === 'light' ? 'footer__light' : 'footer__dark'], " ")}>
<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) =>
@ -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" },

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

@ -13,6 +13,7 @@ import scroll from "../../util/scroll";
import Loader from "../../components/Loader"; import Loader from "../../components/Loader";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { book, publicApi } from "../../redux/actions"; import { book, publicApi } from "../../redux/actions";
import _ from 'lodash';
function Home({ function Home({
courseList, courseList,
@ -27,6 +28,7 @@ function Home({
getHeader, getHeader,
bookLoading, bookLoading,
publicLoading, publicLoading,
theme
}: any) { }: any) {
const [grade, setGrade] = useState(null); const [grade, setGrade] = useState(null);
const [vocal, setVocal] = useState(false); const [vocal, setVocal] = useState(false);
@ -47,7 +49,7 @@ function Home({
return ( return (
<> <>
<div <div
className="home main d-flex flex-column" className={_.join(["home main d-flex flex-column", theme === 'dark' ? 'main__dark' : 'main__light'], " ")}
style={{ style={{
filter: vocal || bookLoading || publicLoading ? "blur(8px)" : "", filter: vocal || bookLoading || publicLoading ? "blur(8px)" : "",
}} }}
@ -61,6 +63,7 @@ function Home({
setVocal={setVocal} setVocal={setVocal}
inputValue={inputValue} inputValue={inputValue}
setInputValue={setInputValue} setInputValue={setInputValue}
theme={theme}
/> />
<Courses courses={sortFilterCourse ? sortFilterCourse : courseList} /> <Courses courses={sortFilterCourse ? sortFilterCourse : courseList} />
<GradeFilter <GradeFilter
@ -69,10 +72,11 @@ function Home({
setGrade={setGrade} setGrade={setGrade}
gradeDropdown={gradeDropdown} gradeDropdown={gradeDropdown}
setGradeDropdown={setGradeDropdown} setGradeDropdown={setGradeDropdown}
theme={theme}
/> />
<Books list={gradeFilterBooks ? gradeFilterBooks : courseList} /> <Books list={gradeFilterBooks ? gradeFilterBooks : courseList} theme={theme} />
<Blogs /> <Blogs theme={theme} />
<AppDownload /> <AppDownload theme={theme} />
<Footer /> <Footer />
</div> </div>
{vocal ? ( {vocal ? (
@ -96,6 +100,7 @@ export default connect(
headerData: state.publicApi.header, headerData: state.publicApi.header,
bookLoading: state.book.loading, bookLoading: state.book.loading,
publicLoading: state.publicApi.loading, publicLoading: state.publicApi.loading,
theme : state.publicApi.theme,
}), }),
{ {
getCourseList: book.list, getCourseList: book.list,

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