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: IgorMinar

app/css/app.css

@@ -4,3 +4,20 @@ body {
   padding-top: 20px;
 }
 
+.phones {
+  list-style: none;
+}
+
+.thumb {
+  float: left;
+  margin: -1em 1em 1.5em 0em;
+  padding-bottom: 1em;
+  height: 100px;
+  width: 100px;
+}
+
+.phones li {
+  clear: both;
+  height: 100px;
+  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">
-            {{phone.name}}
+          <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

@@ -35,5 +35,12 @@ describe('PhoneCat App', function() {
           toEqual(["MOTOROLA XOOM\u2122",
                    "Motorola XOOM\u2122 with Wi-Fi"]);
     });
+
+
+    it('should render phone specific links', function() {
+      input('query').enter('nexus');
+      element('.phones li a').click();
+      expect(browser().location().url()).toBe('/phones/nexus-s');
+    });
   });
 });