webots.cloud layout

[BenjaminDeleze]

I started to rework the way the list of protos is displayed.

You can see the current state here:

https://proto.webots.cloud/proto

However I have plenty of questions on which I would be happy to have you opinion:

1. Where should the delete button be? (Remember that it is displayed only if you are logged in with a cyberbotics mail)
2. Where should the synchonize/update button be?
3. Should we put other informations than just the title and the version below the thumbnail?
4. How many protos do we want to be displayed on a page? Considering the following:

• The number of protos displayed on one line will depend on the size of the screen.
• On the other 3d assets websites I saw, you have to scroll quite a bit to reach the next page button.
• The add a new proto button is at the bottom of the page.

5. Should I introduce a sort by button as we do not have the column titles as before? If yes:

• Where should it go? I would suggest directly right to the search bar.
• What the sorting criteria should be?

6. The description of the proto is displayed by hovering the thumbnail or the title. However, it is a custom tool-tip which has (at least) one issue: if we try to see the description of the right most item, it will often (depending of the size of the screen) appears cut. One solution would be to use the default tool-tip (I implemented it such that you can compare both option, it will appear if you hover the proto image.)

• So either we improve the custom tool-tip, but it requires adding some JS in the code to check the position of the proto and display the tool-tip accordingly.
• We use the browser default one, but we can not style it.

[omichel]

1 and 2. I believe the delete/sync buttons could appear only on the proto page and not necessarily below the icon.
3. The title and version are the two most important pieces of information we should keep below the thumbnail.
4. What we have now seems roughly good to me. However I would avoid to display an incomplete last row.
5. Yes, a "sort by" button would be useful in the search bar.
6. Let's use the default tool-tip which works nicely for now. Do we need to style it?

[BenjaminDeleze]

1 and 2. I believe the delete/sync buttons could appear only on the proto page and not necessarily below the icon.

Ok I will see how to integrate them in the proto page

4. What we have now seems roughly good to me. However I would avoid to display an incomplete last row.

Should be doable, but it means that we cannot have a fixed amount of protos and that we must compute the available width of the screen for each user.

5. Yes, a "sort by" button would be useful in the search bar.

For now I have implemented only search by: number of views and alphabetical order, do you see another useful criteria?

6. Let's use the default tool-tip which works nicely for now. Do we need to style it?

The only issue is see is that the style of the browser built-in tool-tip is browser dependent (and may also differ if in night mode or not), so we will not have something unified and not have control over it. But it is something we can accept.

Chrome:

Firefox: