Modernizzare il nostro HTML della lista degli argomenti - preparare temi, componenti e plugin

Annunci
1

La nostra lista di argomenti è rimasta in gran parte invariata dall’inizio del progetto Discourse. Per sfruttare le più recenti tecnologie web, stiamo pianificando alcune modifiche che miglioreranno il potenziale di theming delle Liste Argomenti.

Per rendere la transizione il più agevole possibile, apporteremo queste modifiche passo dopo passo e speriamo che la migrazione sia completata entro il primo trimestre del 2022.

:white_check_mark: Fase 1: Aggiornamento dei selettori CSS

Abbiamo recentemente aggiunto le classi .topic-list-header, .topic-list-body e .topic-list-data per iniziare la transizione.

  • thead ora ha la classe topic-list-header
  • tbody ora ha la classe… l’avete indovinato! topic-list-body
  • Anche gli elementi td ora hanno le classi topic-list-data associate.

Per la stragrande maggioranza dei siti, questa modifica sarà completamente trasparente. Tuttavia, temi/plugin complessi che sovrascrivono i nostri template principali richiederanno alcuni aggiornamenti.

Aggiornamento delle sovrascritture di template esistenti

Se possibile, consigliamo di rimuovere le sovrascritture di template e utilizzare una combinazione di CSS e plugin outlets per la personalizzazione. Se la rimozione delle sovrascritture non è un’opzione, dovrai aggiornare manualmente le tue sovrascritture per includere le nuove classi.

I template a cui sono state aggiunte le classi sono:

:black_square_button: Fase 2: Modifica dei tipi di elementi

Il passo successivo in questo processo sarà la conversione degli elementi table esistenti in elementi più adatti.

Preparazione di fogli di stile personalizzati che puntano agli elementi table

Per ora, dovresti rimuovere qualsiasi riferimento a table, thead, tbody, tr, td dai tuoi fogli di stile personalizzati e sostituirli con le nuove classi. Quindi, quando alla fine cambieremo i tipi di elementi, il tuo theming personalizzato dovrebbe continuare a funzionare senza intoppi.

Siamo entusiasti di vedere cosa sarà in grado di creare la nostra community di sviluppatori di temi e plugin in seguito a queste modifiche! :partying_face:

38 Mi Piace
6

Puoi condividere qualcosa di più su cosa sta succedendo qui?

4 Mi Piace
7

Il tl;dr è che non useremo più l’elemento table HTML per gli elenchi di argomenti, si comportano in modi strani che non sono ottimali se si desiderano apportare modifiche significative con CSS.

16 Mi Piace
8

Questo è enorme: sono entusiasta di abbandonare le tabelle. Ciò consentirà temi molto più flessibili e semplici per gli elenchi di argomenti. :heart_eyes:

9 Mi Piace
9

Questa è un’ottima modifica, perché Ember non consente (per quanto ne so) lo scambio dinamico di tag, ad esempio da <table> o <tr> a <div> tramite binding, a differenza delle classi, cosa che fortunatamente fa!

Ciò significa che se una <table> si trova nella radice del template di un componente, sei in qualche modo bloccato con essa a meno che tu non sovrascriva l’intero template, il che altrimenti sarebbe un po’ un eccesso non necessario.

In breve, APPROVO! :heart_eyes:

11 Mi Piace
10

Grazie per aver introdotto queste modifiche! Sto solo ricontrollando prima di modificare le dichiarazioni…

il markup è:

<table>
  <thead>
    <tr>
      <th>
  <tbody>
    <tr>
      <td>

e le rispettive classi sono/saranno:

.topic-list
  .topic-list-header
    (tr verrà eliminato qui?)
     .topic-list-data
  .topic-list-body
    .topic-list-item
      .topic-list-data
5 Mi Piace
11

Sì, sembra tutto corretto :+1:

7 Mi Piace
13

Ci sono aggiornamenti in merito? Mi piacerebbe poter stilizzare meglio gli elenchi degli argomenti.

4 Mi Piace
14

Purtroppo questo è stato messo in secondo piano per un bel po’ di tempo per fare spazio ad altre questioni urgenti in Discourse. È qualcosa che ho intenzione di riprendere nelle prossime settimane!

6 Mi Piace