Исправлены косяки

frontend-park-mail-ru · Nov 25, 2024 · e29990c · e29990c
1 parent 6bf5dfc
commit e29990c
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 55 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -4,12 +4,8 @@ services:
     build:
       context: .
       dockerfile: ./Dockerfile
-    ports:
-      - "0.0.0.0:443:443"
-      - "0.0.0.0:80:80"
-      - "0.0.0.0:8005:8005"
-      - "0.0.0.0:8005:8006"
-      - "0.0.0.0:8005:8007"
+    network_mode:
+      host
     volumes:
       - pumpkin-user-uploads:/usr/share/nginx/html/uploads
 volumes:

diff --git a/src/components/KanbanCard.tsx b/src/components/KanbanCard.tsx
@@ -1,6 +1,6 @@
 import { ComponentProps } from '@/jsxCore/types';
 import './kanbanCard.scss';
-import { deleteCard } from '@/api/columnsCards';
+import { deleteCard, updateCard } from '@/api/columnsCards';
 import {
   setActiveBoardStore,
   useActiveBoardStore,
@@ -10,20 +10,25 @@ import { useEffectRefs, useState } from '@/jsxCore/hooks';
 import { Button } from './Button';
 import { getCardDetails } from '@/api/cardDetails';
 import { setCardDetailsStore } from '@/stores/cardDetailsStore';
+import { Card } from '@/types/card';
 
 interface KanbanCardProps extends ComponentProps {
   text: string;
   cardId: number;
   columnId: number;
+  columnIdx: number;
   coverImageUrl?: string;
 }
 
 interface EditableProps extends ComponentProps {
   initialText: string;
+  cardId: number;
+  onNewCard: (newCard: Card) => void;
 }
 
 const Editable = (props: EditableProps) => {
   const [init, setInit] = useState(true);
+  const [newText, setNewText] = useState('');
 
   useEffectRefs((refs) => {
     if (init) {
@@ -36,14 +41,28 @@ const Editable = (props: EditableProps) => {
     }
   });
 
+  const submit = () => {
+    updateCard(props.cardId, { title: newText }).then((newCard) => {
+      if (newCard !== undefined) {
+        props.onNewCard(newCard);
+      }
+    });
+  };
+
   return (
     <div>
-      <textarea ref="textarea" />
+      <textarea
+        ref="textarea"
+        ON_input={(ev: InputEvent) => {
+          setNewText((ev.target as HTMLInputElement).value);
+        }}
+      />
       <Button
         key="save_text"
         variant="accent"
         text="Сохранить"
         icon="bi-floppy"
+        callback={submit}
       />
     </div>
   );
@@ -53,6 +72,11 @@ export const KanbanCard = (props: KanbanCardProps) => {
   const activeBoard = useActiveBoardStore() as ActiveBoard;
   const [isInput, setIsInput] = useState(false);
   let timer: number;
+  const editCallback = () => {
+    clearTimeout(timer);
+    setIsInput(true);
+  };
+
   return (
     <div class="kanban-card">
       {activeBoard.myRole !== 'viewer' && (
@@ -76,13 +100,29 @@ export const KanbanCard = (props: KanbanCardProps) => {
         <img src={props.coverImageUrl} class="kanban-card__cover"></img>
       ) : undefined}
       {isInput ? (
-        <Editable key="editable_card" initialText={props.text} />
+        <Editable
+          key="editable_card"
+          initialText={props.text}
+          cardId={props.cardId}
+          onNewCard={(crd) => {
+            activeBoard.columns[props.columnIdx].cards = activeBoard.columns[
+              props.columnIdx
+            ].cards.map((oldCard) => {
+              if (oldCard.id !== crd.id) {
+                return oldCard;
+              }
+              return crd;
+            });
+            setActiveBoardStore(activeBoard);
+            setIsInput(false);
+          }}
+        />
       ) : (
         <div
-          ON_dblclick={() => {
-            clearTimeout(timer);
-            console.log('CLEAR');
-            setIsInput(true);
+          ON_dblclick={editCallback}
+          ON_contextmenu={(ev: Event) => {
+            editCallback();
+            ev.stopPropagation();
           }}
           ON_click={() => {
             clearTimeout(timer);

diff --git a/src/components/KanbanColumn.tsx b/src/components/KanbanColumn.tsx
@@ -99,6 +99,7 @@ export const KanbanColumn = (props: KanbanColumnProps) => {
             text={cardData.title}
             cardId={cardData.id}
             columnId={props.columnId}
+            columnIdx={props.columnIndex}
             coverImageUrl={cardData.coverImageUrl}
           />
         );

diff --git a/src/containers/cardDetails.scss b/src/containers/cardDetails.scss
@@ -15,6 +15,12 @@
   flex-direction: column;
 }
 
+@media screen and (max-width: 800px) {
+  .card-details {
+    flex-direction: column !important;
+  }
+}
+
 .checklist-field {
   display: flex;
   flex-direction: row;

diff --git a/src/screens/HomePage.tsx b/src/screens/HomePage.tsx
@@ -108,7 +108,7 @@ export const HomePage = (props: ComponentProps) => {
           </div>
         </div>
 
-        <div className="homepage__detail-section homepage__detail-section__odd">
+        <div className="homepage__detail-section homepage__detail-section__even">
           <div className="homepage__detail-comment">
             <div className="homepage__detail-header">
               Размещайте задачи в колонках

diff --git a/src/screens/MainApp.tsx b/src/screens/MainApp.tsx
@@ -2,7 +2,6 @@ import { LeftPanel } from '@/containers/LeftPanel';
 import { NavBar } from '@/containers/NavBar';
 import { ComponentProps } from '@/jsxCore/types';
 import { useState } from '@/jsxCore/hooks';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { UserProfile } from '@/containers/UserProfile';
 import { KanbanBoard } from '@/containers/KanbanBoard';
 import { useModalDialogsStore } from '@/stores/modalDialogsStore';
@@ -46,6 +45,9 @@ export const MainApp = (props: MainAppProps) => {
         setLeftPanelOpened={setLeftPanelOpened}
         key="nav_bar"
       />
+      {modalDialogsStore.isUserProfileOpened && (
+        <UserProfile key="user-profile" />
+      )}
 
       {csat.isOpened && (
         <ModalDialog

diff --git a/src/screens/homePage.scss b/src/screens/homePage.scss
@@ -42,15 +42,29 @@
   padding-left: 10%;
   gap: 10%;
 }
-@media (max-width: 768px) {
+
+@media (max-width: 800px) {
   .homepage__detail-section {
-    flex-direction: column; /* Размещаем элементы вертикально */
-    padding: 0 20px; /* Уменьшаем отступы */
+    flex-direction: column;
+    padding: 0 20px;
     justify-content: center;
   }
 
+  .top-section {
+    flex-direction: column-reverse !important;
+    margin-left: 10px !important;
+    margin-right: 10px !important;
+  }
+
+  .top-section__motto {
+    text-wrap: wrap !important;
+  }
+
+  .homepage__detail-section__odd {
+    flex-direction: column-reverse !important;
+  }
   .homepage__detail-section__even {
-    flex-direction: column-reverse !important; /* Размещаем элементы вертикально */
+    flex-direction: column !important;
   }
 
   .homepage__detail-image {
@@ -60,29 +74,20 @@
 
   .homepage__detail-comment {
     width: 100%;
-    text-align: center; /* Центрируем текст */
+    text-align: center;
   }
 }
 
 .homepage__detail-section__even {
-  position: relative; /* Создаем контекст для позиционирования */
+  position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
-// .homepage__detail-section__even .homepage__detail-image {
-//   right: -10; /* Привязываем к правому краю */
-// }
-
-.homepage__detail-section__odd .homepage__detail-image {
-  position: relative;
-  // left: 70px;
-  width: 70%;
-}
-
-.homepage img {
-  border-radius: 12px; /* Скругление углов */
+.homepage__detail-section {
+  display: flex;
+  align-items: center;
 }
 
 .homepage .home-page__logo {
@@ -98,11 +103,7 @@
   right: 70px;
 }
 
-.homepage__detail-section__even {
-  flex-direction: row-reverse !important;
-}
-
-.homepage__detail-section__even .homepage__detail-comment {
+.homepage__detail-comment {
   flex: 1; /* Текст занимает доступное пространство */
   text-align: left; /* Текст выровнен по левому краю */
 }
@@ -156,9 +157,7 @@
   display: flex;
   column-gap: 20px;
 }
-// .top-section__right {
-//   margin-left: 20vw;
-// }
+
 .top-section__right img {
   height: 300px;
 }
@@ -175,10 +174,8 @@ html {
 }
 
 .homepage__scroll-indicator {
-  position: absolute;
-  top: 75%; /* Центрирование по вертикали */
-  left: 50%; /* Центрирование по горизонтали */
-  transform: translate(-50%, -50%);
+  display: flex;
+  justify-content: center;
   text-align: center;
 
   .scroll-link {
@@ -245,20 +242,13 @@ iframe {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Тень */
 }
 
-/* Адаптивность для мобильных устройств */
 @media (max-width: 768px) {
   iframe {
-    max-width: 100%; /* Убираем ограничение по ширине */
-    height: auto; /* Высота сохраняет пропорции */
+    max-width: 100%;
+    height: auto;
   }
 
   .video-frame {
-    padding: 0; /* Убираем дополнительные отступы */
+    padding: 0;
   }
 }
-
-// .home-page__logo {
-//   width: 150px; /* Фиксированная ширина */
-//   height: 50px; /* Фиксированная высота */
-//   object-fit: contain; /* Гарантирует, что логотип не будет искажен */
-// }