Componente de visualización de category-box mejorado

[oca]

discourse-theme-category-homepage

He trabajado bastante en una nueva página de inicio category-box para el foro de mi comunidad. Es bastante específica para nuestras necesidades y puede que no sea útil para muchas personas, pero alguien podría tomar ideas de ella.

Después/Antes

Nuestro caso de uso específico

Tenemos una comunidad que trata con muchos temas amplios. Federamos ONGs locales que tienen sus propios miembros, y tenemos grupos autónomos, cada uno de los cuales realiza una o varias acciones que necesitan publicitar y también necesitan un espacio privado para hablar sobre ellas.

Una parte significativa de nuestros miembros son personas mayores y cualquier acción que requiera más de 3 clics es muy difícil para ellos (por lo que gestionar el nivel de notificaciones de la manera habitual no es viable para ellos).

La comunidad es lo suficientemente grande para que necesitemos un sistema de clasificación sólido, pero las habilidades digitales y la disposición de los usuarios son bastante bajas, por lo que necesitamos mantener algo tan fácil y explícito de usar como sea posible.

Organización de los temas

Las categorías de nivel superior se utilizan como anfitrionas de los propósitos principales de la comunidad.
Cualquier tema que no haga referencia a un grupo pertenece a la categoría de nivel superior más cercana, y sus puntos principales pueden etiquetarse con etiquetas. Una etiqueta está contenida principalmente, pero no necesariamente, en una categoría de nivel superior.

Cada ONG y grupo local hace sus anuncios en una subcategoría pública de la categoría de nivel superior más obviamente relacionada y trabaja en silencio en una subcategoría privada.

Por lo tanto, un usuario puede encontrar fácilmente todo el contenido sobre uno de nuestros propósitos principales (categoría de nivel superior), sobre un tema específico (una etiqueta que podría ser transversal a múltiples propósitos), sobre un grupo específico (una subcategoría pública), etc.

Características

• Resaltar cada categoría para que se sientan como una sección completa del sitio web.
  • Escribir con fuente en negrita y agregar un icono a cualquier cosa en la que se pueda hacer clic, para que sea más fácil centrarse en lo importante.
• Agregar contenido adicional para cada categoría:
  • la cantidad habitual de publicaciones
  • el selector de nivel de notificación
  • un enlace “Haz clic aquí para ver todas las publicaciones relacionadas con ese dominio” para ser extra explícito
• Agregar etiquetas relacionadas con esa categoría
  • agregar un encabezado para hacer muy explícito que estas son las principales temáticas que estamos discutiendo
  • estas etiquetas se seleccionan con una configuración de tema
  • la visualización de las etiquetas está diseñada de manera que las etiquetas realmente parezcan etiquetas, para que el usuario entienda de qué estamos hablando cuando usamos la palabra «etiqueta».
  • nota: la visualización se mejora con el componente de icono de etiqueta
• Agregar encabezado a las subcategorías para hacer extra explícito que estas categorías son para anuncios, y otro para hacer extra explícito que estas subcategorías son privadas (sí, hay un candado y cualquier usuario de nivel medio lo entiende. Pero…)
  • nota: la visualización se mejora con el componente de icono de categoría
• La mayoría de estas características se pueden activar o desactivar.

Instalación

Nota: este componente aún está en trabajo en progreso. Todavía lo estoy actualizando, corrigiendo errores de CSS que he propagado en otros lugares, etc. Por favor, tengan paciencia y háganmelo saber si algo parece extraño.

Instale el componente como de costumbre. ¿Cómo instalo un tema o un componente de tema?
Repositorio: https://framagit.org/oca/discourse-theme-category-homepage.git

Hoja de ruta para futuras mejoras

Corregir la gran cantidad de errores de CSS.
Corregir lo que fuerza la visualización del separador/encabezado para las subcategorías incluso si no hay subcategorías públicas o privadas.
Crear una página de categoría lo más agradable posible mostrando cajas de subcategorías y temas.
Actualizar todo en cuanto el equipo de Discourse decida que las sub-sub-categorías podrían ser una realidad (lo sé, permítanme esperar…)

Estoy abierto a sugerencias de nuevas funciones, pero las agregaré a este componente solo si sirven a mi caso de uso muy específico o son muy fáciles de implementar. Cualquier nueva función agregada se podrá activar o desactivar.

[HAWK]

@oca

¿Puede alguien añadir un modo wiki para que pueda actualizar la publicación principal cuando sea necesario y añadir la etiqueta theme-component?

Sin problema, ya está hecho.

[torstensson (Per Torstensson)]

¡Muchas gracias por crear este gran componente, es increíble!

Una pregunta: ¿es posible tenerlo activo con la configuración de categoría “Cajas con temas destacados”? Si no es así, ¿es una función que sería posible implementar o ves algún problema con ello?

¡Un saludo y, de nuevo, muchas gracias por crear esto!

[oca]

@torstensson

Una pregunta: ¿es posible tenerlo activo con la configuración de categoría “Cajas con temas destacados”? Si no, ¿es una función que se podría implementar o ves algún problema con ello?

Hola, gracias.
No es posible tal como está ahora (no es la misma caja la que se modifica), pero es algo que se puede hacer sin problemas. Puedo ayudarte a hacerlo si quieres hablar por mensaje privado, o podría echarle un vistazo cuando tenga tiempo, pero para eso necesitaría que me des un esquema de lo que te gustaría (y cómo se mostraría el contenido).

[torstensson (Per Torstensson)]

Entendido perfectamente.

Para mí, la característica clave de tu componente es añadir el icono de estado de notificación para cada subcategoría, así como la forma sencilla pero potente de permitir cambiar el ancho de las columnas. En mi caso de uso, habilitar esas funciones con “Cajas con temas destacados” activado cumpliría brillantemente mis necesidades específicas.

Soy principiante, pero estaría encantado de intentarlo e implementarlo. Agradezco cualquier orientación, pero inspeccionaré otros componentes de cajas de categorías y, con suerte, podré averiguar cómo hacerlo. Tendré tiempo para entender esto en un par de semanas y actualizaré aquí si logro algún avance.

Mucha suerte.

[oca]

He tenido problemas para hacer eso I’ve had trouble, pero al final no es tan difícil.

En un componente de tema, modifica tu componente de Handlebars para incluir este código:

{{#each categories as |c|}}
  
  ...algo antes de la campana...

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

  ...algo después de la campana...

{{/each}}

Si no sabes cómo hacerlo, el tutorial de Johani es un excelente “primer lugar al que acudir”.

Y si descubres cómo hacer lo mismo con etiquetas, ¡avísame! No he encontrado una manera de hacerlo.

[pmusaraj (Penar Musaraj)]

@oca He realizado un cambio reciente en el núcleo que provoca que la compilación del SCSS de este componente del tema falle. La solución es muy sencilla: hay que eliminar estas dos líneas del archivo de estilos:

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

(La segunda línea provoca un error de compilación de SCSS porque ese archivo ya no existe. Sin embargo, ambas líneas son innecesarias, ya que las variables del núcleo y del tema ahora se inyectan antes de que se compile cualquier archivo SCSS.)

[oca]

Gracias por las explicaciones.

Eso se ha eliminado.

[Fma965]

¡Buen trabajo! ¿Esto no funciona en móvil?

CyanLabs Official Community

Móvil

Escritorio

[Fma965]

Ojalá pudiera averiguar cómo hacer que esto funcione en el móvil, se ve genial en el escritorio, pero si no es utilizable en el móvil, entonces es un poco inútil, estoy seguro de que hay alguna forma sencilla, pero no estoy seguro de cómo, ¿alguien tiene alguna sugerencia?

[Fma965]

Disculpe por la publicación múltiple

He logrado juntar Categories Layout Override para que funcione solo en dispositivos móviles

luego, al usar mi versión modificada GitHub - cyanlabs/discourse-categories-layout-override

ahora puedo especificar la anulación como categories_boxes

lo que luego fuerza la vista móvil a la vista requerida para que este complemento funcione

Tableta

Móvil

Obviamente no es una solución ideal, pero funciona, así que hasta que alguien tenga una mejor solución, aquí hay una solución alternativa

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

Gracias por la personalización del componente temático Categories Layout Override, pero ¿puede compartir conmigo la personalización del componente temático Enhanced category-box display component? Visité su sitio web y aprecio su uso de “background-color” para la clase “category-logo”.

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

Gracias por las personalizaciones recientes, sin embargo, con la actualización reciente a la versión 3.2.0.beta 4-dev, el componente del tema no funcionó. También espero que la personalización de la pantalla móvil se integre en el núcleo de Discourse. Porque quiero una experiencia síncrona de escritorio a móvil.

[Fma965]

Desafortunadamente, no tengo idea de cómo arreglarlo.

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

Recientemente, al actualizar a la última versión, el componente de tema “página de inicio de categoría de tema de discurso” ya no funciona en dispositivos móviles y sigo recibiendo el siguiente mensaje

Este es mi sitio https://businesslab.vn/categories

[david (David Taylor)]

Hola @hoangphuctran93, he movido tu publicación al tema del componente temático correspondiente (cc @oca)

[stephtara (Stephanie Booth)]

¡Oh, esto suena como algo que sería súper útil para mí! Comunidad de soporte activa con una gran variedad de temas, pero gente que probablemente se quedará en una pequeña subtrama del enorme jardín, alfabetización digital bastante baja para muchos. Es triste ver que parece roto, aun así lo intentaré. @oca ¿todavía lo estás usando activamente de tu lado?

[hellekin]

Tenga cuidado con la etiqueta #broken, ¡romperá!

@stephtara

personas que probablemente permanecerán en una pequeña subtrama del enorme jardín, alfabetización digital bastante baja para muchos

Consideraría silenciar todas las categorías por defecto, y preparar temas etiquetados como #welcome para dar una visión general de las categorías disponibles. Cuando asocie un grupo para seguir una categoría, puede crear una experiencia progresiva, donde las personas pueden unirse a grupos para dejar de silenciar/descubrir categorías. Con muy pocos temas de bienvenida, puede proporcionar a los lectores una visión general de lo que está disponible y darles la opción de dónde quieren participar. Documentar las notificaciones también es importante para evitar la sobrecarga de información.

[stephtara (Stephanie Booth)]

@hellekin

Ten cuidado con la etiqueta #broken::tag, va a fallar.

Gracias por el aviso, probablemente debería mantenerme alejado entonces…

@hellekin

Documentar las notificaciones también es importante para evitar la sobrecarga de información.

¡Definitivamente!

[hellekin]

Podrías intentar instalar el componente de tema… ¡pero no en tu sistema de producción :)!