Всем привет,
Последние несколько недель я изучаю, как создавать темы и работать с ними, так как мы находимся на этапе миграции, а точнее — готовы сосредоточиться почти исключительно на этом.
Я проделал несколько потрясающих и крутых вещей с компонентами тем, но сейчас пытаюсь разобраться с задачей, которая ставит меня в тупик уже весь вечер.
Как на мобильных устройствах переместить список подкатегорий, отображаемый на странице категорий (мы используем категории с избранными темами по умолчанию), над списком тем и под заголовком категории?
Есть два подхода к решению этой задачи. Если необходимо изменить порядок самих HTML-элементов, то другого выхода, кроме как переопределить шаблон, нет. Однако это не лучший вариант с точки зрения долгосрочной поддерживаемости: если мы изменим что-то, от чего зависит шаблон, ваша кастомизация может перестать работать.
Другой способ — использование CSS, что должно быть проще в поддержке. Я не тестировал это решение thoroughly, поэтому вам стоит следить за возможными побочными эффектами… но этот метод позволяет изменить порядок элементов так, как вам нужно:
.mobile-view .category-list {
tbody {
display: flex;
flex-direction: column
}
.subcategories-list {
order: -1
}
tr:first-child { // это секция заголовка категории
order: -1
}
}
Этот код преобразует таблицу в использование flexbox, что позволяет перестраивать соседние элементы с помощью свойства order.
Большое спасибо!
Я пытался излишне усложнить задачу, пытаясь подключиться к выходам, переопределять шаблоны и тому подобное, хотя на самом деле в этом не было необходимости.
Вот где мы сейчас находимся. (В настоящее время используем шаблон Graceful в качестве основы для всех наших правок, чтобы попытаться приблизить его к тому, к чему привыкли пользователи). Используя ваше исправление, я быстро смог также изменить порядок отображения описаний категорий, как только понял, что делает ваш код выше.
Ещё не совсем готово, но уже почти там.
