Пожалуйста, поделитесь вашим CSS! Это облегчит исправление TC.
Вот довольно хакерский способ сделать это (в common/css, а НЕ в /mobile/css)
@use "lib/viewport";
@include viewport.until(md) {
.d-header:not(:has(.extra-info-wrapper.topic-info-visible)):not(:has(.extra-info-wrapper .topic-link)):not(.header-topic-info-visible) .title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
}
2 лайка
Приношу извинения, я пока не успел довести этот компонент до актуального состояния, но да, отказ от представлений для мобильных устройств и настольных компьютеров действительно нарушил некоторые предположения, заложенные в исходном компоненте темы.
@Lilly спасибо за подталкивание к решению этой проблемы; на время достаточно будет использовать position: absolute… здесь же перестановка элементов в компоненте реализована просто с помощью CSS Grid.
2 лайка
Всем привет, просто обновляю информацию: Лилли проделала большую работу по приведению этого в порядок и актуализации — я только что объединил её изменения, так что теперь всё должно быть готово к запуску.
4 лайка
Привет, @featheredtoast, у меня есть PR, который исправляет проблему с заголовком в теме Horizon для размеров области просмотра складных телефонов и некоторых планшетов.
Буду рад, если ты взглянешь и объединишь его:
4 лайка
выглядит отлично — давай попробуем, спасибо, @Lilly !
2 лайка
Когда я прокручиваю тему вверх, чтобы заголовок изменился (показывая название темы и категории), в новом заголовке нет иконки «гамбургер». Наличие иконки «гамбургер» слева означает, что иконка форума меняет своё положение. Интересно, можно ли добавить опцию, чтобы иконка «гамбургер» находилась справа от иконки форума. Это означало бы, что иконка форума остаётся на одном месте для обоих типов заголовков. Спасибо.
P.S. Я только что заметил, что на десктопе без компонента темы иконка «гамбургер» остаётся там всё время. Возможно, это тоже можно сделать опцией для мобильных устройств.
лично я не в пользу этого изменения (возможно, @featheredtoast думает иначе), но если вам это нужно, вы можете просто добавить этот CSS в другой компонент темы на вашем форуме, чтобы переопределить порядок элементов.
.d-header {
display: grid;
grid-template-areas: 'logo left-menu custom-header-icon-link-1 custom-header-icon-link-2 custom-header-icon-link-3 custom-header-icon-link-4 custom-header-icon-link-5 extra-info chat header-buttons search right-menu'!important;
}
результат:
иконка «гамбургера» не должна отображаться в прокручиваемой шапке на мобильных устройствах, чтобы максимизировать пространство шапки для длинных названий тем
4 лайка
Я разделяю мнение @Lilly, цель заключалась в том, чтобы гамбургер-меню слева ощущалось как в других приложениях… Я не оптимизировал переход, так как стандартный интерфейс уже обеспечивал это.
Когда элементы выстраиваются в сетку, как она показала, легко обновить позиции всех элементов с минимальным вмешательством в базовый компонент темы.
Готов принять pull request, если будет достаточно запросов, но это первое, что я слышу о подобном требовании на данный момент.
4 лайка
Действительно?
На десктопе никакого «прыжка» нет (по моим воспоминаниям), так как гамбургер-меню всегда остается слева от значка форума.
На мобильной версии тоже нет прыжка, поскольку всё, кроме значка форума, заменяется.
1 лайк
Я начал использовать ваш компонент темы (спасибо, что поделились!) и просто отключил основную иконку на мобильных устройствах, чтобы сделать это совместимым с нашей философией UI/UX — сохранять всё максимально чистым.
1 лайк