adaptive main page

Author: JavaScriptMan-for

client/public/audio/end.mp3

@@ -4,14 +4,18 @@ import logo from '/img/favicon_2.ico'
 import { NavLink } from 'react-router-dom';
 
 import { Links } from "@enums/Links.enum"
+import { useWindow } from '../hooks/useWindow.hook';
 
 const NavComponent: FC = () => {
+
+  const window_size = useWindow();
+
   return (
     <nav>
       <NavLink id='logo' to={Links.MAIN_PAGE}><img src={logo} alt="logo" /></NavLink>
       <div id="a">
         <NavLink to={Links.MAIN_PAGE}>Главная</NavLink>
-        <NavLink to={Links.REDACT}>Конструктор бюллетеней</NavLink>
+        <NavLink to={Links.REDACT}>{window_size.width > 436 ? 'Конструктор бюллетеней' : 'Конструктор'}</NavLink>
       </div>
     </nav>
   )

client/public/img/screen_1.png

@@ -0,0 +1,30 @@
+
+import { useState, useEffect } from "react";
+
+interface WindowSize {
+  width: number,
+  height: number
+}
+
+export const useWindow = () => {
+      const [windowSize, setWindowSize] = useState<WindowSize>({
+        width: window.innerWidth,
+        height: window.innerHeight,
+    });
+    useEffect(()=> {
+        const handleResize = () => {
+          setWindowSize(prevSize => ({ 
+            ...prevSize,
+            width: window.innerWidth,
+            height: window.innerHeight,
+        }));
+        };
+      
+        window.addEventListener('resize', handleResize);
+      
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+      }, []);
+      return windowSize;
+}

client/public/img/screen_2.png

@@ -1,12 +1,15 @@
 import { FC } from 'react';
 import '../sass/main_page.scss'
 import "../sass/button.scss"
-
+import { useNavigate } from 'react-router-dom';
+import { Links } from '@enums/Links.enum';
 
 import BlockComponent from '@components/Block';
 
 const MainPage:FC = () => {
 
+  const navigate = useNavigate();
+
   return (
     <>
     <main>
@@ -15,11 +18,8 @@ const MainPage:FC = () => {
         Конструктор бюллетеней - ваш верный помощник в создании бюллетеней для голосования на общих собраниях. <br />
         P.S. Ни в коем случае не пользуйтесь им, если Вы не цените свое время!
       </BlockComponent>
-      <button id='main_button' type='button'>Смотреть ниже</button>     
+      <button onClick={() => navigate(Links.REDACT)} id='main_button' type='button'>Сгенерировать</button>     
     </main>
-    <div id="info">
-
-    </div>
       </>
   )
 }

client/public/img/screen_3.png

@@ -53,6 +53,16 @@ const ResultPage: FC = () => {
   }, [general_info, various_data]);
 
   const mutation = useMutation({
+    onSuccess: () => {
+    const end: HTMLAudioElement = new Audio();
+    const end_src = `${import.meta.env.BASE_URL}audio/end.mp3`;
+    end.src = end_src;
+    end.volume = 0.3
+
+    if(!mutation.isPending && !mutation.isError) {
+      end.play();
+    }
+    },
     mutationKey: ['docx'],
     mutationFn: async (data: FullInfo): Promise<Blob | undefined> => {
       const res = await fetch('/api/redact', {
@@ -136,6 +146,7 @@ const ResultPage: FC = () => {
      <button id='download' disabled={mutation.isError || mutation.isPending} onClick={handleDownload}>{mutation.isPending ? 'Генерация...' : 'Скачать'}</button>
       <p className='validate_error'>{mutation.error && mutation.error.message}</p>
       </div>
+
       {!mutation.isError && <span>Ваши бюллетени успешно сгенерировались. В случае каких-либо неисправностей прошу Вас написать нам 
       сюда: <code>ivan.minevskiy@yandex.ru</code> .
       </span>}

client/src/components/Nav.tsx

@@ -19,44 +19,55 @@ const Various_page: FC = () => {
   const general_info = useSelector((state: RootState) => state.general_info.general_info)
   const isValid = useSelector((state: RootState) => state.various_info.isValid)
 
-  const [forms, setForms] = useState<FormProps[]>([])
+  const [forms, setForms] = useState<FormProps[]>([]);
+  const [yesLimit, setYesLimit] = useState<boolean>(true);
 
   interface FormProps {
     id: number,
   }
 
-        const deleteForm = useCallback((id: number) => {
-            setForms(prevForms => prevForms.filter((form) => form.id !== id));
-         }, []);
-
-      useEffect(() => {
-      const defaultForms = () => {
-        const newForms: FormProps[] = [];
-        for (let i = 1; i < 6; i++) {
-            newForms.push({id: i});
-        }
-        setForms(newForms);
-      }
-      defaultForms()
-      }, [])
-
-      useEffect(() => {
-          // Проверяем, все ли формы валидны, когда меняется isValid
-          if (isValid.length > 0) {
-              const allFormsValid = isValid.every(item => item === true);
-              setIsValidForms(allFormsValid);
-          } else {
-              setIsValidForms(false); // Если isValid пуст, считаем, что формы не валидны
-          }
-      }, [isValid]);
-      
-
-      const addForm = () => {
-        const newId = forms.length + 1; // Генерируем уникальный id для новой формы
-        setForms(prevForms => [...prevForms, {id: newId}]);
+  const deleteForm = useCallback((id: number) => {
+    setForms(prevForms => prevForms.filter((form) => form.id !== id));
+  }, []);
+
+  useEffect(() => {
+    const change_limit = general_info.number_questions * forms.length;
+
+    if(change_limit > 300) {
+      setYesLimit(false)
+    } else {
+      setYesLimit(true)
+    }
+  }, [forms.length])
+
+  useEffect(() => {
+    const defaultForms = () => {
+      const newForms: FormProps[] = [];
+      for (let i = 1; i < 6; i++) {
+        newForms.push({ id: i });
       }
+      setForms(newForms);
+    }
+    defaultForms()
+  }, [])
+
+  useEffect(() => {
+    // Проверяем, все ли формы валидны, когда меняется isValid
+    if (isValid.length > 0) {
+      const allFormsValid = isValid.every(item => item === true);
+      setIsValidForms(allFormsValid);
+    } else {
+      setIsValidForms(false); // Если isValid пуст, считаем, что формы не валидны
+    }
+  }, [isValid]);
+
+
+  const addForm = () => {
+    const newId = forms.length + 1; // Генерируем уникальный id для новой формы
+    setForms(prevForms => [...prevForms, { id: newId }]);
+  }
+
 
-  
 
 
   return (
@@ -65,16 +76,16 @@ const Various_page: FC = () => {
 
       {
         forms.map((form, index) =>
-           <Form key={form.id} id={form.id} num={index + 1} onDelete={deleteForm}/>
-      )
+          <Form key={form.id} id={form.id} num={index + 1} onDelete={deleteForm} />
+        )
       }
       <div className="center">
-      <button className='send_various' onClick={() => navigate(Links.REDACT)}>Назад</button>
-      <button onClick={addForm} className='send_various'>+ участник</button>
-      <button className='send_various next' type="button" onClick={(e) => {
-        e.preventDefault();
-        dispatch(setIsClick());
-      }}>Далее</button>
+        <button className='send_various' onClick={() => navigate(Links.REDACT)}>Назад</button>
+        <button disabled={!yesLimit} onClick={addForm} className='send_various'>+ участник</button>
+        <button className='send_various next' type="button" onClick={(e) => {
+          e.preventDefault();
+          dispatch(setIsClick());
+        }}>Далее</button>
       </div>
     </>
   )

client/src/hooks/useWindow.hook.ts

@@ -20,3 +20,54 @@ span {
     font-family: Arial, sans-serif;
 }
 
+@media screen and (max-width: 1700px) {
+   #block {
+    width: 1000px !important;
+   } 
+}
+@media screen and (max-width: 1300px) {
+    #block {
+        width: 800px !important;
+    }
+}
+@media screen and (max-width: 900px) {
+    #block {
+        width: 700px !important;
+        span {
+            font-size: 20px;
+        }
+    }
+}
+@media screen and (max-width: 750px) {
+    #block {
+        width: 500px !important;
+        margin-bottom: 0;
+    }
+}
+@media screen and (max-width: 530px) {
+    #block {
+        width: 400px !important;
+        margin-bottom: 10px !important;
+    }
+}
+@media screen and (max-width: 430px) {
+    #block {
+        width: 300px !important;
+    }
+}
+@media screen and (max-width: 310px) {
+    #block {
+        width: 200px !important;
+        span {
+            font-size: 15px !important;
+        }
+    }
+}
+@media screen and (max-width: 250px) {
+    #block {
+        width: 100px !important;
+        span {
+            font-size: 10px !important;
+        }
+    }
+}