reza added BooToggle

3 years ago · 8c8d936dc2
parent fa766b123d
commit 8c8d936dc2
13 changed files with 316 additions and 152 deletions
--- a/src/components/BookToggle/index.scss
+++ 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);
+    }
+  }
+}
--- a/src/components/BookToggle/index.tsx
+++ 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 (
+    <div
+      className={_.join(
+        [
+          "book-toggle desktop justify-content-between align-items-center mx-auto px-2",
+          theme === "light" ? "book-toggle-light" : "book-toggle-dark",
+        ],
+        " "
+      )}
+    >
+      <div className="book-toggle__info d-flex flex-column">
+        <strong>{book.name}</strong>
+        <p>
+          روز بلوا ۱۲+۱۳۹۸۸۹٪ عماد که یک روحانی خوشنام و چهره تلویزیونی مورد
+          توجه است، ناگهان با اتهام‌هایی جدی مواجه می‌شود که خود و خانواده اش را
+          در موقعیت پیچیده‌ای قرار می‌دهد و...
+        </p>
+        <Link to={'/courses/' + book.id}>ادامه</Link>
+      </div>
+      <img src={`https://dnvn.ir/api/v1/file/${book.fileIds}`} alt="" />
+    </div>
+  );
+}
+
+export default connect(
+  (state: any) => ({
+    theme: state.publicApi.theme,
+  }),
+  {}
+)(BookToggle);
--- 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;
  }
 }
--- 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";
--- a/src/util/scroll.js
+++ b/src/util/scroll.js
@ -3,10 +3,21 @@ import { toast } from "react-toastify";
 class scroll {
  goToTop = () => {
    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);
      }
-  listScroll = () => {
-    
    }
+  };
 }

 const _scroll = new scroll();
--- 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,11 +12,37 @@ function Book(props: any) {
    فیزیک: "با دانوین فیزیکو با یه لنز جدید ببنید",
  };
  return (
+    <>
+      <div
+        className={_.join(
+          [
+            "home-books-book desktop flex-column",
+            theme === "light"
+              ? "home-books-book-light"
+              : "home-books-book-dark",
+          ],
+          " "
+        )}
+        onClick={() => setActiveBook(data)}
+        draggable={"false"}
+      >
+        <img
+          src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
+          alt={data.name}
+          draggable={"false"}
+        />
+        <footer className="d-flex">
+          <div className="home-books-book__info d-flex flex-column">
+            <h2>{data.name}</h2>
+            <p>{desc[data.name] || ""}</p>
+          </div>
+        </footer>
+      </div>
      <Link
-      to={`/courses/${data.id}`}
+        to={"/courses/" + data.id}
        className={_.join(
          [
-          "home-books-book d-flex flex-column",
+            "home-books-book mobile flex-column",
            theme === "light"
              ? "home-books-book-light"
              : "home-books-book-dark",
@ -38,6 +63,7 @@ function Book(props: any) {
          </div>
        </footer>
      </Link>
+    </>
  );
 }

--- 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) {
+  const [activeBook, setActiveBook] = useState(null);
  const slideNumberHandler = () => {
    if (window.innerWidth >= 1440) {
      return 5;
@ -17,12 +19,10 @@ function Books({list, number}: any) {
    }
  };

-
  return (
-    <section
-      className="home-books d-flex flex-column"
-    >
-      {window.innerWidth > 1007 ? (
+    <section className="home-books d-flex flex-column">
+      <div className="desktop flex-column" onClick={() => scroll.bookScroll(2)}>
+        <div className="position-relative">
          <Carousel
            itemsToShow={slideNumberHandler()}
            isRTL={true}
@ -31,22 +31,19 @@ function Books({list, number}: any) {
            pagination={false}
          >
            {list?.map((item: Object, i: any) => (
-            <Book data={item} key={i} />
+              <Book data={item} key={i} setActiveBook={setActiveBook} />
            ))}
          </Carousel>
-      ) : (
-        <div className="home-books__list d-flex">
+        </div>
+        {activeBook && <BookToggle book={activeBook} />}
+      </div>
+      <div className="home-books__list mobile">
        {list?.map((item: Object, i: any) => (
          <Book data={item} key={i} />
        ))}
      </div>
-      )}
    </section>
  );
 }

-export default connect(
-  ( state : any) => ({
-  }),
-  { }
-)(Books);
+export default connect((state: any) => ({}), {})(Books);
--- a/src/views/Home/Courses/Course/index.tsx
+++ b/src/views/Home/Courses/Course/index.tsx
@ -4,14 +4,42 @@ 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 (
+    <>
+      <div
+        className={_.join(
+          [
+            "home-courses-course desktop flex-column",
+            theme === "light"
+              ? "home-courses-course-light"
+              : "home-courses-course-dark",
+          ],
+          " "
+        )}
+        onClick={() => setActiveBook(data)}
+        draggable={"false"}
+      >
+        <img
+          src={`https://dnvn.ir/api/v1/file/${data.fileIds}`}
+          alt={data.name}
+          draggable={"false"}
+        />
+        <footer className="d-flex">
+          <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">
+            <h2>{data.name}</h2>
+          </div>
+        </footer>
+      </div>
      <Link
        to={`/courses/${data.id}`}
        className={_.join(
          [
-          "home-courses-course d-flex flex-column",
+            "home-courses-course mobile flex-column",
            theme === "light"
              ? "home-courses-course-light"
              : "home-courses-course-dark",
@ -32,27 +60,10 @@ function Course(props: any) {
          />
          <div className="home-courses-course__info d-flex flex-column">
            <h2>{data.name}</h2>
-          {/* {window.innerWidth > 1007 ? (
-            <p>{data.text.slice(0, 100)}</p>
-          ) : (
-            <p>{data.text.slice(0, 50)}</p>
-          )} */}
-
-          {/* <ul className="d-flex flex-wrap">
-            {data.tags.length <= 2
-              ? data.tags.map((item: String, i: any) => <li key={i}>{item}</li>)
-              : null}
-            {data.tags.length > 2 ? (
-              <>
-                <li key={1}>{data.tags[0]}</li>
-                <li key={2}>{data.tags[1]}</li>
-                <li key={3}>+</li>
-              </>
-            ) : null}
-          </ul> */}
          </div>
        </footer>
      </Link>
+    </>
  );
 }

--- 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 (
    <section
-      className={_.join([
+      className={_.join(
+        [
          "home-courses d-flex flex-column",
          light ? "home-courses-light" : "home-courses-dark",
-      ], " ")}
+        ],
+        " "
+      )}
    >
      <header className="d-flex justify-content-between align-items-center">
        <div className="d-flex flex-column">
@ -33,7 +39,8 @@ function Courses({ number, courses, selectedSort, theme }: any) {
        </div>
        <Link to="/">بیشتر</Link>
      </header>
-      {window.innerWidth > 1007 ? (
+      <div className="desktop flex-column" onClick={() => scroll.bookScroll(1)}>
+        <div className="position-relative">
          <Carousel
            itemsToShow={slideNumberHandler()}
            isRTL={true}
@ -42,16 +49,17 @@ function Courses({ number, courses, selectedSort, theme }: any) {
            pagination={false}
          >
            {courses?.map((item: Object, i: any) => (
-            <Course data={item} key={i} />
+              <Course data={item} key={i} setActiveBook={setActiveBook} />
            ))}
          </Carousel>
-      ) : (
-        <div className="home-courses__list d-flex">
+        </div>
+        {activeBook && <BookToggle book={activeBook} />}
+      </div>
+      <div className="home-courses__list mobile">
        {courses?.map((item: Object, i: any) => (
          <Course data={item} key={i} />
        ))}
      </div>
-      )}

      <Link
        className="home-courses__more align-items-center hidden"
--- a/src/views/Home/Header/index.scss
+++ b/src/views/Home/Header/index.scss
@ -70,6 +70,7 @@
 .slider-header {
  width: 100%;
  justify-content: flex-end;
+  min-height : calc(100vh - 150px);
  img{
    width: 100%;

--- a/src/views/Home/Header/index.tsx
+++ b/src/views/Home/Header/index.tsx
@ -10,22 +10,25 @@ const HomeSlider = ({ headerData}: any) => {
      <Carousel
        itemsToShow={1}
        isRTL={true}
-        enableTilt={false}
+        enableTilt={true}
        showArrows={true}
        pagination={true}
        enableAutoPlay={true}
      >
        {headerData.map((item: any, i: any) => (
-          <div className="slider-header d-flex">
+          <div
+            className="slider-header d-flex"
+            style={{
+              background: `url(https://dnvn.ir/api/v1/file/${item.fileId})`,
+              backgroundRepeat : 'no-repeat',
+              backgroundClip : 'content-box',
+              backgroundSize : '100% 100%',
+            }}
+          >
            {/* <
              className="slider-header__right d-flex"
              style={{ backgroundColor: item.backgroundColor }}
            > */}
-              <img
-                src={`https://dnvn.ir/api/v1/file/${item.fileId}`}
-                alt={item.title}
-              />
-            
            {/* <div
              style={{ backgroundColor: item.backgroundColor }}
              className="slider-header__left d-flex flex-column"
--- 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 });