From bbbaae4dd774a9a767a565af318595004fba0f82 Mon Sep 17 00:00:00 2001
From: Melanie White <mwhiteo@gmu.edu>
Date: Sat, 9 Jun 2018 20:27:05 -0400
Subject: [PATCH 1/4] Divide steps into 2 columns. Change <ol> to <ul>. Add
 decorative icons.

---
 app/views/partners/index.html.erb | 51 +++++++++++++++++++++++++------
 1 file changed, 41 insertions(+), 10 deletions(-)

diff --git a/app/views/partners/index.html.erb b/app/views/partners/index.html.erb
index 290874884c..e46dc9b9e7 100644
--- a/app/views/partners/index.html.erb
+++ b/app/views/partners/index.html.erb
@@ -37,16 +37,47 @@
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                     <h2 class="modal-title">Import Partners Instructions:</h4>
                 </div><!-- /.modal-header -->
-                <div class="modal-body">
-                  <ol>
-                    <li><%= link_to "/partners.csv", :format => :csv, :class => "btn btn-xs btn-info" do %><i class="fa fa-download"></i> Download example CSV <% end %></li>
-                    <li>Open the csv file with excel or your favourite spreadsheet program.</li>
-                    <li>Delete the sample data and enter your partner agency names and addresses in the appropriate columns.</li>
-                    <li>Save the file as a csv file.</li>
-                    <li>Click the choose file button and navigate to the saved file and select it.</li>
-                    <li>Then click the Import CSV button to import your storage locations.</li>
-                  </ol>
-                  <p class="text-warning"><small>Note: You're only able to run the import one time to prevent accidental imports or writing over existing locations!</small></p>
+                <div class="modal-body onboarding_steps" style="text-align: center;padding-top: 20px;">
+                  <div class="row">
+                    <div class="col-lg-6 col-md-12">
+                      <i class="fa fa-download fa-5x" aria-hidden="true"></i>
+                      <h3>Download example CSV file</h3>
+                      <ul style="list-style: none; padding: 0;">
+                        <li>Open the csv file with excel <br>or your favourite spreadsheet program.</li>
+                        <li>Delete the sample data and <br>enter your partner agency names and <br>addresses in the appropriate columns.</li>
+                        <li>Save the file as a csv file.</li>
+                        <li><%= link_to "/partners.csv", :format => :csv, :class => "btn btn-xs btn-info" do %><i class="fa fa-download"></i> Download example CSV <% end %></li>
+                      </ul>
+                    </div>
+                    <div class="col-lg-6 col-md-12">
+                      <i class="fa fa-file-text-o fa-5x" aria-hidden="true"></i>
+                      <h3>Upload your CSV file.</h3>
+                      <ul style="list-style: none; padding: 0;">
+                        <li>Click the choose file button and <br>navigate to the saved file and select it.<br>
+                        </li>
+                        <li>Then click the "Import CSV" button <br>to import your storage locations.</li>
+                        <div>
+                          <%= form_tag import_csv_partners_path, multipart: true do %>
+                            <div class="form-group">
+                              <%= file_field_tag :file, :accept => 'text/csv', class: "form-control-file" %>
+                            </div>
+                            <%= button_tag :class => "btn btn-lg btn-primary" do %>
+                              <i class="fa fa-upload"></i> Import CSV
+                            <% end #button %>
+                          <% end #form %>
+                        </div><!-- /.modal-footer -->                        
+                      </ul>
+                      <ol>
+                        <li><%= link_to "/partners.csv", :format => :csv, :class => "btn btn-xs btn-info" do %><i class="fa fa-download"></i> Download example CSV <% end %></li>
+                        <li>Open the csv file with excel or your favourite spreadsheet program.</li>
+                        <li>Delete the sample data and enter your partner agency names and addresses in the appropriate columns.</li>
+                        <li>Save the file as a csv file.</li>
+                        <li>Click the choose file button and navigate to the saved file and select it.</li>
+                        <li>Then click the Import CSV button to import your storage locations.</li>
+                      </ol>
+                      <p class="text-warning"><small>Note: You're only able to run the import one time to prevent accidental imports or writing over existing locations!</small></p>
+                    </div>
+                  </div>
                 </div><!-- /.modal-body -->
                 <div class="modal-footer">
                   <%= form_tag import_csv_partners_path, multipart: true do %>

From bc60cbd3779122c48092798b71755cfb49ec9def Mon Sep 17 00:00:00 2001
From: Melanie White <mwhiteo@gmu.edu>
Date: Sat, 9 Jun 2018 20:29:19 -0400
Subject: [PATCH 2/4] Rearrange 2nd tier steps and buttons for better UX flow.
 Change action buttons to md-size.

---
 app/views/partners/index.html.erb | 45 +++++++++++--------------------
 1 file changed, 15 insertions(+), 30 deletions(-)

diff --git a/app/views/partners/index.html.erb b/app/views/partners/index.html.erb
index e46dc9b9e7..a3dae3bee7 100644
--- a/app/views/partners/index.html.erb
+++ b/app/views/partners/index.html.erb
@@ -45,50 +45,35 @@
                       <ul style="list-style: none; padding: 0;">
                         <li>Open the csv file with excel <br>or your favourite spreadsheet program.</li>
                         <li>Delete the sample data and <br>enter your partner agency names and <br>addresses in the appropriate columns.</li>
-                        <li>Save the file as a csv file.</li>
-                        <li><%= link_to "/partners.csv", :format => :csv, :class => "btn btn-xs btn-info" do %><i class="fa fa-download"></i> Download example CSV <% end %></li>
+                        <li>Save the file as a csv file.</sli>
+                        <li><%= link_to "/partners.csv", :format => :csv, :class => "btn btn-md btn-info" do %><i class="fa fa-download"></i> Download example CSV <% end %></li>
                       </ul>
                     </div>
                     <div class="col-lg-6 col-md-12">
                       <i class="fa fa-file-text-o fa-5x" aria-hidden="true"></i>
                       <h3>Upload your CSV file.</h3>
                       <ul style="list-style: none; padding: 0;">
-                        <li>Click the choose file button and <br>navigate to the saved file and select it.<br>
+                        <li>Click the choose file button and <br>navigate to the saved file and select it.</li>
+                        <li>
+                          <%= form_tag import_csv_partners_path, multipart: true do %>
+                          <div class="form-group">
+                            <%= file_field_tag :file, :accept => 'text/csv', class: "form-control-file" %>
+                          </div>
+                          <% end #form %>
                         </li>
                         <li>Then click the "Import CSV" button <br>to import your storage locations.</li>
-                        <div>
-                          <%= form_tag import_csv_partners_path, multipart: true do %>
-                            <div class="form-group">
-                              <%= file_field_tag :file, :accept => 'text/csv', class: "form-control-file" %>
-                            </div>
-                            <%= button_tag :class => "btn btn-lg btn-primary" do %>
+                        <li><small>Note: You're only able to run the import one time to prevent accidental imports or writing over existing locations!</small></li>
+                        <%= form_tag import_csv_partners_path, multipart: true do %>
+                          <li>
+                            <%= button_tag :class => "btn btn-md btn-primary" do %>
                               <i class="fa fa-upload"></i> Import CSV
                             <% end #button %>
-                          <% end #form %>
-                        </div><!-- /.modal-footer -->                        
+                          </li>
+                        <% end #form %>
                       </ul>
-                      <ol>
-                        <li><%= link_to "/partners.csv", :format => :csv, :class => "btn btn-xs btn-info" do %><i class="fa fa-download"></i> Download example CSV <% end %></li>
-                        <li>Open the csv file with excel or your favourite spreadsheet program.</li>
-                        <li>Delete the sample data and enter your partner agency names and addresses in the appropriate columns.</li>
-                        <li>Save the file as a csv file.</li>
-                        <li>Click the choose file button and navigate to the saved file and select it.</li>
-                        <li>Then click the Import CSV button to import your storage locations.</li>
-                      </ol>
-                      <p class="text-warning"><small>Note: You're only able to run the import one time to prevent accidental imports or writing over existing locations!</small></p>
                     </div>
                   </div>
                 </div><!-- /.modal-body -->
-                <div class="modal-footer">
-                  <%= form_tag import_csv_partners_path, multipart: true do %>
-                    <div class="form-group">
-                      <%= file_field_tag :file, :accept => 'text/csv', class: "form-control-file" %>
-                    </div>
-                    <%= button_tag :class => "btn btn-lg btn-primary" do %>
-                      <i class="fa fa-upload"></i> Import CSV
-                    <% end #button %>
-                  <% end #form %>
-                </div><!-- /.modal-footer -->
               </div><!-- /.modal-content -->
             </div><!-- /.modal-dialog -->
           </div><!-- /.modal -->

From 33397872ece9b822e8c7ac9e2ad683f694845582 Mon Sep 17 00:00:00 2001
From: Melanie White <mwhiteo@gmu.edu>
Date: Sat, 9 Jun 2018 20:33:22 -0400
Subject: [PATCH 3/4] Remove inline styles and create style list. Move
 onboarding Note! to modal footer. Add 1. and 2. Adjust Choose file button
 width.

---
 app/views/partners/index.html.erb | 79 +++++++++++++++++++++++--------
 1 file changed, 58 insertions(+), 21 deletions(-)

diff --git a/app/views/partners/index.html.erb b/app/views/partners/index.html.erb
index a3dae3bee7..df05255005 100644
--- a/app/views/partners/index.html.erb
+++ b/app/views/partners/index.html.erb
@@ -31,49 +31,51 @@
 
           <!-- Modal HTML -->
           <div id="importPartnerModal" class="modal fade">
-          <div class="modal-dialog">
+          <div class="modal-dialog onboarding_steps">
             <div class="modal-content">
                 <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                    <h2 class="modal-title">Import Partners Instructions:</h4>
+                    <h4 class="modal-title">Import Partners Instructions:</h4>
                 </div><!-- /.modal-header -->
-                <div class="modal-body onboarding_steps" style="text-align: center;padding-top: 20px;">
+                <div class="modal-body">
                   <div class="row">
-                    <div class="col-lg-6 col-md-12">
-                      <i class="fa fa-download fa-5x" aria-hidden="true"></i>
-                      <h3>Download example CSV file</h3>
-                      <ul style="list-style: none; padding: 0;">
+                    <div class="col-md-6 col-sm-12" style="padding-top: 30px;">
+                      <i class="fa fa-download fa-4x" aria-hidden="true"></i>
+                      <h3 class="text-info">1. Download example CSV file</h3>
+                      <ul>
                         <li>Open the csv file with excel <br>or your favourite spreadsheet program.</li>
                         <li>Delete the sample data and <br>enter your partner agency names and <br>addresses in the appropriate columns.</li>
-                        <li>Save the file as a csv file.</sli>
+                        <li>Save the file as a csv file.</li>
                         <li><%= link_to "/partners.csv", :format => :csv, :class => "btn btn-md btn-info" do %><i class="fa fa-download"></i> Download example CSV <% end %></li>
                       </ul>
                     </div>
-                    <div class="col-lg-6 col-md-12">
-                      <i class="fa fa-file-text-o fa-5x" aria-hidden="true"></i>
-                      <h3>Upload your CSV file.</h3>
-                      <ul style="list-style: none; padding: 0;">
+                    <div class="col-md-6 col-sm-12" style="padding-top: 30px;">
+                      <i class="fa fa-file-text-o fa-4x" aria-hidden="true"></i>
+                      <h3 class="text-info">2. Upload your CSV file</h3>
+                      <ul>
                         <li>Click the choose file button and <br>navigate to the saved file and select it.</li>
                         <li>
                           <%= form_tag import_csv_partners_path, multipart: true do %>
-                          <div class="form-group">
+                          <div class="form-group" style="margin: 0 auto 15px; width: 202px;">
                             <%= file_field_tag :file, :accept => 'text/csv', class: "form-control-file" %>
                           </div>
                           <% end #form %>
                         </li>
-                        <li>Then click the "Import CSV" button <br>to import your storage locations.</li>
-                        <li><small>Note: You're only able to run the import one time to prevent accidental imports or writing over existing locations!</small></li>
-                        <%= form_tag import_csv_partners_path, multipart: true do %>
-                          <li>
-                            <%= button_tag :class => "btn btn-md btn-primary" do %>
+                        <li style="margin-bottom: 27px;">Then click the "Import CSV" button <br>to import your storage locations.</li>
+                        <li>
+                          <%= form_tag import_csv_partners_path, multipart: true do %>
+                            <%= button_tag :class => "btn btn-md btn-info" do %>
                               <i class="fa fa-upload"></i> Import CSV
                             <% end #button %>
-                          </li>
-                        <% end #form %>
+                          <% end #form %>
+                        </li>
                       </ul>
                     </div>
-                  </div>
+                  </div><!-- / row -->
                 </div><!-- /.modal-body -->
+                <div class="modal-footer">
+                  <small>Note: You're only able to run the import one time to prevent accidental imports or writing over existing locations!</small>
+                </div><!-- /.modal-footer -->
               </div><!-- /.modal-content -->
             </div><!-- /.modal-dialog -->
           </div><!-- /.modal -->
@@ -101,3 +103,38 @@
     </div><!-- /.box-body -->
   </div><!-- /.box -->
 </section><!-- /.content -->
+
+
+<style>
+
+  @media (min-width: 768px) {
+    .modal-dialog.onboarding_steps {
+      width: 700px;
+    }
+  }
+
+  .modal-dialog h4.modal-title {
+    font-family: 'Source Sans Pro',sans-serif;
+  }
+
+  .modal-dialog.onboarding_steps .modal-body {
+    font-family: 'Source Sans Pro',sans-serif;
+    text-align: center;
+  } 
+  .modal-dialog.onboarding_steps .modal-body h3 {
+    margin-top: 30px;
+  }
+
+  .modal-dialog.onboarding_steps .modal-body ul {
+    list-style: none; 
+    padding: 0;
+  }
+  .modal-dialog.onboarding_steps .modal-body li {
+    line-height: 1.25em;
+    margin-bottom: 15px;
+    color: #555;
+  }
+  .modal-dialog.onboarding_steps .modal-footer {
+    text-align: center;
+  }  
+</style>

From 55e201da4dfd4960182b052ddbacaf661f578894 Mon Sep 17 00:00:00 2001
From: Melanie White <mwhiteo@gmu.edu>
Date: Sat, 9 Jun 2018 20:34:23 -0400
Subject: [PATCH 4/4] Remove styles from index and move to application.css.

---
 app/assets/stylesheets/application.scss | 34 ++++++++++++++++++++++++
 app/views/partners/index.html.erb       | 35 -------------------------
 2 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 46afc40ca2..13cfcf2cf4 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -53,3 +53,37 @@ tr.negative {
 tr.positive {
   background-color: #DFD;
 }
+
+
+/* ONBOARDING MODAL BOX */
+
+.modal-dialog h4.modal-title {
+	font-family: 'Source Sans Pro',sans-serif;
+}
+
+.modal-dialog.onboarding_steps .modal-body,
+.modal-dialog.onboarding_steps .modal-footer {
+	font-family: 'Source Sans Pro',sans-serif;
+	text-align: center;
+}
+
+.modal-dialog.onboarding_steps .modal-body h3 {
+	margin-top: 30px;
+}
+
+.modal-dialog.onboarding_steps .modal-body ul {
+	list-style: none; 
+	padding: 0;
+}
+
+.modal-dialog.onboarding_steps .modal-body li {
+	line-height: 1.25em;
+	margin-bottom: 15px;
+	color: #555;
+}
+
+@media (min-width: 768px) {
+	.modal-dialog.onboarding_steps {
+	  width: 700px;
+	}
+}
\ No newline at end of file
diff --git a/app/views/partners/index.html.erb b/app/views/partners/index.html.erb
index df05255005..7fa36c5fff 100644
--- a/app/views/partners/index.html.erb
+++ b/app/views/partners/index.html.erb
@@ -103,38 +103,3 @@
     </div><!-- /.box-body -->
   </div><!-- /.box -->
 </section><!-- /.content -->
-
-
-<style>
-
-  @media (min-width: 768px) {
-    .modal-dialog.onboarding_steps {
-      width: 700px;
-    }
-  }
-
-  .modal-dialog h4.modal-title {
-    font-family: 'Source Sans Pro',sans-serif;
-  }
-
-  .modal-dialog.onboarding_steps .modal-body {
-    font-family: 'Source Sans Pro',sans-serif;
-    text-align: center;
-  } 
-  .modal-dialog.onboarding_steps .modal-body h3 {
-    margin-top: 30px;
-  }
-
-  .modal-dialog.onboarding_steps .modal-body ul {
-    list-style: none; 
-    padding: 0;
-  }
-  .modal-dialog.onboarding_steps .modal-body li {
-    line-height: 1.25em;
-    margin-bottom: 15px;
-    color: #555;
-  }
-  .modal-dialog.onboarding_steps .modal-footer {
-    text-align: center;
-  }  
-</style>