Elenco argomenti MD Componente Mobile

Dopo aver lavorato a una piccola ridisegnazione delle pagine dell’elenco argomenti su desktop, ho sviluppato una versione mobile con alcune idee simili: più spazio per i titoli degli argomenti, una seconda riga con ulteriori informazioni e una colonna dedicata esclusivamente all’ultimo post.


Compatibilità

Questo componente del tema è compatibile con le funzioni tag, link in evidenza e tutte le funzionalità disponibili nella versione originale dell’elenco argomenti. Qualsiasi stile di presentazione delle categorie (punti elenco, barra, riquadro) dovrebbe funzionare con questo componente.

Il componente del tema è stato testato su alcune palette di colori e funziona con temi chiari, neutri o scuri.

Purtroppo, il componente del tema potrebbe non funzionare con plugin che modificano già la presentazione dell’elenco argomenti, come Topic List Previews.

Fatemelo sapere se riscontro problemi!

21 Mi Piace

Bellissimo plugin. Tuttavia, come suggerimento generale, potremmo avere un elenco dei temi e dei componenti con la versione minima di Discourse? Sono sulla ramo stabile, ma ho anche un sandbox di test per la 2.5beta. @codinghorror?

Ho appena creato un ramo specifico per le versioni più vecchie.

Durante l’installazione, usa il link https://github.com/iunctis/md-topic-list-mobile, vai alle opzioni avanzate e aggiungi older-discourse

Capirai che funziona se gli avatar nella colonna di destra si visualizzano correttamente. Tra qualche settimana, quando gli avatar smetteranno di funzionare, dovrai semplicemente reinstallare il componente senza utilizzare l’opzione avanzata.

2 Mi Piace

Un confronto diretto:

Predefinito / Componente

Mi piace il fatto che l’avatar dell’ultimo autore sia a destra.
Nel layout mobile predefinito, il grande avatar appena a sinistra del titolo dell’argomento urla “autore”.

Solo per curiosità, ho dato un’occhiata al file SCSS: c’è un motivo per cui non avete utilizzato la sintassi nidificata offerta da SCSS?

7 Mi Piace

Ho provato l’opzione avanzata. Dice ancora “disabilitato, richiesto 2.5 beta2”.

Principalmente perché con la sintassi nidificata in CSS faccio più errori :grimacing:

Ma potrei riscriverlo tra qualche settimana, quando sarò più sicuro riguardo al design dell’elenco dei temi

@Heliosurge ho modificato il file about.json, ora dovrebbe essere a posto

3 Mi Piace

Grazie per il tuo fantastico lavoro. :clinking_beer_mugs::smiling_face_with_sunglasses::+1::sparkles:

2 Mi Piace

Ho appena applicato un piccolo aggiornamento. Non ci sono nuove funzionalità, ma ho aggiunto la compatibilità con le nuove funzioni per le miniature.

Il componente del tema è ora pienamente compatibile con questi componenti:

4 Mi Piace

Mi piace, è così pulito. @Steven, mi chiedevo se sia possibile aggiungere con CSS questa funzione nativa quando si clicca su ‘risposte totali’?

Non con CSS, ma il template può essere corretto.

Personalmente uso questa funzione solo per accedere al primo messaggio, ma non dovrei imporre il mio metodo di navigazione a tutti. Vedrò se riesco a ripristinare la funzionalità.

2 Mi Piace

Ho aggiornato il componente per ripristinare questa funzionalità. L’ho testato su due supporti, ma se riscontri problemi, fammelo sapere.

2 Mi Piace

Ciao @Steven, sembra che le notifiche dei nuovi messaggi vengano mostrate due volte. Una volta a destra del titolo dell’argomento e una volta al posto del contatore delle risposte. È un bug o mi sto perdendo qualcosa?

Comunque, la visualizzazione degli argomenti da mobile è molto bella. Ai miei utenti piace.

1 Mi Piace

Deve provenire dall’ultimo aggiornamento con il pulsante di accesso al tema. Credo che sia meglio tornare alla versione precedente. Non è davvero adatto al componente.

Agiornerò tra qualche minuto

modifica: Aggiornato proprio ora, fatemi sapere se è meglio

1 Mi Piace

Sì, ora funziona perfettamente, grazie, è stato veloce :slight_smile:

1 Mi Piace

Credo che dovresti rimuovere l’emoji del tag che hai aggiunto davanti all’elenco dei tag:

Appare diversamente su diversi sistemi operativi:

image

Potrebbe non adattarsi al design del forum e dovrebbe rispettare le scelte di design per desktop (dove di default non c’è alcuna icona).

Se aggiungi effettivamente un’icona per i tag con componente icone tag, apparirà così:

image

Quindi ho nascosto l’emoji con il CSS, ma penso che non dovrebbe esserci fin dall’inizio :slight_smile:

Ecco come viene visualizzato sul mio forum ora:

image

.md-tlm .discourse-tags::before {
    display: none;
}
.md-tlm .tl-replies {
    margin-right: 8px;
}
1 Mi Piace

Grazie per il feedback. Ho grossi problemi di connessione a internet, quindi sono un po’ in ritardo con tutto il lavoro relativo al forum.

Mi piace l’idea dell’icona o dell’emoji per i tag, ma probabilmente cambierò i due componenti del tema in un d-icon tag. Allo stesso tempo, creerò un branch senza alcuna icona per garantire la compatibilità con il componente delle icone dei tag.

1 Mi Piace

Ciao Steven!
Sembra che ci siano alcuni problemi di layout con l’attuale versione di Discourse.
Ho creato un tema vuoto e ho incluso solo il componente MD Topic List Mobile e questo sembra essere effettivamente il problema.
Ecco la visualizzazione mobile:

C’è qualcosa di strano con i margini/padding.

2 Mi Piace

Grazie, ci darò un’occhiata subito.

Proverò a riscrivere il template per rimuovere anche il massimo delle classi personalizzate, penso che sia meglio con il ridisegno in corso nel core.

modifica: Nuovo commit, ho riscritto il template e il foglio di stile per renderli più facili da aggiornare in futuro.

Fammi sapere se hai qualche problema @Canapin

4 Mi Piace

Sembra perfetto. Grazie!

1 Mi Piace

Possiamo aggiungere il numero totale di “Mi piace” e visualizzazioni dell’argomento accanto al conteggio delle risposte?

2 Mi Piace