settings - added disabled states for course name/org/number

cms/static/sass/_settings.scss

@@ -141,6 +141,11 @@
         border-color: $blue;
         outline: 0;
       }
+
+      &:disabled {
+        color: $darkGrey;
+        background: $lightGrey;
+      }
     }
 
     ::-webkit-input-placeholder {
@@ -564,14 +569,14 @@
   }
 
   .grade-slider {
-    float: left;
-    width: 560px;
-    height: 60px;
+    float: right;
+    width: 95%;
+    height: 80px;
 
     .grade-bar {
       position: relative;
       width: 100%;
-      height: 40px;
+      height: 50px;
       background: $lightGrey;
 
       .increments {
@@ -579,7 +584,7 @@
 
         li {
           position: absolute;
-          top: 42px;
+          top: 52px;
           width: 30px;
           margin-left: -15px;
           font-size: 9px;
@@ -637,7 +642,7 @@
         li {
           position: absolute;
           top: 0;
-          height: 40px;     
+          height: 50px;     
           text-align: right;
 
           &:hover,
@@ -647,6 +652,11 @@
             }
           }
 
+          &.is-dragging {
+
+
+          }
+
           .remove-button {
             display: none;
             position: absolute;
@@ -678,16 +688,16 @@
 
           .letter-grade {
             display: block;
-            margin: 7px 5px 0 0;
-            font-size: 14px;
+            margin: 10px 15px 0 0;
+            font-size: 16px;
             font-weight: 700;
             line-height: 14px;
           }
 
           .range {
             display: block;
-            margin-right: 5px;
-            font-size: 9px;
+            margin-right: 15px;
+            font-size: 10px;
             line-height: 12px;
           }
 
@@ -695,14 +705,16 @@
             position: absolute;
             top: 0;
             right: -1px;
-            height: 40px;
+            height: 50px;
             width: 2px;
             background-color: #fff;
+            @include box-shadow(-1px 0 3px rgba(0,0,0,0.1));
+
             cursor: ew-resize;
             @include transition(none);
 
             &:hover {
-              width: 4px;
+              width: 6px;
               right: -2px;
             }
           }

cms/templates/settings.html

@@ -36,7 +36,7 @@
       $('.new-grade-button').bind('click', addNewGrade);
       $body.on('click', '.remove-button', removeGrade);
 
-      $('.set-date').datepicker();
+      $('.set-date').datepicker({ 'dateFormat': 'm/d/yy' });
     })();
 
     function addNewGrade(e) {
@@ -133,7 +133,7 @@
                 <label for="course-name-input">Course Name:</label>
                 <div class="field">
                   <div class="input">
-                    <input type="text" class="long" id="course-name-input">
+                    <input type="text" class="long" id="course-name-input" disabled="disabled">
                   </div>
                 </div>
               </div>
@@ -142,7 +142,7 @@
                 <label for="course-organization-input">Organization:</label>
                 <div class="field">
                   <div class="input">
-                    <input type="text" class="long" id="course-organization-input">                    
+                    <input type="text" class="long" id="course-organization-input" disabled="disabled">      
                   </div>
                 </div>
               </div>
@@ -151,7 +151,7 @@
                 <label for="course-number-input">Course Number:</label>
                 <div class="field">
                   <div class="input">
-                    <input type="text" class="short" id="course-number-input">
+                    <input type="text" class="short" id="course-number-input" disabled="disabled">
                     <span class="tip tip-inline">e.g. 101x</span>
                   </div>
                 </div>
@@ -170,7 +170,7 @@
                 <label for="course-start-date-input">Course Start Date:</label>
                 <div class="field">
                   <div class="input">
-                    <input type="text" class="date" id="course-start-date-input">
+                    <input type="text" class="start-date date set-date" id="course-start-date-input" placeholder="MM/DD/YYYY">
                     <span class="tip tip-inline">First day the class begins</span>          
                   </div>
                 </div>
@@ -180,7 +180,7 @@
                 <label for="course-end-date-input">Course End Date:</label>
                 <div class="field">
                   <div class="input">
-                    <input type="text" class="date" id="course-end-date-input">
+                    <input type="text" class="end-date date set-date" id="course-end-date-input" placeholder="MM/DD/YYYY">
                     <span class="tip tip-inline">Last day the class begins</span>
                   </div>
                 </div>
@@ -280,7 +280,6 @@
                 <div class="field">
                   <div class="input input-existing">
                     <div class=" current current-course-introduction-video">
-
                     </div>
 
                     <a href="#" class="replace-item replace-course-introduction-video add-video-data" id="course-introduction-video">
@@ -621,6 +620,12 @@
                           <a href="#" class="drag-bar"></a>
                           <a href="#" class="remove-button">remove</a>
                         </li>
+                        <li class="bar-fail" style="width: 50%;">
+                          <span class="letter-grade" contenteditable>F</span>
+                          <span class="range">0-50</span>
+                          <a href="#" class="drag-bar"></a>
+                          <a href="#" class="remove-button">remove</a>
+                        </li>
                       </ol>
                     </div>
                   </div>