From 089a61c6af348ac4b079e8606fccaa41410a02c6 Mon Sep 17 00:00:00 2001
From: Frances Botsford <frances@edx.org>
Date: Fri, 6 Dec 2013 21:12:52 -0500
Subject: [PATCH] studio outline test fixes

---
 .../contentstore/features/common.py           |   6 +-
 .../contentstore/features/section.py          |   6 +-
 .../coffee/spec/views/overview_spec.coffee    | 124 ++++++++++--------
 cms/static/js/views/overview.js               |   8 +-
 cms/static/sass/views/_outline.scss           |   5 +-
 .../js/blank-slate-template.underscore        |  19 ---
 .../js/new-section-template.underscore        |  15 ---
 .../js/new-subsection-template.underscore     |  18 ---
 .../js/no-outline-content.underscore          |   3 -
 cms/templates/overview.html                   |  18 +--
 cms/templates/widgets/units.html              |   2 +-
 11 files changed, 90 insertions(+), 134 deletions(-)
 delete mode 100644 cms/templates/js/blank-slate-template.underscore
 delete mode 100644 cms/templates/js/new-section-template.underscore
 delete mode 100644 cms/templates/js/new-subsection-template.underscore
 delete mode 100644 cms/templates/js/no-outline-content.underscore

diff --git a/cms/djangoapps/contentstore/features/common.py b/cms/djangoapps/contentstore/features/common.py
index 4a500c9e16..cd9c00c09c 100644
--- a/cms/djangoapps/contentstore/features/common.py
+++ b/cms/djangoapps/contentstore/features/common.py
@@ -43,9 +43,9 @@ def i_confirm_with_ok(_step):
 @step(u'I press the "([^"]*)" delete icon$')
 def i_press_the_category_delete_icon(_step, category):
     if category == 'section':
-        css = 'a.delete-button.delete-section-button span.delete-icon'
+        css = 'a.action.delete-section-button'
     elif category == 'subsection':
-        css = 'a.delete-button.delete-subsection-button  span.delete-icon'
+        css = 'a.action.delete-subsection-button'
     else:
         assert False, 'Invalid category: %s' % category
     world.css_click(css)
@@ -254,7 +254,7 @@ def create_course_with_unit():
 
     world.wait_for_js_to_load()
     css_selectors = [
-        'div.section-item a.expand-collapse-icon', 'a.new-unit-item'
+        'div.section-item a.expand-collapse', 'a.new-unit-item'
     ]
     for selector in css_selectors:
         world.css_click(selector)
diff --git a/cms/djangoapps/contentstore/features/section.py b/cms/djangoapps/contentstore/features/section.py
index b6f55969bb..b1e9ee2e12 100644
--- a/cms/djangoapps/contentstore/features/section.py
+++ b/cms/djangoapps/contentstore/features/section.py
@@ -29,7 +29,7 @@ def i_have_added_new_section(_step):
 
 @step('I click the Edit link for the release date$')
 def i_click_the_edit_link_for_the_release_date(_step):
-    button_css = 'div.section-published-date a.edit-button'
+    button_css = 'div.section-published-date a.edit-release-date'
     world.css_click(button_css)
 
 
@@ -88,7 +88,7 @@ def i_see_a_release_date_for_my_section(_step):
     status_text = world.css_text(css)
 
     # e.g. 11/06/2012 at 16:25
-    msg = 'Will Release:'
+    msg = 'Release date:'
     date_regex = r'(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec) \d\d?, \d{4}'
     if not re.search(date_regex, status_text):
         print status_text, date_regex
@@ -117,7 +117,7 @@ def the_section_release_date_picker_not_visible(_step):
 def the_section_release_date_is_updated(_step):
     css = 'span.published-status'
     status_text = world.css_text(css)
-    assert_equal(status_text, 'Will Release: 12/25/2013 at 00:00 UTC')
+    assert_equal(status_text, 'Release date: 12/25/2013 at 00:00 UTC')
 
 
 def save_section_name(name):
diff --git a/cms/static/coffee/spec/views/overview_spec.coffee b/cms/static/coffee/spec/views/overview_spec.coffee
index 2082e4747b..02de783412 100644
--- a/cms/static/coffee/spec/views/overview_spec.coffee
+++ b/cms/static/coffee/spec/views/overview_spec.coffee
@@ -6,65 +6,77 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
             appendSetFixtures """
                               <div class="section-published-date">
                                   <span class="published-status">
-                                      <strong>Will Release:</strong> 06/12/2013 at 04:00 UTC
+                                      <strong>Release date:</strong> 06/12/2013 at 04:00 UTC
                                   </span>
-                                  <a href="#" class="edit-button" data-date="06/12/2013" data-time="04:00" data-locator="i4x://pfogg/42/chapter/d6b47f7b084f49debcaf67fe5436c8e2">Edit</a>
+                                  <a href="#" class="edit-release-date action " data-date="06/12/2013" data-time="04:00" data-locator="i4x://pfogg/42/chapter/d6b47f7b084f49debcaf67fe5436c8e2"><i class="icon-time"></i> <span class="sr">Edit section release date</span></a>
                               </div>
                               """
-    
+
             appendSetFixtures """
-                              <div class="edit-subsection-publish-settings">
-                                  <div class="settings">
-                                      <h3>Section Release Date</h3>
-                                      <div class="picker datepair">
-                                          <div class="field field-start-date">
-                                              <label for="">Release Day</label>
-                                              <input class="start-date date" type="text" name="start_date" value="04/08/1990" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
-                                          </div>
-                                          <div class="field field-start-time">
-                                              <label for="">Release Time (<abbr title="Coordinated Universal Time">UTC</abbr>)</label>
-                                              <input class="start-time time" type="text" name="start_time" value="12:00" placeholder="HH:MM" class="time" size='10' autocomplete="off"/>
-                                          </div>
-                                          <div class="description">
-                                              <p>On the date set above, this section – <strong class="section-name"></strong> – will be released to students. Any units marked private will only be visible to admins.</p>
-                                          </div>
-                                      </div>
-                                      <a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
-                                  </div>
-                              </div>
+                              <div class="wrapper wrapper-dialog wrapper-dialog-edit-sectionrelease edit-section-publish-settings" aria-describedby="dialog-edit-sectionrelease-description" aria-labelledby="dialog-edit-sectionrelease-title" aria-hidden="" role="dialog">
+                                <div class="dialog confirm">
+                                  <form class="edit-sectionrelease-dialog" action="#">
+                                    <div class="form-content">
+                                    <h2 class="title dialog-edit-sectionrelease-title">Section Release Date</h2>
+                                    <p id="dialog-edit-sectionrelease-description" class="message">On the date set below, this section - <strong class="section-name"></strong> - will be released to students. Any units marked private will only be visible to admins.</p>
+
+                                      <ul class="list-input picker datepair">
+                                        <li class="field field-start-date">
+                                          <label for="start_date">Release Day</label>
+                                          <input class="start-date date" type="text" name="start_date" value="04/08/1990" placeholder="MM/DD/YYYY" class="date" size='15' autocomplete="off"/>
+                                        </li>
+                                        <li class="field field-start-time">
+                                          <label for="start_time">Release Time (<abbr title="Coordinated Universal Time">UTC</abbr>)</label>
+                                          <input class="start-time time" type="text" name="start_time" value="12:00" placeholder="HH:MM" class="time" size='10' autocomplete="off"/>
+                                        </li>
+                                      </ul>
+                                    </div>
+                                    <div class="actions">
+                                      <h3 class="sr">Form Actions</h3>
+                                    <ul>
+                                    <li class="action-item">
+                                      <a href="#" class="button action-primary action-save">Save</a>
+                                    </li>
+                                    <li class="action-item">
+                                      <a href="#" class="button action-secondary action-cancel">Cancel</a>
+                                    </li>
+                                    </ul>
+                                    </div>
+                                  </form>
+                                </div>
                               """
-    
+
             appendSetFixtures """
-                              <section class="courseware-section branch" data-locator="a-location-goes-here">
+                              <section class="courseware-section is-collapsible is-draggable" data-parent="a-parent-locator-goes-here" data-locator="a-location-goes-here">
                                   <li class="branch collapsed id-holder" data-locator="an-id-goes-here">
-                                    <a href="#" class="delete-section-button"></a>
+                                    <a href="#" data-tooltip="Delete this section" class="delete-section-button"><i class="icon-trash"></i> <span class="sr">Delete section</span></a>
                                   </li>
                               </section>
                               """
-    
+
             appendSetFixtures """
-                              <ol>
-                                  <li class="subsection-list branch" id="subsection-1" data-locator="subsection-1-id">
+                              <ol class="sortable-subsection-list">
+                                  <li class="courseware-subsection is-collapsible id-holder is-draggable" id="subsection-1" data-locator="subsection-1-id" data-parent="a-aprent-locator-goes-here" data-id="a-data-id-goes-here">
                                       <ol class="sortable-unit-list" id="subsection-list-1">
-                                          <li class="unit" id="unit-1" data-parent="subsection-1-id" data-locator="first-unit-id"></li>
-                                          <li class="unit" id="unit-2" data-parent="subsection-1-id" data-locator="second-unit-id"></li>
-                                          <li class="unit" id="unit-3" data-parent="subsection-1-id" data-locator="third-unit-id"></li>
+                                          <li class="courseware-unit unit is-draggable" id="unit-1" data-parent="subsection-1-id" data-locator="first-unit-id"></li>
+                                          <li class="courseware-unit unit is-draggable" id="unit-2" data-parent="subsection-1-id" data-locator="second-unit-id"></li>
+                                          <li class="courseware-unit unit is-draggable" id="unit-3" data-parent="subsection-1-id" data-locator="third-unit-id"></li>
                                       </ol>
                                   </li>
-                                  <li class="subsection-list branch" id="subsection-2" data-locator="subsection-2-id">
+                                  <li class="courseware-subsection is-collapsible id-holder is-draggable" id="subsection-2" data-locator="subsection-2-id" data-parent="a-aprent-locator-goes-here" data-id="a-data-id-goes-here">
                                       <ol class="sortable-unit-list" id="subsection-list-2">
-                                        <li class="unit" id="unit-4" data-parent="subsection-2" data-locator="fourth-unit-id"></li>
+                                        <li class="courseware-unit unit is-draggable" id="unit-4" data-parent="subsection-2" data-locator="fourth-unit-id"></li>
                                       </ol>
                                   </li>
-                                  <li class="subsection-list branch" id="subsection-3" data-locator="subsection-3-id">
+                                  <li class="courseware-subsection is-collapsible id-holder is-draggable" id="subsection-3" data-locator="subsection-3-id" data-parent="a-aprent-locator-goes-here" data-id="a-data-id-goes-here">
                                       <ol class="sortable-unit-list" id="subsection-list-3">
                                   </li>
                               </ol>
                               """
-    
+
             spyOn(Overview, 'saveSetSectionScheduleDate').andCallThrough()
             # Have to do this here, as it normally gets bound in document.ready()
-            $('a.save-button').click(Overview.saveSetSectionScheduleDate)
+            $('a.action-save').click(Overview.saveSetSectionScheduleDate)
             $('a.delete-section-button').click(deleteSection)
             $(".edit-subsection-publish-settings .start-date").datepicker()
 
@@ -79,22 +91,22 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                 '.unit',
                 '.unit-drag-handle',
                 'ol.sortable-unit-list',
-                'li.branch, article.subsection-body'
+                'li.courseware-subsection, article.subsection-body'
             )
-    
+
         afterEach ->
             delete window.analytics
             delete window.course_location_analytics
             @notificationSpy.reset()
-    
+
         it "should save model when save is clicked", ->
-            $('a.edit-button').click()
-            $('a.save-button').click()
+            $('a.edit-release-date').click()
+            $('a.action-save').click()
             expect(Overview.saveSetSectionScheduleDate).toHaveBeenCalled()
 
         it "should show a confirmation on save", ->
-            $('a.edit-button').click()
-            $('a.save-button').click()
+            $('a.edit-release-date').click()
+            $('a.action-save').click()
             expect(@notificationSpy).toHaveBeenCalled()
 
         # Fails sporadically in Jenkins.
@@ -113,7 +125,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
 #            $('a.delete-section-button').click()
 #            $('a.action-primary').click()
 #            expect(@notificationSpy).toHaveBeenCalled()
-    
+
         describe "findDestination", ->
             it "correctly finds the drop target of a drag", ->
                 $ele = $('#unit-1')
@@ -123,7 +135,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                 destination = Overview.overviewDragger.findDestination($ele, 1)
                 expect(destination.ele).toBe($('#unit-2'))
                 expect(destination.attachMethod).toBe('before')
-    
+
             it "can drag and drop across section boundaries, with special handling for first element", ->
                 $ele = $('#unit-1')
                 $ele.offset(
@@ -142,7 +154,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                 destination = Overview.overviewDragger.findDestination($ele, 1)
                 expect(destination.ele).toBe($('#unit-4'))
                 expect(destination.attachMethod).toBe('after')
-    
+
             it "can drag and drop across section boundaries, with special handling for last element", ->
                 $ele = $('#unit-4')
                 $ele.offset(
@@ -161,7 +173,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                 destination = Overview.overviewDragger.findDestination($ele, -1)
                 expect(destination.ele).toBe($('#unit-3'))
                 expect(destination.attachMethod).toBe('before')
-    
+
             it "can drag into an empty list", ->
                 $ele = $('#unit-1')
                 $ele.offset(
@@ -171,7 +183,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                 destination = Overview.overviewDragger.findDestination($ele, 1)
                 expect(destination.ele).toBe($('#subsection-list-3'))
                 expect(destination.attachMethod).toBe('prepend')
-    
+
             it "reports a null destination on a failed drag", ->
                 $ele = $('#unit-1')
                 $ele.offset(
@@ -182,7 +194,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                     ele: null
                     attachMethod: ""
                 )
-    
+
             it "can drag into a collapsed list", ->
                 $('#subsection-2').addClass('collapsed')
                 $ele = $('#unit-2')
@@ -194,7 +206,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                 expect(destination.ele).toBe($('#subsection-list-2'))
                 expect(destination.parentList).toBe($('#subsection-2'))
                 expect(destination.attachMethod).toBe('prepend')
-    
+
         describe "onDragStart", ->
             it "sets the dragState to its default values", ->
                 expect(Overview.overviewDragger.dragState).toEqual({})
@@ -211,7 +223,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                     lastY: 0,
                     dragDirection: 0
                 )
-    
+
             it "collapses expanded elements", ->
                 expect($('#subsection-1')).not.toHaveClass('collapsed')
                 Overview.overviewDragger.onDragStart(
@@ -221,7 +233,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                 )
                 expect($('#subsection-1')).toHaveClass('collapsed')
                 expect($('#subsection-1')).toHaveClass('expand-on-drop')
-    
+
         describe "onDragMove", ->
             beforeEach ->
                 @scrollSpy = spyOn(window, 'scrollBy').andCallThrough()
@@ -239,7 +251,7 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                 )
                 expect($('#unit-2')).toHaveClass('drop-target drop-target-before')
                 expect($ele).toHaveClass('valid-drop')
-    
+
             it "does not add CSS class to the drop destination if out of bounds", ->
                 $ele = $('#unit-1')
                 dragY = $ele.offset().top + 10
@@ -252,19 +264,19 @@ define ["js/views/overview", "js/views/feedback_notification", "sinon", "js/base
                 )
                 expect($('#unit-2')).not.toHaveClass('drop-target drop-target-before')
                 expect($ele).not.toHaveClass('valid-drop')
-    
+
             it "scrolls up if necessary", ->
                 Overview.overviewDragger.onDragMove(
                     {element: $('#unit-1')}, '', {clientY: 2}
                 )
                 expect(@scrollSpy).toHaveBeenCalledWith(0, -10)
-    
+
             it "scrolls down if necessary", ->
                 Overview.overviewDragger.onDragMove(
                     {element: $('#unit-1')}, '', {clientY: (window.innerHeight - 5)}
                 )
                 expect(@scrollSpy).toHaveBeenCalledWith(0, 10)
-    
+
         describe "onDragEnd", ->
             beforeEach ->
                 @reorderSpy = spyOn(Overview.overviewDragger, 'handleReorder')
diff --git a/cms/static/js/views/overview.js b/cms/static/js/views/overview.js
index 0e34fc64a1..90e7831c9e 100644
--- a/cms/static/js/views/overview.js
+++ b/cms/static/js/views/overview.js
@@ -31,7 +31,7 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
 
         var toggleSubmodules = function(e) {
             e.preventDefault();
-            $(this).toggleClass('expand');
+            $(this).toggleClass('expand').toggleClass('collapse');
             $(this).closest('.is-collapsible, .window').toggleClass('collapsed');
         };
 
@@ -100,9 +100,9 @@ define(["domReady", "jquery", "jquery.ui", "underscore", "gettext", "js/views/fe
                             '<strong>' + gettext("Release date:") + '&nbsp;</strong>' +
                             gettext("{month}/{day}/{year} at {hour}:{minute} UTC") +
                             '</span>' +
-                            '<a href="#" class="edit-release-date action" data-date="{month}/{day}/{year}" data-time="{hour}:{minute}" data-locator="{locator}">' +
-                            gettext("Edit") +
-                            '</a>',
+                            '<a href="#" class="edit-release-date action" data-date="{month}/{day}/{year}" data-time="{hour}:{minute}" data-locator="{locator}"><i class="icon-time"></i> <span class="sr">' +
+                            gettext("Edit section release date") +
+                            '</span></a>',
                         {year: datetime.getUTCFullYear(), month: pad2(datetime.getUTCMonth() + 1), day: pad2(datetime.getUTCDate()),
                             hour: pad2(datetime.getUTCHours()), minute: pad2(datetime.getUTCMinutes()),
                             locator: locator},
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
index 4a8ac577a8..1c0547866c 100644
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -76,6 +76,9 @@
     padding: ($baseline/4);
   }
 
+  .new-subsection-name-input {
+    @include font-size(14);
+  }
   .new-section-name-save,
   .new-subsection-name-save {
     @include blue-button;
@@ -166,7 +169,7 @@
       &.drag-handle {
         float: none;
         margin: 0;
-        background: none;
+        background: transparent url(../img/drag-handles.png) right 5px no-repeat;
         text-align: center;
       }
 
diff --git a/cms/templates/js/blank-slate-template.underscore b/cms/templates/js/blank-slate-template.underscore
deleted file mode 100644
index d395d40a42..0000000000
--- a/cms/templates/js/blank-slate-template.underscore
+++ /dev/null
@@ -1,19 +0,0 @@
-    <section class="courseware-section new-section">
-      <header>
-      <a href="#"  data-tooltip="${_('Collapse/expand this section')}" class="expand-collapse-icon collapse"></a>
-        <div class="item-details">
-          <h3 class="section-name">
-          <span class="section-name-span">Click here to set the section name</span>
-          <form class="section-name-form">
-            <input type="text" value="${_('New Section Name')}" class="new-section-name" />
-            <input type="submit" class="new-section-name-save" data-parent="${parent_locator}"
-                   data-category="${new_section_category}" value="${_('Save')}" />
-            <input type="button" class="new-section-name-cancel" value="$(_('Cancel')}" /></h3>
-          </form>
-        </div>
-        <div class="item-actions">
-          <a href="#" data-tooltip="${_('Delete this section')}" class="delete-button delete-section-button"><span class="delete-icon"></span></a>
-          <span data-tooltip="${_('Drag to re-order')}" class="drag-handle"></span>
-        </div>
-      </header>
-    </section>
diff --git a/cms/templates/js/new-section-template.underscore b/cms/templates/js/new-section-template.underscore
deleted file mode 100644
index 2d0cbaefff..0000000000
--- a/cms/templates/js/new-section-template.underscore
+++ /dev/null
@@ -1,15 +0,0 @@
-    <section class="courseware-section new-section is-collapsible is-draggable">
-      <header>
-      <a href="#" data-tooltip="${_('Expand/collapse this section')}" class="action expand-collapse"><i class="icon-caret-down ui-toggle-dd"></i><span class="sr">${_('Expand/collapse this section')}</span></a>
-        <div class="item-details">
-          <h3 class="section-name">
-            <form class="section-name-form">
-              <input type="text" value="New Section Name" class="new-section-name" />
-              <input type="submit" class="new-section-name-save" data-parent="${parent_locator}"
-                     data-category="${new_section_category}" value="Save" />
-              <input type="button" class="new-section-name-cancel" value="Cancel" />
-            </form>
-          </h3>
-        </div>
-      </header>
-    </section>
diff --git a/cms/templates/js/new-subsection-template.underscore b/cms/templates/js/new-subsection-template.underscore
deleted file mode 100644
index 99f94c0464..0000000000
--- a/cms/templates/js/new-subsection-template.underscore
+++ /dev/null
@@ -1,18 +0,0 @@
-    <li class="collapsed">
-      <div class="section-item editing">
-        <form class="new-subsection-form">
-          <span class="subsection-name">
-            <input type="text" value="${_('New Subsection')}" class="new-subsection-name-input" />
-          </span>
-          <input type="submit" value="${_('Save')}" class="new-subsection-name-save" />
-          <input type="button" value="${_('Cancel')}" class="new-subsection-name-cancel" />
-        </form>
-      </div>
-      <ol>
-        <li>
-          <a href="unit.html" class="new-unit-item">
-            <i class="icon-plus"></i> ${_('New Unit')}
-          </a>
-        </li>
-      </ol>
-    </li>
diff --git a/cms/templates/js/no-outline-content.underscore b/cms/templates/js/no-outline-content.underscore
deleted file mode 100644
index 5d4774dd65..0000000000
--- a/cms/templates/js/no-outline-content.underscore
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="no-outline-content">
-    <p><%= gettext("You haven't added any sections to your course outline.") %><a href="#" class="button new-button"><i class="icon-plus"></i><%= gettext("Add your first section") %></a></p>
-</div>
diff --git a/cms/templates/overview.html b/cms/templates/overview.html
index adc1e59ccb..9d43115b66 100644
--- a/cms/templates/overview.html
+++ b/cms/templates/overview.html
@@ -164,7 +164,7 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
                 <%include file="widgets/_ui-dnd-indicator-before.html" />
 
                 <header class="section">
-                  <a href="#" data-tooltip="${_('Expand/collapse this section')}" class="action expand-collapse"><i class="icon-caret-down ui-toggle-expansion"></i><span class="sr">${_('Expand/collapse this section')}</span></a>
+                  <a href="#" data-tooltip="${_('Expand/collapse this section')}" class="action expand-collapse collapse"><i class="icon-caret-down ui-toggle-expansion"></i><span class="sr">${_('Expand/collapse this section')}</span></a>
 
                   <div class="item-details" data-locator="${section_locator}">
                     <h3 class="section-name" data-name="${section.display_name_with_default | h}"></h3>
@@ -194,10 +194,10 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
                         </div>
                       </li>
                       <li class="actions-item delete">
-                        <a href="#" data-tooltip="${_('Delete this section')}" class="action delete-section-button"><i class="icon-trash"></i> <span class="sr">Delete section</span></a>
+                        <a href="#" data-tooltip="${_('Delete this section')}" class="action delete-section-button"><i class="icon-trash"></i> <span class="sr">${_('Delete section')}</span></a>
                       </li>
                       <li class="actions-item drag">
-                        <span data-tooltip="${_('Drag to reorder')}" class="drag-handle section-drag-handle action"><i class="icon-ellipsis-vertical"></i><span class="sr"> ${_("Drag to reorder section")}</span></span>
+                        <span data-tooltip="${_('Drag to reorder')}" class="drag-handle section-drag-handle action"><span class="sr"> ${_("Drag to reorder section")}</span></span>
                       </li>
                     </ul>
                   </div>
@@ -211,14 +211,14 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
                           context_course.location.course_id, subsection.location, False, True
                         )
                       %>
-                    <li class="courseware-subsection collapsed id-holder is-draggable"
+                    <li class="courseware-subsection collapsed id-holder is-draggable is-collapsible "
                         data-parent="${section_locator}" data-locator="${subsection_locator}">
 
                       <%include file="widgets/_ui-dnd-indicator-before.html" />
 
                       <div class="section-item">
                         <div class="details">
-                        <a href="#" data-tooltip="${_('Expand/collapse this subsection')}" class="action expand-collapse"><i class="icon-caret-down ui-toggle-expansion"></i><span class="sr">${_('Expand/collapse this subsection')}</span></a>
+                        <a href="#" data-tooltip="${_('Expand/collapse this subsection')}" class="action expand-collapse expand"><i class="icon-caret-down ui-toggle-expansion"></i><span class="sr">${_('Expand/collapse this subsection')}</span></a>
                           <a href="${subsection_locator.url_reverse('subsection')}">
                             <span class="subsection-name"><span class="subsection-name-value">${subsection.display_name_with_default}</span></span>
                           </a>
@@ -234,7 +234,7 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
                               <a href="#" data-tooltip="${_('Delete this subsection')}" class="action delete-subsection-button"><i class="icon-trash"></i> <span class="sr">${_("Delete subsection")}</span></a>
                             </li>
                             <li class="actions-item drag">
-                              <span data-tooltip="${_('Drag to reorder')}" class="drag-handle subsection-drag-handle action"><i class="icon-ellipsis-vertical"></i></span>
+                              <span data-tooltip="${_('Drag to reorder')}" class="drag-handle subsection-drag-handle action"></span>
                             </li>
                           </ul>
                         </div>
@@ -283,12 +283,10 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
       aria-hidden=""
       role="dialog">
       <div class="dialog confirm">
-
-        <form class="edit-sectionrelease-dialog" method="POST" action="#" enctype="multipart/form-data">
+        <form class="edit-sectionrelease-dialog" action="#">
           <div class="form-content">
           <h2 class="title dialog-edit-sectionrelease-title">${_("Section Release Date")}</h2>
           <p id="dialog-edit-sectionrelease-description" class="message">${_('On the date set below, this section - {name} - will be released to students. Any units marked private will only be visible to admins.').format(name='<strong class="section-name"></strong>')}</p>
-
             <ul class="list-input picker datepair">
               <li class="field field-start-date">
                 <label for="start_date">${_("Release Day")}</label>
@@ -299,9 +297,7 @@ require(["domReady!", "jquery", "js/models/location", "js/models/section", "js/v
                 <input class="start-time time" type="text" name="start_time" value="" placeholder="HH:MM" class="time" size='10' autocomplete="off"/>
               </li>
             </ul>
-
           </div>
-
           <div class="actions">
             <h3 class="sr">${_("Form Actions")}</h3>
           <ul>
diff --git a/cms/templates/widgets/units.html b/cms/templates/widgets/units.html
index f5f35736cb..b9c89eb5bd 100644
--- a/cms/templates/widgets/units.html
+++ b/cms/templates/widgets/units.html
@@ -41,7 +41,7 @@ This def will enumerate through a passed in subsection and list all of the units
             <a href="#" data-tooltip="Delete this unit" class="delete-unit-button action" data-locator="${unit_locator}"><i class="icon-trash"></i><span class="sr">Delete unit</span></a>
           </li>
           <li class="actions-item drag">
-            <span data-tooltip="Drag to sort" class="drag-handle unit-drag-handle action"><i class="icon-ellipsis-vertical"></i></span>
+            <span data-tooltip="Drag to sort" class="drag-handle unit-drag-handle action"></span>
           </li>
         </ul>
       </div>