step-6 phone images and links

- adding phone image and links to phone pages
- add end2end test that verifies our phone links
- css to style the page just a notch

Author: petebacondarwin

app/css/app.css

@@ -4,3 +4,20 @@ body {
   padding-top: 20px;
 }
 
+.phones {
+  list-style: none;
+}
+
+.thumb {
+  float: left;
+  margin: -0.5em 1em 1.5em 0;
+  padding-bottom: 1em;
+  height: 100px;
+  width: 100px;
+}
+
+.phones li {
+  clear: both;
+  height: 115px;
+  padding-top: 15px;
+}

app/index.html

@@ -27,8 +27,9 @@
         <!--Body content-->
 
         <ul class="phones">
-          <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
-            <span>{{phone.name}}</span>
+          <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
+            <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
+            <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
             <p>{{phone.snippet}}</p>
           </li>
         </ul>

test/e2e/scenarios.js

@@ -52,5 +52,15 @@ describe('PhoneCat App', function() {
         "Motorola XOOM\u2122 with Wi-Fi"
       ]);
     });
+
+
+    it('should render phone specific links', function() {
+      var query = element(by.model('query'));
+      query.sendKeys('nexus');
+      element(by.css('.phones li a')).click();
+      browser.getLocationAbsUrl().then(function(url) {
+        expect(url).toEqual('/phones/nexus-s');
+      });
+    });
   });
 });