Modularize interface

[AdamVig]

Create directives or separate template files for the interface of the app.

Allows for user configuration of what they want to see in the app, for example if a commuter student doesn't care about meal points they can see only chapel credit.

Allows for adding a large number of data modules without cluttering the display unnecessarily.

Configuration of the display should be available via the header bar menu at all times.

[AdamVig]

• Modules will each have an icon, a label, and a color.
• Modules will have several set sizes:
  1. 1/1
  2. 1/2
  3. 1/3
  4. 1/4
  5. minimum visible size
• Modules will change size based on the number of modules currently visible in the app.
• Modules will relocate the icon to the left side in their minimum visible size.
• Modules will be one of two types:
  1. Info Module, ex: "Meal Points"
  2. Interaction Module, ex: "See What's Open"
     • Contains an icon that hints at a state change (such as a rightward arrow).
     • When clicked, transitions app to another state.
     • Prompts for interaction.
• Modules will be configurable by the user.
  • The user will be able to select which modules are visible on the configuration page.
  • The configuration page will be available in two places:
    1. On the user's first login to the app, detected by the lack of a configuration object in the user's data.
    2. In the menu accessible in the header bar visible in all states.

[AdamVig]

Flexbox

Pros:

• Elegant markup
• Automatic sizing

Cons:

• Ugly override when > 3 modules
• Lots of abstracted behavior

Explicit Sizing

Pros:

• Obvious behavior
• Verbose but helpful markup

Cons:

• Takes 4x as much markup
• Not flexbox

[AdamVig]

Configuration page should be an $ionicModal from ModalService.

Should contain a list of Ionic checkbox items.

Checkbox items update an array in the model which is used by an ng-repeat in the view to create all of the modules.

The modules should be able to be reordered on the configuration page, using the show-reorder attribute on ion-list (ionList Documentation).