corp.e-leto.ru: мобильная адаптация

Дата: 2026-06-03

Статус: внедрено в генератор сайта и включается при каждой пересборке corp_site/public.

1. Задача

Сайт corp.e-leto.ru должен быть удобен не только на desktop, но и на телефоне:

не должно быть горизонтального сдвига всей страницы из-за фиксированной боковой панели;
навигация должна открываться отдельным мобильным меню;
таблицы и широкие блоки должны прокручиваться внутри себя;
текст должен оставаться читаемым без масштабирования страницы пальцами;
ссылки разделов и документов должны сохранять стабильный формат.

2. Что изменено

В corp_site/build_corp_site.mjs добавлены:

кнопка мобильного меню Меню;
затемнение страницы при открытом меню;
выезжающая боковая навигация для экранов до 980px;
закрытие меню по затемнению, клавише Escape и переходу по ссылке;
адаптивная ширина контента;
уменьшенные отступы и размеры заголовков на малых экранах;
горизонтальная прокрутка для таблиц;
одноколоночная раскладка карточек и разделов на телефоне.

3. Поведение на мобильном экране

На экранах до 980px:

боковое меню скрыто за левым краем экрана;
в левом верхнем углу появляется кнопка Меню;
при открытии меню появляется затемняющий слой;
основной контент занимает всю ширину экрана;
верхняя строка остается доступной, но ссылка на скачивание скрывается, чтобы не забивать экран;
таблицы получают внутреннюю горизонтальную прокрутку.

На экранах до 520px:

отступы дополнительно уменьшаются;
заголовки становятся компактнее;
кнопка меню занимает меньше места;
поле поиска получает размер шрифта, удобный для мобильного ввода.

4. Проверка

Минимальная проверка после каждой пересборки:

Главная страница открывается с авторизацией user / user123.
В мобильной ширине видна кнопка Меню.
Боковая навигация открывается и закрывается.
Ссылки разделов ведут на /sections/sec-XX.html, без URL-encoded русских имен.
Таблицы не ломают ширину страницы.
Поиск остается доступным внутри мобильного меню.

Технические маркеры в сборке:

mobile-menu-toggle в HTML;
mobile-overlay в HTML;
@media(max-width:980px) в assets/site.css;
initMobileMenu в assets/search.js.

5. Правило дальнейшей разработки

Любое новое представление, раздел, таблица, карточка или схема на сайте должны проверяться на мобильной ширине. Если материал слишком широкий, он должен:

либо адаптироваться в одну колонку;
либо получать внутреннюю горизонтальную прокрутку;
либо выноситься в отдельный PDF/изображение с понятной ссылкой.

Нельзя добавлять в сайт материалы, которые требуют от пользователя вручную масштабировать всю страницу, чтобы прочитать базовый текст.