danbarber/tube-status-server
1
0
Fork 0
mirror of https://github.com/danbee/tube-status-server synced 2025-03-04 08:39:12 +00:00
Code Issues Releases Wiki Activity

Add styling and colours to CSS.

Browse Source
This commit is contained in:
Dan Barber 2013-01-23 12:37:12 +00:00
parent b84145b85f
commit 279da66a1d
6 changed files with 123 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -1,9 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Tube Status</title> <title>London Underground Status</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
<link rel="stylesheet" href="stylesheets/main.css" />
<script src="javascripts/libs/require.js" data-main="javascripts/main"></script> <script src="javascripts/libs/require.js" data-main="javascripts/main"></script>
</head> </head>

4
javascripts/models/line.js
View File

@ -1,7 +1,9 @@
define(['backbone'], function(Backbone) { define(['backbone'], function(Backbone) {
var Line = Backbone.Model.extend({ var Line = Backbone.Model.extend({
initialize: function() {
this.set("status_class", this.get("status").replace(' ', '-'));
}
}); });
return Line; return Line;

2
javascripts/templates/line.mustache
View File

@ -1 +1 @@
<li id="{{ id }}">{{{ name }}} ({{ status }})</li> <li id="{{ id }}"><span class="name">{{{ name }}}</span> <span class="status {{ status_class }}">{{ status }}</span></li>

1
javascripts/views/line_list.js
View File

@ -24,6 +24,7 @@ function(Backbone,
this.collection.models.forEach(function(model) { this.collection.models.forEach(function(model) {
html += Mustache.render(lineTemplate, model.toJSON()); html += Mustache.render(lineTemplate, model.toJSON());
}); });
// render the HTML and refresh jQuery Mobile.
this.$el.html(html).listview("refresh"); this.$el.html(html).listview("refresh");
}, },

79
stylesheets/main.css Normal file
View File

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

37
stylesheets/main.scss Normal file
View File

@ -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); }