¿Se puede hacer con CSS? Agrupar categorías en la página de categorías

Desarrollador
1

Lo que me gustaría hacer (sé que no hay una configuración o conjunto de funciones incorporado) es usar CSS para agrupar categorías en la página de inicio.

No busco anidar categorías, sino simplemente agrupar algunas y posiblemente colocarles un encabezado. Sé que las categorías individuales pueden “separarse” con relleno (padding) y que cada categoría puede ser dirigida mediante su ID o nombre. Por lo tanto, espero poder replicar algo que se vea así:

image
image480×480 81.3 KB

Entiendo que, por simplicidad, las categorías deberían estar en su orden de clasificación y cada una dirigida por su category_id, pero pienso que quizás exista algún CSS que pueda agregar relleno después de una categoría o antes de otra.

La gran pregunta es: ¿hay la capacidad de insertar algún texto en el relleno para crear un encabezado?

El propósito de esto es primero romper la vista larga de la lista de categorías y separarlas: ejemplo

  • categorías 1-2 bajo el encabezado “personal”
  • categorías 3-4 bajo “recursos comunitarios”
  • categorías 5, 8, 11, 12, 13 bajo “categorías de discusión general”

No quiero convertir estas en subcategorías; me gusta la estructura y el sistema de categorías tal como están. Todo lo que quiero es mostrar las categorías de manera ligeramente diferente en la página de vista de categorías. Idealmente, esto es solo una disposición visual, NADA que cambie la estructura de la biblioteca de la plataforma.

¿Alguna idea sobre cómo lograr esto?

Esto sería un cambio radical para el diseño de mi sitio de colaboración laboral.

Sam, codinghorror, ¿crees que habría una manera de crear un paso de agrupación en el menú de reorganización de categorías que pudiera hacer esto de forma nativa, por ejemplo, como una opción (agrupación activada/desactivada)? Simplemente colocar las categorías en orden dentro de la agrupación de la página principal y podría separarlas automáticamente. ¿En el núcleo, un plugin o un componente de tema?

3 Me gusta
2

anyone? buehler.

feedback appreciated

3

This kind of stuff is possible in a theme component but extremely complicated. I think you would need to override templates which makes this also pretty fragile.

4 Me gusta
4

Un poco tarde :smile: pero quizás alguien más lo necesite. Debo mencionar que:

  • No todo el código CSS es necesario, especialmente los bordes y los colores de fondo para las filas de la tabla, así que siéntete libre de ajustarlos como prefieras.
  • Tuve que cambiar el diseño de la tabla regular a flex, ya que no se pueden usar márgenes negativos en las filas de una tabla y hay otros problemas de diseño; además… es más flexible :smile:
  • Reemplaza Category Group 1 y Category Group 2 con los nombres de grupo de categorías que desees.
  • En mi ejemplo usé los IDs de categoría 2 y 4, así que usando las herramientas de desarrollo de Chrome para inspeccionar (ver imagen abajo), encuentra el ID de categoría correcto y reemplaza [data-category-id="2"] y [data-category-id="4"] en mi ejemplo con tu(s) ID(s).

image
image829×290 17.9 KB

Pega esto dentro de la pestaña Common:

.category-list{
    display: flex;
    flex-direction: column;
}
.category-list thead tr{
    display: flex;
}
.category-list .topics {
    width: 95px;
    margin-left: auto;
    min-width: 95px;
    white-space: nowrap;
}
.category-list tbody tr {
    background-color: var(--primary-very-low);
    box-sizing: border-box;
    display: flex;
}
body .category-list [data-category-id="2"],body .category-list [data-category-id="4"] {
    position: relative;
    margin-top: 50px;
}
body [data-category-id="2"]::before {
    content: "Category Group 1";
}
body [data-category-id="4"]::before {
    content: "Category Group 2";
}
body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

Pega esto dentro de la pestaña Desktop:

.category-list tbody tr {
    margin-bottom: 15px;
    border: 1px solid var(--primary-low);
}

Y esto dentro de la pestaña Mobile:

body .category-list-item.category .posts {
    width: auto;
    margin-left: auto;
}
body .category-list-item>footer,body .subcategory-list-item>footer{
    background-color: var(--primary-very-low);
}
.categories-list .category-list th {
    padding: 0;
}
.category-list-item>footer .category-stat, .subcategory-list-item>footer .category-stat {
    float: right;
}
.category-list-item>footer .category-stat:first-child, .subcategory-list-item>footer .category-stat:first-child{
    margin-right: 0;
}
body .category-list-item.category tr:first-of-type{
    padding: 10px 0;
    border-bottom: 1px solid var(--primary-low);
}
body tr.category-topic-link:last-of-type{
    border-bottom: 1px solid var(--primary-low);
}
body .categories-list .category-list th {
    padding: 0;
}
body .category-list-item {
    border-top: none;
    margin-bottom: 10px;
}
body .category-list-item {
    padding: 0;
    border: 1px solid var(--primary-low)!important;
}
.category-list-item>footer, .subcategory-list-item>footer {
    border-top: none;
}

Así es como se ve en resoluciones de escritorio y móvil:

desktop-category-group
desktop-category-group659×837 73.3 KB
mobile-category-group
mobile-category-group453×1061 52.3 KB

10 Me gusta
5

Hola Cos
¡Muy interesante; gracias por compartirlo! En la misma línea (la de lograr una mejor presentación), estamos intentando colocar, delante del discurso, una página de WordPress con una presentación específica y nos gustaría “enviar a esta página” nombres de categorías, por ejemplo, aquellas que han recibido una respuesta, las elegidas por el usuario o bien una categoría determinada; ¿crees que esto es posible y, de ser así, cómo?

1 me gusta
6

Temo que no puedas hacer eso solo con CSS. Quizás el plugin de WordPress Discourse sea lo que necesitas. Además de esto, los shortcodes de wp discourse también son imprescindibles.
Ya lo estamos utilizando en nuestro sitio web de WordPress y hasta ahora funciona muy bien. Así es como se ve el plugin en el widget de la barra lateral:

image
image454×664 52.5 KB

2 Me gusta
7

@sam, la respuesta de @cosdesign funciona. ¿Existe alguna manera de integrar esto en los menús principales para que los usuarios puedan dejarlo desactivado de forma predeterminada, pero luego configurar los encabezados en el panel de administración para los títulos de los encabezados de grupo, y en la página de atributos de cada categoría, seleccionar desde un menú desplegable los encabezados de sección habilitados en el panel de administración, de modo que la categoría simplemente quede bajo el encabezado?

Esto no debería ser demasiado difícil de añadir a la plataforma y mejoraría significativamente las instalaciones grandes con múltiples roles de usuario y grupos, así como múltiples categorías.

1 me gusta
9

Este tipo de agrupación ahora es compatible en el núcleo de Discourse:

Elija “Subcategorías con temas destacados” como el ‘estilo de página de categoría de escritorio’:

Captura de pantalla 2022-03-07 a las 10.25.34
Captura de pantalla 2022-03-07 a las 10.25.341346×654 53.9 KB

Y entonces su página de categorías se verá algo así:

imagen
imagen2440×1758 306 KB

5 Me gusta
10

¿Es posible hacerlo con RTL? Lo intenté pero fallé :broken_heart:

11

Tiene sentido. Las hojas de estilo principales de Discourse se invierten para crear una versión RTL aquí: discourse/lib/stylesheet/compiler.rb at main · discourse/discourse · GitHub. No creo que los archivos CSS que se agregan con temas se compilen para crear una versión RTL. Si eso es correcto, eso explicaría los problemas que has encontrado con los temas cuando se usa un diseño RTL.

Podrías confirmar esto agregando algunas reglas CSS que contengan una dirección al tema de tu sitio, luego visita el sitio con una configuración regional RTL y mira si la dirección se ha invertido. No creo que se invierta.

Por ejemplo, si agregas esto a tu tema:

.category-list-item footer .category-stat, .subcategory-list-item footer .category-stat {
    float: right;
}

No creo que se convierta en esto:

.category-list-item footer .category-stat, .subcategory-list-item footer .category-stat {
    float: left;
}
12

Estoy de acuerdo contigo, todavía estoy confundido al usar el código anterior :confused:

¿Alguna sugerencia?

13

¿Conoces algún ejemplo de tema que no funcione con RTL? Si es así, publica un enlace al tema aquí y probaré mi teoría y explicaré qué está saliendo mal después de probarlo.

Editar: Aquí hay una explicación del problema:

Para los archivos CSS que se encuentran en la base de código principal de Discourse, el CSS RTL se crea “invirtiendo” la mayoría de las reglas CSS que dependen de la dirección del diseño del sitio. Por ejemplo, padding-left se invierte a padding-right. Esto se hace con la gema RTLcss: GitHub - discourse/rtlcss: A wrapper around the rtlcss npm package to flip CSS direction in Ruby.

El problema es que las reglas CSS de los temas de Discourse no se invierten. Eso significa que si un tema tiene reglas CSS que especifican una dirección, la dirección será la misma cuando se use un idioma RTL que cuando se use un idioma LTR. Aquí hay un pequeño ejemplo de eso:

Cuando se usa el tema con una interfaz RTL, padding-left: 8px; no se invierte a padding-right: 8px;. Esto causa un problema menor con la alineación. Estoy seguro de que hay ejemplos de problemas mayores que ocurren cuando los temas se usan con un idioma RTL.

Lo mismo ocurre con cualquier CSS que agregues a un tema predeterminado de Discourse en el editor de temas. Aquí hay un ejemplo que usa el código de este tema: Can it be done with CSS? Grouping categories on category page - #4 by cosdesign.

Aquí hay una regla de ese CSS que establece una dirección:

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0; // esto necesita ser cambiado
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

Con una configuración regional RTL, este es el problema:

image
image863×676 57.5 KB

Si esa regla estuviera en un archivo CSS principal de Discourse, left: 0; se convertiría automáticamente en right: 0; cuando se seleccionara un idioma RTL. Debido a que el CSS se agrega a un tema, debe editarlo manualmente de la siguiente manera:

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    right: 0; // cambiado a la posición correcta para diseños RTL
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}

image
image829×674 57.1 KB

Discourse agrega una clase rtl a la etiqueta html cuando se usa un diseño RTL. Los desarrolladores de temas podrían usar esta clase para hacer que sus temas funcionen tanto para diseños LTR como RTL. Esto funciona, y creo que es correcto, pero posiblemente la declaración left: auto no necesite estar allí.

body [data-category-id="2"]::before,body [data-category-id="4"]::before {
    position: absolute;
    top: -35px;
    left: 0;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: var(--primary-medium);
}
/* Corrige el posicionamiento para diseños rtl */
.rtl body [data-category-id="2"]::before,.rtl body [data-category-id="4"]::before {
    right: 0;
    left: auto;
}

No estoy seguro de si los desarrolladores deberían adoptar este enfoque con sus temas. Consume tiempo y podría generar errores y problemas de mantenimiento. Quizás Discourse podría compilar algunos temas y considerar proporcionar una versión RTL. Podría valer la pena probar este enfoque con algunos de ellos:

require "rtlcss"

Rtlcss.flip_css("theme_css")

Se suponía que esta sería una respuesta corta :slight_smile: Si lo que he escrito es correcto y no se ha abordado en otro tema, tal vez debería trasladarse a un nuevo tema.

14

Estos Theme component pueden hacer lo que buscas. O ser una buena base para mirar el código y obtener ideas.

“Modern Category + Group boxes” como se usa en el Air Theme funciona bien.

Screenshot_20240302-030928
Screenshot_20240302-0309281080×2400 122 KB