Merge pull request james#3 from jwheare/master

iOS legibility improvements
M0TZO · Jun 19, 2012 · fd697fe · fd697fe
2 parents 9192c48 + a3ddd87
commit fd697fe
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 30 deletions.
diff --git a/bus.rb b/bus.rb
@@ -3,7 +3,7 @@
 require 'json'
 require 'erb'
 set :views, File.dirname(__FILE__) + '/templates'
-set :public, File.dirname(__FILE__) + '/static'
+set :public_folder, File.dirname(__FILE__) + '/static'
 
 STOPS = JSON.parse(File.read("./bus_stops.json"))["markers"]
 
@@ -12,7 +12,7 @@
     @search_results = STOPS.select {|x| x["name"] =~ /#{params[:search]}/i}
   elsif params[:lat] && params[:lon] && params[:lat] != "" && params[:lon] != ""
     @search_results = STOPS.select { |x| approximate_distance_between(x, params) < 0.005 }
-    @search_results.sort_by! { |x| approximate_distance_between(x, params) }
+    @search_results.sort!{ |a, b| approximate_distance_between(a, params) <=> approximate_distance_between(b, params) }
   end
   erb :index
 end

diff --git a/static/mobile.js b/static/mobile.js
@@ -0,0 +1,30 @@
+// Hide address bar on iOS
+window.addEventListener("load",function() {
+setTimeout(function () {
+    window.scrollTo(0, 1);
+}, 0);
+});
+
+// Mobile Safari in standalone mode
+if(("standalone" in window.navigator) && window.navigator.standalone){
+
+	// If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true
+	var noddy, remotes = false;
+
+	document.addEventListener('click', function(event) {
+
+		noddy = event.target;
+
+		// Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML
+		while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") {
+	        noddy = noddy.parentNode;
+	    }
+
+		if('href' in noddy && noddy.href.indexOf('http') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes))
+		{
+			event.preventDefault();
+			document.location.href = noddy.href;
+		}
+
+	},false);
+}
diff --git a/static/style.css b/static/style.css
@@ -0,0 +1,38 @@
+body {
+    font: normal 14px "Helvetica Neue", "Helvetica", "Arial" sans-serif;
+    margin: 0;
+    padding: 0;
+}
+p.instruction {
+    margin: 5px;
+    font-size: 13px;
+}
+form.search {
+    margin: 5px;
+}
+td.stop,
+td.map {
+    vertical-align: top;
+    border-bottom: 1px solid #ddd;
+}
+td.map a {
+    padding: 5px 3px 5px 0;
+    display: block;
+}
+a.stop {
+    padding: 5px 6px 6px 6px;
+    color: #000;
+    display: block;
+    text-decoration: none;
+}
+a.stop span.name {
+    font-weight: bold;
+    font-size: 17px;
+}
+a span.details {
+    color: #000;
+    font-size: 14px;
+}
+a.stop span.direction {
+    color: #36C;
+}
diff --git a/templates/index.erb b/templates/index.erb
@@ -1,28 +1,53 @@
-<p>Search for a bus stop name here, or try <a href="/nearby">autolocation</a>.</p>
-<form action="/" method="get">
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
+  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<head>
+  <title><% if @search_results %>Search Buses Live!<% else %>Buses Live!<% end %></title>
+  <meta name="viewport" content="width=device-width">
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <link rel="stylesheet" href="/style.css" type="text/css">
+  <script src="/mobile.js"></script>
+</head>
+
+<p class="instruction">Search for a bus stop name here, or try <a href="/nearby">autolocation</a>.</p>
+<form action="/" method="get" class="search">
   <input name="search" type="text" />
   <input type="submit" value="Search">
 </form>
 
 <% if @search_results %>
-  <ul>
+  <table cellspacing="0">
   <% @search_results.each do |result| %>
     <% if !result["routes"].empty? %>
-      <li>
-        <a href="/stop/<%= result["id"] %>">
-          <%= result["name"] %>
-          <% if result["stopIndicator"] %>
-            (<%= result["stopIndicator"] %>)
-          <% end %>
-        </a> (<a href="http://maps.google.com/maps?z=16&q=loc:<%= result["lat"]%>+<%= result["lng"]%>">map</a>)
-        <% if result["towards"] %>
-        <br />
-          Towards <%= result["towards"].downcase.gsub(/\b\w/){$&.upcase} %>
-        <% end %>
-        <br />
-        <%= result["routes"].collect {|x| x["name"]}.join(", ") %>
-      </li>
+      <tr>
+        <td class="stop">
+          <a class="stop" href="/stop/<%= result["id"] %>">
+            <span class="name">
+            <%= result["name"] %>
+            <% if result["stopIndicator"] %>
+              (<%= result["stopIndicator"] %>)
+            <% end %>
+            </span>
+            <span class="details">
+              <% if result["towards"] %>
+              <br />
+                <span class="direction">Towards <%= result["towards"].downcase.gsub(/\b\w/){$&.upcase} %></span>
+              <% end %>
+              <br />
+              <%= result["routes"].collect {|x| x["name"]}.join(", ") %>
+            </span>
+          </a>
+        </td>
+        <td class="map">
+          <a href="http://maps.google.com/maps?z=16&amp;q=loc:<%= result["lat"]%>+<%= result["lng"]%>">map</a>
+        </td>
+      </tr>
     <% end %>
   <% end %>
-  </ul>
-<% end %>
+  </table>
+<% end %>
+
+</body>
+</html>
diff --git a/templates/nearby.erb b/templates/nearby.erb
@@ -1,6 +1,19 @@
-<p>Determining location...</p>
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
+  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<head>
+  <title>Nearby Buses Live!</title>
+  <meta name="viewport" content="width=device-width">
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+</head>
+<body>
+<p style="font: normal 17px 'Helvetica Neue', Helvetica, Arial, sans-serif;">Determining location...</p>
 <script>
   navigator.geolocation.getCurrentPosition(function(location) {
     window.location = ("/?lat=" + location.coords.latitude + "&lon=" + location.coords.longitude);
   });
-</script>
+</script>
+</body>
+</html>
diff --git a/templates/stop.erb b/templates/stop.erb
@@ -5,33 +5,39 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
   <title><%= @stop["name"] if @stop %> Buses Live!</title>
+  <meta name="viewport" content="width=device-width">
+  <meta name="apple-mobile-web-app-capable" content="yes" />
   <style type="text/css" media="screen">
    body {
      background-color:#000;
      color:#F00;
      font-family: "Courier New", monospace;
-     font-size:50px;
+     font-size:17px;
      font-weight:bold;
-     margin:0 auto;
    }
    table {
-     width:100%;
-   }
-   tr {
-     width:50%;
+     margin:10px auto;
    }
    td.number {
      text-align:right;
      padding-right:1em;
    }
    p.disclaimer {
-     font-size:10px;
+     font-size:12px;
      text-align:center;
      color:#333;
    }
    p.disclaimer a{
      color:#333; 
    }
+   p.back {
+     font-size:12px;
+     text-align:center;
+     color:#333;
+   }
+   p.back a {
+       color: #ddd;
+   }
   </style>
   <script type="text/javascript" charset="utf-8">
     if(navigator.userAgent.match("Kindle")) {
@@ -56,11 +62,13 @@
      poll()
    });
   </script>
+  <script src="/mobile.js"></script>
   <link rel="apple-touch-icon" href="http://colour.abscond.org/<%= Digest::MD5.hexdigest(@stop["smsCode"])[0..5] %>.png" />
 </head>
 
 <body>
   <%= erb :indicator_table %>
+  <p class="back"><a href="/">Search again</a></p>
   <p class="disclaimer">Data sucked from <a href="http://countdown.tfl.gov.uk/">TFL</a> without permission.</p>
 </body>
 </html>