Design adjustments about deprecated-osm-comments HOT 9 CLOSED

@tatsvc - awesome feedback. Thank you.

@batpad - i'm thinking two things:

1. Can you apply, update osm-comments and also update screenshots in blog posts? This will look a lot tighter.
2. We should make a design review part of the roll out process. Just chatted w/ @tatsvc, she'd be happy to do that.

cc @geohacker @mikelmaron @tristen @samanpwbb @mayagao

from deprecated-osm-comments.

fantastic plan for future roll outs, thank you @tatsvc

from deprecated-osm-comments.

@tatsvc thank you! Some of these are my design oversight.

We should make a design review part of the roll out process

Yes, please! We opened tickets to get feedback but it obviously didn't cover all of them.

from deprecated-osm-comments.

Thank you SO MUCH for the detailed design review @tatsvc and apologies for not asking earlier :)

I've made changes and deployed as per your suggestions and things look a lot better: https://mapbox.com/osm-comments

Couple of things I'd appreciate your suggestions on:

• The About modal implementation: The About link to trigger it just below the logo looks slightly awkward to me. Any suggestions for improvement? Also, am not super happy with the way the modal looks. Any suggestions?
• From quickly checking on different screen sizes, things look mostly okay to me now - I think with removing the fixed height on the navbar and absolutely positioning search to the right, the pill toggle seems to naturally go to the next line when the width is constrained. It does seem, though, on smaller devices that the Changesets / Notes links to the left of the search bar start overlapping with the search bar. Um, any suggestions?

Do let us know if there's anything else that can be improved - can't thank you enough for these :)

from deprecated-osm-comments.

The About modal implementation: The About link to trigger it just below the logo looks slightly awkward to me. Any suggestions for improvement? Also, am not super happy with the way the modal looks. Any suggestions?

I'm not sure how important this part is, but I would consider moving it to the footer. Maybe we can have a little subtle footer like we have on some of our mapbox.com pages, and add the about link:

A view suggestions for the modal:

• Make it a little bit wider, so the sentences are easier to read
• Add a little bit more padding
• Add the prose class to the paragraphs, so the line height is a big taller
• Maybe turn the github link into a button with a cute little icon (and to add some color) space-top2 button icon github pad4x

It does seem, though, on smaller devices that the Changesets / Notes links to the left of the search bar start overlapping with the search bar. Um, any suggestions?

Unfortunately base.css doesn't cover all these issues. I would recommend writing some custom css with breakpoints. For the toggle for example:

@media only screen and (max-width:1060px) {
  #filters {  min-width: 230px;}
}

And then where the search field starts overlapping (you might have to give this absolute positioned element a new class), you'll want to make the position relative again, so it flows to the next line:

@media only screen and (max-width:710px) {
      .myPositionedElement {
         position: relative;
         clear: both;
         padding-top: 20px;
   }
    #users {
    width: 100%;
   }
}

from deprecated-osm-comments.

And thanks for the changes! Looking awesome! 💯

from deprecated-osm-comments.

@tatsvc have deployed a new iteration.

The media queries worked like a charm and I think overlapping elements in the search bar on smaller screens is fixed.

I made the Github link a button and added line-spacing to the text in the modal and made the modal a bit wider. Just need to figure out how to make the modal less wide on smaller devices, a little confused on how to do this with the React Modal plugin being used since the styes get added inline by the JS, but I will work on this.

For the About link, I don't want to add it to a footer all the way at the bottom for 2 reasons:

• The list can get quite long and I think this gets a bit too buried.
• I hope to add a scrolling pagination soon, in which case, the footer would get pushed further down as more elements load.

Do you think a position: fixed really small footer at the bottom right of the screen or so could work?

Thanks!

from deprecated-osm-comments.

Do you think a position: fixed really small footer at the bottom right of the screen or so could work?

Sure!

from deprecated-osm-comments.

I think we're done here :)
Closing.

from deprecated-osm-comments.