Stile messaggi compatto

Ciao,

Lo stile predefinito dei messaggi di Discourse nel 2022-01 - è troppo ingombrante, distraente e spreca spazio secondo me. Suggerisco 2 correzioni:

  1. I controlli dei messaggi possono essere posizionati in modo più compatto e preciso - guarda il mio schizzo, soprattutto mi piacciono i design v2 e v4.
  2. Supponiamo che alcuni pulsanti debbano essere sempre visualizzati comunque per dispositivi mobili come: [Mi piace, Modifica, Rispondi, …altro], ma per desktop (Win/Mac/Lx) è possibile visualizzare sempre solo [Mi piace, Modifica] e mostrare altri controlli solo al passaggio del mouse su ciascun messaggio.

PS Posizionare i Mi piace dall’altra parte del messaggio (molto, molto lontano :smiley:) è una decisione consapevole - ridurrà significativamente i “mi piace per niente”, “mi piace per un sorriso”, “mi piace per scherzare”, “mi piace perché ti rivedo”, “mi piace a causa del tuo buon umore”, ecc. mi piace inutili e non oggettivi che ora vengono usati troppo spesso senza alcun senso reale.

Qualcuno può aiutarmi a creare uno stile simile, per favore?

1 Mi Piace

Ciao, @GVG!
Ho queste idee per risolvere il tuo problema:

FAQ

1. Soluzione iniziale

  • Puoi cambiare lo stile di Discourse con userstyles.

2. perché usare user styles?

3. come può risolvere il mio problema?

  • Puoi impostare uno stile css per rendere questo messaggio compatto in Discourse.

4. pro?

  • Ci sono già stili personalizzati di messaggi compatti, puoi adattarli a Discourse se vuoi
  • Usertyles è facile da fare, implementare
  • Se questo è attraente e fattibile, forse Discourse adotterà questo stile come ufficiale.
  • Questo funziona direttamente nel browser e puoi condividere questo stile con altri

5. contro?

  • Se disabiliti lo stile visivo, non hai messaggi compatti
  • Sono necessarie conoscenze di css e js per manipolare il sito

6. idea? la mia opinione?

  • Penso che la tua idea possa essere applicata usando usertyles o creando un tema personalizzato per Discourse

7. Hai idee meno complicate?

  • Crea un tema e personalizza quel tema con tutto ciò di cui hai bisogno, come questa idea di messaggio compatto.

8. riferimenti?

Senza dover spostare icone e menu (in più, ci sono altri elementi che non vengono visualizzati nei tuoi screenshot, come i conteggi di modifica, il riferimento a chi abbiamo risposto, ecc…), puoi comunque lavorare sui margini come inizio:

Predefinito:

.post-menu-area {
    margin: 20px 0;
}

Personalizzato:

.post-menu-area {
    margin: 0;
}

Confronto:

Spostare icone e pulsanti di azione non è sempre banale e potrebbe richiedere un lavoro più approfondito.

2 Mi Piace

@Canapin cosa ne pensi della mia idea di userstyles? Pensi che sia sbagliata? Questa idea è buona?

  • Vorrei sapere la tua opinione, perché da questo codice possiamo creare un userstyles personalizzato per Discourse

Userstyles funzionano solo lato client e generalmente per sito (uso userstyles e ne ho creati alcuni).

Se qualcuno volesse suggerire miglioramenti all’aspetto generale di Discourse, qualsiasi suggerimento può essere fatto in UX, e se nessuno crea un componente tema o include le modifiche desiderate in Discourse, immagino che qualsiasi utente possa creare la propria soluzione. Che si tratti di un componente tema se sono amministratori o di una soluzione lato client se non lo sono, con il proprio CSS da qualsiasi plugin del browser che preferiscono.

Ma poi, questa non è più una discussione veramente orientata a Discourse, immagino.


@GVG dai un’occhiata a questa discussione correlata, potrebbe interessarti:

2 Mi Piace

NO, il tuo messaggio sembra una classica pubblicità spam del tuo servizio web.

Grazie, ma: a) posso ridurre i margini da solo; b) NON è abbastanza, perché quegli elementi attivi sprecano e creano troppo spazio. Quindi l’obiettivo principale è rimuovere il pulsante di controllo del messaggio dal loro posto attuale a un altro posto dove sprecheranno molto meno spazio.

@GVG

NO, il tuo messaggio sembra una classica pubblicità spam del tuo servizio web.

    1. mi dispiace :frowning: la mia intenzione era di fare alcune personalizzazioni lato client di Discourse con userstyles - questo funzionerebbe se non avessi bisogno di creare un tema. Penso che la tua idea sia molto valida - volevo solo aiutarti con un mvp - minimum value product - volevo che tutti provassero l’esperienza utente con gli user styles senza necessariamente dover sviluppare qualche plugin o tema
    1. Ci ho pensato perché è qualcosa che faccio per molti siti web quando voglio personalizzare
    1. I link che ho postato erano riferimenti a ciò che ho ricercato, letto
    1. Se questo non ti è stato d’aiuto, mi scuso. Ho commesso un errore.

@Canapin

  1. Ho trovato molto interessante quello che hai detto, ma
  • la mia intenzione era di fare alcune personalizzazioni lato client di Discourse con userstyles - questo funzionerebbe se non avessi bisogno di creare un tema.
  • Volevo solo aiutare con un mvp - minimum value product - volevo che tutti sperimentassero l’esperienza utente con stili utente senza necessariamente dover sviluppare qualche plugin o tema
  • Ad esempio, esiste questo repository chiamato refined github, è un posto dove si pubblicano miglioramenti a github - c’è anche un’estensione nel browser per renderlo possibile.
  1. La mia idea sarebbe simile a questa idea di questo repository. Forse, potremmo creare un refined-discourse - un file userstyles.css che contiene vari miglioramenti visivi come un mvp. Così la comunità può vedere cosa è meglio e cosa ha senso.
  2. Sarebbe davvero fantastico, vedere le modifiche che devono essere apportate anche senza necessariamente dover implementare o creare un tema o un plugin.
  3. Ho pensato a questo mentre pensavo che l’idea dei messaggi compatti fosse davvero buona, ho pensato a questo, possiamo personalizzarlo con userstyles - Sarebbe un modo semplice
  4. Questa sarebbe quella che chiamo l’esperienza del mago di Oz. - Non avresti bisogno di passare molto tempo a sviluppare la tua idea se crei un userstyles.css
  • Esperimento del mago di Oz: Nel campo dell’interazione uomo-macchina, un esperimento del mago di Oz è un esperimento di ricerca in cui i soggetti interagiscono con un sistema informatico che i soggetti credono sia autonomo, ma che in realtà viene operato o parzialmente operato da un essere umano invisibile.
  • Le persone potrebbero vedere l’ux/ui migliorato senza dover avere un tema o un plugin
  • Per coloro che usano userstyles potrebbe sembrare un tema o un plugin - ma la verità è che non lo è
  • questa sembra un’idea per un mvp - minimal value product
  1. È una brutta idea?
  • era l’ultima domanda, se puoi essere felice con la tua visione o punto di vista su questo
  • Voglio più feedback ;D

riferimento

Hai pensato a come funzionerebbe per post più lunghi? Poi lo leggi e devi scorrere verso l’alto per mettere “mi piace” e di nuovo verso il basso per leggere il post successivo.

2 Mi Piace

Logicamente concordo, è un buon contro, ma non molto buono, perché:

  • Mi piace soprattutto lo stile v4: quando i controlli del messaggio appaiono a destra del post, quindi verticalmente possono essere posizionati “il più in basso possibile - alla fine del messaggio e in fondo allo schermo”. Il pannello di controllo può persino volare dinamicamente in verticale in ogni punto verticale del messaggio più vicino alla posizione attuale del mouse! :wink: Quindi questo non è un problema.
  • La maggior parte degli utenti che scrivono e leggono post lunghi, per le risposte usa citazioni di testo esatte, o può sempre rispondere all’argomento stesso - quindi il pulsante “Rispondi” non è molto necessario.
  • Come ho detto in precedenza riguardo a “per dispositivi mobili” - a causa dell’assenza di spazio libero sul lato destro e degli schermi touch, i pulsanti di controllo principali devono essere sempre visualizzati e in posizioni standard, sembra che sia il miglior design per schermi mobili verticalmente stretti.
  • Puoi sempre preferire la v3 dove i controlli principali del messaggio rimangono in fondo o qualcosa di simile.

Quindi, se preferisci mantenere i controlli del messaggio in fondo, va bene, ma ti chiedo comunque di aiutare a minimizzare tutto lo spazio verticale libero sopra e sotto di essi e visualizzare i controlli (eccetto Mi piace/Modifica) solo al passaggio del mouse (per desktop).

1 Mi Piace

Non c’è bisogno di alcun elemento di terze parti per provare a personalizzare Discourse senza problemi.

Puoi farlo qui https://theme-creator.discourse.org/. È stato creato per questo.

Puoi creare temi dal menu del tuo profilo: https://theme-creator.discourse.org/my/themes

Tutte le apparenze dei componenti del forum sono referenziate qui: https://theme-creator.discourse.org/styleguide/

E per lo stile del post stesso: https://theme-creator.discourse.org/styleguide/organisms/post

Le modifiche CSS dai tuoi temi appena creati vengono applicate in tempo reale, non è necessario ricaricare le pagine.

Maggiori informazioni:


Puoi elaborare? Ci chiedi di essere creativi e di suggerire altre idee, o di scrivere CSS per te?

2 Mi Piace