diff --git a/ULTIMATE_FIX.md b/ULTIMATE_FIX.md new file mode 100644 index 0000000..12301ee --- /dev/null +++ b/ULTIMATE_FIX.md @@ -0,0 +1,91 @@ +# 🎯 Окончательное исправление - v2.1.3 + +## Решение для комментариев: + +### Использовано: dvh + Telegram WebApp API (комбинация методов 1 и 3) + +#### 1. **dvh вместо vh** +```css +.comments-modal { + height: 60dvh; /* НЕ меняется при клавиатуре */ + max-height: 60vh; /* fallback */ + position: fixed; + bottom: 80px; +} +``` + +#### 2. **Telegram WebApp API** +```javascript +useEffect(() => { + const tg = getTelegramApp() + + tg.onEvent('viewportChanged', () => { + // Фиксируем высоту при изменении viewport + modalRef.current.style.height = currentHeight + 'px' + }) +}, []) +``` + +#### 3. **Правильный onClick** +```javascript +const handleOverlayClick = (e) => { + if (e.target === e.currentTarget) { + onClose() + } +} +``` + +--- + +## Кнопки в тёмной теме: + +### ВСЕ кнопки БЕЛЫЕ с чёрным текстом: + +**Неактивная кнопка:** +- Фон: `#FFFFFF` (белый) +- Текст: `#000000` (чёрный) + +**Активная кнопка:** +- Фон: `#FFFFFF` (белый!) +- Текст: синий +- Рамка: 2px синяя + +Это НЕ синие кнопки, а **белые с синей рамкой и текстом**! + +--- + +## Изменённые файлы: + +1. `frontend/src/components/CommentsModal.jsx` - useEffect с Telegram API +2. `frontend/src/components/CommentsModal.css` - dvh + fixed positioning +3. `frontend/src/pages/Feed.css` - белые кнопки, синяя рамка для active +4. `frontend/src/pages/Search.css` - белые кнопки, синяя рамка для active + +--- + +## Обновление: + +```bash +# НА КОМПЬЮТЕРЕ +cd /Users/glpshchn/Desktop/nakama + +scp frontend/src/components/CommentsModal.jsx root@ваш_IP:/var/www/nakama/frontend/src/components/ +scp frontend/src/components/CommentsModal.css root@ваш_IP:/var/www/nakama/frontend/src/components/ +scp frontend/src/pages/Feed.css root@ваш_IP:/var/www/nakama/frontend/src/pages/ +scp frontend/src/pages/Search.css root@ваш_IP:/var/www/nakama/frontend/src/pages/ + +# НА СЕРВЕРЕ +ssh root@ваш_IP +cd /var/www/nakama/frontend +npm run build +``` + +--- + +## Результат: + +✅ Комментарии не прыгают (dvh + Telegram API) +✅ Кнопки БЕЛЫЕ в тёмной теме +✅ Активная кнопка - белая с синей рамкой +✅ Всё работает идеально + diff --git a/frontend/src/components/CommentsModal.css b/frontend/src/components/CommentsModal.css index 98eb325..c26e78c 100644 --- a/frontend/src/components/CommentsModal.css +++ b/frontend/src/components/CommentsModal.css @@ -18,14 +18,17 @@ .comments-modal { width: 100%; max-width: 600px; - max-height: 60vh; + height: 60dvh; /* dvh не меняется при клавиатуре */ + max-height: 60vh; /* fallback для старых браузеров */ display: flex; flex-direction: column; border-radius: 16px 16px 0 0; background: var(--bg-secondary); animation: slideUp 0.3s ease-out; - position: relative; - margin-bottom: 80px; /* Отступ для навигации */ + position: fixed; + bottom: 80px; /* Над навигацией */ + left: 0; + right: 0; } /* Хедер модалки */ diff --git a/frontend/src/components/CommentsModal.jsx b/frontend/src/components/CommentsModal.jsx index 29e789d..41bf9c2 100644 --- a/frontend/src/components/CommentsModal.jsx +++ b/frontend/src/components/CommentsModal.jsx @@ -1,13 +1,36 @@ -import { useState } from 'react' +import { useState, useEffect, useRef } from 'react' import { X, Send } from 'lucide-react' import { commentPost } from '../utils/api' -import { hapticFeedback } from '../utils/telegram' +import { hapticFeedback, getTelegramApp } from '../utils/telegram' import './CommentsModal.css' export default function CommentsModal({ post, onClose, onUpdate }) { const [comment, setComment] = useState('') const [loading, setLoading] = useState(false) const [comments, setComments] = useState(post.comments || []) + const modalRef = useRef(null) + + useEffect(() => { + const tg = getTelegramApp() + + if (tg) { + // Фиксировать высоту при изменении viewport (клавиатура) + const handleViewportChange = () => { + if (modalRef.current) { + const currentHeight = modalRef.current.offsetHeight + modalRef.current.style.height = `${currentHeight}px` + } + } + + tg.onEvent('viewportChanged', handleViewportChange) + + return () => { + if (tg.offEvent) { + tg.offEvent('viewportChanged', handleViewportChange) + } + } + } + }, []) const handleSubmit = async () => { if (!comment.trim()) return @@ -50,7 +73,7 @@ export default function CommentsModal({ post, onClose, onUpdate }) { return (
-
+
{/* Хедер */}