Responsible design for mobile devices

[Andygol]

It would be great to have responsible design on learnosm.org.

Right now it looks not good when you open it on mobile.

[westnordost]

I was planning to link to an introduction to OpenStreetMap that answers the first questions beginners might have. LearnOsm is a candidate, but unfortunately it is barely usable on a smartphone and thus would make a bad first impression.

[RAytoun]

Hi @westnordost and @Andygol The LearnOSM site is updated and maintained by a few dedicated HOT volunteers along with others who do the translations. They could use some help with managing the extensive work. If you have some spare time to give a hand then I am sure some of these issues could be addressed. Please contact @michael63-osm or @Nick-Tallguy to see if you can offer some assistance with the LearnOSM site. A few hours of your time will be greatly appreciated.

[todrobbins]

I can help with a responsive design @michael63-osm @Nick-Tallguy

[michael63-osm]

@todrobbins Thank you for reaching out. It would be helpful to get a few pointers how to tackle this problem. As you might have noticed the website is rendered through Github pages.

[todrobbins]

@michael63-osm I'll have a pull request for you shortly with some simple fixes. Looks like the mobile design was broken because of some invalid CSS earlier in the style.css.

[michael63-osm]

@todrobbins Thanks a lot for your work. I first applied those fixes to our staging site, http://nick-tallguy.github.io/en/

I did not yet have a detailed look at the website (it's about time to go to bed in Central Europe) but will do so in the next one or two days. At least on my desktop computer nothing looks broken. If anybody else on this thread wants to have a look - please share your thoughts here.

I would merge this pull request at the end of the week unless someone raises concerns.

[Nick-Tallguy]

Hi @todrobbins , thanks for your work on this. I've looked at http://nick-tallguy.github.io/en/, where @michael63-osm has pulled in your changes and it looks much better,

There is one small glitch, but I'm not sure if it's as a result of your changes, although it is not present on the main site at https://learnosm.org/en/. If you go to the beginners section, or any of the other chapter headings, you'll find that the chapter heading is repeated in the index; A the bottom of the right side, under the text is a 'Get Started' Button which should take you to the start of the next module, but now only takes you back to the top of the page.

I hope this makes sense - it's easy to see what I mean by visiting the staging site at http://nick-tallguy.github.io/en/

Regards

Nick

[todrobbins]

@Nick-Tallguy that's really odd. Let me go back through my changes and see would could have changed that.

[michael63-osm]

Sorry, the oddness was introduced by me. I applied Tod's fixes to the current code which contained a small change where I was experimenting a bit. That difference was responsible for breaking the bookkeeping which guides appear in a category except for the cover one.

I could reproduce both the weird behaviour as well as the proper one right now with a local build of the website. This problem has been fixed on the staging site right now.

[Nick-Tallguy]

Closing this now - @todrobbins updates have fixed this completely - thank you.

@Andygol - feel free to reopen if there is anything outstanding, or open a new issue if it's something different.

Thanks to all