@@ -24,9 +50,8 @@ diff --git a/javascripts/app.js b/javascripts/app.js index 7a54059..9ad25f0 100644 --- a/javascripts/app.js +++ b/javascripts/app.js @@ -1,16 +1,16 @@ define(['backbone', 'mustache', - 'collections/lines', + 'collections/lines_now', 'views/main', 'views/line_list'], -function(Backbone, Mustache, LinesCollection, Main, LineList) { +function(Backbone, Mustache, LinesNowCollection, Main, LineList) { return { initialize: function() { - lines = new LinesCollection; + lines = new LinesNowCollection; main = new Main({ collection: lines }); lineList = new LineList({ collection: lines }); - lines.url = lines.urls.now; + //lines.url = lines.urls.now; lines.fetch(); } diff --git a/javascripts/collections/lines.js b/javascripts/collections/lines.js deleted file mode 100644 index 7c72378..0000000 --- a/javascripts/collections/lines.js +++ /dev/null @@ -1,28 +0,0 @@ -define(['backbone', 'models/line'], function(Backbone, Line) { - - var MySync = function (method, collection, options) { -    options.timeout = 10000; // required, or the application won't pick up on 404 responses -    options.dataType = "jsonp"; -    return Backbone.sync(method, collection, options); - }; - - var LinesCollection = Backbone.Collection.extend({ - // url: "http://api.tubeupdates.com/?method=get.status", - urls: { - now: "http://tubefeed.herokuapp.com/now.json", - tomorrow: "http://tubefeed.herokuapp.com/tomorrow.json", - weekend: "http://tubefeed.herokuapp.com/weekend.json" - }, - - model: Line, - - sync: MySync, - - parse: function(data) { - return data.response.lines; - } - }); - - return LinesCollection; - -}); diff --git a/javascripts/collections/lines_now.js b/javascripts/collections/lines_now.js new file mode 100644 index 0000000..bc3f168 --- /dev/null +++ b/javascripts/collections/lines_now.js @@ -0,0 +1,16 @@ +define(['backbone', 'models/line'], function(Backbone, Line) { + + var LinesNowCollection = Backbone.Collection.extend({ + // added callback=? to force jsonp + url: "http://api.tubeupdates.com/?method=get.status&callback=?", + + model: Line, + + parse: function(data) { + return data.response.lines; + } + }); + + return LinesNowCollection; + +}); diff --git a/javascripts/templates/line.mustache b/javascripts/templates/line.mustache index ae346f0..aacfff1 100644 --- a/javascripts/templates/line.mustache +++ b/javascripts/templates/line.mustache @@ -4,8 +4,9 @@ {{ #message_count }}{{ message_count }}{{ /message_count }} {{ status }} - {{ #messages }} -
-
- {{ /messages }} + {{ #message_count }} +
+ {{& messages_html }} +
+ {{ /message_count }} diff --git a/javascripts/views/line_list.js b/javascripts/views/line_list.js index 162d109..db26acb 100644 --- a/javascripts/views/line_list.js +++ b/javascripts/views/line_list.js @@ -2,13 +2,13 @@ define(['backbone', 'text', 'mustache', 'models/line', - 'collections/lines', + 'text!templates/message.mustache', 'text!templates/line.mustache'], function(Backbone, Text, Mustache, Line, - LineCollection, + messageTemplate, lineTemplate) { var LineList = Backbone.View.extend({ @@ -22,7 +22,12 @@ function(Backbone, render: function() { var html = ""; this.collection.models.forEach(function(model) { - html += Mustache.render(lineTemplate, model.toJSON()); + var messages_html = ""; + model.attributes.messages.forEach(function(message) { + messages_html += Mustache.render(messageTemplate, { message: message }); + }); + model.set("messages_html", messages_html); + html += Mustache.render(lineTemplate, model.attributes); }); // render the HTML and refresh jQuery Mobile. this.$el.html(html); diff --git a/stylesheets/_iconfont.scss b/stylesheets/_iconfont.scss new file mode 100644 index 0000000..de3b56e --- /dev/null +++ b/stylesheets/_iconfont.scss @@ -0,0 +1,44 @@ +@font-face { + font-family: 'fontawesome'; + src:url('/fonts/fontawesome.eot'); + src:url('/fonts/fontawesome.eot?#iefix') format('embedded-opentype'), + url('/fonts/fontawesome.svg#fontawesome') format('svg'), + url('/fonts/fontawesome.woff') format('woff'), + url('/fonts/fontawesome.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +/* Use the following CSS code if you want to use data attributes for inserting your icons */ +[data-icon]:before { + font-family: 'fontawesome'; + content: attr(data-icon); + speak: none; + font-weight: normal; + line-height: 1; + -webkit-font-smoothing: antialiased; +} + +/* Use the following CSS code if you want to have a class per icon */ +/* +Instead of a list of all class selectors, +you can use the generic selector below, but it's slower: +[class*="icon-"]:before { +*/ +.icon-repeat:before, .icon-time:before, .icon-glass:before { + font-family: 'fontawesome'; + speak: none; + font-style: normal; + font-weight: normal; + line-height: 1; + -webkit-font-smoothing: antialiased; +} +.icon-repeat:before { + content: "\e000"; +} +.icon-time:before { + content: "\e001"; +} +.icon-glass:before { + content: "\e002"; +} diff --git a/stylesheets/main.css b/stylesheets/main.css index d709b21..27b4fbd 100644 --- a/stylesheets/main.css +++ b/stylesheets/main.css @@ -1,3 +1,42 @@ +@font-face { + font-family: 'fontawesome'; + src: url("/fonts/fontawesome.eot"); + src: url("/fonts/fontawesome.eot?#iefix") format("embedded-opentype"), url("/fonts/fontawesome.svg#fontawesome") format("svg"), url("/fonts/fontawesome.woff") format("woff"), url("/fonts/fontawesome.ttf") format("truetype"); + font-weight: normal; + font-style: normal; } + +/* Use the following CSS code if you want to use data attributes for inserting your icons */ +[data-icon]:before { + font-family: 'fontawesome'; + content: attr(data-icon); + speak: none; + font-weight: normal; + line-height: 1; + -webkit-font-smoothing: antialiased; } + +/* Use the following CSS code if you want to have a class per icon */ +/* +Instead of a list of all class selectors, +you can use the generic selector below, but it's slower: +[class*="icon-"]:before { +*/ +.icon-repeat:before, .icon-time:before, .icon-glass:before { + font-family: 'fontawesome'; + speak: none; + font-style: normal; + font-weight: normal; + line-height: 1; + -webkit-font-smoothing: antialiased; } + +.icon-repeat:before { + content: "\e000"; } + +.icon-time:before { + content: "\e001"; } + +.icon-glass:before { + content: "\e002"; } + * { margin: 0; padding: 0; @@ -16,13 +55,13 @@ header { position: fixed; width: 100%; background: #0019a8; - background-color: #8f9fff; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8f9fff), color-stop(100%, #001175)); - background-image: -webkit-linear-gradient(top, #8f9fff, #001175); - background-image: -moz-linear-gradient(top, #8f9fff, #001175); - background-image: -ms-linear-gradient(top, #8f9fff, #001175); - background-image: -o-linear-gradient(top, #8f9fff, #001175); - background-image: linear-gradient(top, #8f9fff, #001175); + background-color: #758aff; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #758aff), color-stop(100%, #00158e)); + background-image: -webkit-linear-gradient(top, #758aff, #00158e); + background-image: -moz-linear-gradient(top, #758aff, #00158e); + background-image: -ms-linear-gradient(top, #758aff, #00158e); + background-image: -o-linear-gradient(top, #758aff, #00158e); + background-image: linear-gradient(top, #758aff, #00158e); -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); color: white; @@ -33,18 +72,20 @@ header { text-align: center; font-size: 1.3em; font-weight: normal; - text-shadow: 0 0 4px rgba(0, 0, 0, 0.8); } + text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); } header #refresh { position: absolute; right: 1em; top: 0.25em; border-radius: 0.3em; border: 1px solid rgba(0, 0, 0, 0.4); - -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 3px rgba(255, 255, 255, 0.6); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 3px rgba(255, 255, 255, 0.6); - padding: 0.1em 0.5em; - font-weight: bold; - color: white; } + background: rgba(255, 255, 255, 0.1); + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4); + padding: 0.3em 0.7em 0.4em; + color: white; + font-family: "fontawesome"; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); } footer { position: fixed; @@ -53,28 +94,36 @@ footer { background: #111; text-align: center; height: 4em; - padding-top: 0.3em; } + padding-top: 0.3em; + background-color: #333333; + background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #111111)); + background-image: -webkit-linear-gradient(top, #333333, #111111); + background-image: -moz-linear-gradient(top, #333333, #111111); + background-image: -ms-linear-gradient(top, #333333, #111111); + background-image: -o-linear-gradient(top, #333333, #111111); + background-image: linear-gradient(top, #333333, #111111); + -webkit-box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.5); + box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.5); } footer li { display: inline-block; - width: 32%; } + width: 48%; } footer li a { font-size: 0.8em; height: 4.2em; padding: 0.4em; color: white; display: block; - border-radius: 0.3em; } + border-radius: 0.3em; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); } footer li a.selected { - background-color: #333333; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #111111)); - background-image: -webkit-linear-gradient(top, #333333, #111111); - background-image: -moz-linear-gradient(top, #333333, #111111); - background-image: -ms-linear-gradient(top, #333333, #111111); - background-image: -o-linear-gradient(top, #333333, #111111); - background-image: linear-gradient(top, #333333, #111111); + background: rgba(255, 255, 255, 0.1); border: 1px solid black; - -webkit-box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.3); - box-shadow: inset 0 0 3px rgba(255, 255, 255, 0.3); } + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4); } + footer li a:before { + display: block; + font-size: 1.5em; + margin: 0.1em 0 0.2em; } section[role="main"] { padding: 2.5em 0 4em; } @@ -99,6 +148,15 @@ ul#line-list { display: block; padding: 0.7em 1em; text-decoration: none; } + ul#line-list li .messages { + padding: 1em 1.5em 0.5em; + font-size: 0.8em; + background: #222; + color: white; + -webkit-box-shadow: inset 0 2px 8px black; + box-shadow: inset 0 2px 8px black; } + ul#line-list li .messages p { + padding-bottom: 1em; } li .name { text-shadow: none; @@ -114,9 +172,10 @@ li .status { font-weight: bold; padding-top: 0.1em; } li .message-count { + padding: 0 0.2em 0.4em; text-shadow: none; - width: 1.2em; - height: 1.2em; + width: 1.6em; + height: 1.6em; border: 2px solid white; text-align: center; margin-left: 0.5em; diff --git a/stylesheets/main.scss b/stylesheets/main.scss index 6655e99..987c63a 100644 --- a/stylesheets/main.scss +++ b/stylesheets/main.scss @@ -1,3 +1,5 @@ +@import "iconfont"; + $header-color: rgb(0, 25, 168); @import "bourbon/bourbon"; @@ -17,7 +19,7 @@ header { position: fixed; width: 100%; background: rgb(0, 25, 168); - @include linear-gradient(lighten($header-color, 45%), darken($header-color, 10%)); + @include linear-gradient(lighten($header-color, 40%), darken($header-color, 5%)); @include box-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); color: white; height: 2.5em; @@ -27,7 +29,7 @@ header { text-align: center; font-size: 1.3em; font-weight: normal; - text-shadow: 0 0 4px rgba(0, 0, 0, 0.8); + text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); } #refresh { position: absolute; @@ -35,10 +37,12 @@ header { top: 0.25em; border-radius: 0.3em; border: 1px solid rgba(0, 0, 0, 0.4); - @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.3), inset 0 0 3px rgba(255, 255, 255, 0.6)); - padding: 0.1em 0.5em; - font-weight: bold; + background: rgba(255, 255, 255, 0.1); + @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4)); + padding: 0.3em 0.7em 0.4em; color: white; + font-family: "fontawesome"; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); } } @@ -50,9 +54,11 @@ footer { text-align: center; height: 4em; padding-top: 0.3em; + @include linear-gradient(#333, #111); + @include box-shadow(0 -2px 3px rgba(0, 0, 0, 0.5)); li { display: inline-block; - width: 32%; + width: 48%; a { font-size: 0.8em; height: 4.2em; @@ -60,10 +66,16 @@ footer { color: white; display: block; border-radius: 0.3em; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); &.selected { - @include linear-gradient(#333, #111); + background: rgba(255, 255, 255, 0.1); border: 1px solid black; - @include box-shadow(inset 0 0 3px rgba(255, 255, 255, 0.3)); + @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.4)); + } + &:before { + display: block; + font-size: 1.5em; + margin: 0.1em 0 0.2em; } } } @@ -75,18 +87,30 @@ section[role="main"] { ul#line-list { list-style: none; padding: 0; - li a { - background: #ffffff; /* Old browsers */ - @include linear-gradient(white, #f1f1f1); - text-shadow: 0 2px 2px white; - border: { - style: solid; - width: 1px 0; - color: #ffffff white #cccccc; + li { + a { + background: #ffffff; /* Old browsers */ + @include linear-gradient(white, #f1f1f1); + text-shadow: 0 2px 2px white; + border: { + style: solid; + width: 1px 0; + color: #ffffff white #cccccc; + } + display: block; + padding: 0.7em 1em; + text-decoration: none; + } + .messages { + padding: 1em 1.5em 0.5em; + font-size: 0.8em; + background: #222; + color: white; + @include box-shadow(inset 0 2px 8px black); + p { + padding-bottom: 1em; + } } - display: block; - padding: 0.7em 1em; - text-decoration: none; } } li { @@ -100,9 +124,10 @@ li { } .status { float: right; text-transform: capitalize; font-size: 0.8em; font-weight: bold; padding-top: 0.1em; } .message-count { + padding: 0 0.2em 0.4em; text-shadow: none; - width: 1.2em; - height: 1.2em; + width: 1.6em; + height: 1.6em; border: 2px solid white; text-align: center; margin-left: 0.5em;