Add Bootstrp and model table to make things look better

app/controllers/racks.js

+import Ember from 'ember';
+export default Ember.Controller.extend({
+
+rackTableColumns: Ember.computed(function() {
+ var col = Ember.A([
+    Ember.Object.create({
+      propertyName: "name",
+      title: "Name"
+    }),
+    Ember.Object.create({
+     propertyName: 'nbColumns',
+     title: 'Nombre de colonnes',
+    }),
+    Ember.Object.create({
+     propertyName: 'nbRows',
+     title: 'Nombre de lignes',
+    }),
+    Ember.Object.create({
+       "template": "customcell/imagecell",
+      title: 'Image',
+    })
+]);
+ return col;
+}),
+
+rackTableContent: Ember.computed(function() {
+  return this.get("model");
+ })
+});

app/templates/application.hbs

-<h1>Ember Cellar</h1>
-    {{outlet}}
+<div class="container">
+
+   <div class="page-header">
+     <h1>Ember Cellar</h1>
+     <p class="lead">Basic layout using Bootstrap for a simple wine application</p>
+   </div>
+   {{outlet}}
+
+</div>

app/templates/customcell/imagecell.hbs

+{{!`record` - row from model, current column is available as `column`}}
+<img src='{{record.image}}' height="128" width="128"/>

app/templates/racks.hbs

-
 <h2>List of Racks</h2>
-<div class="detail">
-{{#each model as |rack|}}
-  <article class="listing">
-    <h3>{{rack.name}}</h3>
-    <div class="detail">
-      <span>Nb Colums:</span> {{rack.nbColumns}}
-    <span>Nb Rows:</span> {{rack.nbRows}}
-    </div>
-    <div class="detail">
-      <img src={{rack.image}} width='235px' height='235px'/>
-    </div>
-  </article>
-{{/each}}
+{{models-table
+          data=rackTableContent
+          columns=rackTableColumns}}
 {{outlet}}
-</div>

ember-cli-build.js

@@ -3,7 +3,11 @@ const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
 module.exports = function(defaults) {
   var app = new EmberApp(defaults, {
-    // Add options here
+    'ember-bootstrap': {
+      'bootstrapVersion': 3,
+      'importBootstrapFont': true,
+      'importBootstrapCSS': true
+    }
   });
 
   // Use `app.import` to add additional libraries to the generated

package.json

@@ -15,8 +15,10 @@
     "test": "ember test"
   },
   "devDependencies": {
+    "bootstrap": "^3.3.7",
     "broccoli-asset-rev": "^2.4.5",
     "ember-ajax": "^2.4.1",
+    "ember-bootstrap": "^1.0.0-alpha.10",
     "ember-cli": "2.12.1",
     "ember-cli-app-version": "^2.0.0",
     "ember-cli-babel": "^5.1.7",
@@ -32,6 +34,7 @@
     "ember-data": "^2.12.0",
     "ember-export-application-global": "^1.0.5",
     "ember-load-initializers": "^0.6.0",
+    "ember-models-table": "^1.11.0",
     "ember-resolver": "^2.0.3",
     "ember-source": "~2.12.0",
     "loader.js": "^4.2.3"

tests/unit/controllers/racks-test.js

+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:racks', 'Unit | Controller | racks', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  let controller = this.subject();
+  assert.ok(controller);
+});