Просмотр только категорий переработан в две колонки

Внести вклад UX
1

Продолжение обсуждения из Как стилизовать страницу /categories?:

У меня вопрос, связанный с более ранним обсуждением.

Насколько сложно реализовать это:

image
image2560×1480 223 KB

Самое близкое, что у меня получилось, это:

image
image1136×259 7.21 KB

Я применил column-count: 2 к DIV-контейнеру, окружающему таблицу, и display: block к элементам таблицы.

Но я не уверен, как заставить заголовок растянуться на всю ширину строки :sweat_smile:

РЕДАКТИРОВАНИЕ.
Я только что понял, что функционально мне придется либо продублировать эту строку заголовка, оставить только «Категории», либо просто скрыть её полностью…

3 лайка
2

Думаю, будет проще, если вы установите для tbody свойство display: block и column-count: 2? Тогда thead по-прежнему будет занимать всю ширину.

Но да, в таком случае вам в любом случае нужно будет скрыть всё, кроме «Категории».

3 лайка
3

Альтернатива с использованием flexbox:

.category-list tbody {
    display: flex;
    flex-wrap: wrap;
}
.category-list tbody tr {
    width: 50%;
    display: flex;
}
.category-list tbody .category {
    flex: 1;
}

image
image1205×853 95.6 KB

Однако ещё потребуется несколько доработок.

9 лайков
4

Посреди всего этого я забыл, что было бы здорово, если бы они сохраняли горизонтальное выравнивание.
Это фантастика :slight_smile:

5

Обратите внимание, что с этим CSS категории будут отображаться не так:

1 - 4
2 - 5
3 - 6

А так:

1 - 2
3 - 4
5 - 6

Также вам нужно добавить медиа-запрос, чтобы изменить стиль на маленьких экранах.

4 лайка
6

Я немного поэкспериментировал с обоими вариантами, и кажется, что разделение таблицы категорий пополам, а не последовательно, лучше подходит для наших целей.

Однако сложно контролировать, где именно должно происходить разделение.

Мне удалось добиться этого в своём браузере:

image
image586×539 34.1 KB

Но только когда я искусственно поместил категории слева в div (чтобы предотвратить слишком раннее разделение, иначе корневая категория Measure переместится в правый столбец):

image
image659×247 10 KB

Есть ли способ «упаковать» строки с определёнными ID категорий в DIV, возможно, через theme API?

1 лайк
7

То, о чём вы спрашиваете, кажется сложным и, возможно, потребует некоторой магии JavaScript.
С свойством CSS column, я уверен, что категории не будут выровнены по горизонтали (если только вы не зададите фиксированную высоту), как это делается с flexbox, и это выглядит не очень красиво.

Мне удалось добиться того, что вы хотите, но это немного «костыльно»:

Я использовал свой предыдущий CSS, затем добавил пустой <tr> (что, как я полагаю, можно сделать одной строкой JS) и установил свойство order, чтобы изменить порядок div-элементов. Последнее можно сделать только через CSS, нацеливаясь на каждое значение HTML data-category-id. Вот результат:

image
image1166×989 107 KB

Вот этот пустой <tr>:

image
image1175×351 29.9 KB

Обратите внимание, что, вероятно, вам придётся менять CSS и/или JS каждый раз, когда вы будете добавлять или удалять категорию.

edit: если вам нужен только один или два дополнительных пустых элемента, вам не обязательно использовать JS для добавления <tr>, вы также можете использовать :after и/или :before следующим образом:

.category-list tbody:after {
    width: 1px;
    content: "";
}

Это добавляет пустой элемент шириной 1 пиксель, который работает аналогично.

image
image1177×244 19.8 KB

3 лайка
8

Спасибо, всё получилось довольно неплохо :slight_smile: Мы не против того, чтобы вручную управлять категориями, так что всё в порядке.
Конечный результат можно увидеть на нашем форуме.

1 лайк
9

Можете поделиться ссылкой на ваш форум?

1 лайк
10

Конечно, она есть в моём профиле, и я не хотел напрямую рекламировать :smiley:

2 лайка