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 refresh button and nav bar.

Browse Source
This commit is contained in:
Dan Barber 2013-01-23 15:27:56 +00:00
parent 279da66a1d
commit a13103b9e4
4 changed files with 33 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
index.html
View File

@ -14,13 +14,24 @@
<header role="banner" data-role="header" data-position="fixed"> <header role="banner" data-role="header" data-position="fixed">
<h1>Tube Status</h1> <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"> <section role="main" data-role="content">
<ul id="line-list" class="main-list" data-role="listview"> <ul id="line-list" class="main-list" data-role="listview">
</ul> </ul>
</section> </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 --> </div><!-- /page -->
</body> </body>

6
javascripts/models/line.js
View File

@ -2,7 +2,11 @@ define(['backbone'], function(Backbone) {
var Line = Backbone.Model.extend({ var Line = Backbone.Model.extend({
initialize: function() { 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(',', ' '));
} }
}); });

17
stylesheets/main.css
View File

@ -1,14 +1,10 @@
#line-list li .colour {
display: block;
float: left;
width: 1em;
height: 1em;
margin-right: 0.5em; }
li .name { li .name {
text-shadow: none; text-shadow: none;
padding: 0.2em 0.5em; 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 { li .status {
float: right; float: right;
@ -17,7 +13,7 @@ li .status {
li .good-service { li .good-service {
color: green; } color: green; }
li .part-closure, li .minor-delays { li .part-suspended, li .part-closure, li .minor-delays {
color: #CC9900; } color: #CC9900; }
li .special-service { li .special-service {
@ -28,7 +24,8 @@ li .major-delays {
#bakerloo .name { #bakerloo .name {
background: #b36305; background: #b36305;
color: white; } color: white;
border-width: 1px; }
#central .name { #central .name {
background: #e32017; background: #e32017;

13
stylesheets/main.scss
View File

@ -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;
li .name { text-shadow: none; padding: 0.2em 0.5em; font-weight: normal; } 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 .status { float: right; text-transform: capitalize; }
li .good-service { color: green; } li .good-service { color: green; }
li .part-closure, li .minor-delays { color: #CC9900; }
li .special-service { color: #000099; } li .special-service { color: #000099; }
li .part-suspended, li .part-closure, li .minor-delays { color: #CC9900; }
li .major-delays { color: #CC0000; } li .major-delays { color: #CC0000; }
$bakerloo: #B36305; $bakerloo: #B36305;