Игорь Надеин
dd56953e89
- Заменен лишний div.container на стандартный container для единообразия - Заменен класс .card на .ios-card в секции активности для устранения конфликтов стилей - Добавлен card-list.css в base.html для корректного отображения карточек новостей - Добавлены CSS правила для правильного поведения .row и колонок в grid-layout - Исправлена проблема с выходом календаря за границы страницы - Убраны видимые скроллбары у modal-body и modal-content для чистого UI
122 lines
5.9 KiB
Markdown
122 lines
5.9 KiB
Markdown
# 🎯 Тестирование унификации textarea
|
||
|
||
## Что было исправлено
|
||
|
||
**Проблема:** Поля ввода комментариев в заявлениях вели себя иначе, чем в новостях.
|
||
|
||
**Причина:**
|
||
1. В `request-list.css` были специфичные стили для `.comment-new textarea`:
|
||
- `min-height: 44px`
|
||
- `max-height: 220px`
|
||
- `resize: vertical`
|
||
|
||
2. В `_message-inputs.scss` были конфликтующие стили:
|
||
- `.message-input { min-height: 44px; max-height: 260px; }`
|
||
- `.message-field--compact .message-input { min-height: 32px; }`
|
||
|
||
**Решение:**
|
||
- ✅ Удалены все фиксированные `min-height` и `max-height` из CSS
|
||
- ✅ Удален `resize: vertical` (теперь только `resize: none`)
|
||
- ✅ Все textarea с `rows="1"` автоматически управляются через `textareaAutoExpand.js`
|
||
|
||
## Как тестировать
|
||
|
||
### 1. Комментарии в ленте новостей
|
||
1. Откройте главную страницу `/feed/`
|
||
2. Найдите любую новость
|
||
3. Начните вводить комментарий в поле "Оставить комментарий…"
|
||
4. ✅ **Ожидается:** Поле плавно расширяется от 1 до 6 строк (144px)
|
||
|
||
### 2. Комментарии в заявлениях
|
||
1. Откройте список заявлений `/requests/`
|
||
2. Нажмите на кнопку "Комментарии" под любой заявкой
|
||
3. Начните вводить комментарий в поле "Написать…"
|
||
4. ✅ **Ожидается:** Поле ведёт себя **ИДЕНТИЧНО** полю в новостях
|
||
|
||
### 3. Комментарии в детальном просмотре заявки
|
||
1. Откройте заявку `/requests/<id>/`
|
||
2. Прокрутите до раздела комментариев
|
||
3. Начните вводить комментарий
|
||
4. ✅ **Ожидается:** Точно такое же поведение, как в новостях
|
||
|
||
### 4. Комментарии при обработке заявки
|
||
1. Откройте заявку для обработки `/requests/<id>/process/`
|
||
2. Прокрутите до комментариев
|
||
3. Начните вводить
|
||
4. ✅ **Ожидается:** Единообразное поведение
|
||
|
||
### 5. Модальные окна
|
||
1. Откройте модальное окно новости
|
||
2. Попробуйте добавить комментарий
|
||
3. ✅ **Ожидается:** Расширение от 1 до 6 строк
|
||
|
||
## Что проверять
|
||
|
||
| Критерий | Ожидаемое поведение |
|
||
|----------|-------------------|
|
||
| **Начальная высота** | 1 строка (~38-40px) |
|
||
| **Максимальная высота** | 6 строк (144px) |
|
||
| **Поведение при вводе** | Плавное автоматическое расширение |
|
||
| **Скроллбар** | Появляется только после 6 строк |
|
||
| **Уменьшение высоты** | При удалении текста высота уменьшается |
|
||
| **Единообразие** | Все поля с `rows="1"` работают одинаково |
|
||
| **Визуальный стиль** | Нет отличий между новостями и заявлениями |
|
||
|
||
## Известные исключения
|
||
|
||
Следующие textarea **НЕ должны** автоматически расширяться:
|
||
- Модальные окна редактирования с `rows="3"` или `rows="4"`
|
||
- Поле создания новости с большим textarea
|
||
- Любые textarea без `rows="1"` и без класса `.composer-textarea`
|
||
|
||
## Проверка в DevTools
|
||
|
||
Откройте DevTools → Elements и проверьте textarea:
|
||
|
||
### ✅ Правильно (новости и заявления должны быть одинаковыми):
|
||
```html
|
||
<textarea class="form-control message-input"
|
||
rows="1"
|
||
data-auto-expand-init="true"
|
||
style="height: auto; height: 72px;">
|
||
```
|
||
|
||
**Проверки:**
|
||
- `rows="1"` ✅
|
||
- `data-auto-expand-init="true"` ✅ (добавлен модулем)
|
||
- `style="height: XXpx"` ✅ (динамически изменяется)
|
||
- Нет `min-height`, `max-height` в computed styles ❌ (должны отсутствовать!)
|
||
|
||
### ❌ Неправильно (если видите):
|
||
```css
|
||
/* В Computed Styles не должно быть: */
|
||
min-height: 44px; /* ❌ ПЛОХО */
|
||
max-height: 260px; /* ❌ ПЛОХО */
|
||
resize: vertical; /* ❌ ПЛОХО */
|
||
```
|
||
|
||
## Быстрый визуальный тест
|
||
|
||
1. Откройте новость → введите 5 строк текста → запомните высоту
|
||
2. Откройте заявку → введите 5 строк текста → сравните высоту
|
||
3. ✅ **Должны быть ИДЕНТИЧНЫ!**
|
||
|
||
## Если что-то пошло не так
|
||
|
||
1. Очистите кеш браузера (Ctrl+Shift+Delete)
|
||
2. Проверьте, что собрана статика: `python manage.py collectstatic`
|
||
3. Проверьте, что скомпилирован CSS: `cd backend/static && npm run build:css`
|
||
4. Перезагрузите страницу с Ctrl+F5
|
||
|
||
## Файлы для проверки
|
||
|
||
- ✅ `backend/static/js/components/textareaAutoExpand.js` - основной модуль
|
||
- ✅ `backend/static/scss/components/_message-inputs.scss` - стили без min/max height
|
||
- ✅ `backend/static/css/components/request-list.css` - удалены специфичные стили
|
||
- ✅ `backend/static/css/bootstrap-custom.css` - скомпилированный CSS
|
||
|
||
---
|
||
|
||
**Дата создания:** 29.11.2025
|
||
**Версия:** 1.0
|