Use flexbox to position the close icon on the sidebars

This ensures that the text and the close icon don't overlap, regardless
of the length of the title. The title div grows to use all available
space, while ensuring the text breaks if necessary to prevent it from
pushing the close icon offscreen.

diff --git a/app/views/application/_sidebar_header.html.erb b/app/views/application/_sidebar_header.html.erb
new file mode 100644 (file)
index 0000000..5413b42
--- /dev/null
+++ b/app/views/application/_sidebar_header.html.erb
@@ -0,0 +1,10 @@
+<div class="d-flex w-100">
+  <div class="flex-grow-1 text-break">
+    <h2><%= title %></h2>
+  </div>
+  <div class="px-3 py-3">
+    <a class="geolink" href="<%= root_path %>">
+      <span class="icon close"></span>
+    </a>
+  </div>
+</div>

diff --git a/app/views/browse/changeset.html.erb b/app/views/browse/changeset.html.erb
index 1217c03be87d261951937d18d6a5453c69ffb562..3019fba95f83c4c99a02f0f580babb79b1a68757 100644 (file)
--- a/app/views/browse/changeset.html.erb
+++ b/app/views/browse/changeset.html.erb
@@ -1,9 +1,6 @@
 <% set_title(t(".title", :id => @changeset.id)) %>
 
-<h2>
-  <a class="geolink" href="<%= root_path %>"><span class="icon close"></span></a>
-  <%= t(".title", :id => @changeset.id) %>
-</h2>
+<%= render "sidebar_header", :title => t(".title", :id => @changeset.id) %>
 
 <div class="browse-section">
   <p class="font-italic">

diff --git a/app/views/browse/feature.html.erb b/app/views/browse/feature.html.erb
index 75e54f0b2c89c1aa4962808841b9e57bfbdc5f4e..c5c26330e46dbac17cb071ea6c96a9f218cd0f22 100644 (file)
--- a/app/views/browse/feature.html.erb
+++ b/app/views/browse/feature.html.erb
@@ -1,9 +1,6 @@
 <% set_title(t("browse.#{@type}.title_html", :name => printable_name(@feature))) %>
 
-<h2>
-  <a class="geolink" href="<%= root_path %>"><span class="icon close"></span></a>
-  <%= t("browse.#{@type}.title_html", :name => printable_name(@feature)) %>
-</h2>
+<%= render "sidebar_header", :title => t("browse.#{@type}.title_html", :name => printable_name(@feature)) %>
 
 <%= render :partial => @type, :object => @feature %>
 

diff --git a/app/views/browse/history.html.erb b/app/views/browse/history.html.erb
index faa88359e6b9ced2911915dd7b37a0437b9dfb4c..ebf8bcb30ec524c9e44260c1ff52b74109b67720 100644 (file)
--- a/app/views/browse/history.html.erb
+++ b/app/views/browse/history.html.erb
@@ -1,9 +1,6 @@
 <% set_title(t("browse.#{@type}.history_title_html", :name => printable_name(@feature))) %>
 
-<h2>
-  <a class="geolink" href="<%= root_path %>"><span class="icon close"></span></a>
-  <%= t("browse.#{@type}.history_title_html", :name => printable_name(@feature)) %>
-</h2>
+<%= render "sidebar_header", :title => t("browse.#{@type}.history_title_html", :name => printable_name(@feature)) %>
 
 <%= render :partial => @type, :collection => @feature.send("old_#{@type}s").reverse %>
 

diff --git a/app/views/browse/new_note.html.erb b/app/views/browse/new_note.html.erb
index 4e4f571cc2b8ea3441d0cc5ab5c1171884d36904..e647eab13803d513cbd57158d2628855a5a8a839 100644 (file)
--- a/app/views/browse/new_note.html.erb
+++ b/app/views/browse/new_note.html.erb
@@ -1,9 +1,6 @@
 <% set_title(t("browse.note.new_note")) %>
 
-<h2>
-  <a class="geolink" href="<%= root_path %>"><span class="icon close"></span></a>
-  <%= t "browse.note.new_note" %>
-</h2>
+<%= render "sidebar_header", :title => t("browse.note.new_note") %>
 
 <div class="note browse-section">
   <p class="alert alert-info"><%= t("javascripts.notes.new.intro") %></p>

diff --git a/app/views/browse/not_found.html.erb b/app/views/browse/not_found.html.erb
index 3c4e8a4c837db40655e4c36e717fc52e22f45147..084c247dcfe3e8bf8a657be3a5fa6aa002ef840b 100644 (file)
--- a/app/views/browse/not_found.html.erb
+++ b/app/views/browse/not_found.html.erb
@@ -1,4 +1,7 @@
-<h2>
-  <a class="geolink" href="<%= root_path %>"><span class="icon close"></span></a>
-  <%= t ".sorry", :type => t(".type.#{@type}"), :id => params[:id] %>
-</h2>
+<% set_title(t(".title")) %>
+
+<%= render "sidebar_header", :title => t(".title") %>
+
+<div class="browse-section">
+  <p><%= t ".sorry", :type => t(".type.#{@type}"), :id => params[:id] %>
+</div>

diff --git a/app/views/browse/note.html.erb b/app/views/browse/note.html.erb
index ab0344e35aed848247f04b7651ec40e1eec672ac..f94fda12ab26e3ecf7b6fcf94b35584b6a1ac1d5 100644 (file)
--- a/app/views/browse/note.html.erb
+++ b/app/views/browse/note.html.erb
@@ -1,9 +1,6 @@
 <% set_title(t(".title", :id => @note.id)) %>
 
-<h2>
-  <a class="geolink" href="<%= root_path %>"><span class="icon close"></span></a>
-  <%= t ".#{@note.status}_title", :note_name => @note.id %>
-</h2>
+<%= render "sidebar_header", :title => t(".#{@note.status}_title", :note_name => @note.id) %>
 
 <div class="browse-section">
   <h4><%= t(".description") %></h4>

diff --git a/app/views/browse/query.html.erb b/app/views/browse/query.html.erb
index ad6fdddb53e360068c1c598c3ed30299f3b505ea..65231641c939ab2572d7722616a6f7f724142a0e 100644 (file)
--- a/app/views/browse/query.html.erb
+++ b/app/views/browse/query.html.erb
@@ -1,9 +1,6 @@
 <% set_title(t(".title")) %>
 
-<h2>
-  <a class="geolink" href="<%= root_path %>"><span class="icon close"></span></a>
-  <%= t ".title" %>
-</h2>
+<%= render "sidebar_header", :title => t(".title") %>
 
 <div class="query-intro">
   <p><%= t(".introduction") %></p>

diff --git a/app/views/browse/timeout.html.erb b/app/views/browse/timeout.html.erb
index a9f53db15bd782a04447cb364eaa4bd7a5d5da35..084c247dcfe3e8bf8a657be3a5fa6aa002ef840b 100644 (file)
--- a/app/views/browse/timeout.html.erb
+++ b/app/views/browse/timeout.html.erb
@@ -1,4 +1,7 @@
+<% set_title(t(".title")) %>
+
+<%= render "sidebar_header", :title => t(".title") %>
+
 <div class="browse-section">
-  <a class="geolink" href="<%= root_path %>"><span class="icon close"></span></a>
-  <%= t ".sorry", :type => t(".type.#{@type}"), :id => params[:id] %>
+  <p><%= t ".sorry", :type => t(".type.#{@type}"), :id => params[:id] %>
 </div>

diff --git a/app/views/changesets/history.html.erb b/app/views/changesets/history.html.erb
index e3df87490379368f9eb051780c19ad1463d72b20..f9eb01a6d69948d8911dec99cae609ff3b582af2 100644 (file)
--- a/app/views/changesets/history.html.erb
+++ b/app/views/changesets/history.html.erb
@@ -11,10 +11,7 @@
                 @title
               end %>
 
-<h2>
-  <a class="geolink" href="<%= root_path %>"><span class="icon close"></span></a>
-  <%= @heading %>
-</h2>
+<%= render "sidebar_header", :title => @heading %>
 
 <div class="changesets">
   <%= image_tag "searching.gif", :class => "loader" %>

diff --git a/app/views/geocoder/search.html.erb b/app/views/geocoder/search.html.erb
index 13144d568eda6306a3f0345278669f9c2fa3f6a0..9f19be48a7922f955f2e9618497abd27c828c075 100644 (file)
--- a/app/views/geocoder/search.html.erb
+++ b/app/views/geocoder/search.html.erb
@@ -1,9 +1,7 @@
 <% set_title(@params[:query]) %>
 
-<h2>
-    <a class="geolink" href="<%= root_path %>"><span class="icon close"></span></a>
-    <%= t("site.sidebar.search_results") %>
-</h2>
+<%= render "sidebar_header", :title => t("site.sidebar.search_results") %>
+
 <% @sources.each do |source| %>
   <h4 class="inner12"><%= t(".title.#{source}_html") %></h4>
   <div class="search_results_entry" data-href="<%= url_for @params.merge(:action => "search_#{source}") %>">

diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb
index 1f8366ccbb76035141555fe837d6e787d2fb7cc2..33737ae23843080c4d66d454a19fed3b752c5bac 100644 (file)
--- a/app/views/layouts/map.html.erb
+++ b/app/views/layouts/map.html.erb
@@ -40,8 +40,7 @@
 
     <% unless current_user %>
       <div class="welcome">
-        <h2><%= t "layouts.intro_header" %></h2>
-        <div class="close-wrap"><span class="icon close"></span></div>
+        <%= render "sidebar_header", :title => t("layouts.intro_header") %>
         <p><%= t "layouts.intro_text" %></p>
         <p><%= t "layouts.hosting_partners_html",
                  :ucl => link_to(t("layouts.partners_ucl"), "https://www.ucl.ac.uk"),

diff --git a/app/views/site/export.html.erb b/app/views/site/export.html.erb
index b6d91ca3194bc12a609ad4002d9c4b758372f67d..934b56a0248c865117f4df277b946d43043089e7 100644 (file)
--- a/app/views/site/export.html.erb
+++ b/app/views/site/export.html.erb
@@ -1,9 +1,6 @@
 <% set_title(t(".title")) %>
 
-<h2>
-  <a class="geolink" href="<%= root_path %>"><span class="icon close"></span></a>
-  <%= t ".title" %>
-</h2>
+<%= render "sidebar_header", :title => t(".title") %>
 
 <%= form_tag({ :controller => "export", :action => "finish" }, { :class => "export_form standard-form" }) do %>
   <%= hidden_field_tag "format", "osm" %>

diff --git a/config/locales/en.yml b/config/locales/en.yml
index ec08012fe2d4a8acd4f5471f1db1aef6dd369cc5..4caa13bafc8cb6fdb188091eb79084be14d7f4fa 100644 (file)
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -294,6 +294,7 @@ en:
       entry_html: "Relation %{relation_name}"
       entry_role_html: "Relation %{relation_name} (as %{relation_role})"
     not_found:
+      title: Not Found
       sorry: "Sorry, %{type} #%{id} could not be found."
       type:
         node: node
@@ -302,6 +303,7 @@ en:
         changeset: changeset
         note: note
     timeout:
+      title: Timeout Error
       sorry: "Sorry, the data for the %{type} with the id %{id}, took too long to retrieve."
       type:
         node: node
@@ -1639,7 +1641,7 @@ en:
           full <a href="https://opendatacommons.org/licenses/odbl/1.0/">legal
           code</a> explains your rights and responsibilities.
         intro_3_1_html: |
-          Our documentation is licensed under the 
+          Our documentation is licensed under the
           <a href="https://creativecommons.org/licenses/by-sa/2.0/">Creative
           Commons Attribution-ShareAlike 2.0</a> license (CC BY-SA 2.0).
         credit_title_html: How to credit OpenStreetMap
@@ -1656,11 +1658,11 @@ en:
           direct your readers to openstreetmap.org (perhaps by expanding
           'OpenStreetMap' to this full address) and to opendatacommons.org.
         credit_3_1_html: |
-          The map tiles in the &ldquo;standard style&rdquo; at www.openstreetmap.org are a 
-          Produced Work by the OpenStreetMap Foundation using OpenStreetMap data 
-          under the Open Database License. If you are using these tiles please use 
-          the following attribution: 
-          &ldquo;Base map and data from OpenStreetMap and OpenStreetMap Foundation&rdquo;. 
+          The map tiles in the &ldquo;standard style&rdquo; at www.openstreetmap.org are a
+          Produced Work by the OpenStreetMap Foundation using OpenStreetMap data
+          under the Open Database License. If you are using these tiles please use
+          the following attribution:
+          &ldquo;Base map and data from OpenStreetMap and OpenStreetMap Foundation&rdquo;.
         credit_4_html: |
           For a browsable electronic map, the credit should appear in the corner of the map.
           For example: