Sergey Antropoff 749b40a494 feat: улучшения UI/UX LogBoard+

- Добавлена кнопка Update для управления AJAX auto-update
- AJAX auto-update включен по умолчанию
- Улучшено управление видимостью кнопки Refresh
- Переупорядочены кнопки в header (Update, Refresh)
- Унифицированы стили кнопок (высота, шрифт, границы)
- Добавлен hover эффект для кнопки options с цветом warning
- Позиционирование help-btn в свернутом sidebar
- Уменьшена ширина свернутого sidebar на 30%
- Добавлена логика разворачивания sidebar при клике на options
- Отображение внешнего порта в статусе контейнера
- Показ 'standalone' для контейнеров без проекта
- Обновлена документация

Автор: Сергей Антропов
Сайт: https://devops.org.ru

2025-08-18 20:32:46 +03:00

3.2 KiB

Raw Blame History

Добавление Border и Box-shadow к кнопке Refresh

Описание изменений

Добавлены border и box-shadow к кнопке refresh в header для полного соответствия стилям кнопки update.

Изменения стилей

До изменений:

.log-refresh-btn {
  border: none;             /* Без границы */
  /* нет box-shadow */
}

После изменений:

.log-refresh-btn {
  border: 1px solid var(--accent); /* Граница как у update */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Тень как у update */
}

Сравнение кнопок

Кнопка Update:

.ajax-update-btn {
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Кнопка Refresh (после изменений):

.log-refresh-btn {
  border: 1px solid var(--accent); /* ✅ Совпадает по стилю */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* ✅ Совпадает */
}

Визуальные улучшения

Полное единообразие:

Одинаковая граница - 1px solid для обеих кнопок
Одинаковая тень - box-shadow для обеих кнопок
Одинаковая высота - обе кнопки имеют одинаковую высоту
Одинаковая ширина - минимальная ширина 60px для обеих кнопок
Одинаковый размер шрифта - 11px для обеих кнопок
Одинаковые отступы - 6px 12px для обеих кнопок

Преимущества:

Визуальная согласованность - кнопки выглядят как единый набор элементов управления
Профессиональный вид - границы и тени придают кнопкам более современный вид
Улучшенная читаемость - тени помогают выделить кнопки на фоне

Технические детали

Добавленные CSS свойства:

border: 1px solid var(--accent) - граница в цвет акцента
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) - легкая тень

Особенности реализации:

Цвет границы - используется var(--accent) вместо var(--border) для лучшего соответствия цвету кнопки
Тень - идентична тени кнопки update для полного соответствия
Совместимость - работает в обеих темах (светлая/темная)

Совместимость

Изменения стилей не влияют на:

Функциональность кнопки
JavaScript обработчики
Логику показа/скрытия
Поведение в разных темах (светлая/темная)

Автор

Сергей Антропов
Сайт: https://devops.org.ru

Дата реализации

2024 год

3.2 KiB Raw Blame History Unescape Escape