more form styling for textbook upload and first rough pass at file uploader

cms/templates/js/chapter.underscore

@@ -8,7 +8,7 @@
     <label for="chapter<%= order %>-asset-path"><%= gettext("Chapter Asset") %>:</label>
     <input id="chapter<%= order %>-asset-path" name="chapter<%= order %>-asset-path" placeholder="<%= _.str.sprintf(gettext("path/to/introductionToCookieBaking-CH%d.pdf"), order) %>" value="<%= asset_path %>" type="text">
     <span class="tip tip-stacked"><%= gettext("provide the path to a file added to this course or upload a new one") %></span>
-  <button class="action action-uploadasset"><%= gettext("Upload Asset") %></button>
+  <button class="action action-upload"><%= gettext("Upload Asset") %></button>
   </div>
   <a class="action action-close"><i class="icon-remove-sign"></i> <span class="sr"><%= gettext("delete chapter") %></span></a>
 </li>

cms/templates/js/textbook.underscore

 <form id="edit_textbook_form" class="edit-textbook">
   <div id="edit_textbook_error" class="message message-status message-status error" name="edit_textbook_error"></div>
-  <fieldset>
-  <legend class="sr"><%= gettext("Required information to edit or add a textbook and chapters") %></legend>
+
     <ol class="list-input">
       <li class="add-textbook-name field text required">
+  <fieldset class="textbook">
+  <legend class="sr"><%= gettext("Textbook information") %></legend>
         <div class="input-wrap">
-          <label for="textbook-name-input"><%= gettext("Name") %>:</label>
+          <label for="textbook-name-input"><%= gettext("Textbook Name") %>:</label>
           <input id="textbook-name-input" type="text" placeholder="<%= gettext("Introduction to Cookie Baking") %>" value="<%= name %>">
           <span class="tip tip-stacked"><%= gettext("the title/name of the text book as you would like your students to see it.") %></span>
         </div>
+  </fieldset>
       </li>
       <li>
+  <fieldset class="chapters">
+  <legend class="sr"><%= gettext("Chapter(s) information") %></legend>
+
         <ol class="chapters list-input enum"></ol>
+
+  </fieldset>
        </li>
     </ol>
-  <p class="copy"><%= gettext("Note: <strong>It's best practice to break your course's textbook into multiple chapters</strong> to reduce loading times for students. Breaking up textbooks into chapters can also help with students more easily finding a concept or topic-based information.") %></p>
-  </fieldset>
+
   <div class="actions">
     <button class="action action-add-chapter"><i class="icon-plus"></i> <%= gettext("Add a Chapter") %></button>
     <button class="action action-primary" type="submit"><%= gettext("Save") %></button>

cms/templates/js/upload-dialog.underscore

-  <div id="prompt-assetupload"
-    class="wrapper wrapper-prompt wrapper-prompt-assetupload <% if(shown) { print('is-shown') } %>"
-    aria-describedby="prompt-assetupload-description"
-    aria-labelledby="prompt-assetupload-title"
+  <div id="dialog-assetupload"
+    class="wrapper wrapper-dialog wrapper-dialog-assetupload <% if(shown) { print('is-shown') } %>"
+    aria-describedby="dialog-assetupload-description"
+    aria-labelledby="dialog-assetupload-title"
     aria-hidden="<%= !shown %>"
     role="dialog">
-    <div class="prompt confirm">
-      <div class="copy">
+    <div class="dialog confirm">
 
 <form class="upload-dialog" method="POST" action="<%= url %>" enctype="multipart/form-data">
-  <h2><%= title %></h2>
-  <p id="prompt-assetupload-description" class="message"><%= message %></p>
+  <div class="form-content">
+  <h2 class="title"><%= title %></h2>
+  <p id="dialog-assetupload-description" class="message"><%= message %></p>
   <input type="file" name="file" />
+  <div class="wrapper-progress">
   <% if(uploading) { %>
     <% if (uploadedBytes && totalBytes) { %>
       <progress value="<%= uploadedBytes %>" max="<%= totalBytes %>"><%= uploadedBytes/totalBytes*100 %>%</progress>
@@ -18,13 +19,15 @@
       <progress></progress>
     <% } %>
   <% } %>
+  </div>
+  </div>
   <div class="actions">
     <h3 class="sr"><%= gettext('Form Actions') %></h3>
   <ul>
-  <li class="nav-item">
-    <input type="button" class="button action-upload" value="<%= gettext('Upload') %>" <% if (!selectedFile) { %>disabled="disabled"<% } %> />
+  <li class="action-item">
+    <input type="button" class="button action-upload btn-primary-blue" value="<%= gettext('Upload') %>" <% if (!selectedFile) { %>disabled="disabled"<% } %> />
   </li>
-  <li class="nav-item">
+  <li class="action-item">
     <input type="button" class="button action-cancel" value="<%= gettext('Cancel') %>" />
   </li>
   </ul>

cms/templates/textbooks.html

@@ -98,7 +98,7 @@ CMS.Views.ChapterEdit = Backbone.View.extend({
     },
     events: {
         "click .action-close": "removeChapter",
-        "click .action-uploadasset": "openUploadDialog",
+        "click .action-upload": "openUploadDialog",
         "submit": "uploadAsset"
     },
     removeChapter: function(e) {
@@ -173,13 +173,13 @@ CMS.Views.UploadDialog = Backbone.View.extend({
     show: function(e) {
         if(e && e.preventDefault) { e.preventDefault(); }
         this.options.shown = true;
-        $body.addClass('prompt-is-shown');
+        $body.addClass('dialog-is-shown');
         return this.render();
     },
     hide: function(e) {
         if(e && e.preventDefault) { e.preventDefault(); }
         this.options.shown = false;
-        $body.removeClass('prompt-is-shown');
+        $body.removeClass('dialog-is-shown');
         return this.render();
     },
     hideAndRemove: function(e) {
@@ -214,7 +214,7 @@ CMS.Views.UploadDialog = Backbone.View.extend({
             options.asset_path = response.url;
             chapter.set(options);
         }
-        this.hideAndRemove();
+        this.remove();
     },
     error: function() {
         this.model.set({
@@ -265,6 +265,9 @@ $(function() {
         <div class="introduction has-links">
           <p class="copy">Textbooks are happy. Textbooks are cool. This is the filler text explaining why you should use a feature as happy and as cool as textbooks. If you use textbooks, you will make friends and influence people. You will lose weight and people will compliment you on your appearance. Children around the world will sing praises to your name, and celebrities will recongize you as a totally hip and groovy person. If you don't use textbooks, your life will be forever incomplete, and you will die alone and unloved. Make the right choice. Upload your first textbook now.</p>
 
+            <p class="copy">Note: <strong>It's best practice to break your course's textbook into multiple chapters</strong> to reduce loading times for students. Breaking up textbooks into chapters can also help with students more easily finding a concept or topic-based information.</p>
+
+
           <nav class="nav-introduction-supplementary">
             <ul>
               <li class="nav-item"><a href="#" rel="modal" title="This link will open in a modal window"><i class="icon-question-sign"></i> Need help adding a textbook?</a></li>