From a13103b9e477cb67d43331cbd7132c6a3be62049 Mon Sep 17 00:00:00 2001
From: Dan Barber <dan@new-bamboo.co.uk>
Date: Wed, 23 Jan 2013 15:27:56 +0000
Subject: [PATCH] Add refresh button and nav bar.

---
 index.html                 | 13 ++++++++++++-
 javascripts/models/line.js |  6 +++++-
 stylesheets/main.css       | 17 +++++++----------
 stylesheets/main.scss      | 13 +++++++++----
 4 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index de176df..63ebb63 100644
--- a/index.html
+++ b/index.html
@@ -14,13 +14,24 @@
 
       <header role="banner" data-role="header" data-position="fixed">
         <h1>Tube Status</h1>
-      </header><!-- /header -->
+        <a href="index.html" data-icon="refresh" class="ui-btn-right">Refresh</a>
+      </header>
 
       <section role="main" data-role="content">
         <ul id="line-list" class="main-list" data-role="listview">
         </ul>
       </section>
 
+      <footer data-role="footer" data-position="fixed">
+        <div data-role="navbar">
+          <ul>
+            <li><a href="#">Now</a></li>
+            <li><a href="#">Tomorrow</a></li>
+            <li><a href="#">Weekend</a></li>
+          </ul>
+        </div><!-- /navbar -->
+      </footer>
+
     </div><!-- /page -->
 
   </body>
diff --git a/javascripts/models/line.js b/javascripts/models/line.js
index e83d901..aa21ba5 100644
--- a/javascripts/models/line.js
+++ b/javascripts/models/line.js
@@ -2,7 +2,11 @@ define(['backbone'], function(Backbone) {
 
   var Line = Backbone.Model.extend({
     initialize: function() {
-      this.set("status_class", this.get("status").replace(' ', '-'));
+      this.set_status();
+    },
+
+    set_status: function() {
+      this.set("status_class", this.get("status").replace(', ', ',').replace(' ', '-').replace(',', ' '));
     }
   });
 
diff --git a/stylesheets/main.css b/stylesheets/main.css
index 99f3757..ad8d089 100644
--- a/stylesheets/main.css
+++ b/stylesheets/main.css
@@ -1,14 +1,10 @@
-#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; }
+  font-weight: normal;
+  border-radius: 3px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(0, 0, 0, 0.1); }
 
 li .status {
   float: right;
@@ -17,7 +13,7 @@ li .status {
 li .good-service {
   color: green; }
 
-li .part-closure, li .minor-delays {
+li .part-suspended, li .part-closure, li .minor-delays {
   color: #CC9900; }
 
 li .special-service {
@@ -28,7 +24,8 @@ li .major-delays {
 
 #bakerloo .name {
   background: #b36305;
-  color: white; }
+  color: white;
+  border-width: 1px; }
 
 #central .name {
   background: #e32017;
diff --git a/stylesheets/main.scss b/stylesheets/main.scss
index 983ce00..840f1e9 100644
--- a/stylesheets/main.scss
+++ b/stylesheets/main.scss
@@ -1,10 +1,15 @@
-#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 .name {
+  text-shadow: none;
+  padding: 0.2em 0.5em;
+  font-weight: normal;
+  border-radius: 3px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
 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 .part-suspended, li .part-closure, li .minor-delays { color: #CC9900; }
 li .major-delays { color: #CC0000; }
 
 $bakerloo:        #B36305;