Restructure upload progress for greater clarity

** Why are these changes being introduced: * The default rendering of in-progress uploads to S3 (provided by boilerplate code around direct upload) is inaccessible to screen readers, and is visually indistinct. * Some of the wording on the new transfer form needs to be adjusted based on the results of user testing, and the subsequent changes. * A link to DSpace@MIT needs to be added to the Transfer confirmation page. ** Relevant ticket(s): * https://mitlibraries.atlassian.net/browse/ETD-256 ** How does this address that need: This updates the JS and CSS used to render the direct upload progress indicators. Specific changes include: * Moving the upload panel to be visually just above the form submit button, which reduces the chance that the user will miss them (being off-screen in the middle of the form). Additionally, the upload process will set the URL hash to this newly-created panel in case it should appear offscreen. * Adds an ARIA live region at the top of the panel that provides a summary of the upload process which can be read by screen readers. The panel updates as each file is uploaded. * Applies our branding package to the individual file panels, making them more visually prominent. Beyond the file upload feedback, we also make the following changes: * Updates the form display to take the full width of the content column. * Re-writes the text that appears in the well above the form based on UX-provided copy. ** Document any side effects to this change: * We had already made changes to the boilerplate JS and CSS, but this PR will intervene more heavily. I compared our current file (which we added to the repo some time ago) with the version in the current documentation, and it does not seem to have been updated in the years since - so there appears to be little risk in us needing to implement subsequent changes.
MITLibraries · Apr 28, 2021 · 6e8e336 · 6e8e336
1 parent 37fe064
commit 6e8e336
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 114 deletions.
diff --git a/app/assets/javascripts/direct_uploads.js b/app/assets/javascripts/direct_uploads.js
@@ -3,14 +3,32 @@
    http://edgeguides.rubyonrails.org/active_storage_overview.html#example */
 
 var storageErrorDetected = false;
+var completedInTransfer = 0;
+var filesInTransfer = 0;
+
+addEventListener("direct-uploads:start", event => {
+  location.hash = "direct-upload-panel"
+  document.getElementById("direct-upload-panel").insertAdjacentHTML("afterbegin", `
+    <div class="direct-upload__summary">
+      <div class="alert alert-banner" aria-live="polite">
+        <p>Upload in progress: <span id="direct-upload-status"></span></p>
+      </div>
+    </div>
+  `)
+  document.getElementById("direct-upload-status").innerHTML = `${completedInTransfer} of ${filesInTransfer} files have been transferred.`
+})
 
 addEventListener("direct-upload:initialize", event => {
   const { target, detail } = event
   const { id, file } = detail
-  target.insertAdjacentHTML("beforebegin", `
-    <div id="direct-upload-${id}" class="direct-upload direct-upload--pending">
+  filesInTransfer++
+  document.getElementById("direct-upload-panel").insertAdjacentHTML("beforeend", `
+    <div id="direct-upload-${id}" class="direct-upload direct-upload--pending alert alert-banner">
       <div id="direct-upload-progress-${id}" class="direct-upload__progress" style="width: 0%"></div>
-      <span class="direct-upload__filename">${file.name}</span>
+      <p>
+        <i id="direct-upload-icon-${id}" class="fa fa-lg"></i>
+        <span class="direct-upload__filename">${file.name}</span>
+      </p>
     </div>
   `)
 })
@@ -25,6 +43,7 @@ addEventListener("direct-upload:progress", event => {
   const { id, progress } = event.detail
   const progressElement = document.getElementById(`direct-upload-progress-${id}`)
   progressElement.style.width = `${progress}%`
+  progressElement.style.background = "#008700"
 })
 
 addEventListener("direct-upload:error", event => {
@@ -46,6 +65,11 @@ addEventListener("direct-upload:end", event => {
   const { id } = event.detail
   const element = document.getElementById(`direct-upload-${id}`)
   element.classList.add("direct-upload--complete")
+  element.classList.add("success")
+  const icon = document.getElementById(`direct-upload-icon-${id}`)
+  icon.classList.add("fa-check-circle")
+  completedInTransfer++
+  document.getElementById("direct-upload-status").innerHTML = `${completedInTransfer} of ${filesInTransfer} files have been transferred.`
 })
 
 addEventListener("direct-uploads:end", event => {

diff --git a/app/assets/stylesheets/direct_uploads.scss b/app/assets/stylesheets/direct_uploads.scss
@@ -3,14 +3,19 @@
    http://edgeguides.rubyonrails.org/active_storage_overview.html#example */
 
 .direct-upload {
-  display: inline-block;
+  /* display: inline-block; */
   position: relative;
-  padding: 2px 4px;
-  margin: 0 3px 3px 0;
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  border-radius: 3px;
-  font-size: 11px;
-  line-height: 13px;
+  /* padding: 2px 4px; */
+  /* margin: 0 3px 3px 0; */
+  /* border: 1px solid rgba(0, 0, 0, 0.3); */
+  /* border-radius: 3px; */
+  /* font-size: 11px; */
+  /* line-height: 13px; */
+}
+
+.direct-upload__summary {
+  clear: both;
+  padding-top: 2rem;
 }
 
 .direct-upload--pending {

diff --git a/app/views/transfer/_welcome.html.erb b/app/views/transfer/_welcome.html.erb
@@ -5,26 +5,33 @@
     MIT Libraries.
   </p>
 
-  <h4 class="hd-5">Please review before you begin:</strong></h4>
+  <h4 class="hd-5">Before you transfer</h4>
   <ul>
-    <li>Theses can be transferred throughout the semester (one thesis 
-    per author) and must be submitted by 30 days after graduation.</li>
-    <li>Confirm each thesis PDF meets the required thesis specifications 
-    prior to submitting them to the Libraries. <strong>Pay specific 
-    attention to the information on the title page.</strong></li>
-    <li>Upload individual thesis files (can be done as a bulk upload). 
-    We can no longer accept zip files.</li>
-    <li>All theses must be transferred as PDF files using the following 
-    file naming convention - [last/surname-kerberos-degree-dept-year-file.pdf]. 
-    For example:
+    <li>Confirm that each thesis meets the required specifications prior to
+    transferring to the Libraries - pay specific attention to the information
+    on the title page.</li>
+    <li>Transfer theses as PDF files using the required filename format -
+    [last/surname-kerberos-degree-dept-year-file.pdf]. See the <a href="https://libguides.mit.edu/c.php?g=176367&p=8229377">Thesis FAQ for
+    specific filename examples.</a></li>
+  </ul>
+
+  <h4 class="hd-5">Tips for smooth uploading and transfer</h4>
+  <p>Improved file management functionality will be added this summer, but for the June 2021 degree period, we have some tips.</p>
+  <ul>
+    <li>Organize the files into a single folder on your computer for ease of bulk uploading and transfer. We can no longer accept zip files.</li>
+    <li>Select all the files to upload at once -- if you try to add more, the tool currently overwrites what you previously uploaded.
+      <ul>
+        <li>If a file was uploaded by accident, simply start over. Currently, the tool doesn’t allow you to remove a single file.</li>
+      </ul>
+    </li>
+    <li>Do not close your browser window while the transfer is in progress.
       <ul>
-        <li>Thesis PDF: macdonald-mssimon-mcp-dusp-2019-thesis.pdf</li>
-        <li>Proquest Form: macdonald-mssimon-mcp-dusp-2019-proquest.pdf</li>
-        <li>Signature Page: macdonald-mssimon-mcp-dusp-2019-sig.pdf</li>
+        <li>The transfer process can take some time, depending on your internet speed. While people are working at home (with slower internet speeds than on campus) this is something to definitely be aware of.</li>
+        <li>A “success” page will present when the transfer is complete and you’ll receive a confirmation email with the files you transferred.</li>
       </ul>
     </li>
+    <li>You may transfer theses throughout the semester (one thesis per author) and must be submitted by 30 days after graduation.</li>
   </ul>
 
-  <p>Contact us with any questions: <a href="mailto:mit-theses@mit.edu?Subject=Transfer%20submission%20help" target="_blank">
-  mit-theses@mit.edu</a>.</p>
+  <p>We expect to learn a lot during the June 2021 degree period. Please let us know if you or your students have any feedback or questions about this process by emailing us at <a href="mailto:mit-theses@mit.edu?Subject=Transfer%20submission%20help" target="_blank">mit-theses@mit.edu</a>.</p>
 </div>
diff --git a/app/views/transfer/confirm.html.erb b/app/views/transfer/confirm.html.erb
@@ -1,7 +1,7 @@
 <h4>A couple reminders:</h4>
 <ul>
   <li>We will not begin processing theses until after graduation.</li>
-  <li>Theses will be published in DSpace@MIT, it may take up to 3 months for theses to appear in the collection.</li>
+  <li>Theses will be published in <a href="https://dspace.mit.edu/handle/1721.1/7582">DSpace@MIT</a>, it may take up to 3 months for theses to appear in the collection.</li>
 </ul>
 
 <p>Please contact us at <a href="mailto:mit-theses <mit-theses@mit.edu>" target="_blank">mit-theses@mit.edu</a> with any questions.</p>
diff --git a/app/views/transfer/new.html.erb b/app/views/transfer/new.html.erb
@@ -8,94 +8,93 @@
 
 <%= render 'shared/you_are' %>
 
-<div class="layout-3q1q">
-  <div class="col3q">
-    <%= render 'welcome' %>
-
-    <%= simple_form_for(@transfer, url: '/transfer', html: { class: 'transferSubmission' }, validate: true ) do |f| %>
-
-      <%= f.error_notification %>
-      <div class="alert alert-banner error" style="display: none;" role="alert" aria-invalid="true"></div>
-
-      <%= f.association :department, label_method: :name_dw, as: :select,
-            collection: current_user.submittable_departments,
-            validate: { presence: true },
-            include_hidden: false,
-            wrapper_html: { class: 'field-row select layout-1q3q layout-band' },
-            input_html: { class: 'field field-select col3q', multiple: false,
-              data: { msg: Transfer::VALIDATION_MSGS[:department] },
-              'aria-describedby': 'transfer_department-hint'
-            },
-            label_html: { class: 'col1q' },
-            label: 'Your department',
-            hint: 'Select the department or program for which you are 
-                   submitting theses.',
-            hint_html: { id: 'transfer_department-hint', class: 'col3q' } %>
-
-      <div class="field-row layout-1q3q layout-band">
-        <label class="col1q required field-label" for="thesis_date_ids">Degree date</label>
-        <div class="col3q group-inline" id="thesis_date_ids">
-          <%= f.input :graduation_month, label: 'Month', as: :select,
-                collection: Transfer::VALID_MONTHS,
-                wrapper_html: { class: 'field-wrap' },
-                input_html: { class: 'field field-select', data: { msg: Transfer::VALIDATION_MSGS[:graduation_month] },
-                'aria-describedby': 'thesis_date_ids-hint' } %>
-          <%= f.input :graduation_year, label: 'Year',
-                collection: [Date.today.last_year.strftime('%Y'),
-                             Date.today.strftime('%Y'),
-                             Date.today.next_year.strftime('%Y')],
-                wrapper_html: { class: 'field-wrap' },
-                input_html: { class: 'field field-select',
-                  data: { msg: Transfer::VALIDATION_MSGS[:graduation_year] } } %>
-          <div id="thesis_date_ids-hint" class="hint">Enter the month and year 
-          in which these degrees will be conferred.</div>
-        </div>
-      </div>
-
-      <%= f.input :files, as: :file,
-            wrapper_html: { class: 'field-row layout-1q3q layout-band' },
-            input_html: { class: 'field field-upload col3q',
-                          multiple: true,
-                          direct_upload: true,
-                          data: { msg: Transfer::VALIDATION_MSGS[:files] },
-                          'aria-describedby': 'transfer_files_ids-hint' },
-            label_html: { class: 'col1q' },
-            label: 'Files to upload',
-            required: true,
-            hint: 'Please upload individual files. Do not upload a zip file.',
-            hint_html: { id: 'transfer_files_ids-hint', class: 'col3q' }  %>
-
-      <div class='field-wrap'>
-        <div id="files_to_upload"></div>
-      </div>
-
-      <%= f.input :note, as: :text,
-            wrapper_html: { class: 'field-row layout-1q3q layout-band' },
-            input_html: { class: 'field field-note col3q', :rows => 10,
-              'aria-describedby': 'transfer_note-hint' },
-            label_html: { class: 'col1q' },
-            label: 'Notes (optional)',
-            required: false,
-            hint: 'Anything else we should know? If you have questions, email 
-                   <a href="mailto:mit-theses@mit.edu?Subject=Transfer%20submission%20help" target="_blank">mit-theses@mit.edu</a> for the fastest response.'.html_safe,
-            hint_html: { id: 'transfer_note-hint', class: 'col3q' } %>
-
-      <%= f.input :transfer_certified, as: :boolean,
-                  required: true,
-                  wrapper_html: { class: 'field-row layout-band layout-1q3q' },
-                  input_html: { class: 'checkbox-input' },
-                  label_html: { class: 'col3q', style: 'font-weight: normal;' },
-                  label: " I confirm the theses in this transfer have been approved and certified by my department or program." %>
-
-      <div class='field-row layout-3q1q'>
-        <div class="col1q-r">
-          <%= submit_tag 'Complete transfer', class: 'btn button-primary' %>
-        </div>
-      </div>
-
-    <% end # Ends simple_form_for %>
+<%= render 'welcome' %>
+
+<%= simple_form_for(@transfer, url: '/transfer', html: { class: 'transferSubmission' }, validate: true ) do |f| %>
+
+  <%= f.error_notification %>
+  <div class="alert alert-banner error" style="display: none;" role="alert" aria-invalid="true"></div>
+
+  <%= f.association :department, label_method: :name_dw, as: :select,
+        collection: current_user.submittable_departments,
+        validate: { presence: true },
+        include_hidden: false,
+        wrapper_html: { class: 'field-row select layout-1q3q layout-band' },
+        input_html: { class: 'field field-select col3q', multiple: false,
+          data: { msg: Transfer::VALIDATION_MSGS[:department] },
+          'aria-describedby': 'transfer_department-hint'
+        },
+        label_html: { class: 'col1q' },
+        label: 'Your department',
+        hint: 'Select the department or program for which you are
+               submitting theses.',
+        hint_html: { id: 'transfer_department-hint', class: 'col3q' } %>
+
+  <div class="field-row layout-1q3q layout-band">
+    <label class="col1q required field-label" for="thesis_date_ids">Degree date</label>
+    <div class="col3q group-inline" id="thesis_date_ids">
+      <%= f.input :graduation_month, label: 'Month', as: :select,
+            collection: Transfer::VALID_MONTHS,
+            wrapper_html: { class: 'field-wrap' },
+            input_html: { class: 'field field-select', data: { msg: Transfer::VALIDATION_MSGS[:graduation_month] },
+            'aria-describedby': 'thesis_date_ids-hint' } %>
+      <%= f.input :graduation_year, label: 'Year',
+            collection: [Date.today.last_year.strftime('%Y'),
+                         Date.today.strftime('%Y'),
+                         Date.today.next_year.strftime('%Y')],
+            wrapper_html: { class: 'field-wrap' },
+            input_html: { class: 'field field-select',
+              data: { msg: Transfer::VALIDATION_MSGS[:graduation_year] } } %>
+      <div id="thesis_date_ids-hint" class="hint">Enter the month and year
+      in which these degrees will be conferred.</div>
+    </div>
   </div>
-</div>
+
+  <%= f.input :files, as: :file,
+        wrapper_html: { class: 'field-row layout-1q3q layout-band' },
+        input_html: { class: 'field field-upload col3q',
+                      multiple: true,
+                      direct_upload: true,
+                      data: { msg: Transfer::VALIDATION_MSGS[:files] },
+                      'aria-describedby': 'transfer_files_ids-hint' },
+        label_html: { class: 'col1q' },
+        label: 'Files to upload',
+        required: true,
+        hint: 'Do not upload a zip file.',
+        hint_html: { id: 'transfer_files_ids-hint', class: 'col3q' }  %>
+
+  <div class='field-wrap'>
+    <div id="files_to_upload"></div>
+  </div>
+
+  <%= f.input :note, as: :text,
+        wrapper_html: { class: 'field-row layout-1q3q layout-band' },
+        input_html: { class: 'field field-note col3q', :rows => 10,
+          'aria-describedby': 'transfer_note-hint' },
+        label_html: { class: 'col1q' },
+        label: 'Notes (optional)',
+        required: false,
+        hint: 'Anything else we should know? If you have questions, email
+               <a href="mailto:mit-theses@mit.edu?Subject=Transfer%20submission%20help" target="_blank">mit-theses@mit.edu</a> for the fastest response.'.html_safe,
+        hint_html: { id: 'transfer_note-hint', class: 'col3q' } %>
+
+  <%= f.input :transfer_certified, as: :boolean,
+              required: true,
+              wrapper_html: { class: 'field-row layout-band layout-1q3q' },
+              input_html: { class: 'checkbox-input' },
+              label_html: { class: 'col3q', style: 'font-weight: normal;' },
+              label: " I confirm the theses in this transfer have been approved and certified by my department or program." %>
+
+  <div id="direct-upload-panel">
+  </div>
+
+  <div class='field-row layout-3q1q'>
+    <div class="col1q-r">
+      <%= submit_tag 'Complete transfer', class: 'btn button-primary' %>
+    </div>
+  </div>
+
+<% end # Ends simple_form_for %>
 
   <script>
     $("input:file").change(function () {