Застрял в режиме рабочего стола на мобильном из-за длинного логотипа

Поддержка
1

Это может считаться ошибкой, но я не уверен.

У меня есть пользователь, который застрял в десктопном режиме на мобильном устройстве (кто знает, почему он включил десктопный вид), потому что гамбургер-меню вылезает за пределы экрана из-за нашего длинного логотипа. Я не могу воспроизвести это в мета-режиме, так как логотип помещается корректно даже в десктопном виде.

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

Я пробовал отключать все компоненты темы и плагины, но проблема всё ещё воспроизводится.

image
image1104×1574 287 KB

2

Можно добавить ссылку Nature Photographers Network в выпадающее меню «Сообщество» (чтобы вернуться к мобильному виду).

Можно убрать опцию «десктопный вид» из меню-гамбургера с помощью компонента темы.

Интересно, поможет ли решение текущей проблемы удаление форума из приложения Discourse с последующим его восстановлением.

3

Да, я согласен, это требует исправления в ядре. Я думаю, что лучшим решением будет установить максимальную ширину для логотипа на небольших размерах окна (менее 768 пикселей) в макете для рабочего стола.

Также самый простой способ воспроизвести эту проблему — использовать режим адаптивного дизайна в вашем браузере, но НЕ использовать пользовательский агент мобильного устройства. Это загрузит сайт для рабочего стола, после чего вы сможете уменьшить размер окна до малых значений. (Пример ниже из Safari.)

image
image1580×2012 324 KB

4

Спасибо, Пена, это дало мне идею заменить логотип в десктопном виде при ширине менее 768 пикселей на мобильный логотип. Что-то подобное, вероятно, должно быть в ядре. Спасибо!

@media only screen and (max-width: 768px) {
  body {
    .d-header #site-logo {
       content:url("https://images.naturephotographers.network/original/2X/4/45d1b54bc00a5a737fae7dfe3d79b8d8dfd71729.png");
    }
  }
}