From f0ee117cffb37d36cc2fc0be198832358a451025 Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 8 Jan 2020 16:41:17 +0100
Subject: [PATCH] Refactor the welcome page to use the bootstrap grid and alert
 box

The two columns work well side-by-side even at small screen widths.
---
 app/assets/stylesheets/common.scss |  5 -----
 app/views/site/welcome.html.erb    | 28 +++++++++++++---------------
 2 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 3d013339d..018f36217 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -2627,11 +2627,6 @@ input.richtext_title[type="text"] {
     text-decoration: none;
   }
 
-  .note-box {
-    margin-top: 20px;
-    background-color: $offwhite;
-  }
-
   .icon.note {
     background-color: #333;
     border-radius: 4px;
diff --git a/app/views/site/welcome.html.erb b/app/views/site/welcome.html.erb
index dc6a519df..4617935e7 100644
--- a/app/views/site/welcome.html.erb
+++ b/app/views/site/welcome.html.erb
@@ -10,15 +10,15 @@
 
 <h3><%= t ".whats_on_the_map.title" %></h3>
 
-<div class=' clearfix'>
-  <div class='col6 inner11'>
-    <div class='center clearfix inner11'>
+<div class='row'>
+  <div class='col'>
+    <div class='center'>
       <span class='sprite small check'></span>
     </div>
     <p><%= t ".whats_on_the_map.on_html" %></p>
   </div>
-  <div class='col6 inner11'>
-    <div class='center clearfix inner11'>
+  <div class='col'>
+    <div class='center'>
       <span class='sprite small x'></span>
     </div>
     <p><%= t ".whats_on_the_map.off_html" %></p>
@@ -29,7 +29,7 @@
 
 <p><%= t ".basic_terms.paragraph_1_html" %></p>
 
-<div class='col12 clearfix icon-list'>
+<div class='clearfix icon-list'>
   <div class='clearfix'>
     <span class='sprite small term editor'></span>
     <p><%= t ".basic_terms.editor_html" %></p>
@@ -48,26 +48,24 @@
   </div>
 </div>
 
-<div class='col12 clearfix icon-list'>
+<div class='clearfix icon-list'>
   <h3><%= t ".rules.title" %></h3>
   <span class='sprite small term rules'></span>
   <p><%= t ".rules.paragraph_1_html" %></p>
 </div>
 
-<div class='col12 clearfix icon-list'>
+<div class='clearfix icon-list'>
   <h3><%= t ".questions.title" %></h3>
   <span class='sprite small term question'></span>
   <p><%= t ".questions.paragraph_1_html", :help_url => help_path %></p>
 </div>
 
 <div class='clearfix center'>
-  <a href="<%= edit_path %>" class="button start-mapping"><%= t ".start_mapping" %></a>
+  <p><a href="<%= edit_path %>" class="button start-mapping"><%= t ".start_mapping" %></a></p>
 </div>
 
-<div class='note-box'>
-  <div class='inner22'>
-    <h3><%= t ".add_a_note.title" %></h3>
-    <p><%= t ".add_a_note.paragraph_1_html" %></p>
-    <p><%= t ".add_a_note.paragraph_2_html", :map_url => root_path %></p>
-  </div>
+<div class='alert alert-primary'>
+  <h3><%= t ".add_a_note.title" %></h3>
+  <p><%= t ".add_a_note.paragraph_1_html" %></p>
+  <p><%= t ".add_a_note.paragraph_2_html", :map_url => root_path %></p>
 </div>
-- 
2.43.2