Updates styles on needs page to center header and filters

[dcalacci]

• standardizes mobile media query to 411 px across some components
• switches flex direction (column -> row) for mobile on header and filter list
• fixes width of filter buttons on mobile so it appears in an orderly column
• wraps all content if too large for screen using flex-wrap

addresses #21

[dcalacci]

regarding wrapping -- How do we want all these to be displayed on desktop and up? One simple way is to just fix button size and make it a grid under search.

[esetnik]

regarding wrapping -- How do we want all these to be displayed on desktop and up? One simple way is to just fix button size and make it a grid under search.

Makes sense to me. I actually think the new request action probably belongs on the right and the filters on the left. Not sure why but it makes more sense to me to have the majority of the controls left aligned. Also the button should be a different color or in some way indicate that it is different from the filter buttons.

[dcalacci]

just added a grid + flexbox fallback situation. looking at the commit its clear i'm not following whatever style guidelines are there (my editor has its own defaults) so happy to change if there's a guide somewhere

[esetnik]

just added a grid + flexbox fallback situation. looking at the commit its clear i'm not following whatever style guidelines are there (my editor has its own defaults) so happy to change if there's a guide somewhere

Please use prettier. See https://github.com/mmoutenot/mamas-needs-offers/blob/master/.prettierrc for our ruleset.

[dcalacci]

sorry about the mess. should be up to date. here's how it looks.

desktop

tablet:

mobile (wide)

mobile

[esetnik]

Looks good to me. Definitely better than what we have now. @mewtaylor any feedback you want to add? If anything I think the search bar belongs above the other filters rather than with the new button because it’s kind of a filter.

[esetnik]

@dcalacci do you mind rebasing this when you get a chance?