reza added aniamtion

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;
     }
   }
 

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<HTMLUListElement>(null);
+
   return (
     <section className="grade-filter d-flex align-items-center">
       <h1 className="d-flex align-items-center">
@@ -47,12 +51,13 @@ function GradeFilter({selectedGrade, gradeFilter, grades}: any) {
         </ul>
       ) : null}
 
-      <ul className="desktop align-items-center">
+      <ul className="desktop align-items-center"  ref={mobileList}>
+        { selectedGrade && <figure style={{ right : (mobileList as any).current?.offsetWidth / 12 * (selectedGrade - 1)  }}></figure> }
         {grades.map((item: any, i: any) => (
           <li
             key={i}
             onClick={(e) => gradeFilter(item.value)}
-            className={selectedGrade === item.value ? "grade-filter__active" : ""}
+            // className={selectedGrade === item.value ? "grade-filter__active" : ""}
           >
             {item.name}
           </li>

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;

src/components/JolPlayer/index.js

@@ -3,18 +3,19 @@ import file from "../../assets/videos/sea.mp4";
 
 const Video = ({fileIds}) => {
   return (
-    <div style={{direction: 'ltr', textAlign: 'left'}}>
+    <div style={{direction: 'ltr', textAlign: 'left', marginBottom: 10,}}>
       <JoLPlayer
         option={{
           videoSrc: `https://dnvn.ir/api/v1/file/${fileIds}`,
           width: '100%',
-          height: 400,
+          height: window.innerWidth > 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}`,

src/custom.scss

@@ -10,6 +10,10 @@
   display: flex;
 }
 
+p{
+  line-height: 1.5;
+}
+
 .submit-large {
   padding: 12px 24px;
 }

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;
 

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 }),

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":

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;
       }

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;

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<FormData | undefined>(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 (
     <div className="contact main d-flex flex-column">
@@ -36,7 +38,8 @@ function Contact({ departmans, selectedDepartman, contactData }: any) {
           <h1>تماس با ما</h1>
         </header>
         <div className="mobile flex-column">
-          <div className="d-flex  contact__tab">
+          <div className="d-flex contact__tab">
+            <figure className={unit !== "info" ? "contact__tab--figureactive" : ""}></figure>
             <button
               className={unit === "info" ? "contact__tab--active" : ""}
               onClick={() => setUnit("info")}
@@ -53,15 +56,18 @@ function Contact({ departmans, selectedDepartman, contactData }: any) {
           {unit === "info" && (
             <section className="contact__info d-flex flex-column py-3">
               <div className="d-flex flex-column">
-                {contactData.map((item: any, i: any) => (
-                  <div
-                    className="contact__info--data d-flex flex-column"
-                    key={i}
-                  >
-                    <h2>{item.name}</h2>
-                    <p>{item.value}</p>
-                  </div>
-                ))}
+                <div className="contact__info--data d-flex flex-column">
+                  <h2>آدرس</h2>
+                  <p>{contactData?.address}</p>
+                </div>
+                <div className="contact__info--data d-flex flex-column">
+                  <h2>شماره تماس</h2>
+                  <p>{contactData?.cellphone}</p>
+                </div>
+                <div className="contact__info--data d-flex flex-column">
+                  <h2>ایمیل</h2>
+                  <p>{contactData?.email}</p>
+                </div>
               </div>
               <div className="contact__info--map d-flex">
                 <Location />
@@ -76,7 +82,7 @@ function Contact({ departmans, selectedDepartman, contactData }: any) {
                     name="name"
                     label="نام"
                     align="right"
-                    onInput={onInput.persianOnly()}
+                    onInput={onInput.persianOnly}
                     onChange={onChange}
                   />
                 </div>
@@ -112,7 +118,7 @@ function Contact({ departmans, selectedDepartman, contactData }: any) {
                   name="name"
                   label="نام"
                   align="right"
-                  onInput={onInput.persianOnly()}
+                  onInput={onInput.persianOnly}
                   onChange={onChange}
                 />
               </div>
@@ -140,12 +146,18 @@ function Contact({ departmans, selectedDepartman, contactData }: any) {
           </section>
           <section className="contact__info d-flex flex-column py-3">
             <div className="d-flex flex-wrap justify-content-between">
-              {contactData.map((item: any, i: any) => (
-                <div className="contact__info--data d-flex flex-column" key={i}>
-                  <h2>{item.name}</h2>
-                  <p>{item.value}</p>
-                </div>
-              ))}
+              <div className="contact__info--data d-flex flex-column">
+                <h2>آدرس</h2>
+                <p>{contactData?.address}</p>
+              </div>
+              <div className="contact__info--data d-flex flex-column">
+                <h2>شماره تماس</h2>
+                <p>{contactData?.cellphone}</p>
+              </div>
+              <div className="contact__info--data d-flex flex-column">
+                <h2>ایمیل</h2>
+                <p>{contactData?.email}</p>
+              </div>
             </div>
             <div className="contact__info--map d-flex">
               <Location />
@@ -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);

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);
       }

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;

src/views/Course/index.tsx

@@ -38,7 +38,7 @@ function Course({ lessons, getInfo, info }: any) {
     <div className="course main d-flex flex-column">
       <Navbar />
       <main>
-        <header className="desktop align-items-end">
+        <header className="course__header desktop align-items-end">
           <div className="course__info d-flex">
             <div className="course__info--image d-flex align-items-end">
               <img src={`https://dnvn.ir/api/v1/file/${info?.fileIds}`} alt="" />
@@ -94,7 +94,7 @@ function Course({ lessons, getInfo, info }: any) {
         <header className="mobile flex-column">
           <div className="course__info d-flex">
             <div className="course__info--image d-flex align-items-end">
-              <img src={course?.thumbnailUrl} alt="" />
+              <img src={`https://dnvn.ir/api/v1/file/${info?.fileIds}`} alt="" />
             </div>
             <div className="course__info--description d-flex flex-column justify-content-between">
               <BreadCrumbs links={links} />
@@ -136,7 +136,7 @@ function Course({ lessons, getInfo, info }: any) {
         </header>
 
         <section className="course__list d-flex flex-column">
-          <header>
+          <header className="course__list--header">
             <h2>سر فصل دوره</h2>
             <p>در این قسمت شاید یک متن جهت زیباسازی قرار بگیرد </p>
           </header>

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);

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;

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;