From: Andy Allan Date: Wed, 16 Jun 2021 14:09:48 +0000 (+0100) Subject: Rework sidebar to use padding on the sidebar_content div X-Git-Tag: live~2111^2~1 X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/c8f0a81eb7043c297e050c1f3ff8a8cf7ff613bc Rework sidebar to use padding on the sidebar_content div This saves every header, list, paragraph etc having to sort out their own padding. The couple of instances where we want edge-to-edge can be acheived using the negative margin spacing utilities. The padding is based on $spacer so that it can be adjusted automatically via bootstrap configuration. This also means that we can remove many (mis-)uses of the browse-section class, which is only supposed to be for cases where there are multiple browse-sections in sequence (e.g. multiple nodes in the node history browse pages). --- diff --git a/app/assets/javascripts/index/browse.js b/app/assets/javascripts/index/browse.js index 07ad64def..b6a388d81 100644 --- a/app/assets/javascripts/index/browse.js +++ b/app/assets/javascripts/index/browse.js @@ -55,12 +55,12 @@ OSM.initializeBrowse = function (map) { .text(I18n.t("browse.start_rjs.load_data")) .prepend($("").click(cancel))) .append( - $("
") + $("
") .append( $("

") .text(I18n.t("browse.start_rjs.feature_warning", { num_features: count, max_features: limit }))) .append( - $("") + $("") .val(I18n.t("browse.start_rjs.load_data")) .click(add)))); } diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js index 6fd02a57b..5040e7f3e 100644 --- a/app/assets/javascripts/index/directions.js +++ b/app/assets/javascripts/index/directions.js @@ -256,7 +256,7 @@ OSM.Directions = function (map) { var html = "

" + "" + I18n.t("javascripts.directions.directions") + - "

" + + "

" + I18n.t("javascripts.directions.distance") + ": " + formatDistance(route.distance) + ". " + I18n.t("javascripts.directions.time") + ": " + formatTime(route.time) + "."; if (typeof route.ascend !== "undefined" && typeof route.descend !== "undefined") { @@ -264,7 +264,7 @@ OSM.Directions = function (map) { I18n.t("javascripts.directions.ascend") + ": " + Math.round(route.ascend) + "m. " + I18n.t("javascripts.directions.descend") + ": " + Math.round(route.descend) + "m."; } - html += "

"; + html += "

"; $("#sidebar_content") .html(html); diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss index 80e0d46fe..39f2f4670 100644 --- a/app/assets/stylesheets/common.scss +++ b/app/assets/stylesheets/common.scss @@ -362,6 +362,10 @@ body.compact-nav { display: none; } + #sidebar_content { + padding: $spacer; + } + > div { position: relative; float: left; @@ -370,7 +374,6 @@ body.compact-nav { } h2 { - padding: $lineheight $lineheight $lineheight/2; font-size: 1.5rem; } @@ -676,6 +679,10 @@ body.compact-nav { margin-left: auto; margin-right: auto; } + + > div { + padding: $spacer; + } } #sidebar { @@ -739,13 +746,6 @@ header .search_forms, /* Rules for routing */ -#sidebar_content>table { - padding: 5px 20px 10px 15px; - width: 100%; - border-collapse: separate; - border-spacing: 0; -} - div.direction { background-image: image-url('routing-sprite.png'); width: 20px; @@ -756,10 +756,6 @@ div.direction { div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; } } -p#routing_summary { - padding: 0 $lineheight $lineheight/4; -} - td.instruction, td.distance { padding-top: $lineheight/5; padding-bottom: $lineheight/5; @@ -821,7 +817,8 @@ tr.turn:hover { #sidebar_content { .browse-section { - padding: $lineheight/2 $lineheight; + padding-bottom: $spacer; + margin-bottom: $spacer; border-bottom: 1px solid $grey; h4:first-child { @@ -942,17 +939,8 @@ tr.turn:hover { margin: 0 0 10px 10px; } - .query-intro p { - padding: $lineheight $lineheight $lineheight/2; - } - .query-results { display: none; - padding-bottom: $lineheight/2; - - h3 { - padding: 0 $lineheight; - } ul { li { @@ -981,8 +969,6 @@ tr.turn:hover { /* Rules for export sidebar */ .export_form { - padding: $lineheight; - .export_area_inputs, .export_button { text-align: center; diff --git a/app/views/application/_sidebar_header.html.erb b/app/views/application/_sidebar_header.html.erb index 5413b4205..da1f6bf45 100644 --- a/app/views/application/_sidebar_header.html.erb +++ b/app/views/application/_sidebar_header.html.erb @@ -2,7 +2,7 @@

<%= title %>

-
+
diff --git a/app/views/browse/changeset.html.erb b/app/views/browse/changeset.html.erb index 079915fcf..9ede3df32 100644 --- a/app/views/browse/changeset.html.erb +++ b/app/views/browse/changeset.html.erb @@ -2,7 +2,7 @@ <%= render "sidebar_header", :title => t(".title", :id => @changeset.id) %> -
+

<%= linkify(@changeset.tags["comment"].to_s.presence || t("browse.no_comment")) %>

diff --git a/app/views/browse/new_note.html.erb b/app/views/browse/new_note.html.erb index 1786c260f..a9937c4bc 100644 --- a/app/views/browse/new_note.html.erb +++ b/app/views/browse/new_note.html.erb @@ -2,7 +2,7 @@ <%= render "sidebar_header", :title => t("browse.note.new_note") %> -
+

<%= t("javascripts.notes.new.intro") %>

diff --git a/app/views/browse/not_found.html.erb b/app/views/browse/not_found.html.erb index 084c247dc..36ee4c883 100644 --- a/app/views/browse/not_found.html.erb +++ b/app/views/browse/not_found.html.erb @@ -2,6 +2,6 @@ <%= render "sidebar_header", :title => t(".title") %> -
+

<%= t ".sorry", :type => t(".type.#{@type}"), :id => params[:id] %>

diff --git a/app/views/browse/note.html.erb b/app/views/browse/note.html.erb index 6dcd46e76..0180e26ca 100644 --- a/app/views/browse/note.html.erb +++ b/app/views/browse/note.html.erb @@ -2,7 +2,7 @@ <%= render "sidebar_header", :title => t(".#{@note.status}_title", :note_name => @note.id) %> -
+

<%= t(".description") %>

<%= h(@note_comments.first.body.to_html) %> diff --git a/app/views/browse/query.html.erb b/app/views/browse/query.html.erb index 65231641c..53eca9747 100644 --- a/app/views/browse/query.html.erb +++ b/app/views/browse/query.html.erb @@ -2,14 +2,14 @@ <%= render "sidebar_header", :title => t(".title") %> -
+

<%= t(".introduction") %>

<%= t(".nearby") %>

<%= image_tag "searching.gif", :class => "loader" %> -
+
    @@ -17,7 +17,7 @@

    <%= t(".enclosing") %>

    <%= image_tag "searching.gif", :class => "loader" %> -
    +
      diff --git a/app/views/browse/timeout.html.erb b/app/views/browse/timeout.html.erb index 084c247dc..36ee4c883 100644 --- a/app/views/browse/timeout.html.erb +++ b/app/views/browse/timeout.html.erb @@ -2,6 +2,6 @@ <%= render "sidebar_header", :title => t(".title") %> -
      +

      <%= t ".sorry", :type => t(".type.#{@type}"), :id => params[:id] %>

      diff --git a/app/views/changesets/history.html.erb b/app/views/changesets/history.html.erb index cb80787a7..b601057f6 100644 --- a/app/views/changesets/history.html.erb +++ b/app/views/changesets/history.html.erb @@ -13,6 +13,6 @@ <%= render "sidebar_header", :title => @heading %> -
      +
      <%= image_tag "searching.gif", :class => "loader" %>
      diff --git a/app/views/changesets/index.html.erb b/app/views/changesets/index.html.erb index e9e620062..3ead2abda 100644 --- a/app/views/changesets/index.html.erb +++ b/app/views/changesets/index.html.erb @@ -9,9 +9,9 @@
      <% end -%> <% elsif params[:bbox] %> -
      <%= t(params[:max_id] ? ".no_more_area" : ".empty_area") %>
      +

      <%= t(params[:max_id] ? ".no_more_area" : ".empty_area") %>

      <% elsif params[:display_name] %> -
      <%= t(params[:max_id] ? ".no_more_user" : ".empty_user") %>
      +

      <%= t(params[:max_id] ? ".no_more_user" : ".empty_user") %>

      <% else %> -
      <%= t(params[:max_id] ? ".no_more" : ".empty") %>
      +

      <%= t(params[:max_id] ? ".no_more" : ".empty") %>

      <% end %> diff --git a/app/views/geocoder/search.html.erb b/app/views/geocoder/search.html.erb index 9f19be48a..8502227de 100644 --- a/app/views/geocoder/search.html.erb +++ b/app/views/geocoder/search.html.erb @@ -3,8 +3,8 @@ <%= render "sidebar_header", :title => t("site.sidebar.search_results") %> <% @sources.each do |source| %> -

      <%= t(".title.#{source}_html") %>

      -
      "> +

      <%= t(".title.#{source}_html") %>

      +
      "> <%= image_tag "searching.gif", :class => "loader" %>
      <% end %> diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb index 0403bc889..7a0ca0ed7 100644 --- a/app/views/layouts/map.html.erb +++ b/app/views/layouts/map.html.erb @@ -39,9 +39,9 @@
      <% unless current_user %> -
      +
      <%= render "sidebar_header", :title => t("layouts.intro_header") %> -
      +

      <%= t "layouts.intro_text" %>

      <%= 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 d6db3908b..9cbee91da 100644 --- a/app/views/site/export.html.erb +++ b/app/views/site/export.html.erb @@ -30,11 +30,11 @@

      <%= submit_tag t(".export_button"), :class => "btn btn-primary mx-auto" %>
      - -

      <%= t ".too_large.advice" %>

      -
      +

      <%= t ".too_large.advice" %>

      + +
      <%= t ".too_large.overpass.title" %>
      <%= t ".too_large.overpass.description" %>
      diff --git a/test/integration/user_changeset_comments_test.rb b/test/integration/user_changeset_comments_test.rb index 2483f1543..a9bd468ce 100644 --- a/test/integration/user_changeset_comments_test.rb +++ b/test/integration/user_changeset_comments_test.rb @@ -11,7 +11,7 @@ class UserChangesetCommentsTest < ActionDispatch::IntegrationTest assert_select "div#content" do assert_select "div#sidebar" do assert_select "div#sidebar_content" do - assert_select "div.browse-section" do + assert_select "div" do assert_select "div.notice" do assert_select "a[href='/login?referer=%2Fchangeset%2F#{changeset.id}']", :text => I18n.t("browse.changeset.join_discussion"), :count => 1 end @@ -43,7 +43,7 @@ class UserChangesetCommentsTest < ActionDispatch::IntegrationTest assert_select "div#content" do assert_select "div#sidebar" do assert_select "div#sidebar_content" do - assert_select "div.browse-section" do + assert_select "div" do assert_select "form[action='#']" do assert_select "textarea[name=text]" end