From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 8 Jan 2020 15:27:39 +0000 (+0100)
Subject: Refactor the fixthemap page to use the bootstrap responsive grid
X-Git-Tag: live~3338^2~5
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/0b1aafb7015c7ab1986407870d048b3a3dcefda6?ds=sidebyside

Refactor the fixthemap page to use the bootstrap responsive grid

This ensures that on small screens, the 'how to help' sections
are one above the other, and on larger screens they are side-by-side
---

diff --git a/app/assets/stylesheets/_bootstrap-custom.scss b/app/assets/stylesheets/_bootstrap-custom.scss
index 96d37415f..689d7ee98 100644
--- a/app/assets/stylesheets/_bootstrap-custom.scss
+++ b/app/assets/stylesheets/_bootstrap-custom.scss
@@ -13,7 +13,7 @@
 @import "bootstrap/type";
 // @import "bootstrap/images";
 // @import "bootstrap/code";
-// @import "bootstrap/grid";
+@import "bootstrap/grid";
 // @import "bootstrap/tables";
 // @import "bootstrap/forms";
 // @import "bootstrap/buttons";
diff --git a/app/views/site/fixthemap.html.erb b/app/views/site/fixthemap.html.erb
index 4bb478c7e..7077d74cb 100644
--- a/app/views/site/fixthemap.html.erb
+++ b/app/views/site/fixthemap.html.erb
@@ -7,31 +7,30 @@
 <% end %>
 
 <h3><%= t "layouts.intro_header" %></h3>
-
 <p><%= t "layouts.intro_text" %></p>
 
 <h3><%= t ".how_to_help.title" %></h3>
 
-<div class='clearfix'>
-  <div class='col6 inner11'>
-    <h3><%= t ".how_to_help.join_the_community.title" %></h3>
-    <%= t ".how_to_help.join_the_community.explanation_html" %>
-    <div class='clearfix center'>
-      <a class="button sign-up" href="<%= user_new_path %>"><%= t("layouts.start_mapping") %></a>
+<div class='container'>
+  <div class='row' %>
+    <div class='col-sm'>
+      <h5><%= t ".how_to_help.join_the_community.title" %></h3>
+      <p><%= t ".how_to_help.join_the_community.explanation_html" %></p>
+      <p class='text-center'>
+        <a class="button sign-up" href="<%= user_new_path %>"><%= t("layouts.start_mapping") %></a>
+      </p>
+    </div>
+    <div class='col-sm'>
+      <h5><%= t "site.welcome.add_a_note.title" %></h3>
+      <p><%= t "site.welcome.add_a_note.paragraph_1_html" %></p>
+      <p><%= t ".how_to_help.add_a_note.instructions_html", :map_url => root_path %></p>
     </div>
-  </div>
-  <div class='col6 inner11'>
-    <h3><%= t "site.welcome.add_a_note.title" %></h3>
-    <p><%= t "site.welcome.add_a_note.paragraph_1_html" %></p>
-    <p><%= t ".how_to_help.add_a_note.instructions_html", :map_url => root_path %></p>
   </div>
 </div>
 
 <h3><%= t ".other_concerns.title" %></h3>
 <p><%= t ".other_concerns.explanation_html" %></p>
 
-<div class='col12 clearfix icon-list'>
-  <h3><%= t "site.welcome.questions.title" %></h3>
-  <span class='sprite small term question'></span>
-  <p><%= t "site.welcome.questions.paragraph_1_html", :help_url => help_path %></p>
-</div>
+<h3><%= t "site.welcome.questions.title" %></h3>
+<span class='sprite small term question'></span>
+<p><%= t "site.welcome.questions.paragraph_1_html", :help_url => help_path %></p>