🔥 Criticizza il mio componente tema: Advanced Topic Cards

Sviluppatore
1

Ciao ragazzi

Disclaimer: Nessuna IA è stata danneggiata nella creazione di questo componente tema :smiley:

Sì ragazzi, sono colpevole di aver copiato spudoratamente il componente tema Topic Cards con “vibe-coding”. Quindi un enorme ringraziamento agli autori e ai contributori originali per l’ottimo lavoro!

Sebbene all’inizio fosse un fork, oltre l’80% del codice e della struttura è stato completamente riscritto. Abbiamo aggiunto un sacco di nuove funzionalità e a prima vista tutte le varie impostazioni possono essere piuttosto opprimenti.

Advanced Topic Cards - Rilascio Preliminare

Con la nostra riscrittura ottieni:

  • controllo più granulare su dove vengono visualizzate le schede argomento
  • Due diversi layout di schede argomento
  • Carosello di schede in evidenza nella parte superiore della pagina Ultimi

Per un elenco completo, scorri verso il basso :down_arrow:

Sentiti libero di provarlo, eseguirlo, copiarlo e criticarlo qui nel thread! Sono davvero entusiasta di ricevere feedback sul risultato:

Problemi noti:

  • Impostazioni TC ridondanti: alcune delle funzionalità relative alle miniature e all’altezza della scheda non sono più ridondanti/di valore
  • La visualizzazione desktop manca dello scorrimento orizzontale tramite touchpad/rotellina del mouse (Embla fornisce un plugin per questo, non l’abbiamo ancora fatto)
  • I pulsanti di azione non sono così “rifiniti”, necessitano di una migliore rielaborazione visiva

Riepilogo dei miglioramenti e delle funzionalità:

  • Layout per categoria e per dispositivo
    Configura le schede separatamente per desktop e mobile come elenco (immagine a sinistra, contenuto a destra) o griglia (immagine sopra, contenuto sotto). Puoi scegliere esattamente quali categorie utilizzano quale layout su ciascuna piattaforma.

  • Ereditarietà del layout delle sottocategorie
    Opzionalmente, eredita i layout delle schede dalla categoria padre in modo da non dover configurare ogni sottocategoria manualmente.

  • Carosello di argomenti in evidenza sulla home page (Embla)
    Un carosello di argomenti in evidenza che puoi posizionare sui percorsi di scoperta (home/ultimi/principali/categorie), alimentato da Embla Carousel, con impostazioni per diapositive per visualizzazione, looping, allineamento, comportamento di trascinamento e altro ancora.

  • Carosello di sottocategorie nelle pagine di categoria
    Trasforma l’elenco delle sottocategorie in una pagina di categoria in un carosello orizzontale, con controlli su quali categorie padre e quanti figli sono richiesti prima che venga visualizzato.

  • Opzioni di personalizzazione visiva

    • Segnaposto per miniature (icona Font Awesome) quando un argomento non ha immagini

    • Preset per il raggio del bordo della scheda

    • Scelte della dimensione del carattere del titolo della scheda (utilizzando i token dei caratteri di Discourse)

    • Altezze fisse opzionali della scheda/griglia e controlli delle dimensioni delle miniature

  • Componenti scheda più ricchi
    Nuova struttura della scheda con:

    • Byline (avatar OP + nome utente + data di pubblicazione opzionale)

    • Pulsanti di azione (Dettagli + CTA Link in evidenza)

    • Tag in linea (badge di categoria + tag all’interno del corpo della scheda)

  • Compatibile con altri componenti tema/plugin:

    • Plugin Calendario + Evento: Visualizza la data dell’evento dopo il titolo
    • Componente tema Portfolio Utente: Visualizza

  • Funzionalità pianificate:

    • Controllo più granulare per il Carosello in Evidenza: Ulteriori outlet di plugin, percorsi di pagina, ecc.
    • Espandi/Comprimi Carosello Argomenti in Evidenza (+ espansione automatica basata su argomenti nuovi/non letti)
3 Mi Piace
Topic Cards
2

Grazie mille per aver condiviso: questo è fantastico!

2 Mi Piace
3

Molto bene!! Ottimo lavoro :+1:

Osservazioni:

  • Non funziona su percorsi di scoperta senza categoria come /latest o selezioni di tag senza categoria.

  • Le immagini non sono sempre allineate bene

image

anche quando non ci sono immagini

image

  • Il carosello è MOLTO bello, ma non dovrebbe essere un componente separato?

  • Sarebbe bello poter escludere i topic senza immagine dal carosello.

3 Mi Piace
4

Grazie per il feedback!

Le immagini sembrano effettivamente strane, lo stesso vale per il testo dell’estratto dell’argomento che viene tagliato

Sarebbe meglio dal punto di vista UX UI aggiungere un riempimento (padding) attorno alle immagini nel layout dell’elenco?

Questo è un punto giusto. Sebbene la mia intenzione fosse quella di condividere essenzialmente gli stessi stili CSS per il carosello e le schede degli argomenti normali.

:+1:

2 Mi Piace