фикс сообщений о мэтчах и свайпа карточек

src/views/SwipeView.vue

@@ -360,21 +360,29 @@ const moveTouch = (event) => {
 const endTouch = () => {
   const diffX = touchEndX.value - touchStartX.value;
   
-  // Сбрасываем стили
-  cardStyle.value = {
-    transform: 'none',
-    transition: 'transform 0.3s ease'
-  };
-  
-  // Если свайп был достаточно длинный, выполняем действие
   if (Math.abs(diffX) > swipeThreshold) {
+    // Если свайп был достаточно длинный, анимируем к краю экрана
     if (diffX > 0) {
-      handleLike();
+      cardStyle.value = {
+        transform: `translateX(120%) rotate(${swipeAngle}deg)`,
+        transition: 'transform 0.3s ease'
+      };
+      // Плавная анимация уходящей карточки
+      setTimeout(() => handleLike(), 300);
     } else {
-      handlePass();
+      cardStyle.value = {
+        transform: `translateX(-120%) rotate(-${swipeAngle}deg)`,
+        transition: 'transform 0.3s ease'
+      };
+      // Плавная анимация уходящей карточки
+      setTimeout(() => handlePass(), 300);
     }
   } else {
-    // Недостаточный свайп, сбрасываем направление
+    // Если свайп недостаточный, возвращаем карточку в исходное положение с анимацией
+    cardStyle.value = {
+      transform: 'none',
+      transition: 'transform 0.3s ease'
+    };
     swipeDirection.value = null;
   }
   
@@ -431,21 +439,29 @@ const moveDrag = (event) => {
 const endDrag = () => {
   if (!isDragging.value) return;
   
-  // Сбрасываем стили карточки и плавно возвращаем её в исходное положение
-  cardStyle.value = {
-    transform: 'none',
-    transition: 'transform 0.3s ease'
-  };
-  
-  // Если перетаскивание было достаточно большим, выполняем действие лайка/пропуска
   if (Math.abs(dragOffset.value.x) > swipeThreshold) {
+    // Если перетаскивание было достаточно большим, выполняем действие лайка/пропуска с анимацией
     if (dragOffset.value.x > 0) {
-      handleLike();
+      cardStyle.value = {
+        transform: `translateX(120%) rotate(${swipeAngle}deg)`,
+        transition: 'transform 0.3s ease'
+      };
+      // Плавная анимация уходящей карточки
+      setTimeout(() => handleLike(), 300);
     } else {
-      handlePass();
+      cardStyle.value = {
+        transform: `translateX(-120%) rotate(-${swipeAngle}deg)`,
+        transition: 'transform 0.3s ease'
+      };
+      // Плавная анимация уходящей карточки
+      setTimeout(() => handlePass(), 300);
     }
   } else {
-    // Если перетаскивание небольшое, просто сбрасываем направление
+    // Если перетаскивание небольшое, плавно возвращаем карточку в исходное положение
+    cardStyle.value = {
+      transform: 'none',
+      transition: 'transform 0.3s ease'
+    };
     swipeDirection.value = null;
   }
   
@@ -1273,9 +1289,29 @@ watch(suggestions, () => {
     height: 32px;
   }
 
+  /* Match Popup адаптация для мобильных */
   .match-popup {
     width: 95%;
-    padding: 1.5rem;
+    max-width: 340px;
+    padding: 1.5rem 1rem;
+  }
+  
+  .match-header i {
+    font-size: 2.5rem;
+    margin-bottom: 0.75rem;
+  }
+  
+  .match-header h3 {
+    font-size: 1.3rem;
+  }
+  
+  .match-actions {
+    flex-direction: column;
+  }
+  
+  .match-btn {
+    padding: 0.7rem 0.8rem;
+    font-size: 0.95rem;
   }
 }
 
@@ -1312,6 +1348,28 @@ watch(suggestions, () => {
     height: 70px;
     font-size: 2rem;
   }
+  
+  /* Match Popup адаптация для малых экранов */
+  .match-popup {
+    width: 100%;
+    max-width: 300px;
+    padding: 1.25rem 0.75rem;
+    border-radius: 15px;
+  }
+  
+  .match-header i {
+    font-size: 2.2rem;
+    margin-bottom: 0.5rem;
+  }
+  
+  .match-header h3 {
+    font-size: 1.2rem;
+  }
+  
+  .match-btn {
+    padding: 0.6rem 0.75rem;
+    font-size: 0.9rem;
+  }
 }
 
 /* Large phones and small tablets */
@@ -1324,6 +1382,17 @@ watch(suggestions, () => {
   .action-buttons {
     margin-top: 15px;
   }
+  
+  /* Match Popup адаптация для средних экранов */
+  .match-popup {
+    width: 85%;
+    max-width: 380px;
+    padding: 1.75rem;
+  }
+  
+  .match-header i {
+    font-size: 2.8rem;
+  }
 }
 
 /* Tablets */
@@ -1345,6 +1414,21 @@ watch(suggestions, () => {
   .btn-icon {
     font-size: 2rem;
   }
+  
+  /* Match Popup адаптация для планшетов */
+  .match-popup {
+    width: 80%;
+    max-width: 450px;
+  }
+  
+  .match-header i {
+    font-size: 3.2rem;
+  }
+  
+  .match-btn {
+    padding: 0.9rem 1.2rem;
+    font-size: 1rem;
+  }
 }
 
 /* Small desktops */
@@ -1356,6 +1440,12 @@ watch(suggestions, () => {
   .swipe-area {
     max-height: 750px;
   }
+  
+  /* Match Popup адаптация для настольных */
+  .match-popup {
+    max-width: 480px;
+    padding: 2.25rem;
+  }
 }
 
 /* Large desktops */
@@ -1402,10 +1492,37 @@ watch(suggestions, () => {
     font-size: 1.3rem;
   }
   
+  /* Match Popup адаптация для ландшафтной ориентации */
   .match-popup {
-    width: 80%;
+    width: 70%;
-    max-width: 350px;
+    max-width: 450px;
-    padding: 1rem;
+    padding: 1rem 1.5rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    text-align: left;
+  }
+  
+  .match-content {
+    display: flex;
+    width: 100%;
+    align-items: center;
+  }
+  
+  .match-header {
+    margin-bottom: 0;
+    margin-right: 1.5rem;
+    flex: 1;
+  }
+  
+  .match-actions {
+    flex-direction: column;
+    flex: 1;
+    gap: 0.7rem;
+  }
+  
+  .match-btn {
+    padding: 0.6rem 0.8rem;
   }
 }
 </style>