Use jQuery Layout UI to create a resizable/closable menu at west

[fabienrohrer]

Ditto

[fabienrohrer]

The first results are very encouraging: it simplifies the layout code drastically and is very smooth to use.

Example:

• default menu width:

• big menu width:

• closed menu:

[fabienrohrer]

@omichel Could I ask you to try apply this on the Cyberbotics website?

In theory, this should be straight forward:

• Integration of Split CSS #90 should be done before.
• the "jQuery layout UI" library is applied at the webots-doc div level only, as in the layout container sample:
  • http://layout.jquery-dev.com/demos.cfm (container demo)
  • http://layout.jquery-dev.com/demos/container.html

[fabienrohrer]

👍

[stefaniapedrazzi]

How do you close the menu? simply dragging on the left?
I cannot close it in the dock widget.. but the resizing works fine.

[fabienrohrer]

By double-clicking on the drag handle..
I tried quickly to do the same way we do in Webots, but didn't find a solution yet. I will investigate more right now.

[stefaniapedrazzi]

Ok, thank you. With double click it works fine.
But the area where you have to double click is quite small.

Some subsection title seems to be cut, in this case we should re-add the horizontal scrollbar:

[stefaniapedrazzi]

Maybe we could also further reduce the minimum size.
Ideally not having any minimum size would probably be better.

[fabienrohrer]

Your propositions are good to me.

If I reduce the minimum size to 0, it acts like a second and more intuitive way to close the menu.
I have issues to set the horizontal scroll bar under some minimum width, but this is certainly possible, I'm investigating this.

[stefaniapedrazzi]

By the way a single click on the handle (highlighted in yellow) works as well to hide the left menu.

[fabienrohrer]

thank you for the tip

[omichel]

I just tested it on cyberbotics's web site and it doesn't work (nothing is actually displayed).
You can test also by yourself as I put the interesting files (webots-doc.css doc.php and viewer.js) on the FTP server of Cyberbotics in repository/www/wwi/8.5.

[fabienrohrer]

Ok, thank you. I didn't know I had access to doc.php. So I can go on with this if you would like.

[omichel]

Yes, please.

[fabienrohrer]

@stefaniapedrazzi I implemented your propositions and it seems to be simpler to use now.

[fabienrohrer]

On the Cyberbotics website, there are height issues similar to the ones we get with iframes.

[omichel]

The doc on the web site is currently broken: https://www.cyberbotics.com/doc/guide/index
Nothing is displayed any more...

[fabienrohrer]

Yes, because I'm currently working on this. I will restore this, and try to work locally rather.

[omichel]

Ok, thank you.

[fabienrohrer]

The previous state is restored.

[fabienrohrer]

I have a working example here:
https://github.com/omichel/webots-doc/blob/enhancement-resizable-menu/test.html

Remains to apply it ;-)

[fabienrohrer]

The last results I get with this implementation are not satisfying. Probably due to the dynamic load, the height of the container is difficult to compute, and I ask myself if the overall is the good approach.

[fabienrohrer]

Solution in #116 is preferable to this solution.