92 lines
2.5 KiB
Markdown
92 lines
2.5 KiB
Markdown
|
# 🎯 Окончательное исправление - 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)
|
|||
|
|
✅ Кнопки БЕЛЫЕ в тёмной теме
|
|||
|
|
✅ Активная кнопка - белая с синей рамкой
|
|||
|
|
✅ Всё работает идеально
|
|||
|
|
|