добавляет инкапсуляцию стилей

codEnjoyer · Nov 16, 2023 · 1bd446e · 1bd446e
1 parent e37cc05
commit 1bd446e
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 23 deletions.
diff --git a/frontend/src/UIComponents/modalWindow/ModalWindow.tsx b/frontend/src/UIComponents/modalWindow/ModalWindow.tsx
@@ -17,7 +17,7 @@ const ModalWindow: React.FC<ModalWindowProps> =
         useEffect(() => {
             const onKeypress = (e: KeyboardEvent) => e?.key === "Esc" || e.key === "Escape" ? onClose() : null;
             gsap.fromTo(element.current, {opacity: 0}, {opacity: 1, duration: 0.2})
-            gsap.to(element.current, {duration: 0.5, scale: 1.1, ease: "expoScale(i, 2)"});
+            gsap.to(element.current, {duration: 0.5, scale: 1.3, ease: "expoScale(i, 2)"});
             document.addEventListener('keyup', onKeypress);
 
             return () => {

diff --git a/frontend/src/UIComponents/modalWindow/modalWindow.css b/frontend/src/UIComponents/modalWindow/modalWindow.css
diff --git a/frontend/src/UIComponents/modalWindow/modalWindow.css.map b/frontend/src/UIComponents/modalWindow/modalWindow.css.map
diff --git a/frontend/src/UIComponents/modalWindow/modalWindow.scss b/frontend/src/UIComponents/modalWindow/modalWindow.scss
@@ -1,6 +1,8 @@
 
 .modal-window {
   position: fixed;
+  height: 100%;
+  width: 100%;
   top: 0;
   bottom: 0;
   right: 0;
@@ -17,7 +19,7 @@
   color: black;
   background: #4e4c4c;
   border-radius: 15px;
-  min-width: 70vw;
-  min-height: 80vh;
+  min-width: 50vw;
+  min-height: 60vh;
   position: relative;
 }
diff --git a/frontend/src/components/mapMenu/MapMenu.tsx b/frontend/src/components/mapMenu/MapMenu.tsx
@@ -43,7 +43,7 @@ const MapMenu: React.FC = () => {
             id: 3,
             level: {
                 levelName: "Уровень 3",
-                title: "Начни бить Никиту",
+                title: "Начни текст",
                 menu: [
                     {
                         taskName: "video",

diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import "./modalLevelBody.scss"
 import ArrowLeft from "../UIChooseModule/ArrowLeft.tsx";
 import ArrowRight from "../UIChooseModule/ArrowRight.tsx";
@@ -27,6 +27,8 @@ const ModalLevelBody: React.FC<IModalLevelProps> = ({levelName, title, menu}) =>
         {name: "test", element: <Test/>}
     ]
 
+    const [currentTaskIndex, setCurrentTaskIndex] = useState(0)
+
     return (
         <div>
             <div className="header-modal">
@@ -42,21 +44,19 @@ const ModalLevelBody: React.FC<IModalLevelProps> = ({levelName, title, menu}) =>
             </div>
 
             <div className="menu">
-                {menu.map((item) =>
-                    tasks.map((task, index) => {
+                {menu.map((item, index) =>
+                    tasks.map((task) => {
                         return task.name === item.taskName
-                            ? <div key={index} className="menu-item">{task.element}</div>
+                            ? <div key={index} className="menu-item" onClick={() => {
+                                setCurrentTaskIndex(index)
+                            }}>{task.element}</div>
                             : ""
                     }))}
 
             </div>
             <div className="text-info">
                 <div className="level-title">{title.toUpperCase()}</div>
-                {menu.map((item, index) => <div key={index} className="level-body">{item.body}</div>)}
-                <video style={{width: 400}} controls={true}>
-                    <source
-                        src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></source>
-                </video>
+                <div className="level-body">{menu[currentTaskIndex].body}</div>
             </div>
         </div>
     );

diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/modalLevelBody.css b/frontend/src/components/mapMenu/UIMapMenu/Level/modalLevelBody.css
diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/modalLevelBody.css.map b/frontend/src/components/mapMenu/UIMapMenu/Level/modalLevelBody.css.map
diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/modalLevelBody.scss b/frontend/src/components/mapMenu/UIMapMenu/Level/modalLevelBody.scss
@@ -1,8 +1,10 @@
+@import './../../../../styles/variablesStyles';
+
 .header-modal {
   width: 100%;
   height: 4rem;
   border-radius: 15px;
-  background: #D9D9D9;
+  background: $formsBGColor;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -12,8 +14,11 @@
   position: absolute;
   margin-left: 1.25rem;
   top: 23%;
-  width: 6rem;
-  height: 16rem;
+  width: 8%;
+  max-height: 75%;
+  background: $formsBGColor;
+  padding: 2px;
+  border-radius: 30px;
 }
 
 .text-info {

diff --git a/frontend/src/styles/variablesStyles.scss b/frontend/src/styles/variablesStyles.scss
@@ -1,2 +1,3 @@
 $mainBGColor: #787878;
 $formsBGColor: #E8E8E8;
+$modalWindowBGColor: #D9D9D9;