From e01cd1b911f7bbe45359925cd6e8dbb8e3990e7a Mon Sep 17 00:00:00 2001 From: RezaAshrafi77 Date: Sun, 10 Oct 2021 16:53:41 +0330 Subject: [PATCH] reza added aniamtion --- src/components/GradeFilter/index.scss | 28 ++++++- src/components/GradeFilter/index.tsx | 11 ++- src/components/HomeSearchBox/index.scss | 2 +- src/components/JolPlayer/index.js | 9 ++- src/custom.scss | 4 + src/redux/actions-type/public.tsx | 6 ++ src/redux/actions/public.tsx | 8 +- src/redux/reducers/public.tsx | 100 +----------------------- src/views/Auth/SignUp/index.scss | 11 +-- src/views/Contact/index.scss | 23 +++++- src/views/Contact/index.tsx | 56 +++++++------ src/views/Course/Lesson/index.scss | 1 + src/views/Course/index.scss | 38 ++++----- src/views/Course/index.tsx | 6 +- src/views/Home/Courses/index.scss | 3 +- src/views/VideoTube/Comment/index.scss | 2 +- src/views/VideoTube/index.scss | 1 + 17 files changed, 143 insertions(+), 166 deletions(-) diff --git a/src/components/GradeFilter/index.scss b/src/components/GradeFilter/index.scss index 3e92097..a5a7815 100644 --- a/src/components/GradeFilter/index.scss +++ b/src/components/GradeFilter/index.scss @@ -5,7 +5,6 @@ font-family: numeralLight; background-color: #383838; border-radius: 6px; - height: 36px; &__box{ display: none !important; } @@ -22,16 +21,27 @@ } ul{ flex: 1; + figure{ + position: absolute; + top: 0px; + right: 0px; + height: 100%; + width : calc(100% / 12); + transition: right 0.5s; + background-color: #9CDF52; + box-shadow: 0px 0px 20px #9CDF52; + z-index: 50; + } li{ width: calc(100% / 12); text-align: center; cursor: pointer; padding: 6px 0px; + // box-shadow: 0px 0px 20px #9CDF52; + // background-color: #9CDF52; } } &__active{ - background-color: #9CDF52; - box-shadow: 0px 0px 20px #9CDF52; border-radius: 5px; } } @@ -39,11 +49,17 @@ @media screen and (min-width: 1441px){ .grade-filter{ max-width: 1350px; + ul{ + position: relative; + } h1{ font-size: calc(100vw / 120); } li{ font-size: calc(100vw / 90); + background-color: rgba(255, 255, 255, 0) ; + z-index: 100; + padding: 10px 0px !important; } } } @@ -51,11 +67,17 @@ @media screen and (min-width: 1008px) and (max-width: 1440px){ .grade-filter{ max-width: 1250px; + ul{ + position: relative; + } h1{ font-size: calc(100vw / 120); } li{ font-size: calc(100vw / 90); + background-color: inherit !important; + z-index: 100; + padding: 10px 0px; } } diff --git a/src/components/GradeFilter/index.tsx b/src/components/GradeFilter/index.tsx index aa4d721..e17fb83 100644 --- a/src/components/GradeFilter/index.tsx +++ b/src/components/GradeFilter/index.tsx @@ -1,16 +1,20 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useRef } from "react"; import { connect } from "react-redux"; import { book } from "../../redux/actions"; import "./index.scss"; import dropdown from "../../assets/icons/dropdown.png"; + function GradeFilter({selectedGrade, gradeFilter, grades}: any) { const [arrowTop, setArrowTop] = useState(false); useEffect(() => { setArrowTop(false); }, [selectedGrade]); + + const mobileList = useRef(null); + return (

@@ -47,12 +51,13 @@ function GradeFilter({selectedGrade, gradeFilter, grades}: any) { ) : null} -
    +
      + { selectedGrade &&
      } {grades.map((item: any, i: any) => (
    • gradeFilter(item.value)} - className={selectedGrade === item.value ? "grade-filter__active" : ""} + // className={selectedGrade === item.value ? "grade-filter__active" : ""} > {item.name}
      • diff --git a/src/components/HomeSearchBox/index.scss b/src/components/HomeSearchBox/index.scss index 36d0f7c..0dc3ef0 100644 --- a/src/components/HomeSearchBox/index.scss +++ b/src/components/HomeSearchBox/index.scss @@ -135,7 +135,7 @@ @media screen and (max-width: 640px) { .home-search-box { max-width: 500px; - padding: 10px 0px; + padding: 10px 0px 0px; flex: 1; &__voice { display: flex !important; diff --git a/src/components/JolPlayer/index.js b/src/components/JolPlayer/index.js index afdcf9a..6f4a16e 100644 --- a/src/components/JolPlayer/index.js +++ b/src/components/JolPlayer/index.js @@ -3,18 +3,19 @@ import file from "../../assets/videos/sea.mp4"; const Video = ({fileIds}) => { return ( -
      +
      1000 ? 450 : 250, theme : '#4dd35b', language : 'en', - isShowMultiple: true, + isShowMultiple: window.innerWidth > 700, hideMouseTime : 10000, isShowPicture : true, - isShowScreenshot : true, + isShowScreenshot : window.innerWidth > 700, + isShowSet : window.innerWidth > 700, isShowPauseButton : false, quality: [{ name: "SD", url : `https://dnvn.ir/api/v1/file/${fileIds}`, diff --git a/src/custom.scss b/src/custom.scss index 92ede3b..a67060a 100644 --- a/src/custom.scss +++ b/src/custom.scss @@ -10,6 +10,10 @@ display: flex; } +p{ + line-height: 1.5; +} + .submit-large { padding: 12px 24px; } diff --git a/src/redux/actions-type/public.tsx b/src/redux/actions-type/public.tsx index 26a6e9c..d9c06d0 100644 --- a/src/redux/actions-type/public.tsx +++ b/src/redux/actions-type/public.tsx @@ -33,6 +33,11 @@ interface getCity { data: any; } +interface getContactData{ + type : 'public/contact' + data: any; +} + interface error { type: "error"; data: undefined; @@ -55,6 +60,7 @@ type PublicAction = | setFaqActive | getProvince | getCity + |getContactData | loading | error; diff --git a/src/redux/actions/public.tsx b/src/redux/actions/public.tsx index 3dce707..041ebb9 100644 --- a/src/redux/actions/public.tsx +++ b/src/redux/actions/public.tsx @@ -13,10 +13,10 @@ const publicApi = { // searchFaq: (data: String) => async (dispatch: Dispatch) => // await dispatch({ type: "public/faq/search", data: data }), - // getContactData: - // (data = {}) => - // async (dispatch: Dispatch) => - // await proxy.get("public/contact", data, { dispatch }), + getContactData: + (data = {}) => + async (dispatch: Dispatch) => + await proxy.get("public/contact", data, { dispatch }), // getArList: (data: undefined) => async (dispatch: Dispatch) => // await proxy.get("public/ar", data, { dispatch }), diff --git a/src/redux/reducers/public.tsx b/src/redux/reducers/public.tsx index 203acf1..2ba892d 100644 --- a/src/redux/reducers/public.tsx +++ b/src/redux/reducers/public.tsx @@ -12,43 +12,6 @@ const initialState = { blog: null, province : null, city : null, - mockSubscribes: [ - { - id: 0, - name: "اشتراک 3 ماهه", - finalPrice: "19.000", - offPercent: 0, - off: 0, - }, - { - id: 1, - name: "اشتراک 3 ماهه", - finalPrice: "19.000", - offPercent: 0, - off: 0, - }, - { - id: 2, - name: "اشتراک 6 ماهه", - finalPrice: "30.000", - offPercent: 30, - off: "10.000", - }, - { - id: 3, - name: "اشتراک 6 ماهه", - finalPrice: "40.000", - offPercent: 0, - off: 0, - }, - ], - selectedSubscribe: { - id: 0, - name: "اشتراک 3 ماهه", - finalPrice: "19.000", - offPercent: 0, - off: 0, - }, departmans: [ { id: 0, @@ -63,53 +26,7 @@ const initialState = { name: "برنامه نویسی", }, ], - contactData: [ - { - name: "آدرس ما", - value: "تهران خیابان انقلاب بین ابوریحان و فلسطین بن بست سروش پلاک 2", - }, - { - name: "شماره تماس", - value: "02163462405 - 02163462406", - }, - { - name: "شماره پیامک", - value: "300000000008762144", - }, - { - name: "ایمیل سازمانی", - value: "Info@Danovin.ir", - }, - ], - faqList: [ - { - id : 0, - name: "نحوه خرید از سایت دانوین چگونه است ؟", - active: true, - value: - "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی ", - }, - { - id : 1, - name: "در این قسمت متن جدید خواهد آمد؟", - active: false, - value: - "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی ", - }, - { - id : 2, - name: "چرا باید در این قسمت پرسش های متداول طرح شود؟", - active: false, - value: - "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی ", - }, - { - id : 3, - name : 'این متن جهت سردرگرمی شما نوشته شده و کاربرد دیگری ندارد', - active : false, - value : 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی ' - } - ], + contactData: null }; const grades = [ @@ -230,17 +147,6 @@ export default function publicApi(state = initialState, action: PublicAction) { // }; // case "faq/list": // return { ...state, loading: false, error: null, faqList: data }; - case "public/faq/activate": - return { - ...state, - loading: false, - error: null, - faqList: state.faqList.map((item : any) => - item.id === data - ? { ...item, active: !item.active } - : { ...item, active: false } - ), - }; // case "public/faq/search": // return { // ...state, @@ -252,8 +158,8 @@ export default function publicApi(state = initialState, action: PublicAction) { // item.description.indexOf(data) !== -1 // ), // }; - // case "public/contact": - // return { ...state, loading: false, error: null, contactData: data }; + case "public/contact": + return { ...state, loading: false, error: null, contactData: data }; // case "public/ar": // return { ...state, loading: false, error: null, arList: data }; case "public/blogList": diff --git a/src/views/Auth/SignUp/index.scss b/src/views/Auth/SignUp/index.scss index 0f4ccea..ab6e212 100644 --- a/src/views/Auth/SignUp/index.scss +++ b/src/views/Auth/SignUp/index.scss @@ -258,7 +258,7 @@ justify-content: center; b { color: white; - font-size: calc(100vw / 20); + font-size: calc(100vw / 25); margin-bottom: 30px; font-weight: 500; p{ @@ -270,7 +270,7 @@ background-color: #2a2a2a; border: 1px solid #a2a2a2; border-radius: 8px; - font-size: calc(100vw / 20); + font-size: calc(100vw / 22); padding: 10px 14px; color: white; direction: ltr; @@ -286,18 +286,19 @@ margin-top: 20px; background-color: #84de56; color: white; - font-size: calc(100vw / 20); - padding: 10px 0px; + font-size: calc(100vw / 24); + padding: 12px 0px; border: 0px; border-radius: 10px; } } &__info { width: 300px; - margin: 20px auto 0px; + margin: 30px auto 0px; text-align: center; color: white; font-size: calc(100vw / 30); + line-height: 1.5; a { color: #84de56; } diff --git a/src/views/Contact/index.scss b/src/views/Contact/index.scss index ce96fae..eb38b96 100644 --- a/src/views/Contact/index.scss +++ b/src/views/Contact/index.scss @@ -31,19 +31,34 @@ } } &__tab{ - margin-bottom: 30px; + margin-bottom: 15px; border-radius: 10px !important; border: 1px solid #4DD35B; + position: relative; + figure{ + z-index: 1 !important; + border-radius: 10px; + position: absolute; + background-color: #4DD35B !important; + width : 50%; + height: 100%; + left: 50%; + top: 0px; + transition: left 0.5s; + } button{ width: 50%; padding: 10px 0px; border: none; - background-color: inherit; + background-color: rgba(255, 255, 255, 0); border-radius: 10px !important; color: #4DD35B; + z-index: 200; + } + &--figureactive{ + left: 0px !important; } &--active{ - background-color: #4DD35B !important; color: white !important; } } @@ -173,6 +188,7 @@ padding: 40px 10px; header{ padding-bottom: 20px; + border: none; h1{ font-size: calc(100vw / 18); } @@ -197,6 +213,7 @@ background-color: #83de564b; padding: 10px; border-radius: 10px; + margin-bottom: 15px; h2{ font-size: calc(100vw / 27); color: #4DD35B; diff --git a/src/views/Contact/index.tsx b/src/views/Contact/index.tsx index c762477..5276bc0 100644 --- a/src/views/Contact/index.tsx +++ b/src/views/Contact/index.tsx @@ -8,7 +8,8 @@ import Textarea from "../../components/Textarea/index"; import Select from "../../components/Select/index"; import Location from "../../components/Location/index"; import { connect } from "react-redux"; -import scroll from '../../util/scroll'; +import scroll from "../../util/scroll"; +import { publicApi } from "../../redux/actions"; interface FormData { name?: string; @@ -17,7 +18,7 @@ interface FormData { text?: string; } -function Contact({ departmans, selectedDepartman, contactData }: any) { +function Contact({ departmans, selectedDepartman, contactData, getContactData }: any) { const [formData, setFormData] = useState(undefined); const [unit, setUnit] = useState("info"); const onChange = (e: any) => { @@ -26,7 +27,8 @@ function Contact({ departmans, selectedDepartman, contactData }: any) { useEffect(() => { scroll.goToTop(); - },[]) + getContactData(); + }, []); return (
      @@ -36,7 +38,8 @@ function Contact({ departmans, selectedDepartman, contactData }: any) {

      تماس با ما

      -
      +
      +
      @@ -140,12 +146,18 @@ function Contact({ departmans, selectedDepartman, contactData }: any) {

- {contactData.map((item: any, i: any) => ( -
-

{item.name}

-

{item.value}

-
- ))} +
+

آدرس

+

{contactData?.address}

+
+
+

شماره تماس

+

{contactData?.cellphone}

+
+
+

ایمیل

+

{contactData?.email}

+
@@ -162,4 +174,4 @@ export default connect((state: any) => ({ departmans: state.publicApi.departmans, selectedDepartman: state.publicApi.selectedDepartman, contactData: state.publicApi.contactData, -}))(Contact); +}), {getContactData : publicApi.getContactData})(Contact); diff --git a/src/views/Course/Lesson/index.scss b/src/views/Course/Lesson/index.scss index 92f6759..f8da933 100644 --- a/src/views/Course/Lesson/index.scss +++ b/src/views/Course/Lesson/index.scss @@ -169,6 +169,7 @@ header { border-top-right-radius: 10px; border-top-left-radius: 10px; + padding: 15px 5px !important; h4 { font-size: calc(100vw / 30); } diff --git a/src/views/Course/index.scss b/src/views/Course/index.scss index b524a31..0ad2f8a 100644 --- a/src/views/Course/index.scss +++ b/src/views/Course/index.scss @@ -1,9 +1,7 @@ .course{ - main{ - header{ - padding: 30px 0px 45px; - border-bottom:2px solid #4a4a4a; - } + &__header{ + padding: 30px 0px 45px; + border-bottom:2px solid #4a4a4a; } &__info{ &--image{ @@ -65,7 +63,7 @@ margin-bottom: 30px; border-radius: 10px; - header{ + &--header{ padding: 20px 0px 20px !important; border: 0px !important; h2{ @@ -160,7 +158,7 @@ } } &__list{ - header{ + &--header{ h2{ font-size: 25px; } @@ -252,7 +250,7 @@ } } &__list{ - header{ + &--header{ h2{ font-size: calc(100vw / 65); } @@ -270,17 +268,17 @@ main { max-width: 900px; padding: 0px 20px; - header{ - padding: 0px; - padding-bottom: 20px; - padding-top: 20px; - } p{ margin-top: 20px; color: #d3d3d3; font-size: calc(100vw / 45); } } + &__header{ + padding: 0px; + padding-bottom: 20px; + padding-top: 20px; + } &__info{ flex: 3; &--image{ @@ -348,7 +346,7 @@ } } &__list{ - header{ + &--header{ h2{ font-size: calc(100vw / 35); margin-top: 20px; @@ -366,13 +364,15 @@ @media screen and (max-width: 640px) { .course{ background : black; + margin-top: 20px; + &__header{ + padding: 0px; + padding-bottom: 20px; + } main { max-width: 500px; padding: 0px 10px; - header{ - padding: 0px; - padding-bottom: 20px; - } + p{ margin-top: 20px; color: #d3d3d3; @@ -445,7 +445,7 @@ } } &__list{ - header{ + &--header{ h2{ font-size: calc(100vw / 25); margin-top: 20px; diff --git a/src/views/Course/index.tsx b/src/views/Course/index.tsx index 15786eb..b5973f1 100644 --- a/src/views/Course/index.tsx +++ b/src/views/Course/index.tsx @@ -38,7 +38,7 @@ function Course({ lessons, getInfo, info }: any) {
-
+
@@ -94,7 +94,7 @@ function Course({ lessons, getInfo, info }: any) {
- +
@@ -136,7 +136,7 @@ function Course({ lessons, getInfo, info }: any) {
-
+

سر فصل دوره

در این قسمت شاید یک متن جهت زیباسازی قرار بگیرد

diff --git a/src/views/Home/Courses/index.scss b/src/views/Home/Courses/index.scss index b9f2d11..59a06d0 100644 --- a/src/views/Home/Courses/index.scss +++ b/src/views/Home/Courses/index.scss @@ -12,7 +12,6 @@ h1{ font-family: numeralMedium; color: white; - margin: 0px; } span{ color: #aaa; @@ -102,9 +101,11 @@ max-width: 500px; border: 0px !important; padding: 0px !important; + margin-top: 15px; header{ h1{ font-size: calc(100vw / 25); + margin-bottom: 10px; } span{ font-size: calc(100vw / 34); diff --git a/src/views/VideoTube/Comment/index.scss b/src/views/VideoTube/Comment/index.scss index b65b832..e8eabaf 100644 --- a/src/views/VideoTube/Comment/index.scss +++ b/src/views/VideoTube/Comment/index.scss @@ -75,7 +75,7 @@ .video-tube-comment{ width: 95%; p{ - font-size: calc(100vw / 42); + font-size: calc(100vw / 38); strong{ font-size: calc(100vw / 35); margin-left: 5px; diff --git a/src/views/VideoTube/index.scss b/src/views/VideoTube/index.scss index aec1337..29742f2 100644 --- a/src/views/VideoTube/index.scss +++ b/src/views/VideoTube/index.scss @@ -453,6 +453,7 @@ @media screen and (max-width: 640px) { .video-tube { background : black; + margin-top: 20px; main { max-width: 500px; margin-top: 0px;