Dichiarazioni contrastanti su due componenti: layout a larghezza intera e ricerca nell'intestazione

Sembra che entrambi i componenti riorganizzino la div .contents nell’header.
La struttura con il layout a larghezza intera:
image

Struttura con header-search:
image

Quindi non posso usarli insieme. Ma non sono sicuro di dove sia meglio risolvere questo problema?

3 Mi Piace

Ho riscontrato esattamente questo problema la settimana scorsa con questi due componenti… è un po’ complicato perché intendevo che il componente a larghezza intera fosse un esperimento temporaneo, ma non abbiamo nulla in programma per integrarlo di default, quindi rimarrà più a lungo del previsto.

Il componente a larghezza intera non è l’ideale perché richiede la modifica del template dell’header (l’unico modo in cui ho potuto superare alcuni problemi di layout).

A prima vista… non credo che l’override del template nel componente di ricerca dell’header sia necessario, quindi posso dare un’occhiata a spostarlo in un decoratore di widget, il che eviterebbe il problema.

4 Mi Piace

Quello che ho provato come soluzione temporanea è non cambiare il widget header-contents sul componente a larghezza intera. Quindi il sidebar-toggle e il titolo non sono raggruppati sotto __toggle-and-logo. E poi organizzo entrambi nell’area della griglia del toggle. Finora non ho riscontrato problemi di layout. Ma probabilmente mi sfugge qualcosa?

Penso che sia molto popolare. Ho tre progetti di personalizzazione attuali e tutti hanno optato per la larghezza intera. Ecco perché ho pubblicato questo, preferirei non modificare i componenti ufficiali per ottenere quella che sembra essere una scelta comune.

2 Mi Piace

Se não me engano, o wrapper extra facilita o alinhamento do título com o conteúdo do tópico, pois posso definir a largura combinada de .header-contents__toggle-and-logo como var(--d-sidebar-width), e ela terá a mesma largura da barra lateral, independentemente do conteúdo.

Sem o wrapper extra, o layout é funcional… mas com duas colunas de grade, não posso confiar em uma única largura para ambas.

Preciso assumir que o alternador da barra lateral terá sempre uma largura estática e, em seguida, calcular a largura máxima do logotipo com base nisso. Isso funciona, mas me lembro de ser mais frágil… Não olho isso há algum tempo, mas talvez valha a pena tentar novamente :thinking:

Voltando a isso… consigo ver por que foi feito com um override. Sem ele, você tem que decorar o widget de título ou ícones do cabeçalho, então acaba adicionando conteúdo dentro de .title ou .panel, o que torna o alinhamento central da barra de pesquisa mais difícil… e requer algum CSS que torna o layout mais frágil e a compatibilidade com outros componentes do cabeçalho mais difícil. Idealmente, o conteúdo da barra de pesquisa deveria estar fora dessas divs, mas não há nada para se conectar para fazer isso.

Agora podemos adicionar um plugin outlet aos widgets, o que pode ajudar…

Isso permitiria que o conteúdo fosse adicionado antes da div .panel, em vez de dentro dela com decorateWidget. Neste caso, o override do template poderia ser removido do componente header-search, e um novo conector pode ser adicionado a:

javascripts/discourse/connectors/before-header-panel

que poderia conter

<MountWidget @widget="search-banner" />

Adicionar um plugin outlet a um widget para que possamos adicionar um widget a um plugin outlet parece um pouco complicado, no entanto… @david/@cvx vocês sabem se isso seria ruim para o desempenho ou causaria outros problemas?

1 Mi Piace

Comunque, ecco cosa ho provato come soluzione sul componente a larghezza intera: https://github.com/discourse/discourse-full-width-component/compare/main...nolosb:discourse-full-width-component:header-contents

Cioè:

  • usa il layout del template predefinito senza div di wrapping aggiuntivi attorno al toggle e al logo del titolo
  • abbina gli elementi alle aree della griglia

Tuttavia, vedo che il logo del titolo torna al logo piccolo quando i titoli degli argomenti vengono mostrati nell’intestazione. Questo accade anche qui su meta nel layout a larghezza intera. Non capisco bene quali argomenti del template usare qui per mostrare sempre il logo intero.

Oh capisco, li hai inseriti entrambi nella stessa area della griglia e applicato un margine al logo… sembra un compromesso ragionevole!

è per questo che home-logo viene riaperto qui:

Se la barra laterale non viene mostrata, utilizza la logica del logo predefinita per passare da grande/piccolo… se la barra laterale viene mostrata, restituisce sempre il logo grande.

1 Mi Piace

Potrebbe essere leggermente più lento, ma in questo caso non sono troppo preoccupato perché c’è solo un’istanza dell’uscita per plugin nella pagina (al contrario, ad esempio, di un’uscita per plugin topic-list-item che verrebbe renderizzata più di 25 volte).

Aggiungere un’uscita lì mi sembra un’ottima idea :white_check_mark:

1 Mi Piace

Ok, ho aggiornato entrambi i componenti per evitare sovrascritture di template —

Ora dovrebbero funzionare insieme :rocket: grazie per i suggerimenti @manuel!

3 Mi Piace