Похоже, что оба компонента перестраивают div .contents в заголовке.
Структура с макетом на всю ширину:

Структура с header-search:

Поэтому я не могу использовать их вместе. Но не уверен, где лучше всего это исправить?
Похоже, что оба компонента перестраивают div .contents в заголовке.
Структура с макетом на всю ширину:

Структура с header-search:

Поэтому я не могу использовать их вместе. Но не уверен, где лучше всего это исправить?
На прошлой неделе я столкнулся с этой же проблемой с этими двумя компонентами… Это немного сложно, потому что я планировал компонент на всю ширину как временный эксперимент, но в дорожной карте у нас ничего нет для его интеграции по умолчанию, поэтому он остаётся дольше, чем я ожидал.
Компонент на всю ширину не идеален, так как требует изменения шаблона заголовка (это единственный способ, которым я смог преодолеть некоторые проблемы с макетом).
На первый взгляд… я не думаю, что переопределение шаблона в компоненте поиска в заголовке необходимо, поэтому я могу посмотреть на перенос этого в декоратор виджета, что позволит избежать проблемы.
В качестве временного решения я не менял виджет содержимого заголовка в компоненте на всю ширину. Таким образом, переключатель боковой панели и заголовок не сгруппированы под __toggle-and-logo. А затем просто разместил оба элемента в сеточной области toggle. Пока проблем с макетом не заметил, но, возможно, что-то упустил?
Думаю, он очень популярен. У меня три текущих проекта по кастомизации, и все выбрали вариант на всю ширину. Именно поэтому я и написал об этом: я бы предпочёл не править официальные компоненты ради реализации того, что, судя по всему, стало распространённым выбором.
Если я правильно помню, дополнительный обертка упрощает выравнивание заголовка с содержимым темы, поскольку я могу установить ширину .header-contents__toggle-and-logo равной var(--d-sidebar-width), и она всегда совпадает с шириной боковой панели, независимо от содержимого.
Без дополнительной обертки макет работоспособен… но при использовании двух колонок сетки я не могу полагаться на единую ширину для обеих.
Мне нужно исходить из того, что переключатель боковой панели всегда имеет фиксированную ширину, а затем вычислять максимальную ширину логотипа на её основе. Это работает, но, насколько я помню, такой подход менее надёжен… Я давно не рассматривал эту задачу, но, возможно, стоит попробовать ещё раз ![]()
Возвращаюсь к этому вопросу… Теперь я понимаю, почему было использовано переопределение. Без него приходится декорировать виджеты заголовка или иконок, что приводит к добавлению содержимого внутрь .title или .panel. Это усложняет центрирование строки поиска… и требует CSS-правки, которые делают макет менее надёжным и усложняют совместимость с другими компонентами заголовка. В идеале содержимое строки поиска должно находиться вне этих div-элементов, но нет точек подключения для этого.
Теперь мы можем добавлять точки подключения плагинов в виджеты, что может помочь…
Это позволит добавлять содержимое перед div-элементом .panel, а не внутрь него через decorateWidget. В этом случае переопределение шаблона можно будет убрать из компонента header-search и добавить новый коннектор к:
javascripts/discourse/connectors/before-header-panel
который будет содержать
<MountWidget @widget="search-banner" />
Однако добавление точки подключения плагина в виджет, чтобы затем добавить виджет в эту точку подключения, кажется немного запутанным… @david/@cvx, знаете ли вы, может ли это негативно сказаться на производительности или вызвать какие-либо другие проблемы?
Кстати, вот что я попробовал в качестве исправления для компонента на всю ширину: https://github.com/discourse/discourse-full-width-component/compare/main...nolosb:discourse-full-width-component:header-contents
А именно:
Однако я заметил, что логотип заголовка снова переключается на маленький, когда в заголовке отображаются названия тем. Это также происходит здесь на Meta в макете на всю ширину. Я не совсем понимаю, какие аргументы шаблона использовать здесь, чтобы всегда отображать полный логотип.
Ах, понятно, вы разместили их оба в одной области сетки и добавили отступ к логотипу… это выглядит как разумный компромисс!
Вот почему home-logo здесь снова открыт:
Если боковая панель не отображается, используется логика логотипа по умолчанию для переключения между большим/маленьким… если боковая панель отображается, он всегда возвращает большой логотип.
Это может быть немного медленнее, но в данном случае я не слишком беспокоюсь, так как на странице есть только один экземпляр выхода плагина (в отличие, например, от выхода плагина элемента списка тем, который будет отображаться 25+ раз).
Добавление выхода там звучит отлично ![]()
Окей, я обновил оба компонента, чтобы избежать переопределения шаблонов —
Теперь они должны работать вместе
спасибо за предложения, @manuel!