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 96d37415f33054d54b3615d9c3342106b1a75659..689d7ee985660c8b410bc82261129cbf672a2d5c 100644 (file)
--- 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 4bb478c7e416e8bf6f1d65ae079dafc409fb6d1e..7077d74cbb984f852c6a0a9e3f6ea88aa8241db5 100644 (file)
--- 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>