Condividi pure il tuo CSS! Ci aiuterebbe a risolvere più facilmente il problema del TC.
Ecco un modo piuttosto macchinoso per farlo (in common/css, NON in /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 Mi Piace
Scusa, non sono ancora riuscito a mantenere questo componente esattamente aggiornato, ma sì, l’abbandono delle visualizzazioni mobile/desktop ha sicuramente infranto alcune delle assunzioni su cui si basava il componente del tema originale.
@Lilly grazie per la spinta in avanti su questo; per il momento, position: absolute farebbe al caso nostro… la riordinazione degli elementi in questo componente si limita a implementare una semplice soluzione CSS Grid.
2 Mi Piace
Ciao a tutti, faccio solo un aggiornamento: Lilly ha svolto un bel po’ di lavoro per ripulire tutto e metterlo in linea con l’ultima versione. Ho appena unito le sue modifiche, quindi ora dovrebbe essere tutto pronto.
4 Mi Piace
Ciao @featheredtoast, ho aperto una PR qui per risolvere il problema dell’intestazione con il tema Horizon nelle dimensioni del viewport per i phone pieghevoli e alcuni tablet.
Ti lascio dare un’occhiata e fare il merge:
5 Mi Piace
Sembra buono - proviamolo, grazie @Lilly !
2 Mi Piace
Quando scorro verso l’alto all’interno di un argomento, in modo che l’intestazione cambi (per mostrare il nome dell’argomento e le categorie), la nuova intestazione non presenta l’icona hamburger. Con l’icona hamburger a sinistra, quando presente, significa che l’icona del forum cambia posizione. Mi chiedo se sarebbe possibile avere un’opzione per posizionare l’icona hamburger alla destra dell’icona del forum. Questo significherebbe che l’icona del forum rimarrebbe nella stessa posizione per entrambi i tipi di intestazione. Grazie.
P.S. Ho appena notato che su desktop, senza il componente del tema, l’icona hamburger rimane presente tutto il tempo. Forse questa potrebbe essere un’opzione anche per i dispositivi mobili.
personalmente, non sono a favore di questa modifica (forse @featheredtoast potrebbe pensarla diversamente) ma se ti serve, puoi semplicemente aggiungere questo CSS in un altro componente del tema sul tuo forum per sovrascrivere l’ordine degli elementi.
.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;
}
risultato:
l’icona hamburger non dovrebbe essere visualizzata nell’intestazione scorrevole su mobile, al fine di massimizzare lo spazio dell’intestazione per titoli degli argomenti più lunghi
5 Mi Piace
Condivido la stessa opinione di @Lilly qui: l’obiettivo era far sì che l’hamburger a sinistra sembrasse simile a quello di altre app… Il salto non è qualcosa su cui ho ottimizzato, dato che l’esperienza predefinita già lo faceva.
Una volta che è in griglia come ha mostrato lei, è facile aggiornare le posizioni di tutti gli elementi con un input minimo dal componente del tema di base qui.
Aperto alle PR se c’è abbastanza richiesta, ma questa è la prima volta che sento di una richiesta del genere al momento.
4 Mi Piace
Davvero?
Su desktop non c’è alcun “salto”, poiché (se ben ricordo) l’icona dell’hamburger rimane sempre a sinistra dell’icona del forum.
Su mobile non c’è salto neppure lì, poiché tutto tranne l’icona del forum viene sostituito.
1 Mi Piace
Ho iniziato a utilizzare il tuo componente tema (grazie per averlo condiviso!) e ho semplicemente disabilitato l’icona principale su mobile per renderlo compatibile con la nostra filosofia UI/UX, che mira a mantenere tutto il più pulito possibile.
1 Mi Piace
