search

thaliproject / postcardapp

A sample app to demonstrate how to build Thali applications
MIT License
22 stars 5 forks source link

Adaptive UI for larger screens #100

Closed deadlyfingers closed 8 years ago

deadlyfingers commented 8 years ago

While we have a responsive "mobile first" UI this should adapt for larger screens.

For example the iron-list element should switch from list view to a grid view when viewed on larger screen or even in a landscape orientation on a larger device.

The grid view however is still on the backlog of iron-list features: https://github.com/PolymerElements/iron-list/issues/10 Related issues: https://github.com/PolymerElements/iron-list/issues/105

deadlyfingers commented 8 years ago

@yaronyg judging by the backlog progress for iron-list I don't think grid view will land before March... Some alternative options:

  1. Create 2x views: use iron-list for mobile, but have an alternative view using a paper-card grid for desktop. (probably the quickest solution)
  2. Build our own custom Polymer element for displaying postcards. (could also be a custom element to perform the first option)
  3. Use the iron-list column hack - use an iron-list template with a set number of div columns and use calculated properties to bind the data in the right cell. However this is only useful for display as a selection or click will select an entire row and therefore not easy to determine which cell is picked. (not a big fan of this as it's hacky)
deadlyfingers commented 8 years ago
deadlyfingers commented 8 years ago

Note: The max width fix is more of a responsive tweak rather than adaptive UI enhancement but it keeps what is essentially a mobile-first design from becoming too stretchy on tablet / desktop screens.