tangentlabs/django-oscar — pull request #893 by informa (2013-10-10 06:16:49+00:00)
Title: Oscar responsive tidy

## #878 Oscar responsive tidy

Bootstrap out of the box gives us responsive media queries which is awesome. This pull request is designed to maximise more of the bootstrap out of the box media queries and fix/tidy any other oscar related front end media queries main concerned with widths equal or less than 767px.

### More out of the box media queries.

+ The grid: product listing have been reworked to use the grid - therefore converts to a stacked mobile view.

![screen shot 2013-10-10 at 4 50 09 pm](https://f.cloud.github.com/assets/726265/1303951/e5aabfc0-316f-11e3-8da9-6d00829271ec.png)

+ The grid and btn-block used to get important full width buttons

![screen shot 2013-10-10 at 4 52 26 pm](https://f.cloud.github.com/assets/726265/1303966/36af8298-3170-11e3-9eac-46d70f013b81.png)

+ Navbar: Browse button (big change!) has been reworked to use the more flexible nav in the navbar (http://getbootstrap.com/2.3.2/components.html#navbar) rather than the browse button. This will work better when using {% block nav_extra %} in the nav. This also is much easier in terms of the media queries. (discussion)

![screen shot 2013-10-09 at 5 38 52 pm](https://f.cloud.github.com/assets/726265/1303996/3994fb4a-3171-11e3-96ae-ab8a8d4231e3.png)

Mobile view main navigation
![screen shot 2013-10-09 at 5 38 33 pm](https://f.cloud.github.com/assets/726265/1303999/469d143a-3171-11e3-8592-5432c3df0f63.png)

+ Navbar: Checkout navigation is now using the same navbar and now looks more consistant with the primary navigation. Also the responsive checkout nav displays the step and includes a link to the previous checkout step.
+ I removed nav_checkout.html from the checkout layout.html (discussion): this was based on the idea of having navigation related to the checkout ie delivery information, privacy or terms and conditions. These at one stage were flatpages modal'ed through, but these are not included in the core so many it is good to remove this?

![screen shot 2013-10-10 at 2 06 12 pm](https://f.cloud.github.com/assets/726265/1304013/bf5ff0e0-3171-11e3-9b5b-dd13570910f3.png)

Mobile view of checkout nav
![screen shot 2013-10-10 at 2 06 46 pm](https://f.cloud.github.com/assets/726265/1304015/d20dd266-3171-11e3-8d30-36a89b2f92bc.png)

### Fix/tidy any other oscar related front end media queries

+ Added a new less file responsive-767px-max.less to contain any specific oscar media queries.
+ Mostly making carousel items visible, small spacing issues.