J’apprends à créer des thèmes et à travailler avec des thèmes depuis quelques semaines, puisque nous en sommes à cette partie de la migration, ou plutôt, nous sommes prêts à nous concentrer presque exclusivement sur cela.
J’ai fait des choses incroyables et cool avec les composants de thème, mais j’essaie de comprendre quelque chose qui m’a bloqué toute la soirée.
Sur mobile, comment déplacer la liste des sous-catégories affichée sur la page des catégories (nous utilisons des catégories avec des sujets mis en avant par défaut) au-dessus de la liste des sujets et en dessous du titre de la catégorie.
Il y a deux façons de procéder, si vous devez modifier l’ordre du HTML lui-même… alors il n’y a pas d’autre choix que de remplacer le modèle. Ce n’est pas idéal pour la maintenabilité à long terme, car si nous modifions quelque chose sur lequel le modèle repose, cela pourrait casser votre personnalisation.
L’autre façon serait avec CSS, ce qui devrait être plus facile à maintenir. Je n’ai pas testé cela en profondeur, vous devrez donc surveiller les effets secondaires… mais cela peut réorganiser les choses de la manière que vous recherchez :
.mobile-view .category-list {
tbody {
display: flex;
flex-direction: column
}
.subcategories-list {
order: -1
}
tr:first-child { // ceci est la section titre de catégorie
order: -1
}
}
Cela convertit la mise en page du tableau pour utiliser flexbox, ce qui permet de réorganiser les éléments frères avec order.
J’essayais de me compliquer la vie en essayant de me connecter aux prises, de remplacer des modèles et autres, alors que ce n’était vraiment pas nécessaire.
Voici où nous en sommes jusqu’à présent. (Nous utilisons actuellement Graceful comme modèle de base pour toutes nos modifications afin d’essayer de le rapprocher de ce à quoi les utilisateurs sont habitués). En utilisant votre correction, j’ai pu rapidement changer l’ordre d’affichage des descriptions de catégories une fois que j’ai vu ce que votre code ci-dessus faisait.
