Skip to content

Commit

Permalink
layout and visual changes
Browse files Browse the repository at this point in the history 
preserve the columns down to smaller screens
fix the google maps module
replace google charts API with D3
  • Loading branch information
Bill Walker committed Jan 9, 2014
1 parent 28877d4 commit e5816c6
Show file tree
Hide file tree
Showing 8 changed files with 144 additions and 69 deletions.
22 changes: 11 additions & 11 deletions app/views/counties/show.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,20 @@
</div>

<div class='row'>
<div class='col-md-4'>
<div class='col-sm-6'>
<div class="moduletitle">Photos by Bill Walker</div>

<%= render :partial => 'photos/gallery', :object => @county.photos %>
</div>

<div class='col-md-4'>
<div class='col-sm-6'>
<div id='mapContainer'>
<% if (@county.locations.with_lat_long.size > 0) %>
<% @map_module_title = 'County Map' %>
<%= render :partial => 'locations/google', :locals => { :map_width => column_width, :map_height => column_width, :locations_json_url => '/counties/locations/%s.json' % @county.id } %>
<% end %>
</div>

<% if @county.common? %>
<div class="pagecontentmodule">
<div class="moduletitle">County Notes</div>
Expand Down Expand Up @@ -38,8 +45,8 @@
<div class="pagecontentmodule">
<div class="moduletitle">When we bird <%= @county.name %> County</div>
<div class="pagecontentitem">
<% month_totals = Trip.map_by_month(@county.trips) %>
<%= counts_by_month_image_tag(month_totals)%>
<% month_totals = Sighting.map_by_month(@county.sightings) %>
<%= render :partial => 'sightings/species_by_month', :object => month_totals %>
</div>
</div>
<% else %>
Expand All @@ -49,13 +56,6 @@

<%= show_trip_list(@county.trips, false) %>
<% end %>
</div>

<div class='col-md-4' id='mapContainer'>
<% if (@county.locations.with_lat_long.size > 0) %>
<% @map_module_title = 'County Map' %>
<%= render :partial => 'locations/google', :locals => { :map_width => column_width, :map_height => column_width, :locations_json_url => '/counties/locations/%s.json' % @county.id } %>
<% end %>
</div>
</div>

Expand Down
24 changes: 11 additions & 13 deletions app/views/locations/show.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
<%= render :partial => 'page_header', :object => @location %>

<div class='row'>


<div class='col-md-4'>
<div class='col-sm-12 col-md-8 col-lg-7'>
<% gallery_photos = @location.photos.sort{ |a,b| b.trip.date <=> a.trip.date} %>
<% gallery_photos = @location.photos.first(Photo.default_gallery_size())%>

Expand All @@ -12,7 +10,7 @@
<%= render :partial => 'photos/gallery', :object => @location.photos %>
</div>

<div class='col-md-4'>
<div class='col-sm-6 col-md-4 col-lg-5'>
<div class="pagecontentmodule">
<div class="moduletitle">Location Notes</div>

Expand All @@ -34,19 +32,19 @@
<% has_notes?(@location) do %>
<div class="pagecontentitem"><%= @location.notes %></div>
<% end %>
</div>
</div>
</div>

<div class='col-md-4' id='mapContainer'>
<% if (@location.latitude != 0) %>
<% @center_latitude = @location.latitude %>
<% @center_longitude = @location.longitude %>
<% @locations = [ @location ] %>
<% @map_module_title = 'Location Map' %>
<%= render :partial => 'locations/google', :locals => { :map_width => column_width, :map_height => column_width, :locations_json_url => '/locations/%s.json' % @location.id } %>
<% end %>
<div class='col-sm-6 col-md-4 col-lg-5'>
<div id='mapContainer'>
<% if (@location.latitude != 0) %>
<% @map_module_title = 'Location Map' %>
<%= render :partial => 'locations/google', :locals => { :map_width => column_width, :map_height => column_width, :locations_json_url => '/locations/%s.json' % @location.id } %>
<% end %>
</div>
</div>


</div>


Expand Down
75 changes: 75 additions & 0 deletions app/views/sightings/_species_by_month.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<div class='bargraph-svg-container'>
<svg id='bargraph-svg-graph' viewbox='0 0 500 300' preserveAspectRatio='xMinYMin meet' class='svg-content'>
</svg>
</div>

<script>

var sightingData = [
{month: 'Jan', count: <%= species_by_month[1] %> },
{month: 'Feb', count: <%= species_by_month[2] %> },
{month: 'Mar', count: <%= species_by_month[3] %> },
{month: 'Apr', count: <%= species_by_month[4] %> },
{month: 'May', count: <%= species_by_month[5] %> },
{month: 'Jun', count: <%= species_by_month[6] %> },
{month: 'Jul', count: <%= species_by_month[7] %> },
{month: 'Aug', count: <%= species_by_month[8] %> },
{month: 'Sep', count: <%= species_by_month[9] %> },
{month: 'Oct', count: <%= species_by_month[10] %> },
{month: 'Nov', count: <%= species_by_month[11] %> },
{month: 'Dec', count: <%= species_by_month[12] %> }
];

var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 500 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;

var yExtent = [0, d3.max(sightingData, function(d) {return d.count})];

var x = d3.scale.ordinal().rangeRoundBands([0, width], .1).domain(sightingData.map(function(d) { return d.month; }));
var y = d3.scale.linear().range([height, 0]).domain(yExtent);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(y)
.orient("left")

var svg = d3.select("#bargraph-svg-graph")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
.attr("class", "bargraph-x-axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

svg.append("g")
.attr("class", "bargraph-y-axis")
.call(yAxis)

var bars = svg.selectAll("rect").remove().data(sightingData).enter()
.append("rect")
.attr("x", function(d, i) { return x(d.month); })
.attr("y", function(d, i) { return y(d.count);})
.attr("height", function(d, i) { return height - y(d.count); })
.attr("width", function(d, i) { return x.rangeBand(); })
.attr("class", "bargraph-bar")

svg.selectAll("rect").on("mouseover.tooltip", function(d){
d3.select("text#" + d.month).remove();
svg
.append("text")
.text(d.count)
.attr("x", x(d.month) + 10)
.attr("y", y(d.count) - 10)
.attr("id", d.month);
});

svg.selectAll("rect").on("mouseout.tooltip", function(d){
d3.select("text#" + d.month).remove();
});

</script>
21 changes: 11 additions & 10 deletions app/views/states/show.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,31 @@
<%= render :partial => 'page_header', :object => @state %>

<div class='row'>
<div class='col-md-4'>
<div class='col-md-6'>
<div class="moduletitle">Photos by Bill Walker</div>

<%= render :partial => 'photos/gallery', :object => @state.photos %>
</div>

<div class='col-md-4'>
<div class='col-md-6'>
<% if (@state.common?) %>
<div class="pagecontentmodule">
<div class="moduletitle">When we bird <%= @state.name %></div>
<div class="pagecontentitem">
<% month_totals = Trip.map_by_month(@state.trips) %>
<%= counts_by_month_image_tag(month_totals)%>
<% month_totals = Sighting.map_by_month(@state.sightings) %>
<%= render :partial => 'sightings/species_by_month', :object => month_totals %>
</div>
</div>
<% else %>
<%= show_trip_list(@state.trips, true) %>
<% end %>
</div>
<div class='col-md-4' id='mapContainer'>
<% if (@state.locations.with_lat_long.size > 0) %>
<% @map_module_title = 'State Map' %>
<%= render :partial => 'locations/google', :locals => { :map_width => column_width, :map_height => column_width, :locations_json_url => '/states/locations/%s.json' % @state.id } %>
<% end %>

<div id='mapContainer'>
<% if (@state.locations.with_lat_long.size > 0) %>
<% @map_module_title = 'State Map' %>
<%= render :partial => 'locations/google', :locals => { :map_width => column_width, :map_height => column_width, :locations_json_url => '/states/locations/%s.json' % @state.id } %>
<% end %>
</div>
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion app/views/taxons/_multi_column_list.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

<div class='row'>
<% for taxon_list in taxon_lists do %>
<div class='col-md-4'>
<div class='col-sm-4'>
<% if total_taxon_count > 70 %>
<%= render :partial => 'taxons/divided_list', :object => taxon_list, :locals => { :show_headings => false } %>
<% else %>
Expand Down
17 changes: 9 additions & 8 deletions app/views/taxons/show.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,22 @@

<div class='row'>

<div class='col-md-4'>
<div class='col-sm-6'>
<div class="pagecontentmodule">
<div class="moduletitle">Photos by Bill Walker</div>

<%= render :partial => 'photos/gallery', :object => @taxon.photos %>
</div>
</div>

<div class='col-md-4'>
<div class='col-sm-6'>
<div id='mapContainer'>
<% if (@taxon.locations.with_lat_long.size > 0) %>
<% @map_module_title = 'Species Map' %>
<%= render :partial => 'locations/google', :locals => { :map_width => column_width, :map_height => column_width, :locations_json_url => '/taxons/locations/%s.json' % @taxon.id } %>
<% end %>
</div>

<div class="pagecontentmodule">
<% if @taxon.common? %>
<div class="moduletitle">Species Notes</div>
Expand All @@ -41,10 +48,4 @@
</div>
</div>

<div class='col-md-4' id='mapContainer'>
<% if (@taxon.locations.with_lat_long.size > 0) %>
<%= render :partial => 'locations/google', :locals => { :map_width => column_width, :map_height => column_width, :locations_json_url => '/taxons/locations/%s.json' % @taxon.id } %>
<% end %>
</div>

</div>
24 changes: 11 additions & 13 deletions app/views/taxons/show_family.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,20 @@
<div class="lead"><%= @page_title %></div>

<div class='row'>
<div class='col-md-4'>
<div class='col-md-6'>
<div class="moduletitle">Photos by Bill Walker</div>

<%= render :partial => 'photos/gallery', :object => @family_photos %>
</div>
<div class='col-md-4'>

<div class='col-md-6'>
<div id='mapContainer'>
<% if (Location.with_lat_long(@family_locations).length > 0) %>
<% @map_module_title = 'Family Map' %>
<%= render :partial => 'locations/google', :locals => { :map_width => column_width, :map_height => column_width, :locations_json_url => '/families/locations/%s.json' % @page_title } %>
<% end %>
</div>

<div class="moduletitle">Notes</div>

<% if @family_trips.count > 50 then %>
Expand All @@ -22,16 +30,6 @@
</div>
<% end %>
</div>
<div class='col-md-4' id='mapContainer'>
<% if (Location.with_lat_long(@family_locations).length > 0) %>
<% @map_module_title = 'Family Map' %>
<%= render :partial => 'locations/google', :locals => { :map_width => column_width, :map_height => column_width, :locations_json_url => '/families/locations/%s.json' % @page_title } %>
<% end %>
</div>
</div>

<div class='row'>
<div class='col-md-12'>
<%= render :partial => 'taxons/undivided_list', :object => @family_taxons, :locals => { :show_headings => false } %>
</div>
</div>
<%= render :partial => 'taxons/multi_column_list', :object => @family_taxons %>
28 changes: 15 additions & 13 deletions app/views/trips/show.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,22 @@

<div class='row'>
<div class='col-md-6'>
<div class="pagecontentmodule">
<div class="moduletitle">Photos by Bill Walker</div>
<% has_photos?(@trip) do %>
<div class="pagecontentmodule">
<div class="moduletitle">Photos by Bill Walker</div>
<%= render :partial => 'photos/gallery', :object => @trip.photos %>
</div>
<% end %>

<%= render :partial => 'photos/gallery', :object => @trip.photos %>
</div>
</div>

<div class='col-md-6'>
<% if (@trip.locations.size == 1) %>
<% @module_title = @trip.locations[0].full_name %>
<% else %>
<% @module_title = @trip.locations.size.to_s + " Locations" %>
<% @show_location_abbreviation = true %>
<% end %>

<div id='mapContainer'>
<% has_notes?(@trip) do %>
Expand All @@ -33,15 +44,6 @@
<%= render :partial => 'locations/google', :locals => { :map_width => column_width, :map_height => column_width, :locations_json_url => '/trips/locations/%s.json' % @trip.id } %>
<% end %>
</div>
</div>

<div class='col-md-6'>
<% if (@trip.locations.size == 1) %>
<% @module_title = @trip.locations[0].full_name %>
<% else %>
<% @module_title = @trip.locations.size.to_s + " Locations" %>
<% @show_location_abbreviation = true %>
<% end %>

<% sorted_sighting_list = Sighting.sort_taxonomic(@trip.sightings) %>
<% common_names = sorted_sighting_list.collect {|item|item.taxon.common_name}.uniq %>
Expand Down

0 comments on commit e5816c6

Please sign in to comment.