Elenco argomenti Discourse Autore e Partecipanti

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

Installa questo componente tema

:woman_technologist:t2: Panoramica

Questo componente tema di Discourse inserisce un avatar dell’autore dell’argomento nella prima colonna di tutte le rotte dell’elenco degli argomenti e dispone di impostazioni che consentono all’amministratore di specificare la forma e la dimensione dell’avatar. Inoltre, l’avatar dell’autore non verrà visualizzato come primo avatar nell’elenco dei poster.

È presente anche un’impostazione per far sì che la colonna degli avatar dei poster visualizzi solo l’ultimo poster (più recente), ma solo se c’è più di un partecipante all’argomento. Pertanto, l’avatar dell’autore verrà visualizzato solo se ci sono altri poster nell’argomento.

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

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

In una visualizzazione piccola (dimensione mobile), l’autore apparirà dove si trova l’avatar dell’ultimo poster.

Questo argomento funziona bene con Estratti dell’elenco argomenti e Riepiloghi gisti di Discourse AI.

:gear: Impostazioni

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

Impostazioni Descrizione
Dimensione avatar autore elenco argomenti Dimensione degli avatar nella colonna avatar autore delle rotte della pagina dell’elenco argomenti - small (piccolo), medium (medio) o large (grande).
Raggio bordo avatar autore elenco argomenti Arrotondamento avatar sulle rotte della pagina dell’elenco argomenti: 0% = quadrato → 50% = cerchio. tab_style = angoli sinistri arrotondati
Elenco argomenti mostra solo ultimo poster Mostra solo l’avatar dell’ultimo poster nella colonna dei poster, ma solo se ci sono più di un partecipante all’argomento.
Allinea verticalmente in alto riga Interruttore per allineare la riga in alto o al centro
Mostra autore nella pagina categorie Mostra l’avatar dell’autore invece dell’ultimo poster negli elenchi di argomenti nella pagina delle categorie.
Dimensione avatar categoria pagina Dimensione degli avatar nella colonna avatar autore negli elenchi di argomenti della pagina delle categorie - small (piccolo), medium (medio) o large (grande).
Raggio bordo avatar pagina categoria Arrotondamento avatar nella pagina delle categorie: 0% = quadrato → 50% = cerchio. tab_style = angoli sinistri arrotondati

:camera_flash: Screenshot

Ecco alcuni screenshot con diverse impostazioni di dimensione e forma dell’avatar, che mostrano anche con i gisti di riepilogo AI espansi.

Screenshot di varie pagine dell'elenco argomenti con diverse impostazioni del componente abilitate, che mostrano le modalità di gisti compatte ed espanse e la barra laterale espansa/compressa

Con impostazioni predefinite:

Forma avatar tab_style grande con gisti di riepilogo espansi:

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

Avatar di medie dimensioni con raggio bordo 0% (quadrato) con Topic_list_show_last_poster_only abilitato, e gisti di riepilogo espansi:

Screenshot della pagina Categoria che mostra 2 diverse dimensioni e forme di avatar con autore o ultimo poster.

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

Avatar di grandi dimensioni tab_style e Show_author_on_categories_page disabilitato:

Screenshot della vista di dimensioni mobili

Con avatar autore tab_style:


:backhand_index_pointing_right:t3: Note

  • Inserisce l’avatar dell’autore e modifica la colonna dei poster come previsto nelle schede della pagina del profilo.
  • Il comportamento mobile è lo stesso di quello predefinito negli elenchi del piè di pagina degli argomenti (argomenti suggeriti/correlati) e nelle pagine delle schede del profilo e della posta in arrivo.
  • Non è molto compatibile con il tema horizon. :slight_smile:

:bulb: Possibili futuri lavori

  • Aggiungere un interruttore di disattivazione mobile?
  • Esenzioni per categorie e tag?
  • Supporto da sinistra a destra?
  • Sagomare gli avatar dei poster?

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

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