loomio/loomio — pull request #1122 by jonlemmon (2013-10-12 10:16:01+00:00)
Title: [PROOF OF CONCEPT] Mobile discussion page using bootstrap 3

**Example here: [https://loomio-staging.herokuapp.com/discussions/5?mobile=true]**

This branch is far from complete. Right now, it's just a few basic elements laid out on the page, but there are several things worth noticing:

1. It's using bootstrap 3 on the mobile discussion page, and bootstrap 2 everywhere else. Turns out this wasn't too hard to do. The plan is that we will eventually convert everything to bootstrap 3, but we don't have to do it all at once.
2. All the new bootstrap 3 stuff is name-spaced as "next" (standard practice for when you're building the *next* version of a webapp). This means we'll be able to develop both the *next* version and the current version of the app without them having to bump into each other.
2. Everything using bootstrap 3 is using [atomic file-structure](http://coding.smashingmagazine.com/2013/08/02/other-interface-atomic-design-sass/) *and* [BEM naming-conventions](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/).

You can see the new layout by adding ?mobile=true to the end of any discussion url.

Alternatively, you can use the "next" subdomain (i.e. next.loomio.org) which will default to mobile for any page where a mobile layout exists. This means that we could potentially merge this branch fairly soon and just keep doing work on it and then once it's ready switch it over from "next.loomio.org" to "www.loomio.org".

### Where to from here?

1. *Develop an aesthetic* - with the atomic structure it will be really easy for us to quickly change the style to whatever we want
2. *Scale up the design* to tablet and desktop - we'll need to hide/show different elements at different sizes, because the current design starts breaking down at about tablet size.
3. *Get all the old stuff working* - e.g. adding a comment, editing the discussion notes, etc.
4. *Implement endless scroll* - implement an endless scrolling system complete with "jump to top" and "jump to bottom" buttons as seen in [some of the mockups here](https://loomio.mybalsamiq.com/projects/mobilediscussionpage/mobile%20discussion)