The left Menu could be more compact or scrollable

[GrazianoCapelli]

Ok, I try to explain the issue:

The left green Menu is placed on the left of Website Area (for resolution > 750px). A relevant number of devices (for example a lot of notebooks) have a vertical resolution between 960px and 1280px. Some menu sections of the LearnOSM website have a large number of pages, and the users must scroll down the left menu in order to reach the last pages of the section.

The image below shows a typical browser area for notebooks:

If a user wants to scroll the left menu and click on the next page of the same section, he has to scroll the current page (in this case the JOSM - Creating Custom Presets page) until it reaches the end. Maybe the left menu should be more compact, like the screenshot below:

This way all the standard Notebooks and Tablet Screens could contain the whole Section of each Menu.

As alternative, the left menu could be scrollable in a separated way, without be linked to the content page.

[Nick-Tallguy]

Hi @GrazianoCapelli & thanks for your views on this. I agree 100%. At the moment I think that I would like to aim for a menu similar to this Jekyll theme

https://lanyon.getpoole.com/

It would need agreement from the rest of our team, and someone doing a lot of research on how to implement it - we are not experts and rely on help for the more technical changes. If it's something you would be able to implement, or help with in any way, we would be very interested.

Regards

Nick

[Nick-Tallguy]

Hi @GrazianoCapelli I saw that there was more activity, possibly relating to this, and your pending pull request, but your pull request now appears to be closed. I was hoping to look at this over the next few days.

[GrazianoCapelli]

Hi @Nick-Tallguy thanks for your answer. I agree with you, the Jekyll theme you linked could be a nice solution. Unfortunately I'm not familiar with Jekyll, and I'm not able to help you to implement it.

However, as I'm curious about Jekyll and the integration with GitHub, Today I looked at this and I tried to enable the pages.Github feature for my forked Repo in order to play with the padding of the .doc .title tags into style.css.

Unfortunately I still had a pending pull request for another task (20 days ago I updated the images for the Android app BasicAirData GPS Logger) and I made a mess with it, so I chosen to close it.

Hoping to do things the right way to update images, in the next few days I'll submit the pull request again.

Regards

Graziano.

[Nick-Tallguy]

Hi,

Glad you are going to resubmit the pull request - we've all been busy getting ready for TM4, and most of the other things on the site were put on hold because of it.

Nick

[GrazianoCapelli]

I write some notes here below, in case your team would choose to consider a simple height adjustment:

I played with Jekyll using different heights of the menu items, I can confirm that it's driven by the .doc .title padding property of style.css: https://github.com/hotosm/learnosm/blob/e16957b2711c56fe26c587584a5784db10c75915/style.css#L581 On the screenshot below, for example, I'm using:

padding:4px;
padding-left:10px;
padding-right:10px;

A value close to 4px could be good, because the longest openable menu (JOSM - Detailed editing) is shorter enough to be entirely shown into x960 screens, and the menu seems good balanced with the rest of the page.

[Nick-Tallguy]

@michael63-osm could you look at the suggestions above please

[michael63-osm]

Sorry that I somehow missed this one. I integrated these suggestions on both staging and production sites. Looks convincing, thank you @GrazianoCapelli for making us aware of this.