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
Split 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. 322
      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. 63
      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. 180
      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;
border: none !important;
}
.MuiButton-root{
color: black !important;
}
}
&__dark{
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
className={_.join([
"about main d-flex flex-column",
theme === "dark" ? "main__light" : "main__dark",
theme === "dark" ? "main__dark" : "main__light",
], " ")}
>
<Navbar />

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

@ -3,6 +3,30 @@
height: 100vh;
position: relative;
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 {
color: #b5b5b5;
a {
@ -23,7 +47,6 @@
.MuiButtonBase-root {
padding: 0px !important;
}
background: black;
.footer {
position: fixed;
bottom: 0px;
@ -129,7 +152,6 @@
@media screen and (min-width: 641px) and (max-width: 1007px) {
.login {
background: black;
.footer {
display: none !important;
}
@ -190,7 +212,6 @@
@media screen and (max-width: 640px) {
.login {
background: black;
section {
// background-color: red;
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 { connect } from "react-redux";
import { user } from "../../../redux/actions";
import _ from "lodash";
interface LoginFields {
username?: string;
password?: string;
}
function Login({login, ...props}: any) {
function Login({ login, theme, ...props }: any) {
const [loginFields, setSignUpFiels] = useState<LoginFields | undefined>(
undefined
);
@ -29,11 +29,17 @@ function Login({login, ...props}: any) {
// const usernameInput = useRef<any>();
// const passwordInput = useRef<any>();
useEffect(() => {
}, []);
useEffect(() => {}, []);
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 />
<section className="d-flex flex-column">
<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;
position: relative;
font-family: numeralLight;
&__light{
background-color: white;
b{
color: black !important;
}
input{
background-color: white !important;
}
}
img {
// transform: rotate(-90deg);
}
background: black;
.footer {
position: fixed;
bottom: 0px;

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

@ -1,5 +1,5 @@
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 Footer from "../../Home/Footer";
import Timer from "../../../components/Timer";
@ -8,16 +8,16 @@ import { Link } from "react-router-dom";
import arrow from "../../../assets/icons/dropdown.png";
import arrowLeft from "../../../assets/icons/arrow-left.png";
import { connect } from "react-redux";
import { user } from "../../../redux/actions";
import _ from "lodash";
interface SignUpFields {
cellphone?: String;
otp?: String;
}
function SignUp({ sendOtp, sendPhoneNumber, loginFlag }: any) {
function SignUp({ sendOtp, sendPhoneNumber, loginFlag, theme }: any) {
const [level, setLevel] = useState("phonenumber");
const [signUpFields, setSignUpFiels] = useState<SignUpFields | undefined>(
undefined
@ -66,7 +66,7 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag }: any) {
}, []);
useEffect(() => {
if(signUpFields?.otp?.length === 4){
if (signUpFields?.otp?.length === 4) {
sendOtp({
cellphone: signUpFields?.cellphone,
otp: signUpFields?.otp,
@ -74,7 +74,7 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag }: any) {
applicationToken: "22",
});
}
},[signUpFields]);
}, [signUpFields]);
useEffect(() => {
if (level === "phonenumber") {
@ -85,13 +85,21 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag }: any) {
}, [level]);
useEffect(() => {
if(loginFlag){
history.push('/');
if (loginFlag) {
history.push("/");
}
},[loginFlag]);
}, [loginFlag]);
const light = theme === "light";
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 />
{level === "phonenumber" && (
<section className="d-flex flex-column">
@ -167,7 +175,10 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag }: any) {
ارسال مجدد کد در <Timer seconds={60} refresh={setResend} /> دیگر
</p>
) : (
<p className="signup__info d-flex justify-content-center" onClick={() => checkPhoneNumber()}>
<p
className="signup__info d-flex justify-content-center"
onClick={() => checkPhoneNumber()}
>
دوباره ارسال کنید
</p>
)}
@ -178,9 +189,12 @@ function SignUp({ sendOtp, sendPhoneNumber, loginFlag }: any) {
);
}
export default connect((state : any) => ({
loginFlag : state.user.setLogin,
}), {
sendOtp: user.otp_login,
sendPhoneNumber: user.otp,
})(SignUp);
export default connect(
(state: any) => ({
loginFlag: state.user.setLogin,
}),
{
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 Profile from './Profile/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);
useEffect(() => {
setPage(() => props.page);
},[props.page]);
return (
<>
{ page === 'signup' && <SignUp /> }
{ page === 'login' && <Login setPage={setPage} /> }
{ page === 'profile' && <Profile /> }
{ page === 'signup' && <SignUp theme={props.theme} /> }
{ page === 'login' && <Login theme={props.theme} setPage={setPage} /> }
{ 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;
overflow : hidden;
border-bottom: 1px solid $gray9;
&__light{
header{
background-color : white !important;
border: 1px solid $gray9;
}
.lesson__files *{
color: black !important;
}
}
&__active{
border-bottom-left-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 { book, publicApi } from "../../../redux/actions";
import location from "../../../util/location";
import _ from "lodash";
function Lesson({
toggle,
@ -13,6 +14,7 @@ function Lesson({
activeCategory,
realCategories,
vodDuration,
theme,
}: any) {
const [selectedLesson, setSelectedLesson] = useState(null);
const duration = (value: number) => {
@ -22,10 +24,20 @@ function Lesson({
};
const setCategory = (catId: any, videoId: any) => {
localStorage.removeItem("bookId");
localStorage.setItem("category", location.getId() + "," + catId + "," + videoId);
localStorage.setItem(
"category",
location.getId() + "," + catId + "," + videoId
);
};
const light = theme === "light";
return (
<div className="lesson d-flex flex-column">
<div
className={_.join([
"lesson d-flex flex-column",
light ? "lesson__light" : "lesson__dark",
], " ")}
>
<header
className="desktop justify-content-between align-items-center"
onClick={() => toggle(lesson[0].categoryId)}
@ -76,9 +88,9 @@ function Lesson({
height:
lesson[0].categoryId === activeCategory
? lesson.length *
(window.innerWidth > 1007
? window.innerWidth / 33 + 20
: window.innerWidth / 33 + 45)
(window.innerWidth > 1007
? window.innerWidth / 33 + 20
: window.innerWidth / 33 + 45)
: "0px",
}}
>
@ -110,13 +122,20 @@ function Lesson({
</div>
<ul className="d-flex">
<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>
</Link>
{/* <li>{data.download ? "دانلود" : <img src={lock} alt="" />}</li> */}
</ul>
</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>
))}
</ul>

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

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

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

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

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

@ -1,4 +1,17 @@
.faq {
&__light{
.faq{
&__list{
li{
background-color: white !important;
border: 1px solid black !important;
p{
color: black !important;
}
}
}
}
}
header {
width: 100%;
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 { faq } from "../../redux/actions";
import scroll from "../../util/scroll.js";
import _ from "lodash";
function Faq({
list,
@ -15,13 +16,21 @@ function Faq({
searchFaq,
searchResult,
search,
theme,
}: any) {
useEffect(() => {
getList();
scroll.goToTop();
}, []);
const light = theme === "light";
return (
<div className="faq main d-flex flex-column">
<div
className={_.join([
"faq main d-flex flex-column",
light ? "faq__light" : "faq__dark",
], " ")}
>
<Navbar />
<main className="d-flex flex-column">
<header className="d-flex flex-column">
@ -97,6 +106,7 @@ export default connect(
list: state.faq.list,
searchResult: state.faq.searchResult,
search: state.faq.search,
theme: state.publicApi.theme,
}),
{ getList: faq.list, selectFaq: faq.selectFaq, searchFaq: faq.searchFaq }
)(Faq);

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

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

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

@ -1,13 +1,21 @@
import React from "react";
import ar from "../../../assets/icons/ar.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 (
<section className="app-download desktop justify-content-between align-items-center">
<h1>
دریافت اپلیکیشن دانوین
</h1>
<section
className={_.join(
[
"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">
<div className="app-download__figure--screen"></div>
<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{
width: 100%;
margin : 0px auto;
padding: 0px 10px;
p{
margin: 0px;
color: $gray;

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

@ -1,9 +1,10 @@
import React, { useEffect } from "react";
import { Link } from "react-router-dom";
import scroll from "../../../util/scroll";
import {connect} from 'react-redux';
import _ from 'lodash';
export default function Footer(props: any) {
function Footer(props: any) {
const { links, theme } = props;
useEffect(() => {
scroll.goToTop()
@ -30,6 +31,10 @@ export default function Footer(props: any) {
);
}
export default connect((state : any) => ({
theme : state.publicApi.theme,
}))(Footer)
Footer.defaultProps = {
links: [
{ 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} />
<Blogs theme={theme} />
<AppDownload />
<Footer theme={theme} />
<AppDownload theme={theme} />
<Footer />
</div>
{vocal ? (
<Vocal setVocal={setVocal} setInputValue={setInputValue} />

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

@ -5,13 +5,15 @@
border-radius: 10px;
cursor: pointer;
transition: all 0.5s;
&__name{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
h2{
color: white !important;
color: white;
margin-bottom: 0px;
}
}
&__factor{
border-top-left-radius: 10px;
@ -62,6 +64,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) {

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 { connect } from "react-redux";
import { product, userProduct } from "../../../redux/actions";
import _ from "lodash";
function SubscribeRadio({ data, selectedVOD, selectVOD }: any) {
const submitVOD = (value : any) => {
if(selectedVOD?.id === data.id){
function SubscribeRadio({ data, selectedVOD, selectVOD, theme }: any) {
const submitVOD = (value: any) => {
if (selectedVOD?.id === data.id) {
selectVOD(null);
}else{
selectVOD(data)
} else {
selectVOD(data);
}
}
};
const light = theme === "light";
return (
<div
className={
"subscribe-radio d-flex" +
" " +
(selectedVOD?.id === data.id ? "subscribe-radio-active" : "")
}
onClick={() =>
submitVOD(data)
}
className={_.join(
[
"subscribe-radio d-flex",
selectedVOD?.id === data.id ? "subscribe-radio-active" : "",
light ? "subscribe-radio__light" : "subscribe-radio__dark",
],
" "
)}
onClick={() => submitVOD(data)}
>
<div className="subscribe-radio__name d-flex align-items-center">
<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 scroll from "../../util/scroll";
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(() => {
getList();
scroll.goToTop();
}, []);
const light = theme === "light";
return (
<div className={"subscription main d-flex flex-column"}>
<div
className={_.join(
[
"subscription main d-flex flex-column",
],
" "
)}
>
<Navbar />
<main className={"d-flex flex-column" + " " + (loading && "blur")}>
<h1>خرید اشتراک دانوین</h1>
<p>
اینجا هم برای هر کتاب امکان خرید اشتراک جداگانه هست و هم اشتراک های مدت دار. با خرید اشتراک های مدت دار دانوین می تونید در هزینه هاتون صرفه جویی کنید.
اینجا هم برای هر کتاب امکان خرید اشتراک جداگانه هست و هم اشتراک های
مدت دار. با خرید اشتراک های مدت دار دانوین می تونید در هزینه هاتون
صرفه جویی کنید.
</p>
{listVOD?.map((subscribe: any, i: any) => (
<SubscribeRadio data={subscribe} key={i} />
<SubscribeRadio theme={theme} data={subscribe} key={i} />
))}
<DiscountCode />
<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>
</main>
<Footer />
@ -43,7 +67,8 @@ export default connect(
(state: any) => ({
listVOD: state.product.listVOD,
loading: state.product.loading,
selectedVOD: state.product.selectedVOD
selectedVOD: state.product.selectedVOD,
theme: state.publicApi.theme,
}),
{
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 user3 from "../../../assets/images/user3.png";
export default function AddComment() {
export default function AddComment(props : any) {
const { theme } = props;
return (
<>
<Avatar style={{ width: 60, height: 60, marginLeft: 10 }} />

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

@ -1,6 +1,20 @@
.lesson-playlist{
width: 100%;
padding-bottom : 10px;
&__light{
.lesson-playlist{
h3{
background-color : inherit !important;
border: 1px solid $gray9 !important;
}
&__item{
*{
color: black !important;
}
}
}
}
header{
background-color: inherit !important;
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 { publicApi } from "../../../redux/actions";
import { Link } from "react-router-dom";
import _ from "lodash";
function LessonPlayList({
category,
@ -10,6 +11,7 @@ function LessonPlayList({
catergories,
realCategories,
vods,
theme,
}: any) {
const bookId = localStorage.getItem("bookId");
useEffect(() => {
@ -20,23 +22,32 @@ function LessonPlayList({
) as HTMLElement;
const elementHeight: any = (listItem as any)?.offsetHeight;
const listHeight: any = (list as any).offsetHeight;
const index = vods?.findIndex((
const index = vods?.findIndex(
(item: any) => item?.name === selectedVideo?.name
));
);
console.log(index);
console.log(listHeight,elementHeight * (Number(index) + 1));
console.log(listHeight, elementHeight * (Number(index) + 1));
if( elementHeight * (Number(index) + 1) > listHeight){
list.scrollTo(0, (elementHeight * (Number(index) + 1)) + elementHeight);
if (elementHeight * (Number(index) + 1) > listHeight) {
list.scrollTo(0, elementHeight * (Number(index) + 1) + elementHeight);
}
localStorage.removeItem("scroll-list");
}
}, [vods]);
const light = theme === "light";
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 && (
<header>
<h3>

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

@ -1,59 +1,86 @@
@import './Attachments/index.scss';
@import './Book/index.scss';
@import './Comment/index.scss';
@import './LessonPlayList/index.scss';
@import "./Attachments/index.scss";
@import "./Book/index.scss";
@import "./Comment/index.scss";
@import "./LessonPlayList/index.scss";
.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 {
margin-left: 15px;
&--display {
border-bottom: 1px solid $gray8;
padding-bottom: 30px;
video{
video {
border: 1px solid $gray8;
}
span{
span {
color: $green4;
padding: 15px 0px;
}
h1{
h1 {
color: white;
margin-bottom: 20px;
}
p{
p {
color: white;
}
}
&--comments{
&--comments {
color: white;
border-bottom: 1px solid $gray8;
padding-bottom: 30px;
header{
header {
padding: 20px 0px;
h2{
h2 {
margin: 0px;
}
}
button{
button {
background-color: inherit;
border: none;
color: $green;
}
}
&--addComment{
&--addComment {
padding: 15px 0px;
textarea{
textarea {
width: 100%;
border-radius: 12px;
background-color: $gray8;
padding: 10px;
color: white;
&:focus{
&:focus {
outline: none;
}
&::placeholder{
&::placeholder {
color: $gray4;
}
}
@ -142,10 +169,10 @@
header {
width: 100%;
color: white;
h2{
h2 {
margin: 0px;
}
span{
span {
background-color: #00fff74f;
color: $blue2;
padding: 5px 8px;
@ -164,31 +191,31 @@
&__content {
flex: 8;
&--display {
span{
span {
font-size: 16px;
}
h1{
h1 {
font-size: 24px;
}
p{
p {
font-size: 16px;
}
}
&--comments{
header{
h2{
&--comments {
header {
h2 {
font-size: 20px;
}
}
button{
button {
font-size: 14px;
}
}
&--addComment{
&--addComment {
width: 60%;
textarea{
textarea {
font-size: 14px;
&::placeholder{
&::placeholder {
font-size: 14px;
}
}
@ -233,11 +260,11 @@
h2 {
font-size: 16px;
}
span{
span {
font-size: 11px;
}
}
&___list{
&___list {
padding: 15px 12px;
// background-color: #08793d58;
}
@ -256,37 +283,37 @@
&__content {
flex: 8;
&--display {
video{
video {
width: 100%;
}
span{
span {
font-size: calc(100vw / 100);
}
h1{
h1 {
font-size: calc(100vw / 60);
}
p{
p {
font-size: calc(100vw / 100);
}
}
&--comments{
header{
h2{
&--comments {
header {
h2 {
font-size: calc(100vw / 80);
}
}
button{
button {
font-size: calc(100vw / 90);
}
}
&--addComment{
&--addComment {
width: 60%;
button{
button {
font-size: calc(100vw / 110);
}
textarea{
textarea {
font-size: calc(100vw / 90);
&::placeholder{
&::placeholder {
font-size: calc(100vw / 90);
}
}
@ -331,11 +358,11 @@
h2 {
font-size: calc(100vw / 85);
}
span{
span {
font-size: calc(100vw / 120);
}
}
&___list{
&___list {
padding: 15px 12px;
background-color: #ffffff00;
}
@ -346,7 +373,7 @@
@media screen and (min-width: 641px) and (max-width: 1007px) {
.video-tube {
background : black;
background: black;
main {
max-width: 900px;
margin-top: 10px;
@ -358,38 +385,38 @@
margin: 0px;
&--display {
padding: 0px;
video{
video {
width: 100%;
margin-bottom: 10px;
}
span{
span {
font-size: calc(100vw / 40);
}
h1{
h1 {
font-size: calc(100vw / 30);
}
p{
p {
font-size: calc(100vw / 40);
}
}
&--comments{
header{
h2{
&--comments {
header {
h2 {
font-size: calc(100vw / 40);
}
}
button{
button {
font-size: calc(100vw / 50);
}
}
&--addComment{
&--addComment {
width: 100%;
button{
button {
font-size: calc(100vw / 45);
}
textarea{
textarea {
font-size: calc(100vw / 45);
&::placeholder{
&::placeholder {
font-size: calc(100vw / 45);
}
}
@ -404,7 +431,7 @@
background-color: #2c2c2c;
img {
transform: translateY(-5px);
width : 40px;
width: 40px;
}
h2 {
font-size: calc(100vw / 40);
@ -434,11 +461,11 @@
h2 {
font-size: calc(100vw / 40);
}
span{
span {
font-size: calc(100vw / 55);
}
}
&___list{
&___list {
padding: 15px 12px;
background-color: #ffffff00;
}
@ -449,7 +476,7 @@
@media screen and (max-width: 640px) {
.video-tube {
background : black;
background: black;
margin-top: 20px;
main {
max-width: 500px;
@ -462,38 +489,38 @@
margin: 0px;
&--display {
padding: 0px;
video{
video {
width: 100%;
margin-bottom: 10px;
}
span{
span {
font-size: calc(100vw / 40);
}
h1{
h1 {
font-size: calc(100vw / 30);
}
p{
p {
font-size: calc(100vw / 40);
}
}
&--comments{
header{
h2{
&--comments {
header {
h2 {
font-size: calc(100vw / 30);
}
}
button{
button {
font-size: calc(100vw / 37);
}
}
&--addComment{
&--addComment {
width: 100%;
button{
button {
font-size: calc(100vw / 40);
}
textarea{
textarea {
font-size: calc(100vw / 35);
&::placeholder{
&::placeholder {
font-size: calc(100vw / 35);
}
}
@ -508,7 +535,7 @@
background-color: #2c2c2c;
img {
transform: translateY(-5px);
width : 30px;
width: 30px;
}
h2 {
font-size: calc(100vw / 30);
@ -538,11 +565,11 @@
h2 {
font-size: calc(100vw / 30);
}
span{
span {
font-size: calc(100vw / 45);
}
}
&___list{
&___list {
padding: 15px 12px;
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 { connect } from "react-redux";
import _ from "lodash";
import scroll from "../../util/scroll.js";
import location from "../../util/location.js";
import { book, publicApi } from "../../redux/actions";
@ -24,6 +25,7 @@ function VodTube({
categories,
setVideoActive,
allBooks,
theme,
}: any) {
const videoListTag = useRef(null);
useEffect(() => {
@ -43,10 +45,17 @@ function VodTube({
}
}, [allBooks]);
const light = theme === "light";
return (
<>
<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)" : "" }}
>
<Navbar />
@ -76,7 +85,7 @@ function VodTube({
</div>
</section>
<section className="desktop video-tube__content--addComment">
<AddComment />
<AddComment theme={theme} />
</section>
</div>
<div className="video-tube__sidebar d-flex flex-column">
@ -98,11 +107,11 @@ function VodTube({
>
{localStorage.getItem("bookId")
? 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) => (
<LessonPlayList category={video} key={i} />
))}
<LessonPlayList theme={theme} category={video} key={i} />
))}
</div>
</section>
{info?.attachments.length > 0 && (
@ -165,6 +174,7 @@ export default connect(
loading: state.publicApi.loading,
categories: state.publicApi.categories,
allBooks: state.publicApi.bookInfo?.vods,
theme: state.publicApi.theme,
}),
{
getInfo: publicApi.bookInfo,

Write Preview
Loading…
Cancel
Save