From 8c8d936dc20e7c809108b21ff48ddb374f6733f7 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Tue, 30 Nov 2021 17:41:30 +0330 Subject: [PATCH] reza added BooToggle --- src/components/BookToggle/index.scss | 69 ++++++++++++++++ src/components/BookToggle/index.tsx | 36 +++++++++ src/components/ThemeSwitch/index.scss | 24 +++--- src/constants/width.scss | 2 +- src/custom.scss | 1 + src/util/scroll.js | 21 +++-- src/views/Home/Books/Book/index.tsx | 78 ++++++++++++------ src/views/Home/Books/index.tsx | 59 +++++++------- src/views/Home/Courses/Course/index.tsx | 101 +++++++++++++----------- src/views/Home/Courses/index.tsx | 54 +++++++------ src/views/Home/Header/index.scss | 1 + src/views/Home/Header/index.tsx | 21 ++--- src/views/Home/index.tsx | 1 + 13 files changed, 316 insertions(+), 152 deletions(-) create mode 100644 src/components/BookToggle/index.scss create mode 100644 src/components/BookToggle/index.tsx diff --git a/src/components/BookToggle/index.scss b/src/components/BookToggle/index.scss new file mode 100644 index 0000000..8e06366 --- /dev/null +++ b/src/components/BookToggle/index.scss @@ -0,0 +1,69 @@ +.book-toggle { + width: calc(100% - 60px); + background-color: transparent; + height: calc(100vh / 1.8); + &__info { + width: calc(100% / 2.5); + } + img { + height: 90%; + border-radius: 8px; + } + p { + margin-top: 20px; + } + a { + transition: all 0.3s; + width: fit-content; + border-radius: 4px; + padding: 10px 35px; + align-self: end; + margin-top: 60px; + border: 1px solid white; + color: white; + &:hover{ + border-color: $green; + color: $green; + } + } + &-light { + strong, + p { + color: $gray5; + } + } + &-dark { + strong, + p { + color: $gray12; + } + } +} + +@media screen and (min-width: 1441px) { + .book-toggle { + strong { + font-size: 21px; + } + p { + font-size: 14px; + } + a { + font-size: 16px; + } + } +} + +@media screen and (min-width: 1008px) and (max-width: 1440px) { + .book-toggle { + strong { + font-size: calc(100vw / 70); + } + p { + font-size: calc(100vw / 100); + } + a { + font-size: calc(100vw / 80); + } + } +} diff --git a/src/components/BookToggle/index.tsx b/src/components/BookToggle/index.tsx new file mode 100644 index 0000000..1e28789 --- /dev/null +++ b/src/components/BookToggle/index.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import {Link} from 'react-router-dom'; +import _ from "lodash"; +import { connect } from "react-redux"; + +function BookToggle({ book, theme }: any) { + return ( +
+
+ {book.name} +

+ روز بلوا ۱۲+۱۳۹۸۸۹٪ عماد که یک روحانی خوشنام و چهره تلویزیونی مورد + توجه است، ناگهان با اتهام‌هایی جدی مواجه می‌شود که خود و خانواده اش را + در موقعیت پیچیده‌ای قرار می‌دهد و... +

+ ادامه +
+ +
+ ); +} + +export default connect( + (state: any) => ({ + theme: state.publicApi.theme, + }), + {} +)(BookToggle); diff --git a/src/components/ThemeSwitch/index.scss b/src/components/ThemeSwitch/index.scss index 329fa54..da27483 100644 --- a/src/components/ThemeSwitch/index.scss +++ b/src/components/ThemeSwitch/index.scss @@ -83,8 +83,8 @@ } .toggle--label { /** Placeholder element, starting at blue **/ - width: 70px; - height: 35px; + width: 65px; + height: 30px; margin-right: 60px; background: var(--blue-color); border-radius: 100px; @@ -135,8 +135,8 @@ animation-fill-mode: forwards; transition: all 350ms ease-in; content: ""; - width: 25px; - height: 25px; + width: 20px; + height: 20px; border: 5px solid var(--yellow-border); top: 1px; left: 0px; @@ -165,23 +165,23 @@ } 60% { left: 0px; - width: 62px; + width: 55px; } 100% { - left: 33px; - width: 25px; + left: 35px; + width: 20px; } } @keyframes reverse { 0% { - left: 33px; - width: 38px; + left: 30px; + width: 20px; } 60% { - left: 2px; - width: 62px; + left: 1px; + width: 55px; } 100% { - left: 2px; + left: 1px; } } \ No newline at end of file diff --git a/src/constants/width.scss b/src/constants/width.scss index b2e113b..fb9223e 100644 --- a/src/constants/width.scss +++ b/src/constants/width.scss @@ -1 +1 @@ -$maxWidth : calc(100% - 120px); \ No newline at end of file +$maxWidth : calc(100% - 120px); diff --git a/src/custom.scss b/src/custom.scss index 97ceacf..4e34249 100644 --- a/src/custom.scss +++ b/src/custom.scss @@ -1,5 +1,6 @@ @import "./constants/colors.scss"; @import "./constants/width.scss"; +@import "./components/BookToggle/index.scss"; @import "./components/BreadCrumbs/index.scss"; @import "./components/GradeFilter/index.scss"; @import "./components/HomeSearchBox/index.scss"; diff --git a/src/util/scroll.js b/src/util/scroll.js index 362bf8d..ce2baa5 100644 --- a/src/util/scroll.js +++ b/src/util/scroll.js @@ -2,11 +2,22 @@ import { toast } from "react-toastify"; class scroll { goToTop = () => { - window.scrollTo(0,0); - } - listScroll = () => { - - } + window.scrollTo(0, 0); + }; + bookScroll = (option) => { + const height = window.innerHeight; + const bookToggle1 = localStorage.getItem('bookToggle1'); + if (option === 1) { + localStorage.setItem('bookToggle1', 1); + window.scrollTo(0, 1.1 * height); + } else if (option === 2) { + if(bookToggle1) { + window.scrollTo(0, 2.3 * height); + }else{ + window.scrollTo(0, 1.8 * height); + } + } + }; } const _scroll = new scroll(); diff --git a/src/views/Home/Books/Book/index.tsx b/src/views/Home/Books/Book/index.tsx index 8163b3c..7d5bca4 100644 --- a/src/views/Home/Books/Book/index.tsx +++ b/src/views/Home/Books/Book/index.tsx @@ -3,8 +3,7 @@ import { Link } from "react-router-dom"; import { connect } from "react-redux"; import _ from "lodash"; -function Book(props: any) { - const { data, theme } = props; +function Book({ data, theme, setActiveBook }: any) { const desc: any = { ریاضی: "ریاضی از ریاضت میاد ولی دانوین آسون و لذت بخشش کرده", "علوم تجربی": "علوم تجربی تو دانوین واقعا تجربی و محسوس میشه", @@ -13,31 +12,58 @@ function Book(props: any) { فیزیک: "با دانوین فیزیکو با یه لنز جدید ببنید", }; return ( - - {data.name} +
setActiveBook(data)} draggable={"false"} - /> -
-
-

{data.name}

-

{desc[data.name] || ""}

-
-
- + > + {data.name} +
+
+

{data.name}

+

{desc[data.name] || ""}

+
+
+
+ + {data.name} + + + ); } diff --git a/src/views/Home/Books/index.tsx b/src/views/Home/Books/index.tsx index f3bcc90..b68f535 100644 --- a/src/views/Home/Books/index.tsx +++ b/src/views/Home/Books/index.tsx @@ -1,10 +1,12 @@ -import React, { useEffect } from "react"; -import { useSelector, connect } from "react-redux"; +import React, { useState } from "react"; +import { connect } from "react-redux"; import Carousel from "react-elastic-carousel"; import Book from "./Book/index"; -import { book } from "../../../redux/actions"; +import BookToggle from "../../../components/BookToggle"; +import scroll from "../../../util/scroll"; -function Books({list, number}: any) { +function Books({ list, number }: any) { + const [activeBook, setActiveBook] = useState(null); const slideNumberHandler = () => { if (window.innerWidth >= 1440) { return 5; @@ -17,36 +19,31 @@ function Books({list, number}: any) { } }; - return ( -
- {window.innerWidth > 1007 ? ( - - {list?.map((item: Object, i: any) => ( - - ))} - - ) : ( -
- {list?.map((item: Object, i: any) => ( - - ))} +
+
scroll.bookScroll(2)}> +
+ + {list?.map((item: Object, i: any) => ( + + ))} +
- )} + {activeBook && } +
+
+ {list?.map((item: Object, i: any) => ( + + ))} +
); } -export default connect( - ( state : any) => ({ - }), - { } -)(Books); +export default connect((state: any) => ({}), {})(Books); diff --git a/src/views/Home/Courses/Course/index.tsx b/src/views/Home/Courses/Course/index.tsx index 5fe3e72..c129ec8 100644 --- a/src/views/Home/Courses/Course/index.tsx +++ b/src/views/Home/Courses/Course/index.tsx @@ -4,55 +4,66 @@ import { Link } from "react-router-dom"; import { connect } from "react-redux"; import _ from "lodash"; -function Course(props: any) { - const { data, theme } = props; +function Course({ data, theme, setActiveBook }: any) { return ( - - {data.name} +
setActiveBook(data)} draggable={"false"} - /> -
- + {data.name} -
-

{data.name}

- {/* {window.innerWidth > 1007 ? ( -

{data.text.slice(0, 100)}

- ) : ( -

{data.text.slice(0, 50)}

- )} */} - - {/*
    - {data.tags.length <= 2 - ? data.tags.map((item: String, i: any) =>
  • {item}
    • ) - : null} - {data.tags.length > 2 ? ( - <> -
  • {data.tags[0]}
    • -
  • {data.tags[1]}
    • -
  • +
    • - - ) : null} -
*/} -
-
- +
+ +
+

{data.name}

+
+
+
+ + {data.name} +
+ +
+

{data.name}

+
+
+ + ); } diff --git a/src/views/Home/Courses/index.tsx b/src/views/Home/Courses/index.tsx index 3af28d0..58a521f 100644 --- a/src/views/Home/Courses/index.tsx +++ b/src/views/Home/Courses/index.tsx @@ -1,12 +1,15 @@ -import React, { useEffect } from "react"; +import React, { useState } from "react"; import Carousel from "react-elastic-carousel"; import Course from "./Course/index"; import { Link } from "react-router-dom"; import ExpandMoreRoundedIcon from "@mui/icons-material/ExpandMoreRounded"; import { connect } from "react-redux"; import _ from "lodash"; +import BookToggle from "../../../components/BookToggle"; +import scroll from "../../../util/scroll"; function Courses({ number, courses, selectedSort, theme }: any) { + const [activeBook, setActiveBook] = useState(null); const slideNumberHandler = () => { if (window.innerWidth >= 1440) { return 5; @@ -21,10 +24,13 @@ function Courses({ number, courses, selectedSort, theme }: any) { const light = theme === "light"; return (
@@ -33,25 +39,27 @@ function Courses({ number, courses, selectedSort, theme }: any) {
بیشتر
- {window.innerWidth > 1007 ? ( - - {courses?.map((item: Object, i: any) => ( - - ))} - - ) : ( -
- {courses?.map((item: Object, i: any) => ( - - ))} +
scroll.bookScroll(1)}> +
+ + {courses?.map((item: Object, i: any) => ( + + ))} +
- )} + {activeBook && } +
+
+ {courses?.map((item: Object, i: any) => ( + + ))} +
{ +const HomeSlider = ({ headerData }: any) => { return (
{headerData.map((item: any, i: any) => ( -
+
{/* < className="slider-header__right d-flex" style={{ backgroundColor: item.backgroundColor }} > */} - {item.title} - {/*
{ ); }; -export default HomeSlider; \ No newline at end of file +export default HomeSlider; diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx index df1c3d4..3257474 100644 --- a/src/views/Home/index.tsx +++ b/src/views/Home/index.tsx @@ -30,6 +30,7 @@ function Home({ const [gradeDropdown, setGradeDropdown] = useState(false); useEffect(() => { + localStorage.removeItem('bookToggle1'); getCourseList(); scroll.goToTop(); getHeader({ device: 1 });