Недавнее обновление сломало верхнюю панель навигации

Поддержка
1

Некоторое недавнее обновление сломало мою верхнюю панель навигации — точнее, панель загружается (она видна долю секунды), но затем стандартный заголовок Discourse перекрывает её и скрывает.

Я пытаюсь понять, что именно произошло и/или как это исправить. Не мог бы кто-нибудь подсказать мне направление?

Проверив страницу в браузере, я выяснил, что установка

.d-header-wrap {
    margin-top: 48px;
}

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

Но я не уверен, является ли это устойчивым способом исправления, и мне также всё ещё интересно узнать, что именно произошло.

Мне также пришлось удалить

#main-outlet { margin-top: 48px; padding-top: 75px;}

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

Я также удалил кое-что ещё, например,

#main-outlet.docked {
    margin-top: 0px;
    padding-top: 123px
}

потому что это, казалось, не имело никакого эффекта.

Редактирование: вышеизложенное верно для CSS на компьютере. На мобильном устройстве мне не нужно было увеличивать значение Z для панели навигации.

2

Заголовок изменился с position: fixed на position: sticky (REFACTOR: Remove position fixed from the header and use sticky instea… · discourse/discourse@da5841d · GitHub) — это одно из обновлений, которые мы смогли внести после отказа от поддержки IE11.

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

Когда изменение было внесено изначально, в CSS по умолчанию на мобильных устройствах был дополнительный отступ, но это было исправлено через день или два… Я предполагаю, что вы обновились в день между первоначальным изменением и исправлением; если вы обновитесь снова, проблема исчезнет (в качестве альтернативы вы можете добавить .mobile-view #main-outlet { padding-top: 0.25em; }, если не хотите обновляться снова).

Ваше исправление с .d-header-wrap, на мой взгляд, устойчивое.

3

См. также Header Submenus - #103 by Mark_Schmucker. Не уверен, применимо ли предложенное устойчивое решение к этому, но, по-моему, они связаны с одним и тем же изменением.

4

Я только что обновился до последней версии (2.8.0.beta4) после нескольких месяцев бездействия, и оказалось, что моё исправление не было таким уж устойчивым (или, возможно, текущая проблема не связана с этим исправлением). Сейчас я пытаюсь разобраться, что произошло, и обновлю информацию здесь, как только узнаю больше. Но если у кого-то из вас это вызовет ассоциации, пожалуйста, дайте знать.

В общем, ситуация произошла так же, как описано в первом посте, но на этот раз дело не в том, что заголовок Discourse перекрывает верхнюю панель навигации а в том, что верхняя панель навигации перекрывает заголовок Discourse . (редактура: теперь я считаю, что заголовок не перекрывается, а вообще не отображается). Когда я отключаю тему по умолчанию через безопасный режим, всё отображается корректно.

Странно, однако, что при переходе по адресу /admin/customize/themes/11/desktop/scss/edit и заголовок Discourse, и верхняя панель навигации отображаются правильно (как в безопасном режиме, так и в обычном). Я полагаю, что причина отсутствия различий между безопасным и обычным режимами на странице темы заключается в том, что безопасный режим не применяется к некоторым страницам администратора. Но то, что мне непонятно, — почему на страницах администратора всё отображается правильно, а в остальных случаях — нет.

Ещё одна вещь, которую я не понимаю: когда я захожу на сайт с мобильного устройства, всё отображается корректно, даже если я явно запрашиваю десктопную версию…

Я продолжу расследование, но буду признателен за любые подсказки.

Редактура: вот что я вижу при проверке открытой страницы (в обычном режиме):

image
image1368×384 32.9 KB

А вот что я вижу при проверке страницы администратора (в обычном режиме):

image
image1394×380 32.9 KB

Как вы видите, моё CSS-исправление присутствует в обоих случаях, но корректно страница отображается только во втором…

5

Хорошо, я думаю, что исправил это. Исчезновение заголовка не было связано с моим исправлением, а было вызвано этим компонентом темы:

Его удаление решило проблему. Возможно, @Johani понимает, что вызывает это? Может быть, это связано с

Дополнительным управлением iframe в однобоксах

введённым в Discourse Version 2.6 - #2 by neil?