Elenco argomenti Discourse: Autori e Poster

:information_source: Riepilogo Aggiunge l’autore dell’argomento alla colonna di sinistra delle pagine dell’elenco degli argomenti, nonché un’opzione per visualizzare solo l’ultimo postatore nella colonna predefinita dei postatori. Anche l’avatar dell’autore può essere ridimensionato e modificato nella forma.
:eyeglasses: Anteprima https://discourse.theme-creator.io/theme/Lilly/discourse-topic-list-author-posters
:hammer_and_wrench: Repository https://github.com/Lillinator/discourse-topic-list-author-posters
:question: Guida all’installazione Come installare un tema o un componente del tema
:open_book: Nuovo ai temi di Discourse? Guida per principianti all’uso dei temi di Discourse

Installa questo componente del tema

:woman_technologist:t2: Panoramica

Questo componente del tema di Discourse inserisce l’avatar dell’autore dell’argomento nella prima colonna di tutte le rotte dell’elenco degli argomenti e dispone di impostazioni che permettono all’amministratore di specificare forma e dimensione dell’avatar. Inoltre, l’avatar dell’autore non verrà mostrato come primo avatar nella lista dei postatori.

Esiste anche un’impostazione per far sì che la colonna degli avatar dei postatori visualizzi solo l’ultimo (più recente) postatore, ma solo se ci sono più di un partecipante all’argomento. Quindi, l’avatar dell’autore verrà mostrato solo se ci sono altri postatori nell’argomento.

Inoltre, gli amministratori possono scegliere di visualizzare l’autore dell’argomento nella pagina delle categorie quando sono abilitate le visualizzazioni dell’elenco degli argomenti più recenti (ad esempio: “Categorie con argomenti recenti”), e sono disponibili anche opzioni per la dimensione e la forma dell’avatar.

È presente anche un interruttore per allineare verticalmente il contenuto della riga in alto o al centro.

In visualizzazioni con viewport ridotto (dimensione mobile), l’autore apparirà dove si trova l’avatar dell’ultimo postatore.

Questo componente funziona bene con Estratti dell’elenco degli argomenti e Riassunti AI di Discourse.

:gear: Impostazioni

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

Impostazioni Descrizione
Dimensione avatar autore nell'elenco argomenti Dimensione degli avatar nella colonna dell’avatar dell’autore nelle rotte della pagina dell’elenco degli argomenti - piccola, media o grande.
Raggio del bordo dell'avatar autore nell'elenco argomenti Arrotondamento degli avatar nelle rotte della pagina dell’elenco degli argomenti: 0% = quadrato → 50% = cerchio. tab_style = angoli arrotondati a sinistra
Mostra solo l'ultimo postatore nell'elenco argomenti Mostra solo l’avatar dell’ultimo postatore nella colonna dei postatori, ma solo se ci sono più di un partecipante all’argomento.
Allinea verticalmente la riga in alto Interruttore per allineare le righe in alto o al centro
Mostra autore nella pagina delle categorie Mostra l’avatar dell’autore invece dell’ultimo postatore negli elenchi degli argomenti nella pagina delle categorie.
Dimensione avatar nella pagina delle categorie Dimensione degli avatar nella colonna dell’avatar dell’autore negli elenchi degli argomenti nella pagina delle categorie - piccola, media o grande.
Raggio del bordo avatar nella pagina delle categorie Arrotondamento degli avatar nella pagina delle categorie: 0% = quadrato → 50% = cerchio. tab_style = angoli arrotondati a sinistra

:camera_flash: Screenshot

Ecco alcuni screenshot con diverse impostazioni di dimensione e forma degli avatar, che mostrano anche i riassunti AI espansi.

Screenshot di varie pagine dell'elenco degli argomenti con diverse impostazioni del componente attivate, mostrando sia la modalità compatta che quella espansa dei riassunti, e la barra laterale espansa/collassata

Con le impostazioni predefinite:

Forma dell’avatar tab_style grande con i riassunti espansi:

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

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

Screenshot della pagina delle categorie che mostra 2 diverse dimensioni e forme di avatar con autore o ultimo postatore.

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

Avatar di grandi dimensioni con forma tab_style e Show_author_on_categories_page disabilitato:

Screenshot della visualizzazione in versione mobile

Con avatar autore di tipo tab_style:


:backhand_index_pointing_right:t3: Note

  • Inserisce l’avatar dell’autore e modifica la colonna dei postatori dove previsto nelle schede della pagina del profilo.
  • Il comportamento su mobile è lo stesso di default negli elenchi del piè di pagina degli argomenti (argomenti suggeriti/relativi) e nelle pagine delle schede del profilo e della casella di posta.
  • Non è davvero compatibile con il tema horizon. :slight_smile:

:bulb: Possibili attività future

  • Aggiungere un interruttore per disabilitare su mobile?
  • Esclusioni per categorie e tag?
  • Supporto da sinistra a destra?
  • Formare gli avatar dei postatori?

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


Scopri il mio altro materiale su 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