Categories Only view remade into two columns

UX
1

Continuing the discussion from How to style the `/categories` page?:

I have a question related to an older discussion.

How trivial is it to achieve this:

image
image2560×1480 223 KB

The closest I got is this:

image
image1136×259 7.21 KB

By applying column-count: 2 to the DIV surrounding the table and display: block to the table elements.

But I am not sure how to force the header to span across the entire line :sweat_smile:

EDIT.
I have just realized that functionally, I would either have to duplicate this header row, leave only Categories or simply hide it all…

3 Likes
2

I think it might be easier if you make tbody display: block and column-count: 2? Then the thead will still span the full width.

But yeah at that point you’ll want to hide everything aside from “Category” anyway.

3 Likes
3

Alternative with 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

Still a few tweaks to do though.

9 Likes
4

In the midst of it, I forgot that it would be nice if they keep horizontal alignment.
This is fantastic :slight_smile:

5

Notice that with this css the categories won’t be listed such as:

1 - 4
2 - 5
3 - 6

But as:

1 - 2
3 - 4
5 - 6

Also you need to add a media query to change the style on small screen.

4 Likes
6

I’ve played a bit with both options, and it would seem that spiting the table of categories in half rather than sequentially is better for our purpose.

However, it is tricky to control where it should split.

I was able to achieve this in my browser:

image
image586×539 34.1 KB

But only when I artificially placed the categories on the left in a div (to prevent it from splitting too early, otherwise the Measure root category goes to the right column):
image

Is there a way to ‘pack’ the rows with specific category IDs into the DIV, maybe via the theme api?

1 Like
7

What you’re asking seems tricky and may require some JS magic.
With the CSS column property, I’m confident that the categories won’t be horizontally aligned (unless you set a fixed height) as they are with flexbox and it’s not very pretty.

I achieved what you want but it’s a bit hacky:

I used my previous CSS, then added an empty <tr> (which I believe can be done with a single JS line) and set the order property to change the order of the divs. The latter can be done via CSS only by targetting each data-category-id HTML value. Here’s the result:

image
image1166×989 107 KB

Here’s the empty <tr>:

image
image1175×351 29.9 KB

Note that would probably have to change CSS and/or JS each time you’ll add or remove a category.

edit : if you need only one or two additional empty elements, you don’t need to use JS to add a <tr>, you can also use a :after and/or :before like this:

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

It adds a 1px empty element which works the same.

image
image1177×244 19.8 KB

3 Likes
8

Thanks, it worked out quite okay :slight_smile: We don’t mind having to micromanage the categories, so it is all good.
End result can be seen on our Forum.

1 Like
9

Can you share your forum url?

1 Like
10

Sure, I have it in my profile and I didn’t want to directly advertise :smiley:

2 Likes