From f92346b2737dec6485654268499587f453a17d5a Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Wed, 15 Dec 2021 00:20:44 +0330 Subject: [PATCH] reza started mobile --- src/App.js | 15 +-- src/App.scss | 14 ++- src/assets/icons/ar-blue.svg | 9 ++ src/assets/icons/ar-white.svg | 9 ++ src/assets/icons/hamburger-blue.svg | 8 ++ src/assets/icons/hamburger.svg | 12 +++ src/assets/icons/qr-blue.svg | 9 ++ src/assets/icons/qr-white.svg | 5 + src/components/Navbar/index.js | 85 +++++++++++++++-- src/constants/size.scss | 1 + src/index.css | 9 ++ src/redux/actions/public.js | 4 +- src/redux/reducers/public.js | 8 +- src/router.js | 53 +++++++---- .../Home/{ => Landscape}/Page1/Book/index.js | 2 +- .../Home/Landscape/Page1/Lights/index.js | 39 ++++++++ .../Page1/Lights}/index.scss | 0 src/views/Home/{ => Landscape}/Page1/index.js | 32 +++---- .../Home/{ => Landscape}/Page1/index.scss | 2 +- .../{ => Landscape}/Page2/Mobile/AR/index.js | 2 +- .../Page2/Mobile/QrResult/Link/index.js | 2 +- .../Page2/Mobile/QrResult/PDF/index.js | 2 +- .../Page2/Mobile/QrResult/Voice/index.js | 0 .../Page2/Mobile/QrResult/index.js | 2 +- .../Page2/Mobile/QrScanner/index.js | 0 .../Page2/Mobile/Video/index.js | 4 +- .../{ => Landscape}/Page2/Mobile/index.js | 0 .../{ => Landscape}/Page2/Mobile/index.scss | 0 src/views/Home/{ => Landscape}/Page2/index.js | 8 +- src/views/Home/Landscape/Page2/index.scss | 5 + src/views/Home/{ => Landscape}/Page3/index.js | 4 +- src/views/Home/{ => Landscape}/Page4/index.js | 8 +- .../Home/{ => Landscape}/Test/Question.js | 0 src/views/Home/{ => Landscape}/Test/index.js | 4 +- .../VideoTube/AddComment/index.js | 0 .../VideoTube/Attachments/index.js | 0 .../{ => Landscape}/VideoTube/Book/index.js | 0 .../VideoTube/Comment/index.js | 0 .../VideoTube/LessonPlayList/index.js | 2 +- .../Home/{ => Landscape}/VideoTube/index.js | 12 +-- src/views/Home/Landscape/index.js | 45 +++++++++ src/views/Home/Page1/Header/index.js | 33 ------- src/views/Home/Page2/index.scss | 5 - src/views/Home/Portrait/Private/index.js | 11 +++ .../Home/Portrait/Public/Header/index.js | 93 +++++++++++++++++++ src/views/Home/Portrait/Public/index.js | 12 +++ src/views/Home/Portrait/index.js | 19 ++++ src/views/Home/index.js | 48 ++-------- tailwind.config.js | 12 ++- 49 files changed, 483 insertions(+), 166 deletions(-) create mode 100644 src/assets/icons/ar-blue.svg create mode 100644 src/assets/icons/ar-white.svg create mode 100644 src/assets/icons/hamburger-blue.svg create mode 100644 src/assets/icons/hamburger.svg create mode 100644 src/assets/icons/qr-blue.svg create mode 100644 src/assets/icons/qr-white.svg rename src/views/Home/{ => Landscape}/Page1/Book/index.js (87%) create mode 100644 src/views/Home/Landscape/Page1/Lights/index.js rename src/views/Home/{Page1/Header => Landscape/Page1/Lights}/index.scss (100%) rename src/views/Home/{ => Landscape}/Page1/index.js (84%) rename src/views/Home/{ => Landscape}/Page1/index.scss (87%) rename src/views/Home/{ => Landscape}/Page2/Mobile/AR/index.js (77%) rename src/views/Home/{ => Landscape}/Page2/Mobile/QrResult/Link/index.js (83%) rename src/views/Home/{ => Landscape}/Page2/Mobile/QrResult/PDF/index.js (84%) rename src/views/Home/{ => Landscape}/Page2/Mobile/QrResult/Voice/index.js (100%) rename src/views/Home/{ => Landscape}/Page2/Mobile/QrResult/index.js (98%) rename src/views/Home/{ => Landscape}/Page2/Mobile/QrScanner/index.js (100%) rename src/views/Home/{ => Landscape}/Page2/Mobile/Video/index.js (94%) rename src/views/Home/{ => Landscape}/Page2/Mobile/index.js (100%) rename src/views/Home/{ => Landscape}/Page2/Mobile/index.scss (100%) rename src/views/Home/{ => Landscape}/Page2/index.js (97%) create mode 100644 src/views/Home/Landscape/Page2/index.scss rename src/views/Home/{ => Landscape}/Page3/index.js (85%) rename src/views/Home/{ => Landscape}/Page4/index.js (90%) rename src/views/Home/{ => Landscape}/Test/Question.js (100%) rename src/views/Home/{ => Landscape}/Test/index.js (97%) rename src/views/Home/{ => Landscape}/VideoTube/AddComment/index.js (100%) rename src/views/Home/{ => Landscape}/VideoTube/Attachments/index.js (100%) rename src/views/Home/{ => Landscape}/VideoTube/Book/index.js (100%) rename src/views/Home/{ => Landscape}/VideoTube/Comment/index.js (100%) rename src/views/Home/{ => Landscape}/VideoTube/LessonPlayList/index.js (98%) rename src/views/Home/{ => Landscape}/VideoTube/index.js (95%) create mode 100644 src/views/Home/Landscape/index.js delete mode 100644 src/views/Home/Page1/Header/index.js delete mode 100644 src/views/Home/Page2/index.scss create mode 100644 src/views/Home/Portrait/Private/index.js create mode 100644 src/views/Home/Portrait/Public/Header/index.js create mode 100644 src/views/Home/Portrait/Public/index.js create mode 100644 src/views/Home/Portrait/index.js diff --git a/src/App.js b/src/App.js index 178e80b..56e18d6 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,15 @@ -import './App.scss'; -import { Provider } from 'react-redux'; -import store from './redux/store'; -import Router from './router'; +import "./App.scss"; +import { Provider } from "react-redux"; +import store from "./redux/store"; +import Router from "./router"; -function App() { +function App({theme}) { return ( - - + + ); } + export default App; diff --git a/src/App.scss b/src/App.scss index f1c9ca3..a78f799 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1,9 +1,9 @@ @import "./constants/size.scss"; @import "./constants/colors.scss"; -@import "./views/Home/Page1/index.scss"; -@import "./views/Home/Page2/index.scss"; -@import "./views/Home/Page2/Mobile/index"; -@import "./views/Home/Page1/Header/index.scss"; +@import "./views/Home/Landscape/Page1/index.scss"; +@import "./views/Home/Landscape/Page2/index.scss"; +@import "./views/Home/Landscape/Page2/Mobile/index"; +@import "./views/Home/Landscape/Page1/Lights/index.scss"; *{ font-family: Regular; @@ -68,6 +68,12 @@ margin : 0px auto; } +@media screen and (min-width : $xs){ + .container{ + max-width: 80%; + } +} + @media screen and (min-width : $lg){ .container{ max-width: 100%; diff --git a/src/assets/icons/ar-blue.svg b/src/assets/icons/ar-blue.svg new file mode 100644 index 0000000..b86ec83 --- /dev/null +++ b/src/assets/icons/ar-blue.svg @@ -0,0 +1,9 @@ + + + + + + + AR + + diff --git a/src/assets/icons/ar-white.svg b/src/assets/icons/ar-white.svg new file mode 100644 index 0000000..e4c817c --- /dev/null +++ b/src/assets/icons/ar-white.svg @@ -0,0 +1,9 @@ + + + + + + + AR + + diff --git a/src/assets/icons/hamburger-blue.svg b/src/assets/icons/hamburger-blue.svg new file mode 100644 index 0000000..cfd3da8 --- /dev/null +++ b/src/assets/icons/hamburger-blue.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/icons/hamburger.svg b/src/assets/icons/hamburger.svg new file mode 100644 index 0000000..ba4d2cc --- /dev/null +++ b/src/assets/icons/hamburger.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/icons/qr-blue.svg b/src/assets/icons/qr-blue.svg new file mode 100644 index 0000000..28db0fd --- /dev/null +++ b/src/assets/icons/qr-blue.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/icons/qr-white.svg b/src/assets/icons/qr-white.svg new file mode 100644 index 0000000..9b7c507 --- /dev/null +++ b/src/assets/icons/qr-white.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js index 12ab962..587fd7a 100644 --- a/src/components/Navbar/index.js +++ b/src/components/Navbar/index.js @@ -1,28 +1,37 @@ import React from "react"; import { Link } from "react-router-dom"; +import { connect } from "react-redux"; +import _ from "lodash"; import grayBagIcon from "../../assets/icons/gray-bag.svg"; import graySearchIcon from "../../assets/icons/gray-search.svg"; -import logoIcon from '../../assets/icons/logo.svg'; +import logoIcon from "../../assets/icons/logo.svg"; +import qrIcon from "../../assets/icons/qr-white.svg"; +import qrBlueIcon from "../../assets/icons/qr-blue.svg"; +import arIcon from "../../assets/icons/ar-white.svg"; +import arBlueIcon from "../../assets/icons/ar-blue.svg"; +import hamburgerIcon from "../../assets/icons/hamburger.svg"; +import hamburgerBlueIcon from "../../assets/icons/hamburger-blue.svg"; -export default function Navbar({ pages }) { +function Navbar({ pages, isDark, isLogin }) { return ( -
-
+
+ {/* landscape start */} +
- {/* - Desing system - */}
    {pages.map((page, i) => ( -
  • +
  • {page.name}
  • ))}
-
+
@@ -30,13 +39,69 @@ export default function Navbar({ pages }) {
+ {/* landscape end */} + {/* portrait start */} +
+
+ + +
+ + + + {isLogin && ( +
+ + + + + + +
+ )} +
+ {/* portrait end */}
); } +const mapStateToProps = (state) => ({ + isDark: state.publicApi.isDark, + isLogin: state.user.status, +}); + +export default connect(mapStateToProps, {})(Navbar); + Navbar.defaultProps = { pages: [ { diff --git a/src/constants/size.scss b/src/constants/size.scss index 578a2f3..2ca18c5 100644 --- a/src/constants/size.scss +++ b/src/constants/size.scss @@ -1,3 +1,4 @@ +$xs : 320px; $sm : 640px; $md : 768px; $lg : 1024px; diff --git a/src/index.css b/src/index.css index 3935755..2aa1d92 100644 --- a/src/index.css +++ b/src/index.css @@ -2,6 +2,15 @@ @tailwind components; @tailwind utilities; +.bg-dark { + background: rgb(44, 73, 100); + background: radial-gradient( + circle, + rgba(44, 73, 100, 1) 0%, + rgba(6, 27, 48, 1) 100% + ); +} + .rtl { direction: rtl; } diff --git a/src/redux/actions/public.js b/src/redux/actions/public.js index 94344e3..dc69d7b 100644 --- a/src/redux/actions/public.js +++ b/src/redux/actions/public.js @@ -1,7 +1,7 @@ import proxy from "../proxy"; const publicApi = { - setTheme: (data) => async (dispatch) => - await dispatch({ type: "public/setTheme", data: data }), + setIsDark: (data) => async (dispatch) => + await dispatch({ type: "public/setIsDark", data: data }), getHomeData: (data) => async (dispatch) => await proxy.get("public/homePage", data, { dispatch }), diff --git a/src/redux/reducers/public.js b/src/redux/reducers/public.js index acc728b..c615a03 100644 --- a/src/redux/reducers/public.js +++ b/src/redux/reducers/public.js @@ -1,7 +1,7 @@ import location from "../../utils/location"; const initialState = { - theme: localStorage.getItem("theme") || "light", + isDark: localStorage.getItem("isDark") || false, homeData: [], newProducts: [], levels: [], @@ -70,9 +70,9 @@ const grades = [ export default function publicApi(state = initialState, action) { let { type, data } = action; switch (type) { - case "public/setTheme": - localStorage.setItem("theme", data); - return { ...state, location: false, error: null, theme: data }; + case "public/setIsDark": + localStorage.setItem("isDark", data); + return { ...state, location: false, error: null, isDark: data }; case "active/video": return { ...state, diff --git a/src/router.js b/src/router.js index 904bd99..a614db0 100644 --- a/src/router.js +++ b/src/router.js @@ -1,23 +1,44 @@ import React from "react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; +import { connect } from "react-redux"; + +import _ from "lodash"; import Home from "./views/Home"; -import VideoTube from "./views/Home/VideoTube"; +// import VideoTube from "./views/Home/VideoTube"; -export default function router() { +function Router({ isDark }) { return ( - - - } /> - } /> - -

No matches routes.

- - } - /> -
-
+
+
+ + + } /> + {/* } /> */} + +

No matches routes.

+ + } + /> +
+
+
+
); } + +const mapStateToProps = (state) => ({ + isDark: state.publicApi.isDark, +}); + +export default connect(mapStateToProps, {})(Router); diff --git a/src/views/Home/Page1/Book/index.js b/src/views/Home/Landscape/Page1/Book/index.js similarity index 87% rename from src/views/Home/Page1/Book/index.js rename to src/views/Home/Landscape/Page1/Book/index.js index 87d9492..9fee480 100644 --- a/src/views/Home/Page1/Book/index.js +++ b/src/views/Home/Landscape/Page1/Book/index.js @@ -5,7 +5,7 @@ import { Link } from "react-router-dom"; export default function Book({ book }) { return ( - {book.name} + {book.name} diff --git a/src/views/Home/Landscape/Page1/Lights/index.js b/src/views/Home/Landscape/Page1/Lights/index.js new file mode 100644 index 0000000..2d6d058 --- /dev/null +++ b/src/views/Home/Landscape/Page1/Lights/index.js @@ -0,0 +1,39 @@ +import React, { useEffect, useState } from "react"; +import projectorIcon from "../../../../../assets/icons/projector.svg"; +import lightIcon from "../../../../../assets/icons/light.svg"; +import _ from "lodash"; + +export default function Lights({ degrees}) { + return ( +
+
+ {degrees.map((light, index) => ( + + ))} +
+
+ ); +} + +const Light = ({ degree }) => { + return ( +
+ + +
+ ); +}; + +Lights.defaultProps = { + degrees : [32, 17, 0, -17, -32] +} diff --git a/src/views/Home/Page1/Header/index.scss b/src/views/Home/Landscape/Page1/Lights/index.scss similarity index 100% rename from src/views/Home/Page1/Header/index.scss rename to src/views/Home/Landscape/Page1/Lights/index.scss diff --git a/src/views/Home/Page1/index.js b/src/views/Home/Landscape/Page1/index.js similarity index 84% rename from src/views/Home/Page1/index.js rename to src/views/Home/Landscape/Page1/index.js index 8dc682e..dfa0685 100644 --- a/src/views/Home/Page1/index.js +++ b/src/views/Home/Landscape/Page1/index.js @@ -2,23 +2,23 @@ import React, { useState, useEffect } from "react"; import { Link } from "react-router-dom"; import { Carousel } from "@trendyol-js/react-carousel"; import Book from "./Book"; -import FloatWithMouse from "../../../components/FloatWidthMouse"; -import Header from "./Header"; -import scroll from "../../../utils/scroll"; +import FloatWithMouse from "../../../../components/FloatWidthMouse"; +import Lights from "./Lights"; +import scroll from "../../../../utils/scroll"; import _ from "lodash"; -import olum1Image from "../../../assets/images/olum-1.svg"; -import olum2Image from "../../../assets/images/olum-2.svg"; -import olum4Image from "../../../assets/images/olum-4.svg"; -import olum7Image from "../../../assets/images/olum-7.svg"; -import zist11Image from "../../../assets/images/zist-11.svg"; -import arrow from "../../../assets/icons/slider-arrow.svg"; -import flatFlower from "../../../assets/icons/flat-flower-white.svg"; -import line from "../../../assets/icons/line.svg"; -import arrowBottomIcon from "../../../assets/icons/arrows-bottom-blue.svg"; -import sheffImage from "../../../assets/images/sheff.svg"; -import arrowLeftWhite from "../../../assets/icons/arrow-left-white.svg"; +import olum1Image from "../../../../assets/images/olum-1.svg"; +import olum2Image from "../../../../assets/images/olum-2.svg"; +import olum4Image from "../../../../assets/images/olum-4.svg"; +import olum7Image from "../../../../assets/images/olum-7.svg"; +import zist11Image from "../../../../assets/images/zist-11.svg"; +import arrow from "../../../../assets/icons/slider-arrow.svg"; +import flatFlower from "../../../../assets/icons/flat-flower-white.svg"; +import line from "../../../../assets/icons/line.svg"; +import arrowBottomIcon from "../../../../assets/icons/arrows-bottom-blue.svg"; +import sheffImage from "../../../../assets/images/sheff.svg"; +import arrowLeftWhite from "../../../../assets/icons/arrow-left-white.svg"; export default function Page1({ list, page }) { const [show, setShow] = useState(null); @@ -51,14 +51,14 @@ export default function Page1({ list, page }) {
-
+ { + window.addEventListener("scroll", () => { + if (window.scrollY > 3 * window.innerHeight) { + setAutoPlay(() => true); + } else { + setAutoPlay(() => false); + } + if ( + !JSON.parse(localStorage.getItem("joiRect")) && + window.scrollY > 1000 + ) { + localStorage.setItem( + "joiRect", + JSON.stringify( + document.getElementById("video-joi").getBoundingClientRect() + ) + ); + } + }); + }, []); + return ( +
+ + + + + + +
+ ); +} diff --git a/src/views/Home/Page1/Header/index.js b/src/views/Home/Page1/Header/index.js deleted file mode 100644 index 0202527..0000000 --- a/src/views/Home/Page1/Header/index.js +++ /dev/null @@ -1,33 +0,0 @@ -import React, { useEffect, useState } from "react"; -import projectorIcon from "../../../../assets/icons/projector.svg"; -import lightIcon from "../../../../assets/icons/light.svg"; -import _ from "lodash"; - -export default function Header() { - return ( -
- {[32, 17, 0, -17, -32].map((light, index) => ( - - ))} -
- ); -} - -const Light = ({ degree }) => { - return ( -
- - -
- ); -}; diff --git a/src/views/Home/Page2/index.scss b/src/views/Home/Page2/index.scss deleted file mode 100644 index 0129d23..0000000 --- a/src/views/Home/Page2/index.scss +++ /dev/null @@ -1,5 +0,0 @@ -.home-page2{ - background-image: url(../../../assets/images/woody-background.svg); - background-repeat: no-repeat; - background-size: cover; -} \ No newline at end of file diff --git a/src/views/Home/Portrait/Private/index.js b/src/views/Home/Portrait/Private/index.js new file mode 100644 index 0000000..6c69349 --- /dev/null +++ b/src/views/Home/Portrait/Private/index.js @@ -0,0 +1,11 @@ +import React from 'react' + +function Private() { + return ( +
+ +
+ ) +} + +export default Private; diff --git a/src/views/Home/Portrait/Public/Header/index.js b/src/views/Home/Portrait/Public/Header/index.js new file mode 100644 index 0000000..76ea2ed --- /dev/null +++ b/src/views/Home/Portrait/Public/Header/index.js @@ -0,0 +1,93 @@ +import React, { useState } from "react"; +import { Link } from "react-router-dom"; +import { Carousel } from "@trendyol-js/react-carousel"; +import Book from "../../../Landscape/Page1/Book"; +import Lights from "../../../Landscape/Page1/Lights"; +import arrow from "../../../../../assets/icons/slider-arrow.svg"; +import olum1Image from "../../../../../assets/images/olum-1.svg"; +import olum2Image from "../../../../../assets/images/olum-2.svg"; +import olum4Image from "../../../../../assets/images/olum-4.svg"; +import olum7Image from "../../../../../assets/images/olum-7.svg"; +import zist11Image from "../../../../../assets/images/zist-11.svg"; + +function Header({ list }) { + const [show, setShow] = useState(2); + + return ( +
+ +
+
+ + } + leftArrow={ + + } + > + {list.map((book, index) => ( + + ))} + +
+
+
+ ); +} + +export default Header; + +Header.defaultProps = { + list: [ + { + name: "زیست یازدهم", + imageUrl: zist11Image, + }, + { + name: "علوم دوم", + imageUrl: olum2Image, + }, + { + name: "علوم اول", + imageUrl: olum1Image, + }, + { + name: "علوم هفتم", + imageUrl: olum7Image, + }, + { + name: "علوم چهارم", + imageUrl: olum4Image, + }, + { + name: "علوم چهارم", + imageUrl: olum4Image, + }, + { + name: "علوم چهارم", + imageUrl: olum4Image, + }, + ], +} diff --git a/src/views/Home/Portrait/Public/index.js b/src/views/Home/Portrait/Public/index.js new file mode 100644 index 0000000..e150929 --- /dev/null +++ b/src/views/Home/Portrait/Public/index.js @@ -0,0 +1,12 @@ +import React from 'react'; +import Header from './Header'; + +function Public() { + return ( +
+
+
+ ) +} + +export default Public; diff --git a/src/views/Home/Portrait/index.js b/src/views/Home/Portrait/index.js new file mode 100644 index 0000000..eb1044f --- /dev/null +++ b/src/views/Home/Portrait/index.js @@ -0,0 +1,19 @@ +import React from "react"; +import { connect } from "react-redux"; +import Public from "./Public"; +import Private from "./Private"; + + +function Portrait({ isLogin }) { + return ( +
+ {isLogin ? : } +
+ ); +} + +const mapStateToProps = (state) => ({ + isLogin: state.user.status, +}); + +export default connect(mapStateToProps, {})(Portrait); diff --git a/src/views/Home/index.js b/src/views/Home/index.js index 3555d06..deec64b 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -1,47 +1,15 @@ -import React, { useEffect, useState } from "react"; +import React from 'react'; +import Landscape from './Landscape'; +import Portrait from './Portrait'; import Navbar from "../../components/Navbar"; -import Page1 from "./Page1"; -import Page2 from "./Page2"; -import Page3 from "./Page3"; -import Page4 from "./Page4"; -import Dots from '../../components/Dots'; -import VideoTube from "./VideoTube"; export default function Home() { - const [autoPlay, setAutoPlay] = useState(false); - useEffect(() => { - window.addEventListener("scroll", () => { - if (window.scrollY > 3 * window.innerHeight) { - setAutoPlay(() => true); - } else { - setAutoPlay(() => false); - } - if ( - !JSON.parse(localStorage.getItem("joiRect")) && - window.scrollY > 1000 - ) { - localStorage.setItem( - "joiRect", - JSON.stringify( - document.getElementById("video-joi").getBoundingClientRect() - ) - ); - } - }); - }, []); return ( -
- + <> - - - - - -
- ); + + + + ) } diff --git a/tailwind.config.js b/tailwind.config.js index 10faa30..85d8425 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -9,7 +9,9 @@ module.exports = { blue90: "#235A90", blueFF : '#E8FCFF', redFF : '#FFE6E6', - yellow2 : '#FDFFDA' + redFF1 : '#FF2020', + yellow2 : '#FDFFDA', + gray36 : '#363636' }), textColor : (theme) => ({ ...theme("colors"), @@ -26,7 +28,13 @@ module.exports = { ...theme("colors"), blueC0: "#196EC0", blueFE : "#C1E0FE" - }) + }), + extend : { + borderRadius: { + 'sm': '3px', + } + } + }, variants: { extend: {},