65 lines
1.5 KiB
Markdown
65 lines
1.5 KiB
Markdown
|
# 🔧 Исправление "прыгания" комментариев
|
|||
|
|
|
|||
|
|
## Проблема:
|
|||
|
|
При нажатии на поле ввода комментария окно "прыгает" вверх
|
|||
|
|
|
|||
|
|
## Причина:
|
|||
|
|
Мобильная клавиатура меняет высоту viewport
|
|||
|
|
|
|||
|
|
## ✅ Решение:
|
|||
|
|
|
|||
|
|
### 1. Фиксация viewport
|
|||
|
|
Добавлено в `index.html`:
|
|||
|
|
```html
|
|||
|
|
<meta name="viewport" content="... viewport-fit=cover" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. Фиксация body
|
|||
|
|
```css
|
|||
|
|
html, body {
|
|||
|
|
position: fixed;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
#root {
|
|||
|
|
position: fixed;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. Оптимизация модалки
|
|||
|
|
- Уменьшена высота до 60vh
|
|||
|
|
- Добавлен `margin-bottom: 80px`
|
|||
|
|
- Форма `position: sticky`
|
|||
|
|
- Предотвращение прыжков при focus
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 📝 Изменённые файлы:
|
|||
|
|
|
|||
|
|
1. `frontend/index.html` - viewport и стили body
|
|||
|
|
2. `frontend/src/components/CommentsModal.css` - sticky форма
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 📤 Загрузить:
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# НА КОМПЬЮТЕРЕ
|
|||
|
|
cd /Users/glpshchn/Desktop/nakama
|
|||
|
|
|
|||
|
|
scp frontend/index.html root@ваш_IP:/var/www/nakama/frontend/
|
|||
|
|
scp frontend/src/components/CommentsModal.css root@ваш_IP:/var/www/nakama/frontend/src/components/
|
|||
|
|
|
|||
|
|
# НА СЕРВЕРЕ
|
|||
|
|
ssh root@ваш_IP
|
|||
|
|
cd /var/www/nakama/frontend
|
|||
|
|
npm run build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## ✅ После обновления:
|
|||
|
|
|
|||
|
|
Комментарии больше не будут прыгать при фокусе на поле ввода!
|
|||
|
|
|