He estado aprendiendo a crear temas y a trabajar con ellos durante las últimas semanas, ya que estamos en esa parte de la migración, o más bien, listos para centrarnos casi exclusivamente en eso.
He hecho cosas increíbles y geniales con los componentes de temas, pero estoy tratando de resolver algo que me ha desconcertado toda la tarde.
En el móvil, ¿cómo muevo la lista de subcategorías que se muestra en la página de categorías (usamos categorías con temas destacados como nuestro predeterminado) por encima de la lista de temas y debajo del título de la categoría?
Hay dos maneras de abordar esto, si tienes que cambiar el orden del HTML en sí… entonces no hay más remedio que anular la plantilla. Esto no es lo mejor para la mantenibilidad a largo plazo porque si cambiamos algo de lo que depende la plantilla, esto podría romper tu personalización.
La otra forma sería con CSS, que debería ser más fácil de mantener. No he probado esto a fondo, así que querrás estar atento a los efectos secundarios… pero esto puede reordenar las cosas de la manera que buscas:
.mobile-view .category-list {
tbody {
display: flex;
flex-direction: column
}
.subcategories-list {
order: -1
}
tr:first-child { // esta es la sección del título de la categoría
order: -1
}
}
Esto convierte el diseño de la tabla para usar flexbox, lo que permite reordenar elementos hermanos con order.
Así es como estamos hasta ahora. (Actualmente usamos Graceful como plantilla base para todas nuestras ediciones, intentando que se parezca un poco a lo que los usuarios están acostumbrados). Usando tu arreglo, pude cambiar rápidamente el orden en que aparecían las descripciones de las categorías una vez que vi lo que hacía tu código anterior.
