Examples: Resizable grid view

[marcofugaro]

Followup of #19375

I implemented a resizable examples view as suggested in #19375 (comment).

It is under a breakpoint, so it is enabled on landscape iPad and up.

I've set the minimum card width to 200px, but it can be adjusted.

Note: on Chrome, in certain situations, the resizing may be a little bit laggy. This is because it triggers re-paint, and painting is handled on the CPU in Chrome.

Live demo

[munrocket]

Looks like it's hard to catch scrollbar with this UX (._.) Actually it's what I am afraid of and this is the reason why simple button #18841 looks better for me. Also grid unreachable on mobile phones.

Anyway thanks for you effort, we are going to the best three.js webpage. Don't want to stop this, but we need more feedback IMHO. I never seen draggable scrollbar before.

[marcofugaro]

You're right.
I moved the interaction area towards the outside so now the scrollbar is still usable.

It is not supposed to work on mobile, it is disabled there.

The problem with the button, is that it overlaps with the x of the search. This might confuse the user. It is generally avoided to change the layout without the user specifically requesting so.
It could work if we find another place for the button.

[munrocket]

Wow, looks better now!
Githack

[NicolasRannou]

I'm a bit late to the party and maybe that's for another PR, but I think it may still be useful to have the previous list of examples without thumbnails? If so, we could add 2 toggle buttons at the right of the search bar to switch from "preview" to "no-preview" list?

[marcofugaro]

@NicolasRannou could you elaborate on why you would want to use the list without images instead of the one with the images?

[NicolasRannou]

So I think that this new view is great to explore examples but it does take a lot of scrolling to reach the end of the list - granted that the search bar is there to quickly access one example.

I'm not strongly feeling about it but I just wanted to mention it!

Great work!

[marcofugaro]

it does take a lot of scrolling to reach the end of the list

I totally agree! Does the grid view I proposed in this PR help with that? Keep in mind that we could still make the cards smaller so there are more in a single view.

[mrdoob]

@NicolasRannou #19881

[marcofugaro]

I rebased this PR and integrated it with the minimal layout toggle.

https://raw.githack.com/marcofugaro/three.js/example-mode-resizable-grid/examples/index.html

[mrdoob]

I think it would be nice to have some more days to test this. Moving it to next release.

[mrdoob]

Implemented a resizer in the editor using event.movementX (Safari doesn't support it though)... 42a1d5e

[marcofugaro]

@mrdoob Nice! Should I refactor using event.movementX as well?

[marcofugaro]

Alright, rebased and converted to let/const!

[OndrejSpanel]

could you elaborate on why you would want to use the list without images instead of the one with the images?

I would often prefer it because I can see much more examples on one screen. Currently when looking for something I see four examples on one page. With text only (as can be seen in 2016 version of the page I saw about 40 of them and the whole list would fit on 10 pages, which was quite possible to read through just to get an impression what examples are available. The complete list is 100 pages long with images.

[marcofugaro]

@OndrejSpanel a toggle between text/image version has been added since then.

[Mugen87]

Although the feature is nice, it adds quite a loot of code `examples/index.html. In the interests of maintainability and simplicity, it's better to not merge the PR until a more compact solution is found.

[marcofugaro]

@Mugen87 I am afraid there is not a more compact solution, the resizer in the editor is structured more or less the same: https://github.com/mrdoob/three.js/blob/dev/editor/js/Resizer.js

But it looks like people are not interested in this grid feature anymore.