Update the CSS to be more "Mobile Friendly"

benrfairless commented 9 years ago

Over 40% of our users access RTK via mobile devices. We should make this experience better for them by changing the CSS to be more mobile friendly.

equivalentideas commented 9 years ago

Just a note here that https://www.whatdotheyknow.com/ is using responsive design techniques to provide a better experience on small screens.

henare commented 9 years ago

Assigned to @equivalentideas to get our theme working with Alaveteli's new responsive styling without changing the design.

equivalentideas commented 9 years ago

Ok, so flicking RESPONSIVE_STYLING: to true in general.yml , makes the layout flexible, but it stops loading custom.css so it breaks some of the layout and all the type and colour styles: screen shot 2015-03-02 at 4 04 26 pm

I'm going to look at how custom.css gets loaded and make that stick around for starters.

equivalentideas commented 9 years ago

As a test I added *= require custom to responsive/application.css to see what happens when you combine our custom css with the responsive css:

screen shot 2015-03-02 at 4 32 23 pm screen shot 2015-03-02 at 4 33 58 pm

Quite a bit of it is messed up.

Next step is to work out how to add the custom css through our theme rather than changing Alavateli.

equivalentideas commented 9 years ago

Following the instructions at http://alaveteli.org/docs/customising/themes/#changing-other-styling I replaced the theme responsive/custom.scss.

equivalentideas commented 9 years ago

Major difference areas that need fixing are:

[x] Header
- [x] make the logo more appropriately sized on small screens.
- [x] set the search form at the top of the page on wide screens
[x] Basic max-width of the site (responsive default: 65em, righttoknow: 56.25em)
[x] button styles
[x] sidebar list style
[x] match type sizes
- [x] authority lists
- [x] request lists
- [x] vertical spacing
- [x] left padding added by responsive grid framework (may be sorted by wrapper padding?)
- [x] sidebar
- [x] heading sizes
- [x] request bottom line
- [x] request form
- [x] site wide line height adjustment. What's the exception/what's the base?
[x] icons
- [x] request quote
[x] Footer
- [x] credit li style
- [x] fix outer padding different from wrapper
[x] View and search requests form layout
[x] make the menu toggler nicer
[x] three column layout (homepage)
[x] spacing around listings is too big
[x] The 'authority box' on the search for authority page isn't yellow
[x] form layout on the making a request page in vertical, rather than the horizontal layout pattern
[x] Sign in / sign up form should be horizontal pattern
[x] fix sidebar jutting out on pages like http://localhost:3000/body/ahl
[x] sidebar button margin collapses on http://localhost:3000/body/test_auth
[x] menu miss-placed before logo image loads
[x] headings sizes on home page
[x] columns slightly off on home page
[x] how does the spacing of the menu toggler sit across devices?
[ ] padding of #request_header overlaps wrapper.

Test on stagin

Next steps

[ ] Do something clever with the logo to keep the text readable on small screens.
[ ] change source order on authority page for better flow of content on small screens

equivalentideas commented 9 years ago

Another component to this is that the header and footer are different html partials than the ones currently used in our theme.

The immediate standout is the search bar that comes before the logo and header nav in the static partials, is at the bottom of the nav menu in the responsive partials.

equivalentideas commented 9 years ago

After testing this out on my phone. These need to be tested on staging, something weird happening here that I can't replicate using local emulator:

update: after testing this on staging the date picker and image rendering is fine.

~~* Date picker is not activated on iPhone5 *Fix image rendering problems on iPhone 5:~~ 2015-03-05 16 10 06