From: Tom Hughes <tom@compton.nu>
Date: Thu, 22 Apr 2010 22:05:20 +0000 (+0100)
Subject: Improve layout of data browser pages
X-Git-Tag: live~6366^2~2
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/54bed8e9c0d97f18abee13f8e424ac981c5826d2

Improve layout of data browser pages

Use float to position the navigation controls and map on the right
rather than a table so that we get more consistent positioning and
avoid forcing the map of the right hand side of the viewport.
---

diff --git a/app/views/browse/_map.html.erb b/app/views/browse/_map.html.erb
index 5bb83b6bf..f41deff95 100644
--- a/app/views/browse/_map.html.erb
+++ b/app/views/browse/_map.html.erb
@@ -1,22 +1,20 @@
 <%= javascript_include_tag '/openlayers/OpenLayers.js' %>
 <%= javascript_include_tag '/openlayers/OpenStreetMap.js' %>
 <%= javascript_include_tag 'map.js' %>
-<td>
-  <div style="width: 250px; margin: auto; text-align: right"">
-    <% if map.instance_of? Changeset or map.visible %>
-      <div id="small_map" style="width:250px; height: 300px; border: solid 1px black">
-      </div>
-      <span id="loading"><%= t 'browse.map.loading' %></span>
-      <a id="area_larger_map" href=""></a>
-      <% unless map.instance_of? Changeset %>
-        <br />
-        <a id="object_larger_map" href=""></a>
-      <% end %>
-    <% else %>
-      <%= t 'browse.map.deleted' %>
-    <% end %>
+<div id="browse_map">
+  <% if map.instance_of? Changeset or map.visible %>
+  <div id="small_map">
   </div>
-</td>
+  <span id="loading"><%= t 'browse.map.loading' %></span>
+  <a id="area_larger_map" href=""></a>
+  <% unless map.instance_of? Changeset %>
+    <br />
+    <a id="object_larger_map" href=""></a>
+  <% end %>
+  <% else %>
+    <%= t 'browse.map.deleted' %>
+  <% end %>
+</div>
 <% if map.instance_of? Changeset or map.visible %>
   <script type="text/javascript">
     OpenLayers.Lang.setCode("<%= I18n.locale.to_s %>");
diff --git a/app/views/browse/_navigation.html.erb b/app/views/browse/_navigation.html.erb
index ed483d8ec..a80a8ff4c 100644
--- a/app/views/browse/_navigation.html.erb
+++ b/app/views/browse/_navigation.html.erb
@@ -1,4 +1,5 @@
-<div style="float:right; text-align:center; width: 100%;">
+<% margin = @next_by_user || @prev_by_user ? 9 : 18 %>
+<div id="browse_navigation" style="margin-top: <%= margin %>px">
   <% if @next_by_user or @prev_by_user %>
     <span class="nowrap">
       <% if @prev_by_user %>
diff --git a/app/views/browse/changeset.html.erb b/app/views/browse/changeset.html.erb
index 8e1102128..bd93708e0 100644
--- a/app/views/browse/changeset.html.erb
+++ b/app/views/browse/changeset.html.erb
@@ -1,21 +1,9 @@
-<table width="100%">
-  <tr>
-    <td>
-      <h2><%= t 'browse.changeset.changeset', :id => @changeset.id %></h2>
-    </td>
-    <td>
-      <%= render :partial => "navigation" %>
-    </td>
-  </tr>
-  <tr valign="top">
-    <td>
-    <%= render :partial => "changeset_details", :object => @changeset %>
-    <hr />
-    <%= t 'browse.changeset.download', :changeset_xml_link => link_to(t('browse.changeset.changesetxml'), :controller => "changeset", :action => "read"), 
-                                       :osmchange_xml_link => link_to(t('browse.changeset.osmchangexml'), :controller => "changeset", :action => "download") %>
-    </td>
-    <% if @changeset.has_valid_bbox? %>
-    <%= render :partial => "map", :object => @changeset %>
-    <% end %>
-  </tr>
-</table>
+<%= render :partial => "navigation" %>
+<h2><%= t 'browse.changeset.changeset', :id => @changeset.id %></h2>
+<% if @changeset.has_valid_bbox? %>
+<%= render :partial => "map", :object => @changeset %>
+<% end %>
+<%= render :partial => "changeset_details", :object => @changeset %>
+<hr />
+<%= t 'browse.changeset.download', :changeset_xml_link => link_to(t('browse.changeset.changesetxml'), :controller => "changeset", :action => "read"), 
+                                   :osmchange_xml_link => link_to(t('browse.changeset.osmchangexml'), :controller => "changeset", :action => "download") %>
diff --git a/app/views/browse/node.html.erb b/app/views/browse/node.html.erb
index 14e8aa503..95176ab04 100644
--- a/app/views/browse/node.html.erb
+++ b/app/views/browse/node.html.erb
@@ -2,24 +2,12 @@
 @name = printable_name @node
 @title = t('browse.node.node') + ' | ' + @name
 %>
-<table width="100%">
-  <tr>
-    <td>
-      <h2><%= t'browse.node.node_title', :node_name => h(@name) %></h2>
-    </td>
-    <td>
-      <%= render :partial => "navigation" %>
-    </td>
-  </tr>
-  <tr valign="top">
-    <td>
-      <%= render :partial => "node_details", :object => @node %>
-      <hr />
-      <%= t'browse.node.download', :download_xml_link => link_to(t('browse.node.download_xml'), :controller => "node", :action => "read"),
-                                   :view_history_link => link_to(t('browse.node.view_history'), :action => "node_history"),
-                                   :edit_link => link_to(t('browse.node.edit'), :controller => "site", :action => "edit", :lat => @node.lat, :lon => @node.lon, :zoom => 18, :node => @node.id)
-      %>
-    </td>
-    <%= render :partial => "map", :object => @node %>
-  </tr>
-</table>
+<%= render :partial => "navigation" %>
+<h2><%= t'browse.node.node_title', :node_name => h(@name) %></h2>
+<%= render :partial => "map", :object => @node %>
+<%= render :partial => "node_details", :object => @node %>
+<hr />
+<%= t'browse.node.download', :download_xml_link => link_to(t('browse.node.download_xml'), :controller => "node", :action => "read"),
+                             :view_history_link => link_to(t('browse.node.view_history'), :action => "node_history"),
+                             :edit_link => link_to(t('browse.node.edit'), :controller => "site", :action => "edit", :lat => @node.lat, :lon => @node.lon, :zoom => 18, :node => @node.id)
+%>
diff --git a/app/views/browse/node_history.html.erb b/app/views/browse/node_history.html.erb
index fe6c79812..90b677440 100644
--- a/app/views/browse/node_history.html.erb
+++ b/app/views/browse/node_history.html.erb
@@ -3,17 +3,10 @@
 @title = t('browse.node_history.node_history') + ' | ' + @name
 %>
 <h2><%= t'browse.node_history.node_history_title', :node_name => link_to(h(@name), :action => "node", :id => @node.id) %></h2>
-
-<table width="100%">
-  <tr valign="top">
-    <td>
-      <% @node.old_nodes.reverse.each do |node| %>
-        <%= render :partial => "node_details", :object => node %>
-        <hr />
-      <% end %>
-      <%= t 'browse.node_history.download', :download_xml_link => link_to(t('browse.node_history.download_xml'), :controller => "old_node", :action => "history"),
-                                            :view_details_link => link_to(t('browse.node_history.view_details'), :action => "node") %>
-    </td>
-    <%= render :partial => "map", :object => @node %>
-  </tr>
-</table>
+<%= render :partial => "map", :object => @node %>
+<% @node.old_nodes.reverse.each do |node| %>
+  <%= render :partial => "node_details", :object => node %>
+  <hr />
+<% end %>
+<%= t 'browse.node_history.download', :download_xml_link => link_to(t('browse.node_history.download_xml'), :controller => "old_node", :action => "history"),
+                                      :view_details_link => link_to(t('browse.node_history.view_details'), :action => "node") %>
diff --git a/app/views/browse/relation.html.erb b/app/views/browse/relation.html.erb
index e180da084..b1184d647 100644
--- a/app/views/browse/relation.html.erb
+++ b/app/views/browse/relation.html.erb
@@ -2,22 +2,10 @@
 @name = printable_name @relation
 @title = t('browse.relation.relation') + ' | ' + @name
 %>
-<table width="100%">
-  <tr>
-    <td>
-      <h2><%= t'browse.relation.relation_title', :relation_name => h(@name) %></h2>
-    </td>
-    <td>
-      <%= render :partial => "navigation" %>
-    </td>
-  </tr>
-  <tr valign="top">
-    <td>
-      <%= render :partial => "relation_details", :object => @relation %>
-      <hr />
-      <%= t'browse.relation.download', :download_xml_link => link_to(t('browse.relation.download_xml'), :controller => "relation", :action => "read"),
-                                       :view_history_link => link_to(t('browse.relation.view_history'), :action => "relation_history") %>
-    </td>
-    <%= render :partial => "map", :object => @relation %>
-  </tr>
-</table>
+<%= render :partial => "navigation" %>
+<h2><%= t'browse.relation.relation_title', :relation_name => h(@name) %></h2>
+<%= render :partial => "map", :object => @relation %>
+<%= render :partial => "relation_details", :object => @relation %>
+<hr />
+<%= t'browse.relation.download', :download_xml_link => link_to(t('browse.relation.download_xml'), :controller => "relation", :action => "read"),
+                                 :view_history_link => link_to(t('browse.relation.view_history'), :action => "relation_history") %>
diff --git a/app/views/browse/relation_history.html.erb b/app/views/browse/relation_history.html.erb
index a62ac2ef7..61b4d04fb 100644
--- a/app/views/browse/relation_history.html.erb
+++ b/app/views/browse/relation_history.html.erb
@@ -3,17 +3,10 @@
 @title = t('browse.relation_history.relation_history') + ' | ' + @name
 %>
 <h2><%= t'browse.relation_history.relation_history_title', :relation_name => link_to(h(@name), :action => "relation", :id => @relation.id) %></h2>
-
-<table width="100%">
-  <tr valign="top">
-    <td>
-      <% @relation.old_relations.reverse.each do |relation| %>
-        <%= render :partial => "relation_details", :object => relation %>
-        <hr />
-      <% end %>
-      <%= t'browse.relation_history.download', :download_xml_link => link_to(t('browse.relation_history.download_xml'), :controller => "old_relation", :action => "history"), 
-                                               :view_details_link => link_to(t('browse.relation_history.view_details'), :action => "relation") %>
-    </td>
-    <%= render :partial => "map", :object => @relation %>
-  </tr>
-</table>
+<%= render :partial => "map", :object => @relation %>
+<% @relation.old_relations.reverse.each do |relation| %>
+  <%= render :partial => "relation_details", :object => relation %>
+  <hr />
+<% end %>
+<%= t'browse.relation_history.download', :download_xml_link => link_to(t('browse.relation_history.download_xml'), :controller => "old_relation", :action => "history"), 
+                                         :view_details_link => link_to(t('browse.relation_history.view_details'), :action => "relation") %>
diff --git a/app/views/browse/way.html.erb b/app/views/browse/way.html.erb
index 48b37429d..55618247f 100644
--- a/app/views/browse/way.html.erb
+++ b/app/views/browse/way.html.erb
@@ -2,25 +2,13 @@
 @name = printable_name @way
 @title = t('browse.way.way') + ' | ' + @name
 %>
-<table width="100%">
-  <tr>
-    <td>
-      <h2><%= t'browse.way.way_title', :way_name => h(@name) %></h2>
-    </td>
-    <td>
-      <%= render :partial => "navigation" %>
-    </td>
-  </tr>
-  <tr valign="top">
-    <td>
-      <%= render :partial => "way_details", :object => @way %>
-      <hr />
-      <%= link_to(t('browse.way.download_xml'), :controller => "way", :action => "read") %>
-      | <%= link_to(t('browse.way.view_history'), :action => "way_history") %>
-      <% unless @midnode.nil? %>
-        | <%= link_to(t('browse.way.edit'), :controller => "site", :action => "edit", :way => @way.id, :lat => @midnode.lat, :lon => @midnode.lon, :zoom => 16) %>
-      <% end %>
-    </td>
-    <%= render :partial => "map", :object => @way %>
-  </tr>
-</table>
+<%= render :partial => "navigation" %>
+<h2><%= t'browse.way.way_title', :way_name => h(@name) %></h2>
+<%= render :partial => "map", :object => @way %>
+<%= render :partial => "way_details", :object => @way %>
+<hr />
+<%= link_to(t('browse.way.download_xml'), :controller => "way", :action => "read") %>
+| <%= link_to(t('browse.way.view_history'), :action => "way_history") %>
+<% unless @midnode.nil? %>
+  | <%= link_to(t('browse.way.edit'), :controller => "site", :action => "edit", :way => @way.id, :lat => @midnode.lat, :lon => @midnode.lon, :zoom => 16) %>
+<% end %>
diff --git a/app/views/browse/way_history.html.erb b/app/views/browse/way_history.html.erb
index f61fa6fa1..e653c021a 100644
--- a/app/views/browse/way_history.html.erb
+++ b/app/views/browse/way_history.html.erb
@@ -3,17 +3,10 @@
 @title = t('browse.way_history.way_history') + ' | ' + @name
 %>
 <h2><%= t'browse.way_history.way_history_title', :way_name => link_to(h(@name), :action => "way", :id => @way.id) %></h2>
-
-<table width="100%">
-  <tr valign="top">
-    <td>
-      <% @way.old_ways.reverse.each do |way| %>
-        <%= render :partial => "way_details", :object => way %>
-        <hr />
-      <% end %>
-      <%= t'browse.way_history.download', :download_xml_link => link_to(t('browse.way_history.download_xml'), :controller => "old_way", :action => "history"), 
-                                          :view_details_link => link_to(t('browse.way_history.view_details'), :action => "way") %>
-    </td>
-    <%= render :partial => "map", :object => @way %>
-  </tr>
-</table>
+<%= render :partial => "map", :object => @way %>
+<% @way.old_ways.reverse.each do |way| %>
+  <%= render :partial => "way_details", :object => way %>
+  <hr />
+<% end %>
+<%= t'browse.way_history.download', :download_xml_link => link_to(t('browse.way_history.download_xml'), :controller => "old_way", :action => "history"), 
+                                    :view_details_link => link_to(t('browse.way_history.view_details'), :action => "way") %>
diff --git a/public/stylesheets/common.css b/public/stylesheets/common.css
index 4efbd928f..b6ee99712 100644
--- a/public/stylesheets/common.css
+++ b/public/stylesheets/common.css
@@ -526,6 +526,28 @@ hr {
   font-weight: bold;
 }
 
+/* Rules for the data browser */
+
+#browse_navigation {
+  float: right;
+  width: 250px;
+  text-align: center;
+  margin-left: 10px;
+}
+
+#browse_map {
+  float: right;
+  width: 250px;
+  text-align: right;
+  margin-left: 10px;
+}
+
+#browse_map #small_map {
+  width: 250px;
+  height: 300px;
+  border: solid 1px black;
+}
+
 /* Rules for the trace list shown by the traces tab etc */
 
 #trace_list {