Movendo subcategorias de mobile?

Olá a todos,

Tenho aprendido sobre temas e como trabalhar com eles nas últimas semanas, já que estamos nessa parte da migração, ou melhor, estamos quase prontos para focar exclusivamente nisso.

Fiz algumas coisas incríveis e legais com componentes de tema, mas estou tentando descobrir algo que me deixou perplexo a noite toda.

No celular, como faço para mover a lista de subcategorias mostrada na página de categorias (usamos categorias com tópicos em destaque como nosso padrão) para cima da lista de tópicos e abaixo do título da categoria.

1 curtida

Existem duas maneiras de abordar isso, se você tiver que alterar a ordem do próprio HTML… então não há escolha a não ser substituir o template. Isso não é o ideal para manutenibilidade a longo prazo porque, se mudarmos algo em que o template se baseia, isso pode quebrar sua personalização.

A outra maneira seria com CSS, que deve ser mais fácil de manter. Eu não testei isso completamente, então você vai querer ficar de olho em efeitos colaterais… mas isso pode reordenar as coisas da maneira que você está procurando:

.mobile-view .category-list {
  tbody {
    display: flex;
    flex-direction: column
  }
  .subcategories-list {
    order: -1
  }
  tr:first-child { // esta é a seção do título da categoria
    order: -1
  }
}

Isso converte o layout da tabela para usar flexbox, o que permite que elementos irmãos sejam reordenados com order.

3 curtidas

Muito obrigado!\n\nEu estava tentando complicar demais ao tentar me conectar a outlets, substituir templates e coisas do tipo, quando na verdade não era necessário.\n\n

\n\nÉ aqui que estamos até agora. (Atualmente usando Graceful como template base para todas as nossas edições para tentar aproximá-lo um pouco do que os usuários estão acostumados). Usando sua correção, pude rapidamente mudar a ordem de onde as descrições das categorias apareciam assim que vi o que seu código acima fazia.\n\nAinda não está pronto, mas quase lá.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.