Responsive design for mobile

[pom2ter]

Here is my take for issue #222 , feedback will be needed.
Basically the roster pane is partially hidden on mobile and a hamburger icon appear at the top right to open / close the pane when clicked.

I added the dependencies (bootstrap) with bower and a couple with grunt (css minification).
CSS changes were made in the default.css file, at the bottom.
As for javascript, i tried to keep the modification to a minimum. What I added is probably not at the best place but it works on my end ;)

[benlangfeld]

Looks sweet. Would you mind dropping some representative screenshots here, @pom2ter ?

[pom2ter]

This was taken with the Xcode simulator on Mac. it represents the IPhone 5. The roster pane is not completely hidden, enough to show the number of occupants. messages in chat are all align to the left because of the small screen.

When the roster pane is opened by clicking/tapping the hamburger icon on the top right, it takes the same space as default. The icon is done in css as i didnt want to add images.

[marclaporte]

@benlangfeld So what do you think?

Would you be up for running a community demo with this code?

Thanks!

[benlangfeld]

So this is working fine for me. A few requests before I can merge this; would you please

1. follow the existing CSS style of inserting a blank space between a property name and its value;
2. provide some more thorough comments on the various blocks of CSS rules to describe their purpose a little more clearly than "tweaking stuff";
3. remove commented lines in CSS;
4. remove blocks of > 1 blank lines between CSS rules;
5. edit existing styles rather than overriding them in the same CSS file.

Thanks for the work on this, it's much appreciated!

[pom2ter]

ok i made the changes

[benlangfeld]

Looks good, would you squash for merge @pom2ter?

[pom2ter]

Im not sure if it worked, never use squash before.

[benlangfeld]

Thanks @pom2ter !