Componente display categoria-box potenziato

[oca]

Tema Discourse per Homepage di Categoria

Ho lavorato molto a una nuova homepage con category-box per il forum della mia comunità. È piuttosto specifica per le nostre esigenze e potrebbe non essere utile per molte persone, ma si possono trarre spunti da essa.

Dopo/Prima

Il nostro caso d’uso specifico

Abbiamo una comunità che si occupa di molti argomenti ampi. Federiamo ONG locali che hanno i propri membri e disponiamo di gruppi autonomi, ognuno dei quali svolge una o più azioni che devono pubblicizzare e per le quali necessitano anche di uno spazio privato per discuterne.

Una parte significativa dei nostri membri è composta da anziani e qualsiasi azione che richieda più di 3 click è molto difficile per loro (quindi gestire il livello di notifica nel modo usuale non è fattibile per loro).

La comunità è abbastanza grande da richiedere un forte sistema di ordinamento, ma le competenze digitali e la propensione degli utenti sono piuttosto basse, quindi dobbiamo mantenere tutto il più semplice ed esplicito possibile da usare.

Organizzazione dei topic

Le categorie di livello superiore fungono da host per gli scopi principali della comunità.
Qualsiasi topic che non si riferisca a un gruppo appartiene alla categoria di livello superiore più vicina, e i suoi punti principali possono essere etichettati con tag. Un tag è contenuto principalmente, ma non necessariamente, in una categoria di livello superiore.

Ogni ONG e gruppo locale fa i propri annunci in una sottocategoria pubblica della categoria di livello superiore più ovviamente correlata e lavora silenziosamente in una sottocategoria privata.

Quindi, un utente può facilmente trovare tutto il contenuto relativo a uno dei nostri scopi principali (categoria di livello superiore), a un argomento specifico (un tag che potrebbe essere trasversale a più scopi), a un gruppo specifico (una sottocategoria pubblica), ecc.

Caratteristiche

• Evidenziare ogni categoria per farle sentire come sezioni complete del sito web.
  • Scrivere in grassetto e aggiungere un’icona a tutto ciò su cui si può cliccare, in modo che sia più facile concentrarsi sulle cose importanti.
• Aggiungere elementi aggiuntivi per ogni categoria:
  • il numero abituale di post
  • il selettore del livello di notifica
  • un link “Clicca qui per vedere tutti i post relativi a quel dominio” per essere estremamente espliciti
• Aggiungere tag relativi a quella categoria
  • aggiungere un’intestazione per rendere molto esplicito che queste sono i temi principali di cui discutiamo
  • questi tag sono selezionati tramite un’impostazione del tema
  • la visualizzazione dei tag è realizzata in modo che i tag sembrino effettivamente dei tag, così l’utente capisce di cosa stiamo parlando quando usiamo la parola «tag».
  • nota: la visualizzazione è potenziata dal componente Icona Tag
• Aggiungere un’intestazione alle sottocategorie per rendere estremamente esplicito che queste categorie sono per gli annunci, e un’altra per rendere estremamente esplicito che queste sottocategorie sono private (sì, c’è un lucchetto e qualsiasi utente di livello medio lo capisce. Ma…)
  • nota: la visualizzazione è potenziata dal componente Icona Categoria
• La maggior parte di queste funzionalità è attivabile/disattivabile.

Installazione

Nota: questo componente è ancora in lavoro in corso. Sto ancora aggiornandolo, correggendo bug CSS che ho propagato altrove, ecc. Vi prego di essere indulgenti e farmi sapere se qualcosa sembra strano.

Installa il componente come al solito. Come si installa un Tema o un Componente del Tema?
Repository: https://framagit.org/oca/discourse-theme-category-homepage.git

Roadmap per i futuri miglioramenti

Risolvere la grande quantità di bug CSS.
Risolvere il problema che forza la visualizzazione di separatori/intestazioni per le sottocategorie anche se non ci sono sottocategorie pubbliche o private.
Creare una pagina di categoria che mostri in modo gradevole le scatole delle sottocategorie e i topic.
Aggiornare tutto non appena il team di Discourse deciderà che le sottocategorie di terzo livello (sub-sub-categories) potrebbero diventare una realtà (lo so, speriamo…)

Sono aperto a nuove suggerimenti per le funzionalità, ma le aggiungerò a questo componente solo se servono al mio caso d’uso molto specifico o sono molto facili da realizzare. Qualsiasi nuova funzionalità aggiunta sarà attivabile/disattivabile.

[HAWK]

@oca

Qualcuno può aggiungere una modalità wiki in modo che io possa aggiornare il post principale quando necessario e aggiungere il tag theme-component?

Nessun problema, è fatto.

[torstensson (Per Torstensson)]

Grazie mille per aver creato questo fantastico componente, è incredibile!

Una domanda: è possibile attivarlo con l’impostazione della categoria “Caselle con argomenti in evidenza”? In caso contrario, si tratta di una funzionalità che potrebbe essere implementata, o prevedi qualche problema a riguardo?

Tanti saluti, e ancora grazie mille per averlo creato!

[oca]

@torstensson

Una domanda: è possibile attivarlo con l’impostazione della categoria “Categorie con argomenti in evidenza”? Se non è possibile, si tratta di una funzionalità che potrebbe essere implementata, o prevedi qualche problema in merito?

Ciao, grazie.
Al momento non è possibile (non è la stessa casella che viene modificata), ma è assolutamente qualcosa che può essere fatto facilmente. Posso aiutarti a realizzarlo se vuoi parlarne tramite messaggio privato, oppure potrei darci un’occhiata quando avrò un po’ di tempo. Per farlo, però, avrei bisogno che tu mi dessi una bozza di ciò che desideri (e di come vorresti che gli elementi venissero visualizzati).

[torstensson (Per Torstensson)]

Tutto chiaro.

Per me, la funzionalità chiave del tuo componente è l’aggiunta dell’icona a campana per lo stato delle notifiche per ogni sottocategoria, nonché il modo semplice ma potente di concedere la libertà di modificare la larghezza delle colonne. Nel mio caso d’uso, rendere disponibili queste funzionalità con l’opzione “Box con argomenti in evidenza” abilitata soddisferebbe perfettamente le mie esigenze.

Sono un principiante, ma sarei felice di provare a implementarle. Apprezzo qualsiasi suggerimento, ma esaminerò altri componenti per box delle categorie e spero di riuscire a capire come fare. Avrò tempo per rifletterci tra un paio di settimane e aggiornerò qui se farò progressi.

Tanti auguri.

[oca]

Ho avuto difficoltà a farlo, ma alla fine non è stato così complicato.

In un componente del tema, modifica il tuo componente Handlebars inserendo questo codice:

{{#each categories as |c|}}
  
  ...qualche cosa prima della campanella...

  {{category-notifications-button
    value=c.notification_level
    onChange=(action "changeCategoryNotificationLevel" c)
  }}

  ...qualche cosa dopo la campanella...

{{/each}}

Se non sai come farlo, il tutorial di Johani è un ottimo “primo posto dove cercare”.

E se trovi come fare la stessa cosa con i tag, fammelo sapere! Non riesco a trovare un modo per farlo.

[pmusaraj (Penar Musaraj)]

@oca Ho apportato una modifica recente al core che causa la mancata compilazione del SCSS di questo componente del tema. La soluzione è molto semplice: è necessario rimuovere queste due righe dal foglio di stile:

@import "common/foundation/variables";
@import "theme_variables";

(La seconda riga provoca un errore di compilazione SCSS perché quel file non esiste più. Tuttavia, entrambe le righe sono superflue, poiché le variabili del core e del tema vengono ora iniettate prima che venga compilato qualsiasi file SCSS.)

[oca]

Grazie per le spiegazioni.

È stato rimosso.

[Fma965]

Bel lavoro!, questo non funziona su mobile?

CyanLabs Official Community

Mobile

Desktop

[Fma965]

Vorrei poter capire come far funzionare questo su mobile, sembra fantastico sul desktop ma se non è utilizzabile su mobile è un po’ inutile, sono sicuro che c’è un modo semplice ma non sono sicuro di come, qualcuno ha qualche suggerimento?

[Fma965]

Mi dispiace per il multipost

Sono riuscito a mettere insieme Categories Layout Override per farlo funzionare solo su mobile

quindi usando la mia versione modificata GitHub - cyanlabs/discourse-categories-layout-override

posso ora specificare l’override come categories_boxes

il che forza la vista mobile nella vista richiesta affinché questo plugin funzioni

Tablet

Mobile

Ovviamente non è una soluzione ideale ma funziona, quindi finché qualcuno non avrà una soluzione migliore ecco una soluzione alternativa

[hoangphuctran93 (Hoàng Phúc Trần)]

Grazie per la personalizzazione del componente tematico Categories Layout Override, ma puoi condividere con me la personalizzazione del componente tematico Enhanced category-box display component? Ho visitato il tuo sito web e apprezzo il tuo uso di “background-color” per la classe “category-logo”.

[hoangphuctran93 (Hoàng Phúc Trần)]

Grazie per le recenti personalizzazioni, tuttavia con il recente aggiornamento alla versione 3.2.0.beta 4-dev il componente del tema non ha funzionato. Spero anche che la personalizzazione della visualizzazione mobile venga integrata nel core di Discourse. Perché voglio un’esperienza sincrona dal desktop al mobile.

[Fma965]

Purtroppo non ho idea di come risolverlo.

[hoangphuctran93 (Hoàng Phúc Trần)]

Recentemente, durante l’aggiornamento all’ultima versione, il componente del tema “discourse theme category homepage” non funziona più su dispositivi mobili e continuo a ricevere il seguente messaggio

Questo è il mio sito https://businesslab.vn/categories

[david (David Taylor)]

Ciao @hoangphuctran93, ho spostato il tuo post nel thread del componente tematico pertinente (cc @oca)

[stephtara (Stephanie Booth)]

Oh, questo sembra qualcosa che mi sarebbe super utile! Comunità di supporto attiva con un’ampia varietà di argomenti ma persone che probabilmente rimarranno in una piccola sottotrama del vasto giardino, alfabetizzazione digitale piuttosto bassa per molti. Peccato vederlo apparentemente rotto, proverò comunque. @oca lo stai ancora usando attivamente da parte tua?

[hellekin]

Fai attenzione al tag #broken, romperà davvero.

@stephtara

persone che probabilmente rimarranno in una piccola sottotrama dell’enorme giardino, alfabetizzazione digitale piuttosto bassa per molti

Considererei di silenziare tutte le categorie per impostazione predefinita e preparare argomenti contrassegnati con #welcome per fornire una panoramica delle categorie disponibili. Quando associ un gruppo per seguire una categoria, puoi creare un’esperienza progressiva, in cui le persone possono unirsi a gruppi per silenziare/scoprire le categorie. Con pochissimi argomenti di benvenuto, puoi fornire ai lettori una panoramica di ciò che è disponibile e dare loro la scelta su dove vogliono partecipare. Documentare le notifiche è anche importante per evitare il sovraccarico di informazioni.

[stephtara (Stephanie Booth)]

@hellekin

Fai attenzione al tag #broken::tag, romperà le cose.

Grazie per l’avvertimento, probabilmente è meglio starne alla larga allora…

@hellekin

Documentare le notifiche è anche importante per evitare un sovraccarico di informazioni.

Assolutamente!

[hellekin]

Potresti provare a installare il componente tema… ma non sul tuo sistema di produzione