From 279da66a1ddd2665d82179791db91c2ba32f060a Mon Sep 17 00:00:00 2001 From: Dan Barber Date: Wed, 23 Jan 2013 12:37:12 +0000 Subject: [PATCH] Add styling and colours to CSS. --- index.html | 3 +- javascripts/models/line.js | 4 +- javascripts/templates/line.mustache | 2 +- javascripts/views/line_list.js | 1 + stylesheets/main.css | 79 +++++++++++++++++++++++++++++ stylesheets/main.scss | 37 ++++++++++++++ 6 files changed, 123 insertions(+), 3 deletions(-) create mode 100644 stylesheets/main.css create mode 100644 stylesheets/main.scss 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); }