From ef95e1d95f9ed23123d7b033fc0d66ef7a436dfb Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 26 Nov 2012 11:48:56 -0500
Subject: [PATCH 1/7] settings - added in controls for sorting discussion
 categories

---
 cms/templates/settings.html | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/cms/templates/settings.html b/cms/templates/settings.html
index 841b880f76..f1e77645e0 100644
--- a/cms/templates/settings.html
+++ b/cms/templates/settings.html
@@ -781,8 +781,8 @@
                 <h4 class="label">Discussion Categories</h4>
 
                 <div class="field enum">
-                  <ul class="input-list course-discussions-categories-list">
-                    <li class="input input-existing input-default course-discussions-categories-list-item">
+                  <ul class="input-list course-discussions-categories-list sortable">
+                    <li class="input input-existing input-default course-discussions-categories-list-item sortable-item">
                       <div class="group">
                         <label for="course-discussions-categories-1-name">Category Name: </label>
                         <input type="text" class="course-discussions-categories-name" id="course-discussions-categories-1-name" placeholder="" value="General" disabled="disabled">
@@ -791,7 +791,7 @@
                       <a href="#" class="drag-handle"></a>
                     </li>
                     
-                    <li class="input input-existing input-default course-discussions-categories-list-item">
+                    <li class="input input-existing input-default course-discussions-categories-list-item sortable-item">
                       <div class="group">
                         <label for="course-discussions-categories-2-name">Category Name: </label>
                         <input type="text" class="course-discussions-categories-name" id="course-discussions-categories-2-name" placeholder="" value="Feedback" disabled="disabled">
@@ -800,7 +800,7 @@
                       <a href="#" class="drag-handle"></a>
                     </li>
 
-                    <li class="input input-existing input-default course-discussions-categories-list-item">
+                    <li class="input input-existing input-default course-discussions-categories-list-item sortable-item">
                       <div class="group">
                         <label for="course-discussions-categories-3-name">Category Name: </label>
                         <input type="text" class="course-discussions-categories-name" id="course-discussions-categories-3-name" placeholder="" value="Troubleshooting" disabled="disabled">
@@ -809,7 +809,7 @@
                       <a href="#" class="drag-handle"></a>
                     </li>
 
-                    <li class="input input-existing course-discussions-categories-list-item">
+                    <li class="input input-existing course-discussions-categories-list-item sortable-item">
                       <div class="group">
                         <label for="course-discussions-categories-4-name">Category Name: </label>
                         <input type="text" class="course-discussions-categories-name" id="course-discussions-categories-4-name" placeholder="" value="Study Groups">
@@ -820,7 +820,7 @@
                       <a href="#" class="drag-handle"></a>
                     </li>
 
-                    <li class="input input-existing course-discussions-categories-list-item">
+                    <li class="input input-existing course-discussions-categories-list-item sortable-item">
                       <div class="group">
                         <label for="course-discussions-categories-5-name">Category Name: </label>
                         <input type="text" class="course-discussions-categories-name" id="course-discussions-categories-5-name" placeholder="" value="Lectures">
@@ -831,10 +831,21 @@
                       <a href="#" class="drag-handle"></a>
                     </li>
 
-                    <li class="input input-existing course-discussions-categories-list-item">
+                    <li class="input input-existing course-discussions-categories-list-item sortable-item">
                       <div class="group">
                         <label for="course-discussions-categories-6-name">Category Name: </label>
-                        <input type="text" class="course-discussions-categories-name" id="course-discussions-categories-6-name" placeholder="" value="Lectures">
+                        <input type="text" class="course-discussions-categories-name" id="course-discussions-categories-6-name" placeholder="" value="Labs">
+                      </div>
+
+                      <a href="#" class="remove-item remove-course-discussions-categories-data"><span class="delete-icon"></span> Delete Category</a>
+
+                      <a href="#" class="drag-handle"></a>
+                    </li>
+
+                    <li class="input input-existing course-discussions-categories-list-item sortable-item">
+                      <div class="group">
+                        <label for="course-discussions-categories-6-name">Category Name: </label>
+                        <input type="text" class="course-discussions-categories-name" id="course-discussions-categories-6-name" placeholder="" value="">
                       </div>
 
                       <a href="#" class="remove-item remove-course-discussions-categories-data"><span class="delete-icon"></span> Delete Category</a>

From 4097bc1022b69b60455251d4ede910d3fd7a4d6f Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 26 Nov 2012 13:33:57 -0500
Subject: [PATCH 2/7] settings - revised grading slider UI cosmetics

---
 cms/static/sass/_settings.scss | 18 ++++++++++++++----
 cms/templates/settings.html    | 10 +++++-----
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/cms/static/sass/_settings.scss b/cms/static/sass/_settings.scss
index 4e2490beaf..f36c9353c5 100644
--- a/cms/static/sass/_settings.scss
+++ b/cms/static/sass/_settings.scss
@@ -588,6 +588,14 @@
       top: 1px;
       margin-right: 5px;
     }
+
+    .well {
+      padding: 20px;
+      background: $lightGrey;
+      border: 1px solid $mediumGrey;
+      @include border-radius(4px);
+      @include box-shadow(0 1px 1px rgba(0,0,0,0.05) inset)
+    }
   }
 
 
@@ -601,6 +609,7 @@
 
   .grade-controls {
     @include clearfix;
+    width: 642px;
   }
 
   .new-grade-button {
@@ -609,7 +618,7 @@
     display: block;
     width: 29px;
     height: 29px;
-    margin: 4px 10px 0 0;
+    margin: 10px 20px 0 0;
     border-radius: 20px;
     border: 1px solid $darkGrey;
     @include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
@@ -627,9 +636,9 @@
   }
 
   .grade-slider {
-    float: right;
-    width: 95%;
-    height: 80px;
+    float: left;
+    width: 580px;
+    margin-bottom: 10px;
 
     .grade-bar {
       position: relative;
@@ -702,6 +711,7 @@
           top: 0;
           height: 50px;     
           text-align: right;
+          @include border-radius(2px);
 
           &:hover,
           &.is-dragging {
diff --git a/cms/templates/settings.html b/cms/templates/settings.html
index f1e77645e0..a0157a806a 100644
--- a/cms/templates/settings.html
+++ b/cms/templates/settings.html
@@ -399,7 +399,7 @@
 
               <div class="row">
                 
-                <div class="grade-controls course-grading-range">
+                <div class="grade-controls course-grading-range well">
                   <a href="#" class="new-grade-button"><span class="plus-icon"></span></a>
                   <div class="grade-slider">
                     <div class="grade-bar">
@@ -419,24 +419,24 @@
                       <ol class="grades">
                         <li class="bar-a" style="width: 100%;">
                           <span class="letter-grade" contenteditable>A</span>
-                          <span class="range">81-100</span>
+                          <span class="range">90-100</span>
                           <a href="#" class="remove-button">remove</a>
                         </li>
                         <li class="bar-b" style="width: 80%;">
                           <span class="letter-grade" contenteditable>B</span>
-                          <span class="range">71-80</span>
+                          <span class="range">80-89</span>
                           <a href="#" class="drag-bar"></a>
                           <a href="#" class="remove-button">remove</a>
                         </li>
                         <li class="bar-c" style="width: 70%;">
                           <span class="letter-grade" contenteditable>C</span>
-                          <span class="range">0-70</span>
+                          <span class="range">70-79</span>
                           <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>
+                          <span class="range">0-69</span>
                           <a href="#" class="drag-bar"></a>
                           <a href="#" class="remove-button">remove</a>
                         </li>

From 4027576e157eee8e68edcbd330ba5164c722faff Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 26 Nov 2012 14:01:11 -0500
Subject: [PATCH 3/7] settings - resolved date and time picker UI bugs

---
 cms/static/sass/_settings.scss |  4 ++++
 cms/templates/settings.html    | 15 ++++++++-------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/cms/static/sass/_settings.scss b/cms/static/sass/_settings.scss
index f36c9353c5..2918af01ed 100644
--- a/cms/static/sass/_settings.scss
+++ b/cms/static/sass/_settings.scss
@@ -135,7 +135,11 @@
       }
 
       &.date {
+        display: block !important;
+      }
 
+      &.time {
+        display: block !important;
       }
 
       &:focus {
diff --git a/cms/templates/settings.html b/cms/templates/settings.html
index a0157a806a..a1e480f7f0 100644
--- a/cms/templates/settings.html
+++ b/cms/templates/settings.html
@@ -177,13 +177,13 @@
                   <div class="input multi multi-inline">
                     <div class="group">
                       <label for="course-start-date">Start Date</label>
-                      <input type="text" class="start-date date set-date" id="course-start-date" placeholder="MM/DD/YYYY">
+                      <input type="text" class="start-date date set-date picker datepair" id="course-start-date" placeholder="MM/DD/YYYY" autocomplete="off">
                       <span class="tip tip-stacked">First day the course begins</span>          
                     </div>
 
                     <div class="group">
                       <label for="course-end-date">End Date</label>
-                      <input type="text" class="start-date date set-date" id="course-end-date" placeholder="MM/DD/YYYY">
+                      <input type="text" class="end-date date set-date picker datepair" id="course-end-date" placeholder="MM/DD/YYYY" autocomplete="off">
                       <span class="tip tip-stacked">Last day the course is active</span>          
                     </div>
                   </div>
@@ -197,13 +197,13 @@
                   <div class="input multi multi-inline">
                     <div class="group">
                       <label for="course-enrollment-start-date">Start Date</label>
-                      <input type="text" class="start-date date set-date" id="course-enrollment-start-date" placeholder="MM/DD/YYYY">
+                      <input type="text" class="start-date date set-date picker datepair" id="course-enrollment-start-date" placeholder="MM/DD/YYYY">
                       <span class="tip tip-stacked">First day students can enroll</span>          
                     </div>
 
                     <div class="group">
                       <label for="course-enrollment-end-date">End Date</label>
-                      <input type="text" class="start-date date set-date" id="course-enrollment-end-date" placeholder="MM/DD/YYYY">
+                      <input type="text" class="start-date date set-date picker datepair" id="course-enrollment-end-date" placeholder="MM/DD/YYYY">
                       <span class="tip tip-stacked">Last day students can enroll</span>          
                     </div>
                   </div>
@@ -458,10 +458,11 @@
                 <label for="course-grading-deadline">General Assignment Deadline:</label>
 
                 <div class="field">
-                  <div class="input">
-                    <input type="text" class="short" id="course-grading-deadline" placeholder="HH:MM">
+                  <div class="input picker datepair">
+                    <input type="text" class="short time" id="course-grading-deadline" value="" placeholder="HH:MM">
                     <span class="tip tip-stacked">Boston, MA Local Time (UTC/GMT -5 hours).<br />
-                      <a href="http://www.worldtimeserver.com/convert_time_in_UTC.aspx">Convert to your time zone</a></span>
+                      <a href="http://www.worldtimeserver.com/convert_time_in_UTC.aspx">Convert to your time zone</a>
+                    </span>
                   </div>
                 </div>
               </div>

From be848023a2b4f138eb7554f32f18654536836434 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Mon, 26 Nov 2012 14:21:01 -0500
Subject: [PATCH 4/7] settings - added in example of anon discussions disabled
 state

---
 cms/static/sass/_settings.scss |  4 ++++
 cms/templates/settings.html    | 24 ++++++++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/cms/static/sass/_settings.scss b/cms/static/sass/_settings.scss
index 2918af01ed..a71b9f199a 100644
--- a/cms/static/sass/_settings.scss
+++ b/cms/static/sass/_settings.scss
@@ -159,6 +159,10 @@
 
     }
 
+    input:disabled + .copy > label, input:disabled + .label {
+      color: $mediumGrey;
+    }
+
 
     .input-default input, .input-default textarea {
       color: $mediumGrey;
diff --git a/cms/templates/settings.html b/cms/templates/settings.html
index a1e480f7f0..37faa7c6a8 100644
--- a/cms/templates/settings.html
+++ b/cms/templates/settings.html
@@ -778,6 +778,30 @@
                 </div>
               </div>
 
+              <div class="row row-col2">
+                <h4 class="label">Anonymous Discussions:</h4>
+
+                <div class="field">
+                  <div class="input input-radio">
+                    <input checked="checked" type="radio" name="course-discussions-anonymous" id="course-discussions-anonymous-allow" value="Allow">
+                    
+                    <div class="copy">
+                      <label for="course-discussions-anonymous-allow">Allow</label>
+                      <span class="tip tip-stacked">Students and faculty <strong>will be able to post anonymously</strong></span>
+                    </div>
+                  </div>
+
+                  <div class="input input-radio">
+                    <input disabled="disabled" type="radio" name="course-discussions-anonymous" id="course-discussions-anonymous-dontallow" value="Do Not Allow">
+                    
+                    <div class="copy">
+                      <label for="course-discussions-anonymous-dontallow">Do not allow</label>
+                      <span class="tip tip-stacked">This option is disabled since there are previous discussions that are anonymous.</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
               <div class="row row-col2">
                 <h4 class="label">Discussion Categories</h4>
 

From bb2e78ce30587f3856dedc4c15cff153a939312a Mon Sep 17 00:00:00 2001
From: Tom Giannattasio <tom@mitx.mit.edu>
Date: Mon, 26 Nov 2012 15:54:46 -0500
Subject: [PATCH 5/7] reworked slider logic

---
 cms/static/sass/_settings.scss |  7 ++--
 cms/templates/settings.html    | 72 ++++++++++++++++++++++------------
 2 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/cms/static/sass/_settings.scss b/cms/static/sass/_settings.scss
index a71b9f199a..b5dcaad9be 100644
--- a/cms/static/sass/_settings.scss
+++ b/cms/static/sass/_settings.scss
@@ -755,11 +755,12 @@
           }
 
           &:nth-child(4) {
-            background: #fb336c;
+            background: #ef54a1;
           }
 
-          &:nth-child(5) {
-            background: #ef54a1;
+          &:nth-child(5),
+          &.bar-fail {
+            background: #fb336c;
           }
 
           .letter-grade {
diff --git a/cms/templates/settings.html b/cms/templates/settings.html
index 37faa7c6a8..8e8ac591d0 100644
--- a/cms/templates/settings.html
+++ b/cms/templates/settings.html
@@ -18,7 +18,7 @@
     var barOrigin;
     var barWidth;
     var gradeThresholds;
-    var GRADES = ['A', 'B', 'C', 'D', 'E'];
+    var GRADES = ['A', 'B', 'C', 'D', 'F'];
 
     $(" :input, textarea").focus(function() {
       $("label[for='" + this.id + "']").addClass("is-focused");
@@ -29,20 +29,41 @@
     (function() {
       $body = $('body');
       $gradeBar = $('.grade-bar');
-      gradeThresholds = [100, 80, 70];
+      // gradeThresholds = [100, 50];
+      setThresholds();
       $('.settings-page-menu a').bind('click', showSettingsTab);
       $('.settings-extra header').bind('click', showSettingsExtras);
       $body.on('mousedown', '.drag-bar', startDragBar);
       $('.new-grade-button').bind('click', addNewGrade);
       $body.on('click', '.remove-button', removeGrade);
+      renderGradeRanges();
 
       $('.set-date').datepicker({ 'dateFormat': 'm/d/yy' });
     })();
 
+    function setThresholds() {
+      gradeThresholds = [];
+      $('.grades li').each(function(i) {
+        gradeThresholds.push(parseInt($(this)[0].style.width));
+      });
+    }
+
     function addNewGrade(e) {
       e.preventDefault();
-      var $newGradeBar = $('<li style="width: 10%;"><span class="letter-grade" contenteditable>' + GRADES[$('.grades li').length] + '</span><span class="range"></span><a href="#" class="drag-bar"></a><a href="#" class="remove-button">remove</a></li>');
-      $('.grades').append($newGradeBar);
+      var $grades = $('.grades');
+      var gradeLength = $('li', $grades).length;
+      if(gradeLength > 4) {
+        return;
+      }
+      var $newGradeBar = $('<li><span class="letter-grade" contenteditable>' + GRADES[gradeLength - 1] + '</span><span class="range"></span><a href="#" class="drag-bar"></a><a href="#" class="remove-button">remove</a></li>');
+      var failBarWidth = parseFloat($('.bar-fail', $grades)[0].style.width);
+      var lastBarWidth = parseFloat($('li', $grades).eq(gradeLength - 2)[0].style.width);
+      var targetWidth = failBarWidth + ((lastBarWidth - failBarWidth) / 2);
+      $newGradeBar.css('width', targetWidth + '%');
+      $('.bar-fail', $grades).before($newGradeBar);
+      setGrades();
+      setThresholds();
+      renderGradeRanges();
     }
 
     function removeGrade(e) {
@@ -50,6 +71,23 @@
       var index = $(this).closest('li').index();
       gradeThresholds.splice(index, 1);
       $(this).closest('li').remove();
+      setGrades();
+      setThresholds();
+      renderGradeRanges();
+    }
+
+    function setGrades() {
+      var $gradeBars = $('.grades li');
+      var barCount = $gradeBars.length;
+      if(barCount <= 2) {
+        $gradeBars.eq(0).find('.letter-grade').html('Pass');
+        $('.bar-fail').find('.letter-grade').html('Fail');
+      } else {
+        $gradeBars.each(function(i) {
+          $('.letter-grade', this).html(GRADES[i]);
+        });
+        $('.bar-fail').find('.letter-grade').html('F');
+      }
     }
 
     function showSettingsTab(e) {
@@ -121,7 +159,7 @@
         </div>
         <div class="settings-page-section main-column">
 
-          <section class="settings-details is-shown">
+          <section class="settings-details">
             <h2 class="title">Course Details</h2>
 
             <section class="settings-details-basic">
@@ -388,7 +426,7 @@
 
           </section><!-- .settings-staff -->
 
-          <section class="settings-grading">
+          <section class="settings-grading is-shown">
             <h2 class="title">Grading</h2>
 
             <section class="settings-grading-range">
@@ -418,27 +456,13 @@
                       </ol>
                       <ol class="grades">
                         <li class="bar-a" style="width: 100%;">
-                          <span class="letter-grade" contenteditable>A</span>
-                          <span class="range">90-100</span>
-                          <a href="#" class="remove-button">remove</a>
-                        </li>
-                        <li class="bar-b" style="width: 80%;">
-                          <span class="letter-grade" contenteditable>B</span>
-                          <span class="range">80-89</span>
-                          <a href="#" class="drag-bar"></a>
-                          <a href="#" class="remove-button">remove</a>
-                        </li>
-                        <li class="bar-c" style="width: 70%;">
-                          <span class="letter-grade" contenteditable>C</span>
-                          <span class="range">70-79</span>
-                          <a href="#" class="drag-bar"></a>
-                          <a href="#" class="remove-button">remove</a>
+                          <span class="letter-grade" contenteditable>Pass</span>
+                          <span class="range"></span>
                         </li>
                         <li class="bar-fail" style="width: 50%;">
-                          <span class="letter-grade" contenteditable>F</span>
-                          <span class="range">0-69</span>
+                          <span class="letter-grade" contenteditable>Fail</span>
+                          <span class="range"></span>
                           <a href="#" class="drag-bar"></a>
-                          <a href="#" class="remove-button">remove</a>
                         </li>
                       </ol>
                     </div>

From 153285c3ea82ab54dda0a758b862604ad0cf4ab8 Mon Sep 17 00:00:00 2001
From: Tom Giannattasio <tom@mitx.mit.edu>
Date: Mon, 26 Nov 2012 16:28:52 -0500
Subject: [PATCH 6/7] reset default tab

---
 cms/templates/settings.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cms/templates/settings.html b/cms/templates/settings.html
index 8e8ac591d0..9e6225b878 100644
--- a/cms/templates/settings.html
+++ b/cms/templates/settings.html
@@ -159,7 +159,7 @@
         </div>
         <div class="settings-page-section main-column">
 
-          <section class="settings-details">
+          <section class="settings-details is-shown">
             <h2 class="title">Course Details</h2>
 
             <section class="settings-details-basic">
@@ -426,7 +426,7 @@
 
           </section><!-- .settings-staff -->
 
-          <section class="settings-grading is-shown">
+          <section class="settings-grading">
             <h2 class="title">Grading</h2>
 
             <section class="settings-grading-range">

From c3e11b42172cef4c577a9303d3a6db7babed2e69 Mon Sep 17 00:00:00 2001
From: Brian Talbot <btalbot@edx.org>
Date: Tue, 27 Nov 2012 09:50:25 -0500
Subject: [PATCH 7/7] settings - added in additional time fields for course
 dates

---
 cms/static/sass/_settings.scss |  6 +++++
 cms/templates/settings.html    | 42 ++++++++++++++++++++++++++++++----
 2 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/cms/static/sass/_settings.scss b/cms/static/sass/_settings.scss
index b5dcaad9be..ab72bc464c 100644
--- a/cms/static/sass/_settings.scss
+++ b/cms/static/sass/_settings.scss
@@ -140,6 +140,8 @@
 
       &.time {
         display: block !important;
+        width: 75px !important;
+        min-width: 75px !important;
       }
 
       &:focus {
@@ -372,6 +374,10 @@
           }  
         }
       }
+
+      .field-additional {
+        margin-left: 204px;       
+      }
     }
 
     // editing controls - adding
diff --git a/cms/templates/settings.html b/cms/templates/settings.html
index 9e6225b878..b524b799fb 100644
--- a/cms/templates/settings.html
+++ b/cms/templates/settings.html
@@ -219,11 +219,27 @@
                       <span class="tip tip-stacked">First day the course begins</span>          
                     </div>
 
+                    <div class="group picker datepair">
+                      <label for="course-start-time">Start Time</label>
+                      <input type="text" class="short time" id="course-start-time" value="" placeholder="HH:MM">
+                      <span class="tip tip-stacked">(UTC/GMT -5 hours)</span>          
+                    </div>
+                  </div>
+                </div>
+
+                <div class="field field-additional">
+                  <div class="input multi multi-inline">
                     <div class="group">
                       <label for="course-end-date">End Date</label>
                       <input type="text" class="end-date date set-date picker datepair" id="course-end-date" placeholder="MM/DD/YYYY" autocomplete="off">
                       <span class="tip tip-stacked">Last day the course is active</span>          
                     </div>
+
+                    <div class="group picker datepair">
+                      <label for="course-end-time">End Time</label>
+                      <input type="text" class="short time" id="course-end-time" value="" placeholder="HH:MM">
+                      <span class="tip tip-stacked">(UTC/GMT -5 hours)</span>          
+                    </div>
                   </div>
                 </div>
               </div>
@@ -239,10 +255,26 @@
                       <span class="tip tip-stacked">First day students can enroll</span>          
                     </div>
 
+                    <div class="group picker datepair">
+                      <label for="course-enrollment-start-time">Start Time</label>
+                      <input type="text" class="short time" id="course-enrollment-start-time" value="" placeholder="HH:MM">
+                      <span class="tip tip-stacked">(UTC/GMT -5 hours)</span>           
+                    </div>
+                  </div>
+                </div>
+
+                <div class="field field-additional">
+                  <div class="input multi multi-inline">
                     <div class="group">
-                      <label for="course-enrollment-end-date">End Date</label>
-                      <input type="text" class="start-date date set-date picker datepair" id="course-enrollment-end-date" placeholder="MM/DD/YYYY">
-                      <span class="tip tip-stacked">Last day students can enroll</span>          
+                      <label for="course-enrollment-end-date">Start Date</label>
+                      <input type="text" class="start-end date set-date picker datepair" id="course-enrollment-end-date" placeholder="MM/DD/YYYY">
+                      <span class="tip tip-stacked">First day students can enroll</span>          
+                    </div>
+
+                    <div class="group picker datepair">
+                      <label for="course-enrollment-end-time">End Time</label>
+                      <input type="text" class="short time" id="course-enrollment-end-time" value="" placeholder="HH:MM">
+                      <span class="tip tip-stacked">(UTC/GMT -5 hours)</span>           
                     </div>
                   </div>
                 </div>
@@ -320,7 +352,7 @@
                 <label for="course-effort">Hours of Effort per Week:</label>
                 <div class="field">
                   <div class="input">
-                    <input type="text" class="short" id="course-effort" placeholder="HH:MM">
+                    <input type="text" class="short time" id="course-effort" placeholder="HH:MM">
                     <span class="tip tip-inline">Time students should spend on all course work</span>
                   </div>
                 </div>
@@ -496,7 +528,7 @@
 
                 <div class="field">
                   <div class="input">
-                    <input type="text" class="short" id="course-grading-graceperiod" value="0:00" placeholder="e.g. 10 minutes">
+                    <input type="text" class="short time" id="course-grading-graceperiod" value="0:00" placeholder="e.g. 10 minutes">
                     <span class="tip tip-inline">leeway on due dates</span>
                   </div>
                 </div>