Исправление скролла в Multi View режиме и проблемы с wrap text

- Универсальное исправление скролла для всех контейнеров в Multi View режиме
- Более специфичные CSS селекторы для предотвращения влияния на другие элементы
- Исправление проблемы с wrap text в options
- Добавление вызовов applyWrapSettings() в ключевых местах
- Обновление документации с описанием всех исправлений
- Добавление CHANGELOG.md и SCROLL_FIX_SUMMARY.md
- Добавление документации в app/docs/
This commit is contained in:
2025-08-18 17:03:46 +03:00
parent 36569c79f0
commit 7cd7ba0653
7 changed files with 756 additions and 63 deletions

47
app/docs/README.md Normal file
View File

@@ -0,0 +1,47 @@
# Документация LogBoard+
## Обзор
LogBoard+ - это веб-приложение для мониторинга логов Docker контейнеров в реальном времени с поддержкой Single View и Multi View режимов.
## Основные функции
### Просмотр логов
- **Single View**: просмотр логов одного контейнера
- **Multi View**: одновременный просмотр логов нескольких контейнеров
- Фильтрация по уровням логирования (DEBUG, INFO, WARN, ERROR)
- Поиск по регулярным выражениям
- Автопрокрутка и перенос строк
### Горячие клавиши
- `Ctrl+R` / `Ctrl+K` - обновление логов
- `[` `]` - навигация между контейнерами
- `Ctrl+B` - сворачивание/разворачивание панели
### Управление интерфейсом
- Сворачивание sidebar для экономии места
- Переключение тем (светлая/темная)
- Настройка количества отображаемых строк
- Экспорт логов в файл
## Документация
- [Горячие клавиши](hotkeys.md) - подробное описание всех горячих клавиш
- [Новые функции интерфейса](features.md) - описание сворачивания панелей и других функций
- [API документация](../api/README.md) - описание API endpoints
- [Разработка](../dev/README.md) - руководство для разработчиков
## Технологии
- **Backend**: Python, FastAPI, WebSocket
- **Frontend**: HTML5, CSS3, JavaScript (Vanilla)
- **База данных**: PostgreSQL с asyncpg
- **Контейнеризация**: Docker, Docker Compose
## Автор
Сергей Антропов - https://devops.org.ru
## Лицензия
MIT License

77
app/docs/features.md Normal file
View File

@@ -0,0 +1,77 @@
# Новые функции интерфейса LogBoard+
## Сворачивание панелей
### Sidebar (боковая панель)
- **Кнопка сворачивания**: <i class="fas fa-chevron-left"></i> на границе sidebar и основного контента
- **Горячая клавиша**: `Ctrl+B` / `Ctrl+И`
- **Свернутое состояние**: ширина 60px
- **Логотип**: показывает <i class="fas fa-terminal"></i> в свернутом состоянии
- **Кнопка помощи**: <i class="fas fa-question-circle"></i> между options и logout
## Управление
### Кнопка сворачивания
- **Кнопка на границе**: сворачивает боковую панель
- **Расположение**: посередине экрана по высоте на границе sidebar и основного контента
- **Состояние сохраняется** в localStorage
### Горячая клавиша
- **Ctrl+B** / **Ctrl+И**: сворачивает/разворачивает sidebar и header
- Удобно для быстрого освобождения места на экране
### Header (заголовок)
- **Сворачивается вместе с sidebar**
- **В свернутом состоянии**: тонкая полоска 40px высотой
- **Содержит**: фильтр логов, кнопки уровней логирования, кнопку обновления
- **Стили**: кнопки выглядят точно так же, как в развернутом состоянии
- **log-header**: полностью скрывается в свернутом режиме
- **log-content**: минимальный padding 2px в свернутом состоянии
- **multi-view-panel**: показывает название контейнера в Single View режиме
## Визуальные элементы
### Логотип в свернутом sidebar
```
<i class="fas fa-terminal"></i>
```
- Отображается только когда sidebar свернут
- Расположен в самом верху sidebar
- Стилизован в цвете акцента
- Занимает минимальное место
### Модальное окно с горячими клавишами
- **Открытие**: кнопка <i class="fas fa-question-circle"></i> в свернутом sidebar
- **Закрытие**: кнопка X, клик вне окна, или повторный клик на кнопку помощи
- **Содержит**: полный список всех горячих клавиш с описанием
- **Анимация**: плавное появление и исчезновение
### Анимации
- Плавные переходы при сворачивании/разворачивании
- Длительность анимации: 0.3 секунды
- CSS transitions для всех элементов
- Кнопка сворачивания остается на месте при наведении
## Сохранение настроек
### localStorage ключи
- `lb_sidebar_collapsed` - состояние sidebar
- `lb_hotkeys_shown` - показ уведомления о горячих клавишах
### Восстановление состояния
- При перезапуске приложения состояния восстанавливаются
- Кнопки показывают правильные иконки
- Tooltip обновляется в соответствии с состоянием
## Примеры использования
### Освобождение места
1. Нажать `Ctrl+B` или кнопку sidebar - сворачивается панель
2. Получаем больше места для просмотра логов
### Быстрое переключение
1. Использовать `Ctrl+B` для быстрого переключения
2. Использовать кнопку на границе для точного управления
## Автор
Сергей Антропов - https://devops.org.ru

66
app/docs/hotkeys.md Normal file
View File

@@ -0,0 +1,66 @@
# Горячие клавиши LogBoard+
## Обновление логов
### Ctrl+R
Обновляет логи в текущем режиме просмотра:
- **Single View**: переподключается к WebSocket и получает свежие логи
- **Multi View**: переподключается ко всем выбранным контейнерам
### Ctrl+K
Альтернативная комбинация для обновления логов (аналогично Ctrl+R)
## Навигация
### [ (квадратная скобка)
Переход к предыдущему контейнеру в списке
### ] (квадратная скобка)
Переход к следующему контейнеру в списке
### Ctrl+← (стрелка влево)
Альтернативная комбинация для перехода к предыдущему контейнеру
### Ctrl+→ (стрелка вправо)
Альтернативная комбинация для перехода к следующему контейнеру
## Управление интерфейсом
### Ctrl+B
Сворачивание/разворачивание sidebar панели:
- Сворачивает sidebar до минимальной ширины (60px)
- Скрывает все элементы управления и список контейнеров
- Показывает логотип LogBoard+ в свернутом sidebar
- Состояние сохраняется в localStorage
### Кнопка сворачивания
- **Кнопка на границе** (<i class="fas fa-chevron-left"></i>) - сворачивание sidebar
- Расположена посередине экрана по высоте на границе sidebar и основного контента
- Состояние сохраняется в localStorage
## Особенности
### Проверка фокуса
Горячие клавиши не работают, когда фокус находится в полях ввода:
- Поле фильтра логов
- Поле добавления исключенных контейнеров
- Любые другие input/textarea элементы
### Визуальные подсказки
- Иконка клавиатуры в заголовке с подсказкой о горячих клавишах
- Уведомление о горячих клавишах при первом запуске
- Tooltip на кнопке сворачивания sidebar
### Сохранение настроек
- Состояние sidebar (свернут/развернут) сохраняется в localStorage
- При следующем запуске приложения состояние восстанавливается
## Примеры использования
1. **Быстрое обновление логов**: `Ctrl+R` для получения свежих данных
2. **Навигация по контейнерам**: `[` `]` для переключения между сервисами
3. **Освобождение места на экране**: `Ctrl+B` для сворачивания панели
4. **Работа в Multi View**: `Ctrl+R` обновляет все выбранные контейнеры одновременно
## Автор
Сергей Антропов - https://devops.org.ru