Freecodecamp: Map header too tall for mobile landscape view

[QuincyLarson]

A camper just emailed me about this, and after testing it out on my iPhone 5 in both mobile Chrome and Safari, I concur. The map header element is too tall. Here's a photo from my iPhone 5:

I think we should either
1) make the map less tall on xs and sm sized viewports or
2) make the map less tall in general

[dlwebdev]

Hi Quincy. I'm looking to get involved in the open source community and thought this would be a good place to start. Can I take care of this?

I have almost 10 years of experience with front end development and have used bootstrap a lot.

It looks like it's only an issue in landscape mode on mobile device (galaxy S5 gives about the same amount of space).

[caravinci]

Hey @dlwebdev! I like it. Let's get to it :) I'll QA you.

[dlwebdev]

Awesome! Thanks! Will take care of it this afternoon/evening.

[dlwebdev]

It also looks like the opening paragraph is being cut off in vertical mode, so I will address that as well.

[caravinci]

That vertical one, it's best if you check it on an actual phone. those emulators are not super accurate, and I'm pretty sure it's not to bad on the actual device

[dlwebdev]

I have confirmed on my actual phone. Adding left:0; to .mapWrapper class makes things much nicer in regards to things being cut off. It has an absolute position. Should I include that in this issue or leave that for a separate issue? I know it's best to keep commits as atomic as possible.

I'm still giving some thought to the space available in regards to the scrolling map. The search area between the header and the scroll box definitely takes up too much space on mobile/landscape view.

Ran into a few snags getting the site set up locally in a vm, but up and running now.

[caravinci]

Nice. I believe you can submit the changes all together, as long as you document it sufficiently in the commit's message.

[dlwebdev]

Will do, thanks.

[dlwebdev]

I've noticed there is a flash message container at the top of the page. Is that why things are pushed so far down at the top? When is this message shown when viewing the map?

I've implemented a few fixes to improve the layout of the map page on a phone. The changes were made strictly using css media queries to target mobile phones only.

What do you think? If this looks good to you I will submit a pull request tomorrow.

[dlwebdev]

It doesn't give them a whole lot more room when viewing in landscape, but let's face it you just shouldn't be viewing it in that manner if you want to view as many items as possible. At least it now shows a few and gives them a lead that there are more down there and they need to scroll.

[caravinci]

Looking reaally good. We need to come up with a better solution for that top part of the search thingy.
I'm thinking of something that can be collapsed/hidden and shown on some sort of mouse-over or finger-swipe down... will certainly think about this one. @QuincyLarson thoughts? comments?

[dlwebdev]

Thanks! I agree about the search space. We could also maybe do a col of col-md-12 and col-xs-4 to maybe have the search bar and toggle button side by side, that would give us about half of the page for the scrolling.

[dlwebdev]

Something like this would like really nice and be very functional.

http://multi-level-push-menu.make.rs/demo/responsive/responsive.html

It would only make sense on a phone in landscape mode though.

[caravinci]

I've advocated for this, but the option makes it too complex in terms of interactivity —two hidden menus, as if one was not already enough. Perhaps we'd be able to include the search into the current nav menu (when collapsed into the burger button).
A search field that'd look both through the map and the wiki? @QuincyLarson, @BerkeleyTrue, @SaintPeter how difficult would it be to build such a thing? We'd perhaps be able to register what people are looking for most, etc.

[dlwebdev]

Makes sense. Will hold until we get some feedback. Let me know if I should just push up those style
changes I've currently made until we reach a solution for the search container.

[caravinci]

That sounds good :) PR and I'll QA

[dlwebdev]

Great, thanks. Will submit a PR this afternoon.

[dlwebdev]

Just submitted a PR for these styling changes. dlwebdev:fix/map-phone-styling

[dlwebdev]

This is my first pull request for any project, so please feel free to yell or set me straight if I did anything wrong :)

[Jago-Kosolosky]

Please tell me if you disagree but to me it would seem a lot better if on mobile devices "Challenges requiered for certifications are market with a *" would not be displayed. That would save a lot of room.