updated styling for new textbook form structure

cms/static/sass/views/_textbooks.scss

@@ -4,10 +4,14 @@
 body.course.textbooks {
 
   .no-textbook-content {
-    margin: $baseline*2;
+    @include box-shadow(0 0 4px $shadow-d1 inset);
     padding: $baseline*2;
     background-color: #ddd;
     text-align: center;
+
+    .button {
+      margin-left: 20px;
+    }
   }
 
   form {
@@ -16,22 +20,14 @@ body.course.textbooks {
     @include border-radius(2px);
     width: 100%;
     border: 1px solid $gray-l2;
-//    padding: $baseline ($baseline*1.5);
+    padding: $baseline ($baseline*1.5);
     background: $white;
 
     fieldset {
-      padding: 0 ($baseline*1.5);
-    }
-
-    fieldset.textbook {
-      border-bottom: 2px solid $gray-l3;
-      background-color: $gray-l5;
-      padding: $baseline ($baseline*1.5);
+        margin-bottom: $baseline;
     }
 
     .actions {
-      margin-top: $baseline;
-      padding: 0 ($baseline*1.5) $baseline ($baseline*1.5);
 
       .action-add-chapter {
           @extend .t-action2;
@@ -89,9 +85,8 @@ body.course.textbooks {
 
     }
 
-    .list-input {
-      margin: 0;
-      padding: 0;
+    .list-input,
+    .textbook {
       list-style: none;
 
       .field {
@@ -272,7 +267,7 @@ body.course.textbooks {
   .dialog  {
     @include box-sizing(border-box);
     @include border-radius(($baseline/5));
-    background-color: $gray-l6;
+    background-color: $gray-l5;
     display: inline-block;
     vertical-align: middle;
     width: $baseline*20;
@@ -280,36 +275,42 @@ body.course.textbooks {
 
     .title {
       @include font-size(18);
+      margin-bottom: ($baseline/2);
       font-weight: bold;
       color: $black;
     }
 
-    .copy {
+    .message {
       @extend .t-copy-sub2;
-      color: $gray-l1;
+      color: $gray;
     }
 
     form {
-      padding: 0;
+      border: 2px solid $gray-l2;
       background-color: transparent;
+      padding: 0;
 
       .form-content {
-        padding: ($baseline*1.5) ($baseline*1.5) 0 ($baseline*1.5);
+        padding: ($baseline*1.5);
+      }
+
+      input[type="file"] {
+        @include font-size(12);
       }
 
       .wrapper-progress {
-        @include box-shadow(inset 0 0 4px $shadow-d1);
+        @include box-shadow(inset 0 0 5px $shadow-d1);
         margin-top: $baseline;
         border-radius: ($baseline*.75);
-        background-color: $white;
-        padding: 3px 8px;
+        background-color: $gray-l4;
+        padding: 2px 8px 1px 8px;
         height: 25px;
 
         progress {
           width: 100%;
           border: none;
           border-radius: ($baseline*.75);
-          background-color: #eee;
+          background-color: $gray-l4;
 
           &::-webkit-progress-bar {
             background-color: transparent;
@@ -335,6 +336,7 @@ body.course.textbooks {
         border-top: 1px solid $gray-l1;
         padding: ($baseline*0.75) $baseline;
         background: $white;
+        text-align: center;
 
         .action-item {
           @extend .t-action4;

cms/templates/js/chapter.underscore

@@ -4,7 +4,7 @@
   <span class="tip tip-stacked"><%= gettext("the title/name of the chapter that will be used in navigating") %></span>
 </div>
 <div class="input-wrap field text required field-add-chapter-asset chapter<%= order %>-asset">
-  <label for="chapter<%= order %>-asset-path"><%= gettext("Chapter Asset") %>:</label>
+  <label for="chapter<%= order %>-asset-path"><%= gettext("Chapter Asset") %></label>
   <input id="chapter<%= order %>-asset-path" name="chapter<%= order %>-asset-path" class="chapter-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-upload"><%= gettext("Upload Asset") %></button>

cms/templates/js/no-textbooks.underscore

 <div class="no-textbook-content">
-    <p>You haven't added any textbooks to this course yet.</p>
-    <p><a href="#" class="button upload-button new-button">Add your first textbook</a></p>
+    <p>You haven't added any textbooks to this course yet. <a href="#" class="button upload-button new-button">Add your first textbook</a></p>
 </div>

cms/templates/js/textbook-edit.underscore

@@ -4,10 +4,10 @@
   </div>
 <% } %>
 
-<fieldset class="textbook 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("Textbook Name") %>:</label>
+      <div class="input-wrap field text required add-textbook-name">
+        <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>

cms/templates/js/upload-dialog.underscore

@@ -11,16 +11,17 @@
   <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) { %>
+      <div class="wrapper-progress">
       <progress value="<%= uploadedBytes %>" max="<%= totalBytes %>"><%= uploadedBytes/totalBytes*100 %>%</progress>
+      </div>
     <% } else { %>
       <progress></progress>
     <% } %>
   <% } %>
   </div>
-  </div>
   <div class="actions">
     <h3 class="sr"><%= gettext('Form Actions') %></h3>
   <ul>

cms/templates/textbooks.html

@@ -244,7 +244,7 @@ CMS.Views.ChapterEdit = Backbone.View.extend({
         var msg = new CMS.Models.FileUpload({
             title: _.str.sprintf(gettext("Upload a new asset to %s"),
                 section.escape('name')),
-            message: "[asset upload requirements]"
+            message: "This is sample text about asset upload requirements, like no bigger than 2MB, must be in PDF format or whatever."
         })
         var view = new CMS.Views.UploadDialog({model: msg, chapter: this.model})
         $(".wrapper-view").after(view.show().el)
@@ -398,9 +398,7 @@ $(function() {
     <section class="content">
     <div class="inner-wrapper">
         <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>
+          <p class="copy">Use this page to upload textbooks for your course. 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">