Lista argomenti, autore e messaggi

:information_source: Riepilogo Aggiunge l’autore dell’argomento alla colonna sinistra delle pagine delle liste degli argomenti, oltre a un’opzione per visualizzare solo l’ultimo partecipante nella colonna dei partecipanti predefinita. L’avatar dell’autore può anche essere dimensionato e modellato.
:eyeglasses: Anteprima https://discourse.theme-creator.io/theme/Lilly/discourse-topic-list-author-posters
:hammer_and_wrench: Repository https://github.com/Lillinator/topic-list-author-posters
:question: Guida all’installazione Come installare un tema o un componente di tema

Installa questo componente del tema

:woman_technologist:t2: Panoramica

Questo componente del tema Discourse inserisce l’avatar dell’autore dell’argomento nella prima colonna di tutte le route delle liste degli argomenti e dispone di impostazioni che permettono all’amministratore di specificare la forma e le dimensioni dell’avatar. Inoltre, l’avatar dell’autore non verrà visualizzato come primo avatar nella lista dei partecipanti.

C’è anche un’impostazione per far sì che la colonna degli avatar dei partecipanti mostri solo l’ultimo (più recente) partecipante, ma solo se ci sono più di un partecipante all’argomento. Quindi, l’avatar dell’autore verrà visualizzato solo se ci sono altri partecipanti all’argomento.

Inoltre, gli amministratori possono anche scegliere di visualizzare l’autore dell’argomento nella pagina della categoria quando sono abilitate le visualizzazioni della lista degli argomenti più recenti (ovvero: Categorie con argomenti recenti), e ci sono anche opzioni per le dimensioni e la forma dell’avatar.

C’è anche un interruttore per allineare verticalmente i contenuti della riga in alto o al centro.

In viewport piccole (dimensioni mobili), l’autore apparirà dove si trova l’avatar dell’ultimo partecipante.

Questo componente funziona bene con Estratti della lista degli argomenti e Riepiloghi gist di Discourse AI.

:gear: Impostazioni

Screenshot delle impostazioni con opzioni predefinite nella pagina di amministrazione del componente

Impostazioni Descrizione
Dimensione avatar autore lista argomenti Dimensione degli avatar nella colonna dell’avatar dell’autore nelle route delle pagine della lista degli argomenti - piccolo, medio o grande.
Raggio del bordo avatar autore lista argomenti Arrotondamento dell’avatar nelle route delle pagine della lista degli argomenti: 0% = quadrato → 50% = cerchio. tab_style = angoli sinistro arrotondati
Lista argomenti mostra solo ultimo partecipante Mostra solo l’avatar dell’ultimo partecipante nella colonna dei partecipanti, ma solo se ci sono più di un partecipante all’argomento.
Allinea riga in alto verticalmente Interruttore per allineare le righe in alto o al centro
Mostra autore nella pagina delle categorie Mostra l’avatar dell’autore invece dell’ultimo partecipante nelle liste degli argomenti nella pagina delle categorie.
Dimensione avatar argomento pagina categorie Dimensione degli avatar nella colonna dell’avatar dell’autore nelle liste degli argomenti della pagina delle categorie - piccolo, medio o grande.
Raggio del bordo avatar pagina categorie Arrotondamento dell’avatar nella pagina delle categorie: 0% = quadrato → 50% = cerchio. tab_style = angoli sinistro arrotondati

:camera_flash: Screenshot

Ecco alcuni screenshot con diverse impostazioni di dimensione e forma dell’avatar, mostrando anche i riepiloghi gist AI espansi.

Screenshot di varie pagine della lista degli argomenti con diverse impostazioni del componente abilitate, mostrando sia la modalità gist compatta che espansa, e barra laterale espansa/collassata

Con impostazioni predefinite:

Forma avatar tab_style grande con riepiloghi gist espansi:

Avatar piccoli con forma di raggio del bordo 15% e Topic_list_show_last_poster_only abilitato:

Avatar di medie dimensioni con raggio del bordo 0% (quadrato) con Topic_list_show_last_poster_only abilitato, e riepiloghi gist espansi:

Screenshot della Pagina Categorie che mostra 2 diverse dimensioni e forme di avatar con autore o ultimo partecipante.

Impostazioni predefinite del componente, con avatar rotondi di medie dimensioni e Show_author_on_categories_page abilitato:

Avatar tab_style di grandi dimensioni e Show_author_on_categories_page disabilitato:

Screenshot della vista in dimensioni mobili

Con avatar dell’autore tab_style:


:backhand_index_pointing_right:t3: Note

  • Inserisce l’avatar dell’autore e modifica la colonna dei partecipanti dove previsto nelle schede della pagina del profilo.
  • Il comportamento mobile è lo stesso della predefinito nelle liste degli argomenti nel piè di pagina (argomenti suggeriti/correlati) e nelle pagine delle schede del profilo e della casella di posta.
  • Non è realmente compatibile con il tema horizon. :slight_smile:

:bulb: Possibili attività future

  • Aggiungere un interruttore per disabilitare su mobile?
  • Esenzioni per categorie e tag?
  • Supporto da sinistra a destra?
  • Modella gli avatar dei partecipanti?

:hugs: Come sempre, grazie a @Moin per l’idea, i feedback e l’aiuto nel debugging.


Scopri le altre mie creazioni Discourse
13 Mi Piace

Grazie per averlo creato, ha risolto immediatamente un potenziale problema per me!

Forse è già previsto, volevo menzionare che ho notato che il padding e l’allineamento della colonna dell’avatar del poster a sinistra presentano un’indentazione strana (che non è presente su dispositivi mobili con il componente disabilitato, a titolo di paragone). Sembra che l’attributo text-align di td.posters stia influenzando anche l’immagine.
L’allineamento dell’elenco degli avatar dei poster cambia anche quando è abilitato, e sembra che l’allineamento di td.topic-list-data stia sovrascrivendo quello predefinito. È abbastanza facile apportare modifiche allo stylesheet da parte mia se siete soddisfatti di questi aspetti.
Componente fantastico, grazie ancora.

1 Mi Piace

grazie per la segnalazione, ho appena rilasciato una correzione. aggiorna il componente e fammi sapere se aiuta.

1 Mi Piace

L’allineamento a sinistra dell’avatar è migliore sul desktop. Ho aggiunto questo CSS per regolare la colonna del poster centrale in base alle mie preferenze:

td.posters.topic-list-data {
    vertical-align: middle !important;
}

Penso che la vostra futura disattivazione mobile aiuterà anche, perché lo stile utilizza un po’ più di spazio bianco del necessario.

[quote=“jordanjay29, post:4, topic:394364”]L’allineamento a sinistra dell’avatar è migliore su desktop. Ho aggiunto questo CSS per regolare la colonna del poster centrale in base alle mie preferenze:

[/quote]

l’allineamento verticale superiore è intenzionale per essere coerente con il resto della scheda dell’argomento e non verrà modificato.

non ho apportato modifiche al mobile, ma darò un’occhiata.

L’allineamento verticale potrebbe essere stato applicato in modo troppo generico nel tuo CSS e probabilmente necessita di essere mirato solo alla custom-author-column dove stai usando td.topic-list-data. Sospetto che cambiare il target in td.custom-author-column.topic-list-data risolverà il problema e rimuoverà la necessità di uno stile personalizzato per correggerlo da parte mia.

no, intendevo che la colonna dei poster fosse allineata verticalmente in alto insieme a tutti gli altri elementi della riga. Sembra fuori posto allineata al centro (soprattutto se si abilitano estratti o ai-gist), ma immagino sia una questione di gusti, quindi puoi regolare come preferisci.

Ho spinto una piccola modifica per il mobile.

3 Mi Piace

Dato che il mio forum non utilizza estratti, gists o riassunti AI, si preferisce l’aspetto predefinito di Discourse. A mio avviso, tale modifica avrebbe più senso in un componente tema dedicato, ma siamo in disaccordo e ho risolto il problema per quanto mi riguarda, quindi nessun rancore.

L’aspetto mobile è un po’ migliore, grazie!

@jordanjay29 dopo averci pensato ancora, ho deciso di aggiungere un’opzione per l’allineamento (abbastanza facile).

ecco qui :slight_smile:

c’è una nuova impostazione Allinea verticalmente in alto la riga che puoi disattivare per ottenere l’impostazione predefinita centrale. fammi sapere se funziona per te.


4 Mi Piace