Add styling to due date and grading format of subsection.

cms/static/js/spec/views/pages/course_outline_spec.js

@@ -523,10 +523,10 @@ define(["jquery", "js/spec_helpers/create_sinon", "js/spec_helpers/view_helpers"
                     create_sinon.respondWithJson(requests, mockServerValuesJson);
 
                     expect($(".outline-subsection .status-release-value")).toContainText("Jul 09, 2014 at 00:00 UTC");
-                    expect($(".outline-subsection .due-date")).toContainText("Due date: Jul 10, 2014 at 00:00 UTC");
-                    expect($(".outline-subsection .policy")).toContainText("Policy: Lab");
+                    expect($(".outline-subsection .status-grading-date")).toContainText("Due: Jul 10, 2014 at 00:00 UTC");
+                    expect($(".outline-subsection .status-grading-value")).toContainText("Lab");
 
-                    expect($(".outline-item .outline-subsection .policy")).toContainText("Policy: Lab");
+                    expect($(".outline-item .outline-subsection .status-grading-value")).toContainText("Lab");
                     outlinePage.$('.outline-item .outline-subsection .configure-button').click();
                     expect($("#start_date").val()).toBe('7/9/2014');
                     expect($("#due_date").val()).toBe('7/10/2014');
@@ -545,8 +545,8 @@ define(["jquery", "js/spec_helpers/create_sinon", "js/spec_helpers/view_helpers"
                     create_sinon.respondWithJson(requests, mockServerValuesJson);
 
                     expect($(".outline-subsection .status-release-value")).toContainText("Jul 09, 2014 at 00:00 UTC");
-                    expect($(".outline-subsection .due-date")).toContainText("Due date: Jul 10, 2014 at 00:00 UTC");
-                    expect($(".outline-subsection .policy")).toContainText("Policy: Lab");
+                    expect($(".outline-subsection .status-grading-date")).toContainText("Due: Jul 10, 2014 at 00:00 UTC");
+                    expect($(".outline-subsection .status-grading-value")).toContainText("Lab");
 
                     outlinePage.$('.outline-subsection .configure-button').click();
                     expect($("#start_date").val()).toBe('7/9/2014');
@@ -571,8 +571,8 @@ define(["jquery", "js/spec_helpers/create_sinon", "js/spec_helpers/view_helpers"
                         ])
                     );
                     expect($(".outline-subsection .status-release-value")).not.toContainText("Jul 09, 2014 at 00:00 UTC");
-                    expect($(".outline-subsection .due-date")).not.toExist();
-                    expect($(".outline-subsection .policy")).not.toExist();
+                    expect($(".outline-subsection .status-grading-date")).not.toExist();
+                    expect($(".outline-subsection .status-grading-value")).not.toExist();
                 });
             });
 

cms/templates/js/course-outline.underscore

@@ -100,19 +100,20 @@ if (statusType === 'warning') {
                             <%= xblockInfo.get('release_date') %>
                         <% } %>
                     </span>
-                    <% if (xblockInfo.get('due_date')) { %>
-                        <span class="due-date">
-                            <i class="icon-time"></i>
-                            <%= gettext('Due date:') %> <%= xblockInfo.get('due_date') %>
-                        </span>
-                    <% } %>
-                    <% if (xblockInfo.get('graded')) { %>
-                        <span class="policy">
-                            <%= gettext('Policy:') %> <%= xblockInfo.get('format') %>
-                        </span>
-                    <% } %>
                 </p>
             </div>
+            <% if (xblockInfo.get('due_date') || xblockInfo.get('graded')) { %>
+                <div class="status-grading">
+                    <p>
+                        <span class="sr status-grading-label"> <%= gettext('Graded as:') %> </span>
+                        <i class="icon icon-ok"></i>
+                        <span class="status-grading-value"> <%= xblockInfo.get('format') %> </span>
+                        <% if (xblockInfo.get('due_date')) { %>
+                            <span class="status-grading-date"> <%= gettext('Due:') %> <%= xblockInfo.get('due_date') %> </span>
+                        <% } %>
+                    </p>
+                </div>
+            <% } %>
         <% } %>
 
         <% if (statusMessage) { %>

common/test/acceptance/pages/studio/overview.py

@@ -112,12 +112,12 @@ class CourseOutlineItem(object):
 
     @property
     def due_date(self):
-        element = self.q(css=self._bounded_selector(".due-date"))
+        element = self.q(css=self._bounded_selector(".status-grading-date"))
         return element.first.text[0] if element.present else None
 
     @property
     def policy(self):
-        element = self.q(css=self._bounded_selector(".policy"))
+        element = self.q(css=self._bounded_selector(".status-grading-value"))
         return element.first.text[0] if element.present else None
 
 

common/test/acceptance/tests/test_studio_outline.py

@@ -302,8 +302,8 @@ class EditingSectionsTest(CourseOutlineTest):
 
         modal.save()
         self.assertIn(u'Released: Mar 12, 1972', subsection.release_date)
-        self.assertIn(u'Due date: Jul 21, 2014', subsection.due_date)
-        self.assertIn(u'Policy: Lab', subsection.policy)
+        self.assertIn(u'Due: Jul 21, 2014', subsection.due_date)
+        self.assertIn(u'Lab', subsection.policy)
 
     def test_can_edit_section(self):
         """