updated textbook page html and sass, and added basic styling for error on wrong file type

cms/static/js/models/textbook.js

@@ -101,7 +101,7 @@ CMS.Models.FileUpload = Backbone.Model.extend({
     },
     validate: function(attrs, options) {
         if(attrs.selectedFile && attrs.selectedFile.type !== "application/pdf") {
-            return gettext("Only PDF files can be uploaded");
+            return gettext("Only PDF files can be uploaded. Please select a file ending in .pdf to upload.");
         }
     }
 });

cms/static/js/views/textbook.js

@@ -72,6 +72,7 @@ CMS.Views.TextbookEdit = Backbone.View.extend({
         this.listenTo(this.model.collection, "editOne", this.remove);
     },
     tagName: "section",
+    className: "textbook",
     render: function() {
         this.$el.html(this.template({
             name: this.model.escape('name'),
@@ -155,7 +156,7 @@ CMS.Views.ListTextbooks = Backbone.View.extend({
         this.listenTo(this.collection, 'all', this.render);
     },
     tagName: "div",
-    className: "textbooks",
+    className: "textbooks-list",
     render: function() {
         var textbooks = this.collection;
         if(textbooks.length === 0) {
@@ -219,7 +220,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: "This is sample text about asset upload requirements, like no bigger than 2MB, must be in PDF format or whatever."
+            message: "Files must be in PDF format."
         });
         var view = new CMS.Views.UploadDialog({model: msg, chapter: this.model});
         $(".wrapper-view").after(view.show().el);

cms/static/sass/views/_textbooks.scss

@@ -27,10 +27,103 @@ body.course.textbooks {
 
     .textbook {
       @extend .window;
+      position: relative;
       padding: $baseline ($baseline*1.5);
+
+      .view-textbook {
+
+        header {
+          margin-bottom: 0;
+          border-bottom: 0;
         }
 
-  form {
+        .textbook-title {
+          @extend .t-title4;
+          margin-right: 280px;
+          font-weight: bold;
+        }
+
+        .ui-toggle-expansion {
+          @include transition(rotate .15s ease-in-out .25s);
+          @include font-size(21);
+          display: inline-block;
+          width: 15px;
+          vertical-align: text-bottom;
+        }
+
+        &.is-selectable {
+          cursor: pointer;
+
+          &:hover {
+            color: $blue;
+
+            .ui-toggle-expansion {
+              color: $blue;
+            }
+          }
+        }
+
+        .chapters {
+          margin-left: $baseline;
+
+          .chapter {
+            @include font-size(12);
+            margin-bottom: ($baseline/4);
+            border-bottom: 1px solid $gray-l4;
+
+            .chapter-name {
+              display: inline-block;
+              width: 45%;
+              margin-right: ($baseline/2);
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              vertical-align: middle;
+            }
+
+            .chapter-asset-path {
+              display: inline-block;
+              width: 50%;
+              color: $gray-l1;
+            }
+          }
+        }
+
+        .actions {
+          position: absolute;
+          top: $baseline;
+          right: $baseline;
+
+          .action {
+            display: inline-block;
+            margin-right: ($baseline/4);
+
+            .view {
+              color: $gray;
+              @include font-size(12);
+
+              &:hover {
+                color: $blue;
+              }
+            }
+
+            .edit {
+              @include blue-button;
+              @extend .t-action4;
+            }
+
+            .delete {
+              @include grey-button;
+            }
+          }
+
+
+        }
+
+      }
+
+
+    .edit-textbook {
         @include box-sizing(border-box);
         @include border-radius(2px);
         width: 100%;
@@ -44,7 +137,6 @@ body.course.textbooks {
 
           .action-add-chapter {
               @extend .t-action2;
-          //@include grey-button;
               @include transition(all .15s);
               display: block;
               width: 100%;
@@ -98,7 +190,7 @@ body.course.textbooks {
         }
 
         .list-input,
-    .textbook {
+        .textbook-fields {
           list-style: none;
 
           .field {
@@ -207,9 +299,9 @@ body.course.textbooks {
 
             .field {
               display: block;
-          width: 46.5%;
+              width: 46%;
               border-bottom: none;
-          margin: 0 $baseline 0 0;
+              margin: 0 ($baseline*.75) 0 0;
               padding: ($baseline/4) 0 0 0;
               float: left;
               position: relative;
@@ -226,12 +318,9 @@ body.course.textbooks {
                   font-weight: 600;
                   text-align: center;
                   position: absolute;
-              top: 2px;
+                  top: 3px;
                   right: 0;
-/*              height: 40px;
-              top: 33px;
-              right: 2px; */
-              padding: 3px ($baseline/2) 1px ($baseline/2);
+                  padding: 1px ($baseline/2) 2px ($baseline/2);
               }
 
             }
@@ -250,7 +339,7 @@ body.course.textbooks {
                 color: $blue;
               }
             }
-
+          }
         }
     }
   }
@@ -284,13 +373,13 @@ body.course.textbooks {
     background-color: $white;
     display: inline-block;
     vertical-align: middle;
-    width: $baseline*20;
+    width: $baseline*23;
     text-align: left;
 
     .title {
       @include font-size(18);
       margin-bottom: ($baseline/2);
-      font-weight: bold;
+      font-weight: 600;
       color: $black;
     }
 
@@ -299,6 +388,13 @@ body.course.textbooks {
       color: $gray;
     }
 
+    .error {
+      @extend .t-copy-sub2;
+      margin-top: ($baseline*.75);
+      font-weight: 600;
+      color: $red;
+    }
+
     form {
       border: 7px solid #333333;
       box-shadow: 0 0 7px rgba(0, 0, 0, 0.7);
@@ -315,11 +411,11 @@ body.course.textbooks {
 
       .wrapper-progress {
         @include box-shadow(inset 0 0 3px $shadow-d1);
-
+        display: block;
         margin-top: $baseline;
         border-radius: ($baseline*.75);
-        background-color: $gray-l4;
-        padding: 2px 8px 1px 8px;
+        background-color: $gray-l5;
+        padding: 1px 8px 2px 8px;
         height: 25px;
 
         progress {
@@ -328,7 +424,7 @@ body.course.textbooks {
           width: 100%;
           border: none;
           border-radius: ($baseline*.75);
-          background-color: $gray-l4;
+          background-color: $gray-l5;
 
           &::-webkit-progress-bar {
             background-color: transparent;
@@ -336,12 +432,12 @@ body.course.textbooks {
           }
 
           &::-webkit-progress-value {
-            background-color: $green-s1;
+            background-color: $pink;
             border-radius: ($baseline*.75);
           }
 
           &::-moz-progress-bar {
-            background-color: $green-s1;
+            background-color: $pink;
             border-radius: ($baseline*.75);
           }
 
@@ -353,7 +449,7 @@ body.course.textbooks {
         @include box-shadow(inset 0 1px 2px $shadow);
         border-top: 1px solid $gray-l1;
         padding: ($baseline*0.75) $baseline;
-        background: $gray-l4;
+        background: $gray-l6;
 
         .action-item {
           @extend .t-action4;
@@ -366,6 +462,7 @@ body.course.textbooks {
         }
 
         .action-upload {
+          @extend .btn-primary-blue;
           font-weight: 600;
           color: $white;
         }

cms/templates/js/textbook-edit.underscore

@@ -5,7 +5,7 @@
     </div>
   <% } %>
 
-  <fieldset class="textbook">
+  <fieldset class="textbook-fields">
     <legend class="sr"><%= gettext("Textbook information") %></legend>
         <div class="input-wrap field text required add-textbook-name">
           <label for="textbook-name-input"><%= gettext("Textbook Name") %></label>
@@ -13,7 +13,7 @@
           <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>
-  <fieldset class="chapters">
+  <fieldset class="chapters-fields">
     <legend class="sr"><%= gettext("Chapter(s) information") %></legend>
       <ol class="chapters list-input enum"></ol>
   </fieldset>

cms/templates/js/textbook-show.underscore

+ <div class="view-textbook">
     <header>
         <h3 class="textbook-title"><%= name %></h3>
     </header>
@@ -5,21 +6,23 @@
 <% if(chapters.length > 1) {%>
     <p><a href="#" class="chapter-toggle
         <% if(showChapters){ print('hide'); } else { print('show'); } %>-chapters">
-        <i class="icon-chevron-<% if(showChapters){ print('down'); } else { print('right'); } %>"></i>
+        <i class="ui-toggle-expansion icon-caret-<% if(showChapters){ print('down'); } else { print('right'); } %>"></i>
         <%= chapters.length %> PDF Chapters
     </a></p>
 <% } else if(chapters.length === 1) { %>
+    <p>
         <%= chapters.at(0).get("asset_path") %>
+    </p>
 <% } %>
 
 <ul  class="actions textbook-actions">
-    <li>
+    <li class="action action-view">
         <a href="#" class="view"><%= gettext("view in course") %></a>
     </li>
-    <li>
+    <li class="action action-edit">
         <button class="edit"><%= gettext("Edit") %></button>
     </li>
-    <li>
+    <li class="action action-delete">
         <button class="delete"><%= gettext("Delete") %></button>
     </li>
 </ul>
@@ -29,9 +32,11 @@
 <% if(showChapters) { %>
 <ol class="chapters">
   <% chapters.each(function(chapter) { %>
-    <li><span class="chapter-name"><%= chapter.get('name') %></span>
+    <li class="chapter">
+        <span class="chapter-name"><%= chapter.get('name') %></span>
         <span class="chapter-asset-path"><%= chapter.get('asset_path') %></span>
     </li>
   <% }) %>
 </ol>
 <% } %>
+</div>

cms/templates/js/upload-dialog.underscore

@@ -27,7 +27,7 @@
     <h3 class="sr"><%= gettext('Form Actions') %></h3>
   <ul>
   <li class="action-item">
-    <input type="button" class="button action-upload btn-primary-blue" value="<%= gettext('Upload') %>" <% if (!selectedFile) { %>disabled="disabled"<% } %> />
+    <input type="button" class="button action-upload" value="<%= gettext('Upload') %>" <% if (!selectedFile) { %>disabled="disabled"<% } %> />
   </li>
   <li class="action-item">
     <input type="button" class="button action-cancel" value="<%= gettext('Cancel') %>" />

cms/templates/textbooks.html

@@ -71,23 +71,6 @@ $(function() {
     <section class="content">
       <article class="content-primary" role="main">
 
-<!--
-        <section id="textbook1" class="textbook">
-
-          <header>
-            <h3 class="textbook-title">
-            [textbook name]
-            </h3>
-          </header>
-
-          <ul class="chapter-list">
-            <li class="chapter"></li>
-          </ul>
-
-        </section>
--->
-
-
       </article>
       <aside class="content-supplementary" role="complimentary">