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

Use flexbox to position the close icon on the sidebars

Browse source 
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.
This commit is contained in:
Andy Allan 2020-10-15 16:25:33 +02:00
parent 9b19a45e74
commit c233bec67b
14 changed files with 41 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/views/application/_sidebar_header.html.erb Normal file
View file

@ -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>

5
app/views/browse/changeset.html.erb
View file

@ -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">

5
app/views/browse/feature.html.erb
View file

@ -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 %>

5
app/views/browse/history.html.erb
View file

@ -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 %>

5
app/views/browse/new_note.html.erb
View file

@ -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>

11
app/views/browse/not_found.html.erb
View file

@ -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>

5
app/views/browse/note.html.erb
View file

@ -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>

5
app/views/browse/query.html.erb
View file

@ -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>

7
app/views/browse/timeout.html.erb
View file

@ -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>

5
app/views/changesets/history.html.erb
View file

@ -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" %>

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

@ -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}") %>">

3
app/views/layouts/map.html.erb
View file

@ -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"),

5
app/views/site/export.html.erb
View file

@ -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" %>

14
config/locales/en.yml
View file

@ -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: