From 2bc0e9c701447905e94367890c1171a75d68ae0c Mon Sep 17 00:00:00 2001 From: Professional Date: Fri, 23 May 2025 17:53:15 +0700 Subject: [PATCH] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81=20=D1=81=D0=BE=D0=BE?= =?UTF-8?q?=D0=B1=D1=89=D0=B5=D0=BD=D0=B8=D0=B9=20=D0=BE=20=D0=BC=D1=8D?= =?UTF-8?q?=D1=82=D1=87=D0=B0=D1=85=20=D0=B8=20=D1=81=D0=B2=D0=B0=D0=B9?= =?UTF-8?q?=D0=BF=D0=B0=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=B5=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/SwipeView.vue | 165 ++++++++++++++++++++++++++++++++++------ 1 file changed, 141 insertions(+), 24 deletions(-) diff --git a/src/views/SwipeView.vue b/src/views/SwipeView.vue index 4726b39..f261837 100644 --- a/src/views/SwipeView.vue +++ b/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%; - max-width: 350px; - padding: 1rem; + width: 70%; + max-width: 450px; + 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; } } \ No newline at end of file