Categories Only view remade into two columns

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:

The closest I got is this:

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

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

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;
}

Still a few tweaks to do though.

8 Likes

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

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

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:

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?

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:

Here’s the empty <tr>:

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.

2 Likes

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

Can you share your forum url?

1 Like

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

1 Like