framework/ember/app/components/ui/item-list.js
Toby Zerner 1d6616a419 Responsive design baby!
Mobile responsive design with a very native feel, all in pure CSS (no
templating differences between versions — even though some things are
in very different positions.)

I’ve been working on this whole thing in my head for a while now,
planning out how certain components will be laid out on the mobile
version, and how to reason about them in the templates so that a
substantially different layout can still be achieved by only using CSS.
Today I finally wrote the CSS and it’s come together pretty damn
perfectly.

Still to come:
- Swiping left or right on discussions to reveal controls
- Tablet version
2015-03-03 20:30:52 +10:30

25 lines
586 B
JavaScript

import Ember from 'ember';
/**
Output a list of components within a <ul>, making sure each one is contained
in an <li> element.
*/
export default Ember.Component.extend({
layoutName: 'components/ui/item-list',
tagName: 'ul',
listItems: Ember.computed('items.[]', function() {
var items = this.get('items');
if (!Ember.isArray(items)) {
return [];
}
items.forEach(function(item) {
item.reopenClass({
isListItem: item.proto().tagName === 'li',
listItemClass: item.proto().listItemClass
});
});
return items;
})
});