cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Site cleanup

Browse source 
I set out to do a quick and dirty typography overhaul to make things
more consistent and a bit cleaner, but I kept running into things I
didn't like, so this lead me down something of a rabbit hole of design
tweaks to the OSM site.

Goals here are to have better content hierarchy, better vertical
rhythm, more consistent UI, cleaner markup with less tables, all while
keeping the basics pretty much intact. There are a lot of things I
didn't touch even though they need to be updated (lots of tables where
stuff shouldn't be tables, mostly).

Basic overview of changes:

I added a new persistent header that helps segment pages. It's now
a lot easier to know what you're looking at. The header has a page
title, a description, plus a submenu of actions.

There is now a pattern of 20px/10px margins and padding for more
rhythm and breathing room throughout the site.

I know there are other problems here or things I've missed - would
love another set of eyes to look over this! I am still getting comfortable
working on the site - it's my first time ever digging into a ruby or rails
so I'm not familiar with the templating language yet.
This commit is contained in:
Saman Bemel-Benrud 2013-01-03 11:20:32 +00:00 • committed by Tom Hughes
parent 91139ae014
commit a36f3558dd
124 changed files with 3008 additions and 1726 deletions
Download patch file Download diff file Expand all files Collapse all files

6
app/views/geocoder/description.html.erb
View file

@ -1,10 +1,10 @@
<% @sources.each do |source| %>
<% if source[:types] %>
<p class="search_results_heading"><%= raw(t("geocoder.description.title.#{source[:name]}", :types => t("geocoder.description.types.#{source[:types]}"))) %></p>
<h4><%= raw(t("geocoder.description.title.#{source[:name]}", :types => t("geocoder.description.types.#{source[:types]}"))) %></h4>
<% else %>
<p class="search_results_heading"><%= raw(t("geocoder.description.title.#{source[:name]}")) %></p>
<h4><%= raw(t("geocoder.description.title.#{source[:name]}")) %></h4>
<% end %>
<div class='search_results_entry' id='<%= "description_#{source[:name]}_#{source[:types]}" %>'>
<div class='search_results_entry inner12' id='<%= "description_#{source[:name]}_#{source[:types]}" %>'>
<%= image_tag "searching.gif", :class => "search_searching" %>
</div>
<script type="text/javascript">

25
app/views/geocoder/results.html.erb
View file

@ -1,25 +1,26 @@
<% if @results.empty? %>
<p class="search_results_entry"><%= t 'geocoder.results.no_results' %></p>
<p class="search_results_entry inner12"><%= t 'geocoder.results.no_results' %></p>
<% else %>
<ul class='results-list'>
<% @results.each do |result| %>
<p class="search_results_entry"><%= result_to_html(result) %></p>
<li><p class="inner12 search_results_entry deemphasize"><%= result_to_html(result) %></p></li>
<% end %>
</ul>
<% if @more_params %>
<div id="search_more_<%= @more_params.hash %>">
<p class="search_results_entry">
<%= link_to t('geocoder.results.more_results'), "#" %>
</p>
<div class="inner12 search_results_entry">
<%= link_to t('geocoder.results.more_results'), "#", :class => "button" %>
</div>
<%= image_tag "searching.gif", :class => "search_searching" %>
</div>
<script type="text/javascript">
$("#search_more_<%= @more_params.hash %> .search_searching").hide();
$("#search_more_<%= @more_params.hash %> .search_searching").hide();
$("#search_more_<%= @more_params.hash %> a").click(function () {
$("#search_more_<%= @more_params.hash %> .search_results_entry").hide();
$("#search_more_<%= @more_params.hash %> .search_searching").show();
$("#search_more_<%= @more_params.hash %>").load("<%= raw url_for(@more_params) %>");
});
$("#search_more_<%= @more_params.hash %> a").click(function () {
$("#search_more_<%= @more_params.hash %> .search_results_entry").hide();
$("#search_more_<%= @more_params.hash %> .search_searching").show();
$("#search_more_<%= @more_params.hash %>").load("<%= raw url_for(@more_params) %>");
});
</script>
<% end %>
<% end %>

2
app/views/geocoder/search.html.erb
View file

@ -1,5 +1,5 @@
<% @sources.each do |source| %>
<p class="search_results_heading"><%= raw(t "geocoder.search.title.#{source}") %></p>
<h4><%= raw(t "geocoder.search.title.#{source}") %></h4>
<div class="search_results_entry" id="<%= "search_#{source}" %>">
<%= image_tag "searching.gif", :class => "search_searching" %>
</div>