Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch from horizontal to vertical sort order #8

Open
Maksims opened this issue Jan 24, 2024 · 1 comment
Open

Switch from horizontal to vertical sort order #8

Maksims opened this issue Jan 24, 2024 · 1 comment

Comments

@Maksims
Copy link

Maksims commented Jan 24, 2024

The new API docs has nice block with properties, methods, etc.

But the sorting order is from left to right, and with large gaps between items it is hard to read.
So the alternative is to use vertical sorting, but it requires a bit of trickery in CSS, specifically to know exact height of an element in order to guarantee number of columns.

Horizontal sorting:
image

Vertical sorting:
image

To implement vertical sorting, element should have the right height based on number of elements (in this example 32 elements, 3 columns, 28px height of an element) and generic CSS.
Height formula: height = ceil(count / 3) * 28px (308px).

<div class='list' style='height:308px'>
    ...
</div>
.list {
    display: grid;
    column-gap: 1rem;
    grid-auto-flow: column;
    grid-template-rows: repeat(auto-fill, [col-start] 28px [col-end]);
}
@willeastcott willeastcott transferred this issue from playcanvas/developer.playcanvas.com Jan 24, 2024
@willeastcott
Copy link
Contributor

I think I prefer the vertical sorting, yeah. And we now have a custom CSS file to enable this kind of thing:

https://github.com/playcanvas/api-reference/blob/main/styles.css

@willeastcott willeastcott changed the title New API docs css Switch from horizontal to vertical sort order Jan 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants