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 5bb83b6bfb5f523234d719d24929f3c3e7d64e4b..f41deff9513a94ac3378b71320a5fe21731768c6 100644 (file)
--- 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 ed483d8ec48aeba3a7997fb62725758cb354a828..a80a8ff4cc3a90c9784e864d256aea8a990fc540 100644 (file)
--- 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 8e110212893968f9f0c6c15d2e49fb5364386e82..bd93708e0785ee82e4e24906c73374b71d8e5740 100644 (file)
--- 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 14e8aa503bcc35d40dee649d962f0cc6fcc7b729..95176ab04305610c1a34159b42d1202932589cd3 100644 (file)
--- 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 fe6c79812cf1b592e0f365d7ac7035dfa6f5baaf..90b67744088a9befe372a919c7adde8a8b535504 100644 (file)
--- 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 e180da084377d05929c08380e088c501c79e8b2e..b1184d647b8ba19654c9a76945aa4e9baf0befa4 100644 (file)
--- 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 a62ac2ef73e674d189e8dc76787cba43f8ba63fd..61b4d04fb031d42eb4ba014ae496c888f8ce8dfa 100644 (file)
--- 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 48b37429d614a0d31282845ad3b6368719435853..55618247fccd524c055f0d18e770ae28a11ae721 100644 (file)
--- 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 f61fa6fa142ee7167603fdbc5480713767467f3b..e653c021a85ff795ac234e8535e4099b49bbd3fb 100644 (file)
--- 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 4efbd928f4230efc7dc1f36eb46980bc497e531d..b6ee997125b7d98e04aa810ef81b756db7b41bcd 100644 (file)
--- 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 {