Modernizzare il tema Foundation

Il team di progettazione sta apportando piccole ma significative modifiche/aggiustamenti al tema foundation per allinearsi un po’ di più agli standard web moderni. Per visualizzare queste modifiche in tempo reale su meta, unisciti a questo gruppo:

https://meta.discourse.org/g/modernized-foundation

Introdurremo questa modifica tramite la nuova funzionalità Upcoming Changes disponibile in Discourse. Ciò consentirà ai proprietari dei siti di abilitare le modifiche per qualsiasi gruppo specificato, al fine di testare il rilascio delle modifiche senza il timore di potenziali rotture di temi o personalizzazioni esistenti.

Cosa cambierà?

L’intestazione si restringe in altezza

Abbiamo ridotto le dimensioni dell’intestazione insieme ad alcune icone e avatar leggermente per ottimizzare lo spazio sullo schermo.

Pulsanti predefiniti

Stiamo passando da uno sfondo grigio predefinito del pulsante a uno sfondo trasparente / “secondario” con un bordo.

  • rimozione dello sfondo grigio
  • aggiunta di bordi
  • il colore dell’icona corrisponde al colore del testo
  • i pulsanti ora hanno un’altezza fissa

Pulsante Crea nuovo argomento nella pagina dell’elenco degli argomenti

Corrispondenza con Horizon e assegnazione di un colore di sfondo “CTA” di tertiary

Rimozione di molti sfondi grigi

Elenco argomenti

  • rimozione del bordo superiore spesso 3 px
  • diminuzione della dimensione del carattere dei dati dell’intestazione della tabella
  • colore coerente per gli elementi dei dati della tabella
  • modifica del valore del colore per leggere/non letto
  • leggero aumento del peso del carattere per i non letti

Categorie

  • allineamento a sinistra del testo
  • rimozione del bordo colorato spesso a sinistra
  • badge leggermente arrotondati
  • bordo più sottile sulla scatola

Barra di navigazione

  • Le pillole di navigazione nelle pagine dell’elenco degli argomenti avranno la stessa altezza dei pulsanti in questa zona
  • testo e colore dell’icona più scuri sul kit selezionato

Barra laterale

  • il colore dell’icona e del testo corrisponde
  • testo e icone più scuri
  • sfondo “attivo” più chiaro
  • peso del carattere attivo più marcato

Banner di benvenuto

  • spaziatura bilanciata
  • aggiunte variabili per un più facile allineamento a sinistra/destra/centro tramite personalizzazione
  • peso del carattere dell’intestazione diminuito
  • diminuzione della dimensione del carattere del sottotitolo

Calendario

  • sfondo grigio rimosso dai “pulsanti”
  • usa il grigio solo per indicare “attivo”
  • passaggio allo stile del pulsante “trasparente con bordo”

Menu a discesa

  • aggiunta di spaziatura al contenitore del menu a discesa
  • altezza, spaziatura, spazio ora corrispondono agli elementi della barra laterale
    • unificazione delle “liste cliccabili”
  • il bordo eredita la variabile --d-border-radius

Nuove Variabili

Alcune delle modifiche qui saranno introdotte tramite variabili aggiuntive aggiunte al core.

Allineamento del banner di benvenuto

L’allineamento del banner di benvenuto potrà ora essere modificato tramite:

// predefinito
  --welcome-banner-text-align: center;
  --welcome-banner-search-menu-margin-inline: auto;

// personalizzato
  --welcome-banner-text-align: left;
  --welcome-banner-search-menu-margin-inline: 0 auto;

Altezza del pulsante

Ora avremo un’altezza fissa del pulsante tramite:

// predefinito
  --button-height: var(--space-8);

Smussatura dei caratteri (Font smoothing)

Lo stiamo già facendo in Horizon, ha senso portarlo a foundation.

// nuovo predefinito
--webkit-font-smoothing: antialiased;
29 Mi Piace

il menu a discesa del pulsante “gist” ha una barra di scorrimento (forse overflow sulla classe fk-d-menu?), e probabilmente non necessita della stessa min-width: 200px delle altre classi dropdown-menu simili.

edit: lascia stare, è già stato risolto :smiley:

6 Mi Piace

Vedo il tema foundation moderno, ma perché ho ancora il vecchio layout delle categorie?

Penso che Meta non utilizzi “Caselle con sottocategorie” ma “Solo categorie” nelle impostazioni del sito Stile pagina categoria desktop.

1 Mi Piace

Ops, ho dato per scontato che gli screenshot fossero stati scattati su meta, ma non ho nemmeno pensato di verificarlo.


Comportamento piccolo ma strano. Sul tema normale, quando rilasciamo il pulsante del mouse su , attiva istantaneamente l’animazione di visualizzazione o chiusura della barra laterale.

Sul nuovo tema, quando rilasciamo il pulsante del mouse su quando la barra laterale è chiusa, c’è una frazione di secondo di attesa prima che venga attivata l’animazione di scorrimento. Non succede se clicchiamo sull’icona quando la barra laterale è visibile.


Posso lasciare il gruppo per confrontare le modifiche con il tema precedente? Non vedo l’opzione per uscire.

2 Mi Piace

oh sì, l’ho sistemato… ora dovresti essere in grado di uscire a piacimento

4 Mi Piace

Potreste per favore permettermi di lasciare il gruppo @modernized-foundation.
Modifica: Ora, dopo aver lasciato il gruppo, posso aggiungere uno screenshot di confronto del nuovo pulsante argomento.
image

Sembra che alcuni colori delle icone non funzionino bene con la palette wcag.
image

E, per esempio, il selettore di gruppo in alto a sinistra della pagina del gruppo non supporta bene 2 righe.

Ecco come appare quando effettuo il logout.

2 Mi Piace

Mi piacciono la maggior parte delle modifiche. Sono sottili. Alcune non vedo nemmeno la differenza a meno che non guardi i valori CSS :smile: (colori delle icone e del testo della barra laterale, colori di lettura e non letti dell’elenco degli argomenti)

Prima / Dopo
image image

Mi piace il pulsante “Nuovo argomento” enfatizzato. L’avevo personalizzato così sul mio forum molto tempo fa (finché il mio codice non si è rotto e non mi sono preoccupato di aggiustarlo).


Prima / Dopo


Mi piace anche questo; almeno sulla palette scura, il blu scuro su grigio scuro era un abbinamento strano.


Prima / Dopo

Sebbene mi piaccia il nuovo stile dei pulsanti, sento che mancano di contrasto con lo sfondo in alcune aree, specialmente nel piè di pagina dell’argomento.
Sembra disordinato. I pulsanti non sembrano appartenere a una sezione specifica, a differenza della versione precedente. Semplicemente… stanno lì. Non so se ha senso.

4 Mi Piace

Questo sembra funzionare sull’attività di lettura e argomenti su alcune dimensioni dello schermo

Ma una volta che riduco leggermente la larghezza, “Replies” e “activity” sembrano troppo grandi (Questo è anche un problema su /latest)

C’è un problema simile con “updated” e “activity” su /my/activity/bookmarks

Un altro esempio in cui il colore dell’icona e del testo non corrispondono è il pulsante di espansione sul mio profilo

Ecco come appare quando lascio il gruppo:

Penso che tu non abbia menzionato che non solo la dimensione del carattere delle intestazioni della tabella, ma anche la dimensione dei numeri nelle colonne Replies, Views e Activity, sembrano essere diminuite.

5 Mi Piace

Grazie mille per il prima/dopo. Pensavo mancasse nell’OP.

Entrambe queste modifiche sembrano strane: il lato dopo sembra molto meno contrastato e potrebbe causare problemi di A11y, o sbaglio?

Vado nel nuovo gruppo per un giro di prova!

2 Mi Piace

La parola “link” nella mappa degli argomenti viene mostrata solo parzialmente dopo che mi sono unito al gruppo:

Screenshot tratto da Add link to sidebar category setting to new admin menu in categories section of the sidebar

E il testo in questa modale è difficile da leggere quando ci si passa sopra con il mouse. Penso che il contrasto fosse migliore prima

Sono molto entusiasta di questa modifica allo stile predefinito, quando verrà rilasciata all’incirca?

1 Mi Piace

Input e pulsante di invio sono schiacciati!

squish!

modifica: solo su dispositivi mobili

3 Mi Piace

Tutti ottimi feedback/segnalazioni di bug finora. Grazie per gli aggiornamenti.

4 Mi Piace

Questa è una buona segnalazione. Penso che anche il nuovo stile dei pulsanti sia piuttosto gradevole, ma per qualche motivo in questa sezione (con così tanti insieme) non sembra del tutto giusto.

4 Mi Piace

Il carattere dei messaggi non letti è più marcato rispetto a quello dei messaggi letti.
Non me ne ero accorto su desktop, ma lo vedo su mobile.

Mi sembra un po’ troppo marcato.

Mi piaceva che Discourse optasse principalmente per un cambio di colore, che sembrava più elegante rispetto alla differenza di peso canonica che vediamo su molti software per forum.

Ora abbiamo entrambi. La differenza è sottile, ma preferirei solo un cambio di colore :paintbrush:

3 Mi Piace

L’ultima serie di modifiche dovrebbe essere attiva a breve dal PR qui: