Skip to content
This repository was archived by the owner on Feb 26, 2024. It is now read-only.
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: angular/angular-phonecat
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: master
Choose a base ref
...
head repository: mattraykowski/angular-phonecat
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
Can’t automatically merge. Don’t worry, you can still create the pull request.
  • 19 commits
  • 132 files changed
  • 3 contributors

Commits on Oct 18, 2012

  1. add bootstrap 2.0.3

    IgorMinar committed Oct 18, 2012
    Copy the full SHA
    b1ed3a3 View commit details
  2. angular-phonecat README.md

    added phonecat specific info into the README.md file
    IgorMinar committed Oct 18, 2012
    Copy the full SHA
    9b8f31a View commit details
  3. Copy the full SHA
    8035332 View commit details
  4. add phones.json

    - Added a json file with a list of all phones. This file fakes a
      backend which would typically render this list dynamically from
      a database.
    IgorMinar committed Oct 18, 2012
    Copy the full SHA
    cd364fa View commit details
  5. add phone detail json files

    - Added one json file with detailed information about each phone
      listed in phones.json
    IgorMinar committed Oct 18, 2012
    Copy the full SHA
    a42a539 View commit details
  6. add phone images

    - Added images for each phone listed in phones.json
    IgorMinar committed Oct 18, 2012
    Copy the full SHA
    13b2549 View commit details
  7. empty the angular-seed project

    - Initial [angular-seed] project layout without default app and test
      code
    IgorMinar committed Oct 18, 2012
    Copy the full SHA
    da574a1 View commit details
  8. step-0 bootstrap angular app

    - add ngApp directive to bootstrap the app
    - add simple template with an expression
    IgorMinar committed Oct 18, 2012
    Copy the full SHA
    6d4f074 View commit details
  9. step-1 static phone list

    - Added static html list with two phones into index.html
    IgorMinar committed Oct 18, 2012
    Copy the full SHA
    7abe1a3 View commit details
  10. step-2 angular template with repeater

    - Converted the static html list into dynamic one by:
      - creating PhoneListCtrl controller for the application
      - extracting the data from HTML into a the controller as an in-memory
        dataset
      - converting the static document into a template with the use of
        `[ngRepeat]` [directive] which iterates over the dataset with phones,
        clones the ngRepeat template for each instance and renders it into the
        view
    - Added a simple unit test to show off how to write tests and run them
      with JsTD (see README.md for instructions)
    IgorMinar committed Oct 18, 2012
    Copy the full SHA
    d90cbe4 View commit details
  11. step-3 interactive search

    - Added a search box to demonstrate how:
      - the data-binding works on input fields
      - to use [filter] filter
      - [ngRepeat] automatically shrinks and grows the number of phones in the view
    - Added an end-to-end test to:
      - show how end-to-end tests are written and used
      - to prove that the search box and the repeater are correctly wired together
    IgorMinar committed Oct 18, 2012
    Copy the full SHA
    3fc729c View commit details
  12. step-4 phone ordering

    - Add "age" property to the phone model
    - Add select box to control phone list order
    - Override the default order value in controller
    - Add unit and e2e test for this feature
    IgorMinar committed Oct 18, 2012
    Copy the full SHA
    fd5414e View commit details
  13. step-5 XHR and dependency injection

    - Replaced the in-memory dataset with data loaded from the server (in
      the form of static phone.json file to make this tutorial backend
      agnostic)
      - The json file is loaded using the [$http] service
    - Demonstrate the use of [services][service] and [dependency injection][DI]
      - The [$http] is injected into the controller through [dependency injection][DI]
    IgorMinar committed Oct 18, 2012
    Copy the full SHA
    643ea62 View commit details
  14. 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
    IgorMinar committed Oct 18, 2012
    Copy the full SHA
    4162ddc View commit details
  15. step-7 $route and app partitioning

    - Introduce the [$route] service which allows binding URLs for deep-linking with
      views
      - Create PhoneCatCtrl which governs the entire app and contains $route
        configuration
      - Map `/phones' to PhoneListCtrl and partails/phones-list.html
      - Map `/phones/<phone-id>' to PhoneDetailCtrl and partails/phones-detail.html
      - Copy deep linking parameters to root controller `params` property for access
        in sub controllers
      - Replace content of index.html with [ng:view] widget
    - Create phone list route
      - Preserve existing PhoneListCtrl controller
      - Move existing html from index.html to partials/phone-list.html
    - Create phone details route
      - Empty placeholder PhoneDetailsCtrl controller
      - Empty placeholder partials/phane-details.html template
    IgorMinar committed Oct 18, 2012
    Copy the full SHA
    8b3e3b2 View commit details
  16. step-8 phone details view

    - Fetch data for and render phone detail view
      - PhoneDetailCtrl controller to fetch details json with [$xhr] for a specific
        phone
      - template for the phone detailed view
    - CSS to make the phone details page look "pretty"
    mhevery authored and IgorMinar committed Oct 18, 2012
    Copy the full SHA
    2d45f47 View commit details
  17. step-9 checkmark filter

    - Added custom checkmark filter
    - Update phone detail template to use checkmark filter
    - Added spec for the filter
    IgorMinar committed Oct 18, 2012
    Copy the full SHA
    f37a97c View commit details
  18. step-10 image swapping with ng:click

    In the phone detail view, clicking on a thumbnail image, changes the
    main phone image to be the large version of the thumbnail image.
    
    - Define mainImageUrl model variable in the PhoneDetailCtrl and set its
      default value
    - Create setImage controller method to change mainImageUrl
    - Register ng:click handler for thumb images to use setImage controller
      method
    - Add e2e tests for this feature
    - Add css to change the mouse cursor when user points at thumnail images
    IgorMinar committed Oct 18, 2012
    Copy the full SHA
    d602c01 View commit details
  19. step-11 custom service and $resource

    - Replaced [$xhr] with [$resource]
    - Created a custom Phone service that represents the $resource client
    IgorMinar committed Oct 18, 2012
    Copy the full SHA
    9aebada View commit details
Showing with 7,979 additions and 172 deletions.
  1. +155 −49 README.md
  2. +68 −14 app/css/app.css
  3. +808 −0 app/css/bootstrap-responsive.css
  4. +9 −0 app/css/bootstrap-responsive.min.css
  5. +4,960 −0 app/css/bootstrap.css
  6. +9 −0 app/css/bootstrap.min.css
  7. BIN app/img/glyphicons-halflings-white.png
  8. BIN app/img/glyphicons-halflings.png
  9. BIN app/img/phones/dell-streak-7.0.jpg
  10. BIN app/img/phones/dell-streak-7.1.jpg
  11. BIN app/img/phones/dell-streak-7.2.jpg
  12. BIN app/img/phones/dell-streak-7.3.jpg
  13. BIN app/img/phones/dell-streak-7.4.jpg
  14. BIN app/img/phones/dell-venue.0.jpg
  15. BIN app/img/phones/dell-venue.1.jpg
  16. BIN app/img/phones/dell-venue.2.jpg
  17. BIN app/img/phones/dell-venue.3.jpg
  18. BIN app/img/phones/dell-venue.4.jpg
  19. BIN app/img/phones/dell-venue.5.jpg
  20. BIN app/img/phones/droid-2-global-by-motorola.0.jpg
  21. BIN app/img/phones/droid-2-global-by-motorola.1.jpg
  22. BIN app/img/phones/droid-2-global-by-motorola.2.jpg
  23. BIN app/img/phones/droid-pro-by-motorola.0.jpg
  24. BIN app/img/phones/droid-pro-by-motorola.1.jpg
  25. BIN app/img/phones/lg-axis.0.jpg
  26. BIN app/img/phones/lg-axis.1.jpg
  27. BIN app/img/phones/lg-axis.2.jpg
  28. BIN app/img/phones/motorola-atrix-4g.0.jpg
  29. BIN app/img/phones/motorola-atrix-4g.1.jpg
  30. BIN app/img/phones/motorola-atrix-4g.2.jpg
  31. BIN app/img/phones/motorola-atrix-4g.3.jpg
  32. BIN app/img/phones/motorola-bravo-with-motoblur.0.jpg
  33. BIN app/img/phones/motorola-bravo-with-motoblur.1.jpg
  34. BIN app/img/phones/motorola-bravo-with-motoblur.2.jpg
  35. BIN app/img/phones/motorola-charm-with-motoblur.0.jpg
  36. BIN app/img/phones/motorola-charm-with-motoblur.1.jpg
  37. BIN app/img/phones/motorola-charm-with-motoblur.2.jpg
  38. BIN app/img/phones/motorola-defy-with-motoblur.0.jpg
  39. BIN app/img/phones/motorola-defy-with-motoblur.1.jpg
  40. BIN app/img/phones/motorola-defy-with-motoblur.2.jpg
  41. BIN app/img/phones/motorola-xoom-with-wi-fi.0.jpg
  42. BIN app/img/phones/motorola-xoom-with-wi-fi.1.jpg
  43. BIN app/img/phones/motorola-xoom-with-wi-fi.2.jpg
  44. BIN app/img/phones/motorola-xoom-with-wi-fi.3.jpg
  45. BIN app/img/phones/motorola-xoom-with-wi-fi.4.jpg
  46. BIN app/img/phones/motorola-xoom-with-wi-fi.5.jpg
  47. BIN app/img/phones/motorola-xoom.0.jpg
  48. BIN app/img/phones/motorola-xoom.1.jpg
  49. BIN app/img/phones/motorola-xoom.2.jpg
  50. BIN app/img/phones/nexus-s.0.jpg
  51. BIN app/img/phones/nexus-s.1.jpg
  52. BIN app/img/phones/nexus-s.2.jpg
  53. BIN app/img/phones/nexus-s.3.jpg
  54. BIN app/img/phones/samsung-galaxy-tab.0.jpg
  55. BIN app/img/phones/samsung-galaxy-tab.1.jpg
  56. BIN app/img/phones/samsung-galaxy-tab.2.jpg
  57. BIN app/img/phones/samsung-galaxy-tab.3.jpg
  58. BIN app/img/phones/samsung-galaxy-tab.4.jpg
  59. BIN app/img/phones/samsung-galaxy-tab.5.jpg
  60. BIN app/img/phones/samsung-galaxy-tab.6.jpg
  61. BIN app/img/phones/samsung-gem.0.jpg
  62. BIN app/img/phones/samsung-gem.1.jpg
  63. BIN app/img/phones/samsung-gem.2.jpg
  64. BIN app/img/phones/samsung-mesmerize-a-galaxy-s-phone.0.jpg
  65. BIN app/img/phones/samsung-mesmerize-a-galaxy-s-phone.1.jpg
  66. BIN app/img/phones/samsung-mesmerize-a-galaxy-s-phone.2.jpg
  67. BIN app/img/phones/samsung-mesmerize-a-galaxy-s-phone.3.jpg
  68. BIN app/img/phones/samsung-showcase-a-galaxy-s-phone.0.jpg
  69. BIN app/img/phones/samsung-showcase-a-galaxy-s-phone.1.jpg
  70. BIN app/img/phones/samsung-showcase-a-galaxy-s-phone.2.jpg
  71. BIN app/img/phones/samsung-transform.0.jpg
  72. BIN app/img/phones/samsung-transform.1.jpg
  73. BIN app/img/phones/samsung-transform.2.jpg
  74. BIN app/img/phones/samsung-transform.3.jpg
  75. BIN app/img/phones/samsung-transform.4.jpg
  76. BIN app/img/phones/sanyo-zio.0.jpg
  77. BIN app/img/phones/sanyo-zio.1.jpg
  78. BIN app/img/phones/sanyo-zio.2.jpg
  79. BIN app/img/phones/t-mobile-g2.0.jpg
  80. BIN app/img/phones/t-mobile-g2.1.jpg
  81. BIN app/img/phones/t-mobile-g2.2.jpg
  82. BIN app/img/phones/t-mobile-mytouch-4g.0.jpg
  83. BIN app/img/phones/t-mobile-mytouch-4g.1.jpg
  84. BIN app/img/phones/t-mobile-mytouch-4g.2.jpg
  85. BIN app/img/phones/t-mobile-mytouch-4g.3.jpg
  86. BIN app/img/phones/t-mobile-mytouch-4g.4.jpg
  87. BIN app/img/phones/t-mobile-mytouch-4g.5.jpg
  88. +10 −18 app/index.html
  89. +7 −6 app/js/app.js
  90. +16 −4 app/js/controllers.js
  91. +0 −8 app/js/directives.js
  92. +5 −6 app/js/filters.js
  93. +6 −5 app/js/services.js
  94. +0 −1 app/partials/partial1.html
  95. +0 −5 app/partials/partial2.html
  96. +113 −0 app/partials/phone-detail.html
  97. +27 −0 app/partials/phone-list.html
  98. +64 −0 app/phones/dell-streak-7.json
  99. +67 −0 app/phones/dell-venue.json
  100. +62 −0 app/phones/droid-2-global-by-motorola.json
  101. +61 −0 app/phones/droid-pro-by-motorola.json
  102. +62 −0 app/phones/lg-axis.json
  103. +62 −0 app/phones/motorola-atrix-4g.json
  104. +61 −0 app/phones/motorola-bravo-with-motoblur.json
  105. +62 −0 app/phones/motorola-charm-with-motoblur.json
  106. +64 −0 app/phones/motorola-defy-with-motoblur.json
  107. +65 −0 app/phones/motorola-xoom-with-wi-fi.json
  108. +62 −0 app/phones/motorola-xoom.json
  109. +69 −0 app/phones/nexus-s.json
  110. +155 −0 app/phones/phones.json
  111. +69 −0 app/phones/samsung-galaxy-tab.json
  112. +61 −0 app/phones/samsung-gem.json
  113. +63 −0 app/phones/samsung-mesmerize-a-galaxy-s-phone.json
  114. +62 −0 app/phones/samsung-showcase-a-galaxy-s-phone.json
  115. +64 −0 app/phones/samsung-transform.json
  116. +61 −0 app/phones/sanyo-zio.json
  117. +62 −0 app/phones/t-mobile-g2.json
  118. +65 −0 app/phones/t-mobile-mytouch-4g.json
  119. +115 −0 scripts/private/ScrapeData.js
  120. +11 −0 scripts/private/format-json.sh
  121. +15 −0 scripts/private/goto_step.bat
  122. +13 −0 scripts/private/goto_step.sh
  123. +7 −0 scripts/private/push-to-github.sh
  124. +15 −0 scripts/private/retag.sh
  125. +19 −0 scripts/private/snapshot-web.sh
  126. +43 −0 scripts/private/snapshot.sh
  127. +13 −0 scripts/update-repo.sh
  128. +50 −16 test/e2e/scenarios.js
  129. +56 −14 test/unit/controllersSpec.js
  130. +0 −12 test/unit/directivesSpec.js
  131. +6 −7 test/unit/filtersSpec.js
  132. +0 −7 test/unit/servicesSpec.js
204 changes: 155 additions & 49 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,67 +1,162 @@
# angular-seed — the seed for AngularJS apps
# AngularJS Phone Catalog Tutorial Application

This project is an application skeleton for a typical [AngularJS](http://angularjs.org/) web app.
You can use it to quickly bootstrap your angular webapp projects and dev environment for these
projects.
## Overview

The seed contains AngularJS libraries, test libraries and a bunch of scripts all preconfigured for
instant web development gratification. Just clone the repo (or download the zip/tarball), start up
our (or yours) webserver and you are ready to develop and test your application.
This application takes the developer thought the process of building a web-application using
angular. The application is loosely based on
[Google phone gallery](http://www.google.com/phone/). Each commit is a separate lesson
teaching a single aspect of angular.

The seed app doesn't do much, just shows how to wire two controllers and views together. You can
check it out by opening app/index.html in your browser (might not work file `file://` scheme in
certain browsers, see note below).

_Note: While angular is client-side-only technology and it's possible to create angular webapps that
don't require a backend server at all, we recommend hosting the project files using a local
webserver during development to avoid issues with security restrictions (sandbox) in browsers. The
sandbox implementation varies between browsers, but quite often prevents things like cookies, xhr,
etc to function properly when an html page is opened via `file://` scheme instead of `http://`._
## Prerequisites

### Git
- A good place to learn about setting up git is [here][git-github]
- Git [home][git-home] (download, documentation)

## How to use angular-seed
### Node.js
- Generic [installation instructions][node-generic].
- Mac DMG [here][node-mac]
- Windows download from [here][node-windows]. (You will also need [7 Zip] to unzip the node archive)
(and don't forget to add `node.exe` to your executable path)

Clone the angular-seed repository and start hacking...
### Java
- http://www.java.com

## Workings of the application

### Running the app during development
- The application filesystem layout structure is based on the [angular-seed] project.
- There is no backend (no server) for this application. Instead we fake the XHRs by fetching
static json files.
- Read the Development section at the end to familiarize yourself with running and developing
an angular application.

## Commits / Tutorial Outline

You can check out any point of the tutorial using
git checkout step-?

To see the changes which between any two lessons use the git diff command.
git diff step-?..step-?

### step-0

- Initial [angular-seed] project layout


### step-1

- We have converted the seed application by removing all of the boiler-plate code.
- We have added single static HTML file which shows a static list of phones. (we will convert this
static page into dynamic one with the help of angular)


### step-2

- Converted static page into dynamic one by:
- create a root controller for the application
- extracting the data from HTML into a the controller as a mock dataset
- convert the static document into a template with the use of `ng:` [directive] (iterate over
mock data using [ng:repeat] and render it into a view)
- Added unit test, which mostly shows how one goes about writing a unit test, rather then test
something of value on our mock dataset.


### step-3

- added a search box to demonstrate how:
- the data-binding works on input fields
- to use [$filter] function
- [ng:repeat] automatically shrinks and grows the number of phones in the view
- added an end-to-end test to:
- show how end-to-end tests are written and used
- to prove that the search box and the repeater are correctly wired together


### step-4

- replaced the mock data with data loaded from the server (in our case the JSON return is just a
static file)
- The JSON is loaded using the [$xhr] service
- Demonstrate the use of [services][service] and [dependency injection][DI]
- The [$xhr] is injected into the controller through [dependency injection][DI]

You can pick one of these options:

* serve this repository with your webserver
* install node.js and run `scripts/web-server.js`
### step-5

Then navigate your browser to `http://localhost:<port>/app/index.html` to see the app running in
your browser.
- adding phone image and links to phone pages
- css to style the page just a notch


### Running the app in production
### step-6

This really depends on how complex is your app and the overall infrastructure of your system, but
the general rule is that all you need in production are all the files under the `app/` directory.
Everything else should be omitted.
- making the order predicate for catalog dynamic
- adding 'predicates' section to the view with links that control the order
- ordering defaults to 'age' property
- css sugar

Angular apps are really just a bunch of static html, css and js files that just need to be hosted
somewhere, where they can be accessed by browsers.

If your Angular app is talking to the backend server via xhr or other means, you need to figure
out what is the best way to host the static files to comply with the same origin policy if
applicable. Usually this is done by hosting the files by the backend server or through
reverse-proxying the backend server(s) and a webserver(s).
### step-7

- Introduce the [$route] service which allows binding URLs for deep-linking with views
- Replace content of root controller PhonesCtrl with [$route] configuration
- Map `/phones' to PhoneListCtrl and partails/phones-list.html
- Map `/phones/phone-id' to PhoneDetailCtrl and partails/phones-detail.html
- Copy deep linking parameters to root controller `params` property for access in sub controllers
- Replace content of index.html with [ng:view]
- Create PhoneListCtrl view
- Move code which fetches phones data into PhoneListCtrl
- Move existing HTML from index.html to partials/phone-list.html
- Create PhoneDetailsCtrl view
- Wire [$route] service to map `/phanes/phone-id` to map to this controller.
- Empty PhoneDetailsCtrl
- Place holder partials/phane-details.html

### step-8

- Fetch data for and render phone detail view
- [$xhr] to fetch details for a specific phone
- template for the phone detailed view
- CSS to make it look pretty
- Detail data for phones in JSON format

### step-9

- replace [$xhr] with [$resource]
- demonstrate how a resource can be created using a [service]

## Development with angular-seed

The following docs apply to all angular-seed projects and since the phonecat tutorial is a project
based on angular-seed, the instructions apply to it as well.

### Running the app during development

1. run `./scripts/web-server.js`
2. navigate your browser to `http://localhost:8000/app/index.html` to see the app running in your
browser.

### Running unit tests

We recommend using [jasmine](http://pivotal.github.com/jasmine/) and
[Testacular](http://vojtajina.github.com/testacular/) for your unit tests/specs, but you are free
to use whatever works for you.
Requires java.

Requires [node.js](http://nodejs.org/), Testacular (`sudo npm install -g testacular`) and a local
or remote browser.
1. start `./scripts/test-server.sh` (on windows `scripts\test-server.bat`)
2. navigate your browser to `http://localhost:9876/`
3. click on: capture strict link
4. run `scripts/test.sh` (on windows `scripts\test.bat`)
5. edit files in `app/` or `src/` and save them
6. go to step 4.

* start `scripts/test.sh` (on windows: `scripts\test.bat`)
* a browser will start and connect to the Testacular server (Chrome is default browser, others can be captured by loading the same url as the one in Chrome or by changing the `config/testacular.conf.js` file)
* to run or re-run tests just change any of your source or test javascript files

### Continuous unit testing

Requires ruby and [watchr](https://github.com/mynyml/watchr) gem.

1. start JSTD server and capture a browser as described above
2. start watchr with `watchr scripts/watchr.rb`
3. in a different window/tab/editor `tail -f logs/jstd.log`
4. edit files in `app/` or `src/` and save them
5. watch the log to see updates


### End to end testing
@@ -82,14 +177,7 @@ info.
* run the tests from console with [Testacular](vojtajina.github.com/testacular) via
`scripts/e2e-test.sh` or `script/e2e-test.bat`


### Receiving updates from upstream

When we upgrade angular-seed's repo with newer angular or testing library code, you can just
fetch the changes and merge them into your project with git.


## Directory Layout
## Application Directory Layout

app/ --> all of the files to be used in production
css/ --> css files
@@ -141,3 +229,21 @@ fetch the changes and merge them into your project with git.
## Contact

For more information on AngularJS please check out http://angularjs.org/

[7 Zip]: http://www.7-zip.org/
[angular-seed]: https://github.com/angular/angular-seed
[DI]: http://docs.angularjs.org/#!guide.di
[directive]: http://docs.angularjs.org/#!angular.directive
[$filter]: http://docs.angularjs.org/#!angular.Array.filter
[git-home]: http://git-scm.com
[git-github]: http://help.github.com/set-up-git-redirect
[ng:repeat]: http://docs.angularjs.org/#!angular.widget.@ng:repeat
[ng:view]: http://docs.angularjs.org/#!angular.widget.ng:view
[node-mac]: http://code.google.com/p/rudix/downloads/detail?name=node-0.4.0-0.dmg&can=2&q=
[node-windows]: http://node-js.prcn.co.cc/
[node-generic]: https://github.com/joyent/node/wiki/Installation
[java]: http://www.java.com
[$resource]: http://docs.angularjs.org/#!angular.service.$resource
[$rouet]: http://docs.angularjs.org/#!angular.service.$route
[service]: http://docs.angularjs.org/#!angular.service
[$xhr]: http://docs.angularjs.org/#!angular.service.$xhr
82 changes: 68 additions & 14 deletions app/css/app.css
Original file line number Diff line number Diff line change
@@ -1,30 +1,84 @@
/* app css stylesheet */

.menu {
body {
padding-top: 20px;
}

.phones {
list-style: none;
border-bottom: 0.1em solid black;
}

.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;
}

/** Detail View **/
img.phone {
float: left;
border: 1px solid black;
margin-right: 3em;
margin-bottom: 2em;
padding: 0 0 0.5em;
background-color: white;
padding: 2em;
height: 400px;
width: 400px;
}

.menu:before {
content: "[";
ul.phone-thumbs {
margin: 0;
list-style: none;
}

.menu:after {
content: "]";
ul.phone-thumbs li {
border: 1px solid black;
display: inline-block;
margin: 1em;
background-color: white;
}

.menu > li {
display: inline;
ul.phone-thumbs img {
height: 100px;
width: 100px;
padding: 1em;
}

.menu > li:before {
content: "|";
padding-right: 0.3em;
ul.phone-thumbs img:hover {
cursor: pointer;
}

.menu > li:nth-child(1):before {
content: "";

ul.specs {
clear: both;
margin: 0;
padding: 0;
list-style: none;
}

ul.specs > li{
display: inline-block;
width: 200px;
vertical-align: top;
}

ul.specs > li > span{
font-weight: bold;
font-size: 1.2em;
}

ul.specs dt {
font-weight: bold;
}

h1 {
border-bottom: 1px solid gray;
}
Loading