Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Onboarding Design for Importing Partners #416

Merged
merged 4 commits into from
Jun 10, 2018
Merged

Onboarding Design for Importing Partners #416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bbbaae4
Divide steps into 2 columns. Change <ol> to <ul>. Add decorative icons.
melaniew Jun 10, 2018
bc60cbd
Rearrange 2nd tier steps and buttons for better UX flow. Change actio…
melaniew Jun 10, 2018
3339787
Remove inline styles and create style list. Move onboarding Note! to …
melaniew Jun 10, 2018
55e201d
Remove styles from index and move to application.css.
melaniew Jun 10, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions app/assets/stylesheets/application.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
56 changes: 37 additions & 19 deletions app/views/partners/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down