ADAMANT Explorer: обновление интерфейса для мобильных устройств и экранов малого размера

В ADAMANT Explorer завершена работа по оптимизации отображения на мобильных устройствах и экранах малого размера. Теперь плотные данные блокчейна — таблицы, адреса, мониторы, карта узлов и сетевой график — остаются читаемыми и удобными для использования на смартфонах и в узких окнах браузера после редизайна на Vue. Изменения были объединены в ветку dev в репозитории Adamant-im/adamant-explorer#42, что позволило закрыть задачи по мобильному UX, устранить избыточные уведомления WebSocket о подтверждении блоков, а также исправить проблему с автоматическим масштабированием при фокусировке в iOS.

Изменения в интерфейсе

Универсальный поиск перемещен из свернутого меню в верхнюю панель между логотипом и переключателем меню; на малых экранах он компактно сжимается, в то время как сетевая панель сохраняет удобный индикатор состояния. На главной странице громоздкие таблицы заменены на карточки операций. Страницы блоков, транзакций и адресов теперь используют компактные таблицы с горизонтальной прокруткой на мобильных устройствах; список блоков дополнен столбцом количества транзакций (TXS), а на странице транзакции скрыта дублирующая строка реестра. Монитор делегатов, сетевой монитор узлов, список топовых аккаунтов и зарезервированные кошельки теперь используют карточный стиль .table-mobile, мобильные элементы управления сортировкой и улучшенную поддержку ARIA. Пользовательские подсказки (tooltips) теперь скрываются при касании, что исключает их «залипание» на сенсорных устройствах, а поле поиска больше не вызывает нежелательное масштабирование и прокрутку в Safari при фокусировке.

Технические примечания

Макет основан на двух структурных контрольных точках. При ширине <=720px таблицы данных преобразуются в карточки или компактные таблицы с прокруткой; при ширине <=420px карточки перестраиваются вертикально. Макеты для десктопов и планшетов при ширине более 720px остались без изменений.

Каждая строка на главной странице представляет собой CSS-grid карточку. При ширине <=720px маршрут отображается в одну строку: отправитель -> получатель сумма открыть; при <=420px элементы перестраиваются с центрированной стрелкой вниз, суммой рядом и центрированными данными отправителя и получателя. Навигация и подсказки привязаны только к явному элементу управления, а не ко всей карточке целиком.

Списки транзакций в блоках и на страницах адресов остаются полноценными таблицами на мобильных устройствах — они поддерживают горизонтальную прокрутку внутри контейнера с фиксированным набором компактных столбцов (Тип, ID, Отправитель, Получатель, Сумма; плюс Дата на странице адреса) без кнопок копирования в каждой строке. В мобильной версии списка блоков сортировка отключена.

Исправлена ошибка переноса сводных значений: адреса и ID транзакций могли разрываться, оставляя один символ на новой строке даже при наличии свободного места. Причиной был flex-элемент с min-width: 0 и overflow-wrap: anywhere, который сжимался до минимального размера в 1 символ, из-за чего ширина кнопки копирования вынуждала перенос. Теперь значение расширяется, заполняя ячейку (flex: 1), что позволяет адресам и ID транзакций оставаться в одну строку, в то время как публичные ключи по-прежнему корректно переносятся.

Единственная подсказка на уровне body теперь реагирует на указатель только в активном состоянии и скрывается при событии pointerdown, что гарантирует корректное закрытие на сенсорных экранах, где таймер автоскрытия не всегда надежен. В iOS Mobile Safari автоматически масштабирует сфокусированные поля ввода, если размер шрифта меньше 16px, что приводит к нежелательной прокрутке страницы; для поля поиска установлен шрифт 16px, при этом мета-тег viewport сохраняет возможность масштабирования пользователем для обеспечения доступности.

Подтверждение блоков через WebSocket

Компактные уведомления о блоках через WebSocket получают данные через REST API узла с одной ограниченной попыткой повтора на случай задержки видимости SQL между узлами (ошибка Block not found). Резервный механизм по высоте блока по-прежнему подтверждает объявленный ID и высоту блока. Первая неудачная попытка логируется на уровне debug, а предупреждение warn выводится только тогда, когда возможности подтверждения исчерпаны, что исключает лишние ошибки при штатной рассинхронизации узлов. Модульные тесты для узла покрывают пути повторных попыток, резервного подтверждения, валидации и логирования.

Валидация

Команды npm run lint, npm run format:check и npm run test:unit (225 тестов, включая гидратацию блоков WebSocket) проходят успешно. Проверка git diff --check не выявила проблем, макеты для десктопов и планшетов (выше 720px) остались без изменений, регрессии не обнаружено.