Styling stop pages.

openplans · Nov 11, 2011 · 8bd033f · 8bd033f
1 parent 4b2be48
commit 8bd033f
Show file tree

Hide file tree

Showing 11 changed files with 93 additions and 15 deletions.
diff --git a/app/assets/images/favicon.png b/app/assets/images/favicon.png
diff --git a/app/assets/images/garbage.png b/app/assets/images/garbage.png
diff --git a/app/assets/javascripts/stops.js b/app/assets/javascripts/stops.js
@@ -5,7 +5,7 @@ $(function(){
         stationLatLng = new L.LatLng( container.data("lat"), container.data("lon") ),
         map           = new L.Map('map');
 
-    map.setView( stationLatLng, 13).addLayer(
+    map.setView( stationLatLng, 15).addLayer(
       new L.TileLayer("http://otile1.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png", {
         maxZoom: 18, 
         attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png">'

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -40,9 +40,13 @@ div.field_with_errors {
   display : inline;
 }
 
+h1, h2, h3, h4, strong {
+  font-weight : bold;
+  margin : 10px 0;
+}
+
 h1 {
   font-size : 28px;
-  font-weight : bold;
 }
 
 h1 a {
@@ -51,11 +55,14 @@ h1 a {
 
 h2 {
   font-size : 16px;
-  font-weight : bold;
   margin-bottom : 5px;
   vertical-align: top;
 }
 
+h3 {
+  font-size : 14px;
+}
+
 a {
   color: rgb(49,128,204);
   cursor : pointer;

diff --git a/app/assets/stylesheets/stops.css b/app/assets/stylesheets/stops.css
@@ -1,5 +1,51 @@
+#stops.show h2 {
+  height : 37px;
+  padding-left : 37px;
+  line-height : 37px;
+}
 
 #stops.show #map {
-  width  : 400px;
-  height : 300px;
-}
+  width  : 300px;
+  height : 200px;
+  margin-bottom : 20px;
+}
+
+#stops.show ul {
+  margin-top : 15px;
+}
+
+#stops.show ul li {
+  padding : 5px 0;
+  margin-bottom : 10px;
+  min-height : 50px;
+}
+
+#stops.show ul li strong {
+/*  line-height : 50px;*/
+}
+
+#stops.show ul li > .img_wrap {
+  float : left;
+  width : 50px;
+}
+
+#stops.show ul li > .img_wrap img {
+  height : 40px;
+}
+
+#stops.show .date {
+  font-size : 9px;
+}
+
+#stops.show div.description {
+  font-style: italic;
+  width : 500px;
+}
+
+#stops.show div.description p {
+  margin : 5px;
+}
+
+/*#stops.show ul li.odd {
+  background-color : #eee;
+}*/
diff --git a/app/models/incident.rb b/app/models/incident.rb
@@ -7,4 +7,7 @@ class Incident < ActiveRecord::Base
   validates :kind, :inclusion => { :in => Kinds }
   validates :happened_at, :presence => true
 
+  def happened_at_display
+    self.happened_at.strftime("%b %-d '%y %l:%M %P")
+  end
 end
diff --git a/app/models/stop.rb b/app/models/stop.rb
@@ -2,10 +2,10 @@ class Stop < ActiveRecord::Base
 
   scope :station, where(:station => true)
 
-  has_many :incidents
+  has_many :incidents, :order => "happened_at desc"
 
   def display_name
-    "#{name} - #{line} Train"
+    "#{name} - #{line} Platform"
   end
 
   def line

diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
@@ -1,3 +1,2 @@
-<h3><%= link_to "Station list", stops_path %></h3>
 
 <div id="map"></div>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,7 +1,11 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>StationGrade</title>
+  <title>RatMapper</title>
+
+  <link rel="icon" 
+        type="image/png" 
+        href="<%= image_path 'favicon.png' %>">
 
   <%= stylesheet_link_tag "/leaflet/leaflet.css" %>
   <!--[if lte IE 8]><%= stylesheet_link_tag "/leaflet/leaflet.ie.css" %><![endif]-->
@@ -15,7 +19,10 @@
 
 <div id="wrapper">
   <div id="header">
-    <h1>StationGrade / RatMapper</h1>
+    <h1><%= link_to "RatMapper", root_path %></h1>
+    <ul id="nav">
+      <li><%= link_to "All Stations", stops_path %></li>
+    </ul>
   </div>
 
   <div id="content">

diff --git a/app/views/stops/_popup.html.erb b/app/views/stops/_popup.html.erb
@@ -1,5 +1,5 @@
 <h2>
-  <%= image_tag line_icon_url(stop.line), :alt => "#{stop.line} Train", :title => "#{stop.line} Train" %>
+  <%= image_tag line_icon_url(stop.line), :alt => "#{stop.line} Platform", :title => "#{stop.line} Platform" %>
   <%= stop.name %>
 </h2>
 

diff --git a/app/views/stops/show.html.erb b/app/views/stops/show.html.erb
@@ -1,12 +1,28 @@
-<h2><%= @stop.name %></h2>
-<strong><%= link_to "Report something", new_stop_incident_path(@stop) %></strong>
+<h2 style="background: transparent url('<%= line_icon_url(@stop.line) %>') no-repeat scroll top left;">
+  <%= @stop.display_name %>
+</h2>
 
 <div id="map" data-lat="<%= @stop.lat %>" data-lon="<%= @stop.lon %>" data-label="<%= @stop.name %>"></div>
 
 <h3>Reported Incidents</h3>
+<strong><%= link_to "Report something", new_stop_incident_path(@stop) %></strong>
 
 <ul>
 <% for incident in @incidents %>
-  <li><%= link_to incident.title, stop_incident_path(@stop, incident) %></li>
+  <li class="<%= incident.kind %> <%= cycle("odd", "even") %>">
+    <div class='img_wrap'>
+      <%= image_tag "#{incident.kind}.png" %>      
+    </div>
+
+    <div>
+      <strong>
+        <%= incident.title.present? ? incident.title : incident.happened_at_display %>
+      </strong>
+    </div>
+
+
+    <%= content_tag :span, "@#{incident.happened_at_display}", :class => "date" if incident.title.present? %>
+    <%= content_tag :div, simple_format(incident.description), :class => "description" if incident.description.present? %>
+  </li>
 <% end %>
 </ul>