diff --git a/index.html b/index.html
index 2ecf72a..de176df 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,10 @@
- Tube Status
+ London Underground Status
+
diff --git a/javascripts/models/line.js b/javascripts/models/line.js
index ea80ca7..e83d901 100644
--- a/javascripts/models/line.js
+++ b/javascripts/models/line.js
@@ -1,7 +1,9 @@
define(['backbone'], function(Backbone) {
var Line = Backbone.Model.extend({
-
+ initialize: function() {
+ this.set("status_class", this.get("status").replace(' ', '-'));
+ }
});
return Line;
diff --git a/javascripts/templates/line.mustache b/javascripts/templates/line.mustache
index 6cdfcf6..5cf4ae0 100644
--- a/javascripts/templates/line.mustache
+++ b/javascripts/templates/line.mustache
@@ -1 +1 @@
-{{{ name }}} ({{ status }})
+{{{ name }}} {{ status }}
diff --git a/javascripts/views/line_list.js b/javascripts/views/line_list.js
index 74ea221..1cee4b5 100644
--- a/javascripts/views/line_list.js
+++ b/javascripts/views/line_list.js
@@ -24,6 +24,7 @@ function(Backbone,
this.collection.models.forEach(function(model) {
html += Mustache.render(lineTemplate, model.toJSON());
});
+ // render the HTML and refresh jQuery Mobile.
this.$el.html(html).listview("refresh");
},
diff --git a/stylesheets/main.css b/stylesheets/main.css
new file mode 100644
index 0000000..99f3757
--- /dev/null
+++ b/stylesheets/main.css
@@ -0,0 +1,79 @@
+#line-list li .colour {
+ display: block;
+ float: left;
+ width: 1em;
+ height: 1em;
+ margin-right: 0.5em; }
+
+li .name {
+ text-shadow: none;
+ padding: 0.2em 0.5em;
+ font-weight: normal; }
+
+li .status {
+ float: right;
+ text-transform: capitalize; }
+
+li .good-service {
+ color: green; }
+
+li .part-closure, li .minor-delays {
+ color: #CC9900; }
+
+li .special-service {
+ color: #000099; }
+
+li .major-delays {
+ color: #CC0000; }
+
+#bakerloo .name {
+ background: #b36305;
+ color: white; }
+
+#central .name {
+ background: #e32017;
+ color: white; }
+
+#circle .name {
+ background: #ffd300;
+ color: #113b92; }
+
+#district .name {
+ background: #00782a;
+ color: white; }
+
+#docklands .name {
+ background: #00a4a7;
+ color: white; }
+
+#hammersmithcity .name {
+ background: #f3a9bb;
+ color: #113b92; }
+
+#jubilee .name {
+ background: #a0a5a9;
+ color: white; }
+
+#metropolitan .name {
+ background: #9b0056;
+ color: white; }
+
+#northern .name {
+ background: black;
+ color: white; }
+
+#overground .name {
+ background: #ee7c0e;
+ color: white; }
+
+#piccadilly .name {
+ background: #003688;
+ color: white; }
+
+#victoria .name {
+ background: #0098d4;
+ color: white; }
+
+#waterloocity .name {
+ background: #95cdba;
+ color: #113b92; }
diff --git a/stylesheets/main.scss b/stylesheets/main.scss
new file mode 100644
index 0000000..983ce00
--- /dev/null
+++ b/stylesheets/main.scss
@@ -0,0 +1,37 @@
+#line-list li .colour { display: block; float: left; width: 1em; height: 1em; margin-right: 0.5em; }
+
+li .name { text-shadow: none; padding: 0.2em 0.5em; font-weight: normal; }
+li .status { float: right; text-transform: capitalize; }
+li .good-service { color: green; }
+li .part-closure, li .minor-delays { color: #CC9900; }
+li .special-service { color: #000099; }
+li .major-delays { color: #CC0000; }
+
+$bakerloo: #B36305;
+$central: #E32017;
+$circle: #FFD300;
+$district: #00782A;
+$hammersmithcity: #F3A9BB;
+$jubilee: #A0A5A9;
+$metropolitan: #9B0056;
+$northern: #000000;
+$piccadilly: #003688;
+$victoria: #0098D4;
+$waterloocity: #95CDBA;
+$docklands: #00A4A7;
+$overground: #EE7C0E;
+$tramlink: #84B817;
+
+#bakerloo .name { background: $bakerloo; color: white; }
+#central .name { background: $central; color: white; }
+#circle .name { background: $circle; color: rgb(17, 59, 146); }
+#district .name { background: $district; color: white; }
+#docklands .name { background: $docklands; color: white; }
+#hammersmithcity .name { background: $hammersmithcity; color: rgb(17, 59, 146); }
+#jubilee .name { background: $jubilee; color: white; }
+#metropolitan .name { background: $metropolitan; color: white; }
+#northern .name { background: $northern; color: white; }
+#overground .name { background: $overground; color: white; }
+#piccadilly .name { background: $piccadilly; color: white; }
+#victoria .name { background: $victoria; color: white; }
+#waterloocity .name { background: $waterloocity; color: rgb(17, 59, 146); }