Estilo de mensajes compactos

Hola,

El estilo de mensaje predeterminado de Discourse en 2022-01 es demasiado voluminoso, distrae y desperdicia espacio en mi opinión. Sugiero 2 correcciones:

  1. Los controles de mensaje se pueden colocar de forma más compacta y precisa; mire mi boceto, lo que más me gusta es el diseño v2 y v4.
  2. Supongamos que algunos botones deben mostrarse siempre de todos modos para dispositivos móviles como: [Me gusta, Editar, Responder, …más], pero para escritorio (Win/Mac/Lx) es posible mostrar siempre solo [Me gusta, Editar] y mostrar otros controles solo al pasar el mouse sobre cada mensaje.

PD: Colocar “Me gusta” en el otro lado del mensaje (extremadamente lejos, lejos :smiley:) es una decisión consciente: reducirá significativamente los “me gusta por nada”, “me gusta por sonreír”, “me gusta por bromear”, “me gusta porque te veo de nuevo”, “me gusta por tu propio buen humor”, etc. me gusta inútiles y no objetivos que ahora se usan con demasiada frecuencia sin ningún sentido real.

¿Alguien puede ayudar a crear este estilo, por favor?

1 me gusta

Hola, @GVG!
Tengo estas ideas para resolver tu problema:

Preguntas frecuentes

1. Solución inicial

  • Puedes cambiar el estilo de Discourse con userstyles.

2. ¿Por qué usar user styles?

3. ¿Cómo puede esto resolver mi problema?

  • Puedes establecer un estilo CSS para hacer que este mensaje sea compacto en Discourse.

4. ¿Ventajas?

  • Ya existen estilos personalizados de mensajes compactos, puedes adaptarlos a Discourse si quieres.
  • Usertyles es fácil de hacer e implementar.
  • Si esto es atractivo y viable, quizás Discourse adopte este estilo como oficial.
  • Esto funciona directamente en el navegador y puedes compartir este estilo con otros.

5. ¿Desventajas?

  • Si deshabilitas el estilo visual, no tendrás el mensaje compacto.
  • Se requieren conocimientos de CSS y JS para manipular el sitio.

6. ¿Idea? ¿Mi opinión?

  • Creo que tu idea se puede aplicar usando usertyles o creando un tema personalizado para Discourse.

7. ¿Tienes alguna idea menos complicada?

  • Crea un tema y personalízalo con lo que necesites, como esta idea de mensaje compacto.

8. ¿Referencias?

Sin tener que mover iconos y menús (además, hay otros elementos que no se muestran en tus capturas de pantalla, como los recuentos de edición, la mención a quién respondimos, etc.), aún puedes trabajar en los márgenes como punto de partida:

Predeterminado:

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

Personalizado:

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

Comparación:

Mover iconos y botones de acción no siempre es trivial y podría requerir un trabajo más profundo.

2 Me gusta

@Canapin ¿qué opinas de mi idea de userstyles? ¿Crees que es mala? ¿Es buena esta idea?

  • Me gustaría saber tu opinión, porque a partir de este código podemos crear un userstyles personalizado para Discourse.

Los userstyles solo funcionan del lado del cliente y, en general, por sitio (uso userstyles y he creado algunos).

Si alguien quisiera sugerir mejoras a la apariencia general de Discourse, cualquier sugerencia se puede hacer en UX, y si nadie crea un componente de tema o incluye los cambios deseados en Discourse, cualquier usuario puede crear su propia solución, supongo. Ya sea un componente de tema si son administradores o una solución del lado del cliente si no lo son, con su propio CSS de cualquier complemento del navegador que les guste.

Pero entonces, esto ya no es realmente una discusión orientada a Discourse, supongo.


@GVG, echa un vistazo a esta discusión relacionada, podría ser interesante para ti:

2 Me gusta

NO, tu mensaje parece un clásico spam-publicidad de tu servicio web.

Gracias, pero: a) puedo hacer los márgenes más pequeños yo mismo; b) NO es suficiente, porque esos elementos activos desperdician y crean demasiado espacio. Por lo tanto, el objetivo principal es eliminar el botón de control del mensaje de su lugar actual a otro lugar donde desperdicien mucho menos espacio.

@GVG

NO, tu mensaje parece un clásico spam publicitario de tu servicio web.

    1. Lo siento :frowning: Mi intención era hacer algunas personalizaciones del lado del cliente de Discourse con userstyles. Esto funcionaría si no necesitas crear un tema. Creo que tu idea es muy válida. Solo quería ayudarte con un producto mínimo viable (mvp), quería que todos sintieran la experiencia de usuario con user styles sin tener que desarrollar necesariamente algún plugin o tema.
    1. Lo pensé porque es algo que hago mucho en sitios web cuando quiero personalizar.
    1. Los enlaces que publiqué eran referencias a lo que investigué y leí.
    1. Si eso no te ayudó, te pido disculpas. Cometí un error.

@Canapin

  1. Me pareció muy interesante lo que dijiste, pero
  • mi intención era hacer algunas personalizaciones del lado del cliente de Discourse con userstyles - esto funcionaría si no necesitas crear un tema.
  • Solo quería ayudar con un mvp - producto de valor mínimo - quería que todos sintieran la experiencia ux con user styles sin necesidad de desarrollar algún plugin o tema
  • Por ejemplo, existe este repositorio llamado refined github, es un lugar donde publicas mejoras para github - incluso hay una extensión en el navegador para hacer esto posible.
  1. Mi idea sería similar a la idea de este repositorio. Quizás, podríamos crear un refined-discourse - un archivo userstyles.css que contenga varias mejoras visuales como un mvp. Así la comunidad puede ver qué es lo mejor y qué tiene sentido.
  2. Sería genial ver los ajustes que se necesitan hacer incluso sin tener que implementar o crear un tema o plugin.
  3. Pensé en esto al pensar que la idea de los mensajes compactos era muy buena, pensé en esto, podemos personalizar esto con userstyles - Esa sería una forma fácil
  4. Esto sería lo que llamo la experiencia del mago de oz. - No necesitarías pasar mucho tiempo desarrollando tu idea si haces un userstyles.css
  • Experimento del Mago de Oz: En el campo de la interacción humano-computadora, un experimento del Mago de Oz es un experimento de investigación en el que los sujetos interactúan con un sistema informático que los sujetos creen que es autónomo, pero que en realidad está siendo operado o parcialmente operado por un ser humano invisible.
  • Las personas podrían ver la ux/ui mejorada sin tener que tener un tema o plugin
  • Para aquellos que usan userstyles puede parecer que es un tema o plugin - pero la verdad es que no lo es
  • esta parece una idea para un mvp - producto de valor mínimo
  1. ¿Es una mala idea?
  • fue la última pregunta, si puedes estar contento con tu vista o punto de vista sobre esto
  • Quiero más feedback ;D

referencia

¿Has pensado en cómo funcionaría esto para publicaciones más largas? Entonces la lees y tienes que desplazarte hacia arriba para darle “me gusta” y volver a desplazarte hacia abajo para leer la siguiente publicación.

2 Me gusta

Lógicamente estoy de acuerdo, es un buen contra, pero no muy bueno, porque:

  • Lo que más me gusta es el estilo v4: cuando los controles del mensaje aparecen a la derecha de la publicación, por lo que verticalmente se pueden colocar “lo más abajo posible: al final del mensaje y en la parte inferior de la pantalla”. ¡El panel de controles incluso puede volar dinámicamente en vertical en cada lugar vertical del mensaje más cercano a la posición actual del ratón! :wink: Así que esto no es un problema.
  • La mayoría de los usuarios que escriben y leen publicaciones grandes, para responder, utilizan citas de texto exactas, o siempre pueden responder al tema en sí, por lo tanto, el botón “Responder” no es muy necesario.
  • Como digo anteriormente sobre “para móviles”, debido a la ausencia de espacio libre en el lado derecho y a las pantallas táctiles, los botones de control principales siempre deben mostrarse y en lugares estándar: parece que es el mejor diseño para pantallas móviles estrechas verticalmente.
  • Siempre puedes preferir la v3, donde los controles principales del mensaje permanecen en la parte inferior o algo similar.

Así que si prefieres mantener los controles del mensaje en la parte inferior, está bien, pero aún así te pido que ayudes a minimizar todo el espacio vertical libre arriba y abajo de ellos y muestres los controles (excepto Me gusta/Editar) solo al pasar el ratón (para ordenadores de escritorio).

1 me gusta

No es necesario ningún elemento de terceros para intentar personalizar Discourse sin complicaciones.

Puedes hacerlo aquí https://theme-creator.discourse.org/. Para eso está hecho.

Puedes crear temas desde el menú de tu perfil: https://theme-creator.discourse.org/my/themes

Todas las apariencias de los componentes del foro se referencian aquí: https://theme-creator.discourse.org/styleguide/

Y para el estilo de la publicación en sí: https://theme-creator.discourse.org/styleguide/organisms/post

Las modificaciones CSS de tus temas recién creados se aplican en tiempo real, no es necesario recargar las páginas.

Más información:


¿Puedes dar más detalles? ¿Nos pides que seamos creativos y sugiramos otras ideas, o que escribamos CSS para ti?

2 Me gusta