Automatic mobile support

IDEA

Have My Monsters/My Teams use different layouts based on window width.

WHY

The attempted mobile site solves some problems (slow JS/huge JS downloads) while introducing others (multiple roundtrips for every action on high latency connections).

ISSUES

• Depends on Edit anywhere being completed first.
• monsters.js is already a bit hairy, adding extra layout code will make it even more scary.
  • Split the generic UserMonster sorting code out
  • Look at Handlebars helpers across all JS and see if they can be consolidated into 'common' helpers in a single file.
• Multiple places to deal with editing/etc, make sure to consolidate code as much as possible.

Steps (5, 6, 7, 8)

• Decide on how many layout modes to use.
  • Monsters:
    • Phone screens are tiny, probably need to use the mobile site 'bunch of icons' layout style.
    • Landscape tablet could use the current layout with some columns hidden and bigger edit/etc icons?
    • Portrait tablet would need some testing to see which is more usable.
• Add extra 'base' areas to the monsters template for different modes.
• Write new JS/Handlebars templates for modes.
• Hook up mode switching to the resize handler.
  • Some sort of flag to disable mode switching when editing or a modal is active?
• Deal with tears as people try to use it.