Come posso cambiare l'ordine dei pulsanti nell'intestazione?

Contribuisci UX
1

Ciao a tutti, vorrei ridisegnare completamente l’intestazione di Discourse.
Il designer della nostra azienda mi ha preparato una bozza di questo design, ma con l’aiuto del CSS non sono riuscito a realizzarlo appieno.

Tuttavia, ho riscontrato un problema nel spostare il pulsante del profilo all’inizio. Ho cercato tra le risorse e ho trovato qualcosa relativo a \app\assets\javascripts\discourse\app\widgets\header.js.
Grazie a questo aiuto sono riuscito a rimuovere le icone dalla produzione e a fare un po’ di più: [Solved] How to use virtual-dom's "h" helper in <head> for header-dropdown hamburger widget override? + How to override @computed method?

Tuttavia, non sono riuscito a spostare il pulsante.
Il forum ora appare così:

Screenshot_2
Screenshot_2325×100 2.11 KB

Mentre serve questo: (spostare il pulsante account e cambiare l’icona)
Screenshot_1
Screenshot_1424×108 5.96 KB

Dove devo scavare per fare questo:

2 Mi Piace
2

Puoi fare qualcosa del genere con il CSS:

.d-header-icons { 
  display: flex;
}

.header-dropdown-toggle.current-user { 
  order: 1; 
}
.header-dropdown-toggle.search-dropdown { 
  order: 2; 
}
.header-dropdown-toggle.hamburger-dropdown { 
  order: 3; 
}
5 Mi Piace
Quick Messages Plugin
3

Grazie, molto bene.

Modificandolo un po’ mi ha aiutato

2 Mi Piace
4

Questo argomento è stato automaticamente chiuso due giorni dopo l’ultima risposta. Non sono più consentite nuove risposte.