Merge pull request #416 from rubyforgood/onboarding_partners

Onboarding Design for Importing Partners
rubyforgood · Jun 10, 2018 · 46fb11e · 46fb11e
2 parents ee17db1 + 55e201d
commit 46fb11e
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 19 deletions.
diff --git 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;
+	}
+}
diff --git a/app/views/partners/index.html.erb b/app/views/partners/index.html.erb
@@ -31,32 +31,50 @@
 
           <!-- 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">
-                  <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="row">
+                    <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.</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-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" style="margin: 0 auto 15px; width: 202px;">
+                            <%= file_field_tag :file, :accept => 'text/csv', class: "form-control-file" %>
+                          </div>
+                          <% end #form %>
+                        </li>
+                        <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 %>
+                          <% end #form %>
+                        </li>
+                      </ul>
+                    </div>
+                  </div><!-- / row -->
                 </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 %>
+                  <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 -->