From 3ad963b8a7323755c8451b1322aacf0a62bb3068 Mon Sep 17 00:00:00 2001
From: Nicholas D'Alfonso <ndalfonso@edx.org>
Date: Fri, 20 Dec 2019 14:08:42 -0500
Subject: [PATCH] AA-3 course dates cleanup

-change Important Course Dates to Upcoming Dates
-remove today's date
-left align date, right aling rest of info
---
 .../courseware/tests/test_date_summary.py     | 16 ++-----
 lms/static/images/calendar-alt-regular.svg    |  1 +
 .../sass/features/_course-experience.scss     | 43 ++++++++++++++-----
 .../course-dates-fragment.html                | 13 +++---
 .../course_experience/dates-summary.html      | 33 +++++++-------
 .../tests/views/test_course_dates.py          |  1 -
 .../tests/views/test_course_home.py           |  4 --
 .../course_experience/views/course_dates.py   |  2 +-
 8 files changed, 62 insertions(+), 51 deletions(-)
 create mode 100644 lms/static/images/calendar-alt-regular.svg

diff --git a/lms/djangoapps/courseware/tests/test_date_summary.py b/lms/djangoapps/courseware/tests/test_date_summary.py
index 580164e485..7f39f211dc 100644
--- a/lms/djangoapps/courseware/tests/test_date_summary.py
+++ b/lms/djangoapps/courseware/tests/test_date_summary.py
@@ -176,12 +176,9 @@ class CourseDateSummaryTest(SharedModuleStoreTestCase):
             self.client.login(username=user.username, password=TEST_PASSWORD)
 
             html_elements = [
-                '<h3 class="hd hd-6 handouts-header">Important Course Dates</h3>',
+                '<h3 class="hd hd-6 handouts-header">Upcoming Dates</h3>',
                 '<div class="date-summary-container">',
-                '<div class="date-summary date-summary-todays-date">',
-                '<span class="hd hd-6 heading localized-datetime"',
-                'data-datetime="2015-01-02 00:00:00+00:00"',
-                u'data-string="Today is {date}"',
+                '<p class="hd hd-6 date localized-datetime"',
                 'data-timezone="None"'
             ]
             url = reverse(url_name, args=(course.id,))
@@ -204,12 +201,9 @@ class CourseDateSummaryTest(SharedModuleStoreTestCase):
             response = self.client.get(url, follow=True)
 
             html_elements = [
-                '<h3 class="hd hd-6 handouts-header">Important Course Dates</h3>',
+                '<h3 class="hd hd-6 handouts-header">Upcoming Dates</h3>',
                 '<div class="date-summary-container">',
-                '<div class="date-summary date-summary-todays-date">',
-                '<span class="hd hd-6 heading localized-datetime"',
-                'data-datetime="2015-01-02 00:00:00+00:00"',
-                u'data-string="Today is {date}"',
+                '<p class="hd hd-6 date localized-datetime"',
                 'data-timezone="America/Los_Angeles"'
             ]
             for html in html_elements:
@@ -235,7 +229,6 @@ class CourseDateSummaryTest(SharedModuleStoreTestCase):
             url = reverse(url_name, args=(course.id,))
             response = self.client.get(url, follow=True)
             html_elements = [
-                u'data-string="in 1 day - {date}"',
                 'data-datetime="2015-01-03 00:00:00+00:00"'
             ]
             for html in html_elements:
@@ -255,7 +248,6 @@ class CourseDateSummaryTest(SharedModuleStoreTestCase):
             url = reverse(url_name, args=(course.id,))
             response = self.client.get(url, follow=True)
             html_elements = [
-                u'data-string="in 1 day - {date}"',
                 'data-datetime="2015-01-03 00:00:00+00:00"',
                 'data-timezone="America/Los_Angeles"'
             ]
diff --git a/lms/static/images/calendar-alt-regular.svg b/lms/static/images/calendar-alt-regular.svg
new file mode 100644
index 0000000000..1e90abcbba
--- /dev/null
+++ b/lms/static/images/calendar-alt-regular.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="calendar-alt" class="svg-inline--fa fa-calendar-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"></path></svg>
\ No newline at end of file
diff --git a/lms/static/sass/features/_course-experience.scss b/lms/static/sass/features/_course-experience.scss
index 70b7789846..0d3e0544cf 100644
--- a/lms/static/sass/features/_course-experience.scss
+++ b/lms/static/sass/features/_course-experience.scss
@@ -457,9 +457,10 @@ button.accordion-trigger, button.prerequisite-button {
 .date-summary-container {
   .date-summary {
     @include clearfix;
-    @include border-left(3px solid $gray-300);
 
-    padding: $baseline/2;
+    display: flex;
+    justify-content: space-between;
+    padding: $baseline/2 $baseline/2 $baseline/2 0;
 
     .heading {
       font-size: 0.9rem;
@@ -469,18 +470,38 @@ button.accordion-trigger, button.prerequisite-button {
       color: theme-color("dark");
     }
 
-    .description {
-      margin-top: $baseline/2;
-      margin-bottom: $baseline/2;
-      display: inline-block;
+    .left-column {
+      flex: 5%;
+
+      .calendar-icon {
+        margin-top: 3px;
+        height: 1em;
+        width: auto;
+        background: url('#{$static-path}/images/calendar-alt-regular.svg');
+        background-repeat: no-repeat;
+      }
     }
 
-    .date-summary-link {
-      font-weight: $font-semibold;
+    .right-column {
+      flex: 85%;
 
-      a {
-        color: $link-color;
-        font-weight: $font-regular;
+      .localized-datetime {
+        font-weight: $font-weight-bold;
+        margin-bottom: 8px;
+      }
+
+      .description {
+        margin-bottom: $baseline/2;
+        display: inline-block;
+      }
+
+      .date-summary-link {
+        font-weight: $font-semibold;
+
+        a {
+          color: $link-color;
+          font-weight: $font-regular;
+        }
       }
     }
 
diff --git a/openedx/features/course_experience/templates/course_experience/course-dates-fragment.html b/openedx/features/course_experience/templates/course_experience/course-dates-fragment.html
index 1339148c24..2464682db7 100644
--- a/openedx/features/course_experience/templates/course_experience/course-dates-fragment.html
+++ b/openedx/features/course_experience/templates/course_experience/course-dates-fragment.html
@@ -7,12 +7,13 @@
 <%!
 from django.utils.translation import ugettext as _
 %>
-<h3 class="hd hd-6 handouts-header">${_("Important Course Dates")}</h3>
-## Should be organized by date, last date appearing at the bottom
-
-% for course_date in course_date_blocks:
-    <%include file="dates-summary.html" args="course_date=course_date" />
-% endfor
+% if len(course_date_blocks) > 0:
+    <h3 class="hd hd-6 handouts-header">${_("Upcoming Dates")}</h3>
+    ## Should be organized by date, last date appearing at the bottom
+    % for course_date_block in course_date_blocks:
+        <%include file="dates-summary.html" args="course_date=course_date_block" />
+    % endfor
+% endif
 
 <%static:require_module_async module_name="js/dateutil_factory" class_name="DateUtilFactory">
     DateUtilFactory.transform('.localized-datetime');
diff --git a/openedx/features/course_experience/templates/course_experience/dates-summary.html b/openedx/features/course_experience/templates/course_experience/dates-summary.html
index b13035bad0..36952923c8 100644
--- a/openedx/features/course_experience/templates/course_experience/dates-summary.html
+++ b/openedx/features/course_experience/templates/course_experience/dates-summary.html
@@ -4,23 +4,24 @@ from django.utils.translation import ugettext as _
 <%page args="course_date" expression_filter="h"/>
 <div class="date-summary-container">
     <div class="date-summary date-summary-${course_date.css_class}">
-        % if course_date.title:
-            % if course_date.title == 'current_datetime':
-                <span class="hd hd-6 heading localized-datetime" data-datetime="${course_date.date}" data-string="${_(u'Today is {date}')}" data-timezone="${user_timezone}" data-language="${user_language}"></span>
-            % else:
+        <div class="left-column">
+            <div class="calendar-icon"></div>
+        </div>
+        <div class="right-column">
+            % if course_date.date:
+                <p class="hd hd-6 date localized-datetime" data-format="shortDate" data-datetime="${course_date.date}" data-timezone="${user_timezone}" data-language="${user_language}"></p>
+            % endif
+            % if course_date.title:
                 <span class="hd hd-6 heading">${course_date.title}</span>
             % endif
-        % endif
-        % if course_date.date and course_date.title != 'current_datetime':
-            <p class="hd hd-6 date localized-datetime" data-format="shortDate" data-datetime="${course_date.date}" data-timezone="${user_timezone}" data-language="${user_language}" data-string="${_(course_date.relative_datestring)}"></p>
-        % endif
-        % if course_date.description:
-            <p class="description">${course_date.description}</p>
-        % endif
-        % if course_date.link and course_date.link_text:
-            <span class="date-summary-link">
-                <a href="${course_date.link}">${course_date.link_text}</a>
-            </span>
-        % endif
+            % if course_date.description:
+                <p class="description">${course_date.description}</p>
+            % endif
+            % if course_date.link and course_date.link_text:
+                <span class="date-summary-link">
+                    <a href="${course_date.link}">${course_date.link_text}</a>
+                </span>
+            % endif
+        </div>
     </div>
 </div>
diff --git a/openedx/features/course_experience/tests/views/test_course_dates.py b/openedx/features/course_experience/tests/views/test_course_dates.py
index 35a6905416..db81ed41b6 100644
--- a/openedx/features/course_experience/tests/views/test_course_dates.py
+++ b/openedx/features/course_experience/tests/views/test_course_dates.py
@@ -41,7 +41,6 @@ class TestCourseDatesFragmentView(ModuleStoreTestCase):
 
     def test_course_dates_fragment(self):
         response = self.client.get(self.dates_fragment_url)
-        self.assertContains(response, 'Today is')
         self.assertContains(response, 'Course End')
 
         self.client.logout()
diff --git a/openedx/features/course_experience/tests/views/test_course_home.py b/openedx/features/course_experience/tests/views/test_course_home.py
index e9301a1c84..1b3309b231 100644
--- a/openedx/features/course_experience/tests/views/test_course_home.py
+++ b/openedx/features/course_experience/tests/views/test_course_home.py
@@ -70,7 +70,6 @@ from .test_course_updates import create_course_update, remove_course_updates
 TEST_PASSWORD = 'test'
 TEST_CHAPTER_NAME = 'Test Chapter'
 TEST_COURSE_TOOLS = 'Course Tools'
-TEST_COURSE_TODAY = 'Today is'
 TEST_BANNER_CLASS = '<div class="course-expiration-message">'
 TEST_WELCOME_MESSAGE = '<h2>Welcome!</h2>'
 TEST_UPDATE_MESSAGE = '<h2>Test Update!</h2>'
@@ -311,7 +310,6 @@ class TestCourseHomePageAccess(CourseHomePageTestCase):
 
         # Verify that the course tools and dates are always shown
         self.assertContains(response, TEST_COURSE_TOOLS)
-        self.assertContains(response, TEST_COURSE_TODAY)
 
         is_anonymous = user_type is CourseUserType.ANONYMOUS
         is_enrolled = user_type is CourseUserType.ENROLLED
@@ -365,7 +363,6 @@ class TestCourseHomePageAccess(CourseHomePageTestCase):
 
         # Verify that the course tools and dates are always shown
         self.assertContains(response, TEST_COURSE_TOOLS)
-        self.assertContains(response, TEST_COURSE_TODAY)
 
         # Verify that welcome messages are never shown
         self.assertNotContains(response, TEST_WELCOME_MESSAGE)
@@ -639,7 +636,6 @@ class TestCourseHomePageAccess(CourseHomePageTestCase):
         response = self.client.get(course_home_url(audit_only_course))
         self.assertEqual(response.status_code, 200)
         self.assertContains(response, TEST_COURSE_TOOLS)
-        self.assertContains(response, TEST_COURSE_TODAY)
         self.assertNotContains(response, TEST_BANNER_CLASS)
 
     @mock.patch.dict(settings.FEATURES, {'DISABLE_START_DATES': False})
diff --git a/openedx/features/course_experience/views/course_dates.py b/openedx/features/course_experience/views/course_dates.py
index 72dca8fa61..204a273494 100644
--- a/openedx/features/course_experience/views/course_dates.py
+++ b/openedx/features/course_experience/views/course_dates.py
@@ -28,7 +28,7 @@ class CourseDatesFragmentView(EdxFragmentView):
         course_date_blocks = get_course_date_blocks(course, request.user)
 
         context = {
-            'course_date_blocks': course_date_blocks
+            'course_date_blocks': [block for block in course_date_blocks if block.title != 'current_datetime']
         }
         html = render_to_string(self.template_name, context)
         dates_fragment = Fragment(html)