user-story-4.md

4. Show the list of all games (compact template)

Goal: As a user, I want to see the list of all games with an alternative compact template

Keywords: conditional template

1. Display compact template in games list

• In games.html, add GAMES_TEMPLATE_COMPACT HTML blocks
• Recreate a template loop for it and bind game fields
  

2. Switch between templates

• In games.dart, add an observable field isCompact

  @observable bool isCompact = false;

• Add a click handler on the toggle button to reverse the value of isCompact

  compact(Event e, var detail, Element target) => isCompact = !isCompact;

• In games.html, use conditional templates to display the right template (Hints)

  • GAMES_TEMPLATE_COMPACT when isCompact is true
  • GAMES_TEMPLATE_DETAILED when isCompact is false

3. Great! Needless to scroll down to see all your games
   

Hints:

• See Template conditionals

Bonus:

• Switch the toggle button class between icon-th-list and icon-th in function of isCompact value

Next >