Merge pull request #18626 from edx/mroytman/course-outline-status-alignment

mroytman/course outline status alignment
2018-07-25 17:22:30 -04:00
parent ed0b130046 d502a75efb
commit 41848b8ff3
6 changed files with 34 additions and 78 deletions
--- a/cms/djangoapps/contentstore/views/course.py
+++ b/cms/djangoapps/contentstore/views/course.py
@@ -625,7 +625,13 @@ def course_index(request, course_key):
        sections = course_module.get_children()
        course_structure = _course_outline_json(request, course_module)
        locator_to_show = request.GET.get('show', None)
-        course_release_date = get_default_time_display(course_module.start) if course_module.start != DEFAULT_START_DATE else _("Unscheduled")
+
+        course_release_date = (
+            get_default_time_display(course_module.start)
+            if course_module.start != DEFAULT_START_DATE
+            else _("Set Date")
+        )
+
        settings_url = reverse_course_url('settings_handler', course_key)

        try:
--- a/cms/djangoapps/contentstore/views/tests/test_course_index.py
+++ b/cms/djangoapps/contentstore/views/tests/test_course_index.py
@@ -518,38 +518,6 @@ class TestCourseOutline(CourseTestCase):
        self.assertIn(unicode(self.sequential.location), expanded_locators)
        self.assertIn(unicode(self.vertical.location), expanded_locators)

-    def test_start_date_on_page(self):
-        """
-        Verify that the course start date is included on the course outline page.
-        """
-        def _get_release_date(response):
-            """Return the release date from the course page"""
-            parsed_html = lxml.html.fromstring(response.content)
-            return parsed_html.find_class('course-status')[0].find_class('status-release-value')[0].text_content()
-
-        def _assert_settings_link_present(response):
-            """
-            Asserts there's a course settings link on the course page by the course release date.
-            """
-            parsed_html = lxml.html.fromstring(response.content)
-            settings_link = parsed_html.find_class('course-status')[0].find_class('action-edit')[0].find('a')
-            self.assertIsNotNone(settings_link)
-            self.assertEqual(settings_link.get('href'), reverse_course_url('settings_handler', self.course.id))
-
-        outline_url = reverse_course_url('course_handler', self.course.id)
-        response = self.client.get(outline_url, {}, HTTP_ACCEPT='text/html')
-
-        # A course with the default release date should display as "Unscheduled"
-        self.assertEqual(_get_release_date(response), 'Unscheduled')
-        _assert_settings_link_present(response)
-
-        self.course.start = datetime.datetime(2014, 1, 1, tzinfo=pytz.utc)
-        modulestore().update_item(self.course, ModuleStoreEnum.UserID.test)
-        response = self.client.get(outline_url, {}, HTTP_ACCEPT='text/html')
-
-        self.assertEqual(_get_release_date(response), get_default_time_display(self.course.start))
-        _assert_settings_link_present(response)
-
    def _create_test_data(self, course_module, create_blocks=False, publish=True, block_types=None):
        """
        Create data for test.
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -171,7 +171,6 @@
    margin-right: ($baseline*1.5);
  }

-
  // UI: general action list styles (section and subsection)
  // --------------------
  .expand-collapse {
@@ -184,9 +183,8 @@
    margin-bottom: $baseline;

    .status-release,
-    .status-pacing,
    .status-highlights-enabled,
-    .status-checklist {
+    .status-studio-frontend {
      @extend %t-copy-base;

      display: inline-block;
@@ -202,13 +200,11 @@
    }

    .status-highlights-enabled {
-      margin-left: $baseline * 1.6;
+      vertical-align: top;
    }

    .status-release-label,
    .status-release-value,
-    .status-pacing-label,
-    .status-pacing-value,
    .status-highlights-enabled-label,
    .status-highlights-enabled-value,
    .status-highlights-enabled-info,
@@ -218,14 +214,7 @@
      margin-bottom: 0;
    }

-    .status-release-label,
-    .status-pacing-label,
-    .status-highlights-enabled-label {
-      margin-right: ($baseline/4);
-    }
-
    .status-release-value,
-    .status-pacing-value,
    .status-highlights-enabled-value {
      @extend %t-strong;
      font-size: smaller;
@@ -236,6 +225,11 @@
      margin-left: $baseline / 2;
    }

+    .status-release-label,	
+    .status-highlights-enabled-label {	
+      margin-right: ($baseline/4);	
+    }
+
    .status-highlights-enabled-value.button {
      @extend %btn-primary-blue;
      @extend %sizing;
--- a/cms/templates/course_outline.html
+++ b/cms/templates/course_outline.html
@@ -7,8 +7,8 @@ from cms.djangoapps.contentstore.config.waffle_utils import should_show_checklis
 from util.date_utils import get_default_time_display
 from django.utils.translation import ugettext as _
 from openedx.core.djangolib.js_utils import js_escaped_string, dump_js_escaped_json
-from contentstore.utils import reverse_usage_url
 from openedx.core.djangolib.markup import HTML, Text
+from django.core.urlresolvers import reverse
 %>
 <%block name="title">${_("Course Outline")}</%block>
 <%block name="bodyclass">is-signedin course view-outline</%block>
@@ -157,32 +157,17 @@ from openedx.core.djangolib.markup import HTML, Text
    <section class="content">
        <article class="content-primary" role="main">
            <div class="course-status">
-                <div class="status-release">
-                    <h2 class="status-release-label">${_("Course Start Date")}</h2>
-                    <br>
-                    <p class="status-release-value">${course_release_date}</p>
-                    <ul class="status-actions">
-                      <li class="action-item action-edit">
-                        <a href="${settings_url}" class="edit-button action-button" data-tooltip="${_("Edit Start Date")}">
-                            <span class="icon fa fa-pencil" aria-hidden="true"></span>
-                            <span class="action-button-text sr">${_("Edit Start Date")}</span>
-                        </a>
-                      </li>
-                    </ul>
-                </div>
-                <div class="status-pacing">
-                    <h2 class=status-pacing-label>${_("Course Pacing")}</h2>
-                    <br>
-                    % if context_course.self_paced:
-                        <p class="status-pacing-value">${_("Self-Paced")}</p>
-                    % else:
-                        <p class="status-pacing-value">${_("Instructor-Paced")}</p>
-                    % endif
-                </div>
-                <div class="status-highlights-enabled"></div>
                % if should_show_checklists_page():
-                <div class="status-checklist">
+                ## set width dynamically depending upon whether course has a start date to ensure spacing looks good
+                % if course_release_date == 'Set Date':
+                    <div style="width: 40%" class="status-studio-frontend">
+                % else:
+                    <div style="width: 50%" class="status-studio-frontend">
+                % endif
                    <%static:studiofrontend entry="courseOutlineHealthCheck">
+                        <% 
+                            course_key = context_course.id
+                        %>
                        {
                            "lang": "${language_code | n, js_escaped_string}",
                            "course": {
@@ -199,11 +184,14 @@ from openedx.core.djangolib.markup import HTML, Text
                            "help_tokens": {
                                "files": "${get_online_help_info(online_help_token())['doc_url'] | n, js_escaped_string}"
                            },
-                            "enable_quality": ${should_show_checklists_quality(request.user, context_course.id) | n, dump_js_escaped_json}
+                            "enable_quality": ${should_show_checklists_quality(request.user, context_course.id) | n, dump_js_escaped_json},
+                            "links": {
+                                "settings": ${reverse('settings_handler', kwargs={'course_key_string': unicode(course_key)})| n, dump_js_escaped_json}
+                            }
                        }
-                    </%static:studiofrontend>
-                     
+                    </%static:studiofrontend> 
                </div>
+                <div class="status-highlights-enabled"></div>
                % endif
            </div>
            <div class="wrapper-dnd"
--- a/package-lock.json
+++ b/package-lock.json
@@ -106,9 +106,9 @@
      }
    },
    "@edx/studio-frontend": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/@edx/studio-frontend/-/studio-frontend-1.15.0.tgz",
-      "integrity": "sha512-67WEbZABKx3yAUWxht8AyyJlm4gj7UqpBtC7R49ZcfSLAjhn9pc4/POCsyzKIs/Aw8HAdwQG5nkvZIKNBMQuIQ==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@edx/studio-frontend/-/studio-frontend-1.16.0.tgz",
+      "integrity": "sha512-gZ0AZnbI+KlzXcmiSggMYcqeFqNafdIwuJPE4nPFrm93d4Zr2CydDTZEbgKswyKnKsFxEqtjz+ySP7NPSeFSzw==",
      "requires": {
        "@edx/edx-bootstrap": "1.0.0",
        "@edx/paragon": "3.1.2",
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
    "@edx/cookie-policy-banner": "1.1.10",
    "@edx/edx-bootstrap": "0.4.3",
    "@edx/paragon": "2.6.4",
-    "@edx/studio-frontend": "1.15.0",
+    "@edx/studio-frontend": "1.16.0",
    "babel-core": "6.26.0",
    "babel-loader": "6.4.1",
    "babel-plugin-transform-class-properties": "6.24.1",