From 574c8ad48d82cfb503b7150241a290a51a93ef61 Mon Sep 17 00:00:00 2001
From: Frances Botsford <frances@edx.org>
Date: Wed, 5 Jun 2013 16:57:03 -0400
Subject: [PATCH] more form styling for textbook upload and first rough pass at
 file uploader

---
 cms/static/sass/views/_textbooks.scss     | 544 ++++++++++++++--------
 cms/templates/js/chapter.underscore       |   2 +-
 cms/templates/js/textbook.underscore      |  16 +-
 cms/templates/js/upload-dialog.underscore |  25 +-
 cms/templates/textbooks.html              |  11 +-
 5 files changed, 388 insertions(+), 210 deletions(-)

diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss
index 30f907753b..a56c2c131f 100644
--- a/cms/static/sass/views/_textbooks.scss
+++ b/cms/static/sass/views/_textbooks.scss
@@ -10,235 +10,401 @@ body.course.textbooks {
     text-align: center;
   }
 
-    form {
-      @include box-sizing(border-box);
-      @include box-shadow(0 1px 2px $shadow-l1);
-      @include border-radius(2px);
-      width: 100%;
-      border: 1px solid $gray-l2;
+  form {
+    @include box-sizing(border-box);
+    @include box-shadow(0 1px 2px $shadow-l1);
+    @include border-radius(2px);
+    width: 100%;
+    border: 1px solid $gray-l2;
+//    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);
-      background: $white;
+    }
 
-      .actions {
-        margin-top: $baseline;
+    .actions {
+      margin-top: $baseline;
+      padding: 0 ($baseline*1.5) $baseline ($baseline*1.5);
 
-        .action-add-chapter {
-            @extend .t-action2;
-            //@include grey-button;
-            @include transition(all .15s);
-            display: block;
-            width: 100%;
-            margin-bottom: ($baseline*1.5);
-            border-radius: 5px;
-            border: none;
-            padding: $baseline;
-            background-color: #DFE5EF;
-            color: #8EABBE;
-            font-weight: 600;
-
-            &:hover {
-              background: #5597DD;
-              color: #fff;
-            }
-        }
-
-        .action-primary {
-          @include blue-button;
+      .action-add-chapter {
           @extend .t-action2;
+          //@include grey-button;
           @include transition(all .15s);
-          display: inline-block;
-          padding: ($baseline/5) $baseline;
+          display: block;
+          width: 100%;
+          margin-bottom: ($baseline*1.5);
+          border-radius: 5px;
+          border: none;
+          padding: $baseline;
+          background-color: #DFE5EF;
+          color: #8EABBE;
           font-weight: 600;
-          text-transform: uppercase;
-        }
-
-        .action-secondary {
-          @include grey-button;
-          @extend .t-action2;
-          @include transition(all .15s);
-          display: inline-block;
-          padding: ($baseline/5) $baseline;
-          font-weight: 600;
-          text-transform: uppercase;
-        }
-
 
+          &:hover {
+            background: #5597DD;
+            color: #fff;
+          }
       }
 
-      .copy {
-        @include font-size(12);
-        margin: ($baseline) 0 ($baseline/2) 0;
-        color: $gray;
-
-
-        strong {
-          font-weight: 600;
-        }
-
-
+      .action-primary {
+        @include blue-button;
+        @extend .t-action2;
+        @include transition(all .15s);
+        display: inline-block;
+        padding: ($baseline/5) $baseline;
+        font-weight: 600;
+        text-transform: uppercase;
       }
 
-      .list-input {
-        margin: 0;
-        padding: 0;
-        list-style: none;
+      .action-secondary {
+        @include grey-button;
+        @extend .t-action2;
+        @include transition(all .15s);
+        display: inline-block;
+        padding: ($baseline/5) $baseline;
+        font-weight: 600;
+        text-transform: uppercase;
+      }
 
-        .field {
-          margin: 0 0 ($baseline*0.75) 0;
 
-          &:last-child {
-            margin-bottom: 0;
-          }
+    }
 
-          &.required {
+    .copy {
+      @include font-size(12);
+      margin: ($baseline) 0 ($baseline/2) 0;
+      color: $gray;
 
-            label {
-              font-weight: 600;
-            }
 
-            label:after {
-              margin-left: ($baseline/4);
-              content: "*";
-            }
-          }
+      strong {
+        font-weight: 600;
+      }
 
-          label, input, textarea {
-            display: block;
-          }
+
+    }
+
+    .list-input {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+
+      .field {
+        margin: 0 0 ($baseline*0.75) 0;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        &.required {
 
           label {
-            @extend  .t-copy-sub1;
-            @include transition(color, 0.15s, ease-in-out);
-            margin: 0 0 ($baseline/4) 0;
-
-            &.is-focused {
-              color: $blue;
-            }
+            font-weight: 600;
           }
 
-          input, textarea {
-            @extend .t-copy-base;
-            height: 100%;
-            width: 100%;
-            padding: ($baseline/2);
-
-            &.long {
-              width: 100%;
-            }
-
-            &.short {
-              width: 25%;
-            }
-
-            ::-webkit-input-placeholder {
-               color: $gray-l4;
-            }
-
-            :-moz-placeholder {
-               color: $gray-l3;
-            }
-
-            ::-moz-placeholder {
-               color: $gray-l3;
-            }
-
-            :-ms-input-placeholder {
-               color: $gray-l3;
-            }
-
-            &:focus {
-
-              + .tip {
-                color: $gray;
-              }
-            }
-          }
-
-          textarea.long {
-            height: ($baseline*5);
-          }
-
-          input[type="checkbox"] {
-            display: inline-block;
-            margin-right: ($baseline/4);
-            width: auto;
-            height: auto;
-
-            & + label {
-              display: inline-block;
-            }
-          }
-
-          .tip {
-            @extend .t-copy-sub2;
-            @include transition(color, 0.15s, ease-in-out);
-            display: block;
-            margin-top: ($baseline/4);
-            color: $gray-l3;
+          label:after {
+            margin-left: ($baseline/4);
+            content: "*";
           }
         }
 
-        .field-group {
-          @include clearfix();
-          margin: 0 0 ($baseline/2) 0;
+        label, input, textarea {
+          display: block;
+        }
 
-          .field {
-            display: block;
-            width: 46.5%;
-            border-bottom: none;
-            margin: 0 $baseline 0 0;
-            padding: ($baseline/4) 0 0 0;
-            float: left;
-            position: relative;
+        label {
+          @extend  .t-copy-sub1;
+          @include transition(color, 0.15s, ease-in-out);
+          margin: 0 0 ($baseline/4) 0;
 
-            input, textarea {
-              width: 100%;
-            }
+          &.is-focused {
+            color: $blue;
+          }
+        }
 
-            .action-uploadasset {
-                @extend .t-action4;
-                @include blue-button;
-                @include transition(all .15s);
-                @include font-size(12);
-                font-weight: 600;
-                text-align: center;
-                position: absolute;
-                top: 2px;
-                right: 0;
-                padding: 3px ($baseline/2) 1px ($baseline/2);
-            }
 
+        &.add-textbook-name label {
+          @extend .t-title5;
+        }
+
+        input, textarea {
+          @extend .t-copy-base;
+          height: 100%;
+          width: 100%;
+          padding: ($baseline/2);
+
+          &.long {
+            width: 100%;
           }
 
-          .action-close {
-              @include white-button;
-              @include font-size(18);
-              margin-top: ($baseline*2);
-              border: 0;
-              padding: 0;
-              background: transparent;
-
-              &:hover {
-                color: $blue;
-                background: transparent;
-                box-shadow: none;
-              }
+          &.short {
+            width: 25%;
           }
 
+          ::-webkit-input-placeholder {
+             color: $gray-l4;
+          }
+
+          :-moz-placeholder {
+             color: $gray-l3;
+          }
+
+          ::-moz-placeholder {
+             color: $gray-l3;
+          }
+
+          :-ms-input-placeholder {
+             color: $gray-l3;
+          }
+
+          &:focus {
+
+            + .tip {
+              color: $gray;
+            }
+          }
+        }
+
+        textarea.long {
+          height: ($baseline*5);
+        }
+
+        input[type="checkbox"] {
+          display: inline-block;
+          margin-right: ($baseline/4);
+          width: auto;
+          height: auto;
+
+          & + label {
+            display: inline-block;
+          }
+        }
+
+        .tip {
+          @extend .t-copy-sub2;
+          @include transition(color, 0.15s, ease-in-out);
+          display: block;
+          margin-top: ($baseline/4);
+          color: $gray-l3;
         }
       }
-    }
 
-    .wrapper-prompt-assetupload .prompt  {
-      width: $baseline*20;
+      .field-group {
+        @include clearfix();
+        margin: 0 0 ($baseline/2) 0;
+
+        .field {
+          display: block;
+          width: 46.5%;
+          border-bottom: none;
+          margin: 0 $baseline 0 0;
+          padding: ($baseline/4) 0 0 0;
+          float: left;
+          position: relative;
+
+          input, textarea {
+            width: 100%;
+          }
+
+          .action-upload {
+              @extend .t-action4;
+              @include blue-button;
+              @include transition(all .15s);
+              @include font-size(12);
+              font-weight: 600;
+              text-align: center;
+              position: absolute;
+              top: 2px;
+              right: 0;
+/*              height: 40px;
+              top: 33px;
+              right: 2px; */
+              padding: 3px ($baseline/2) 1px ($baseline/2);
+          }
 
-        h2 {
-            color: $gray;
-            font-weight: bold;
         }
 
+        .action-close {
+            @include white-button;
+            @include font-size(18);
+            margin-top: ($baseline*2);
+            border: 0;
+            padding: 0;
+            background: transparent;
+
+            &:hover {
+              color: $blue;
+              background: transparent;
+              box-shadow: none;
+            }
+        }
+
+      }
+    }
+  }
+
+
+
+ // dialog
+.wrapper-dialog {
+  @extend .depth5;
+  @include transition(all 0.05s ease-in-out);
+  position: fixed;
+  top: 0;
+  background: $black-t0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+
+  &:before {
+    content: '';
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+    margin-right: -0.25em; /* Adjusts for spacing */
+  }
+
+  .dialog  {
+    @include box-sizing(border-box);
+    @include border-radius(($baseline/5));
+    background-color: $gray-l6;
+    display: inline-block;
+    vertical-align: middle;
+    width: $baseline*20;
+    text-align: left;
+
+    .title {
+      @include font-size(18);
+      font-weight: bold;
+      color: $black;
+    }
+
+    .copy {
+      @extend .t-copy-sub2;
+      color: $gray-l1;
+    }
+
+    form {
+      padding: 0;
+      background-color: transparent;
+
+      .form-content {
+        padding: ($baseline*1.5) ($baseline*1.5) 0 ($baseline*1.5);
+      }
+
+      .wrapper-progress {
+        @include box-shadow(inset 0 0 4px $shadow-d1);
+        margin-top: $baseline;
+        border-radius: ($baseline*.75);
+        background-color: $white;
+        padding: 3px 8px;
+        height: 25px;
+
+        progress {
+          width: 100%;
+          border: none;
+          border-radius: ($baseline*.75);
+          background-color: #eee;
+
+          &::-webkit-progress-bar {
+            background-color: transparent;
+            border-radius: ($baseline*.75);
+          }
+
+          &::-webkit-progress-value {
+            background-color: $green-s1;
+            border-radius: ($baseline*.75);
+          }
+
+          &::-moz-progress-bar {
+            background-color: $green-s1;
+            border-radius: ($baseline*.75);
+          }
+
+        }
+
+       }
+
+      .actions {
+        @include box-shadow(inset 0 1px 2px $shadow);
+        border-top: 1px solid $gray-l1;
+        padding: ($baseline*0.75) $baseline;
+        background: $white;
+
+        .action-item {
+          @extend .t-action4;
+          display: inline-block;
+          margin-right: ($baseline*0.75);
+
+          &:last-child {
+            margin-right: 0;
+          }
+        }
+
+        .action-upload {
+          font-weight: 600;
+          color: $white;
+        }
+
+        .action-cancel {
+          @extend .t-action4;
+          border: 0;
+          background: none;
+          color: $blue;
+
+          &:hover {
+            color: $blue-s3;
+          }
+        }
+
+      }
 
     }
 
+  }
+
+}
+
+// ====================
+
+// js enabled
+.js {
+
+  // dialog set-up
+  .wrapper-dialog {
+    visibility: hidden;
+    pointer-events: none;
+
+    .dialog {
+      opacity: 0;
+    }
+  }
+
+  // dialog showing/hiding
+  &.dialog-is-shown {
+
+    .wrapper-view {
+      -webkit-filter: blur(2px) grayscale(25%);
+      filter: blur(2px) grayscale(25%);
+    }
+
+    .wrapper-dialog.is-shown {
+      visibility: visible;
+      pointer-events: auto;
+
+      .dialog {
+        opacity: 1.0;
+      }
+    }
+  }
+
+}
+
+
 
 }
diff --git a/cms/templates/js/chapter.underscore b/cms/templates/js/chapter.underscore
index 2f63c1c072..3562e790ff 100644
--- a/cms/templates/js/chapter.underscore
+++ b/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>
diff --git a/cms/templates/js/textbook.underscore b/cms/templates/js/textbook.underscore
index 02b37a0121..06459e58ff 100644
--- a/cms/templates/js/textbook.underscore
+++ b/cms/templates/js/textbook.underscore
@@ -1,21 +1,27 @@
 <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>
diff --git a/cms/templates/js/upload-dialog.underscore b/cms/templates/js/upload-dialog.underscore
index 5994cabcb8..20a4b5a13c 100644
--- a/cms/templates/js/upload-dialog.underscore
+++ b/cms/templates/js/upload-dialog.underscore
@@ -1,16 +1,17 @@
-  <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>
diff --git a/cms/templates/textbooks.html b/cms/templates/textbooks.html
index 4e523de248..a25795c6b9 100644
--- a/cms/templates/textbooks.html
+++ b/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>