Merge pull request #10521 from edx/peter-fogg/update-date-display

Update date summary blocks.

lms/djangoapps/courseware/date_summary.py

@@ -5,8 +5,10 @@ course-run-specific date which will be displayed to the user.
 """
 from datetime import datetime
 
+from babel.dates import format_timedelta
 from django.core.urlresolvers import reverse
 from django.utils.translation import ugettext as _
+from django.utils.translation import to_locale, get_language
 from edxmako.shortcuts import render_to_string
 from lazy import lazy
 import pytz
@@ -68,7 +70,23 @@ class DateSummary(object):
         """Return the template context used to render this summary block."""
         date = ''
         if self.date is not None:
-            date = self.date.strftime(self.date_format)
+            # Translators: relative_date is a fuzzy description of the
+            # time from now until absolute_date. For example,
+            # absolute_date might be "Jan 01, 2020", and if today were
+            # December 5th, 2020, relative_date would be "1 month".
+            locale = to_locale(get_language())
+            try:
+                relative_date = format_timedelta(self.date - datetime.now(pytz.UTC), locale=locale)
+            # Babel doesn't have translations for Esperanto, so we get
+            # a KeyError when testing translations with
+            # ?preview-lang=eo. This should not happen with any other
+            # languages. See https://github.com/python-babel/babel/issues/107
+            except KeyError:
+                relative_date = format_timedelta(self.date - datetime.now(pytz.UTC))
+            date = _("in {relative_date} - {absolute_date}").format(
+                relative_date=relative_date,
+                absolute_date=self.date.strftime(self.date_format),
+            )
         return {
             'title': self.title,
             'date': date,
@@ -110,6 +128,7 @@ class TodaysDate(DateSummary):
     """
     css_class = 'todays-date'
     is_enabled = True
+    date_format = '%b %d, %Y (%H:%M {utc})'.format(utc=_('UTC'))
 
     # The date is shown in the title, no need to display it again.
     def get_context(self):

lms/djangoapps/courseware/tests/test_date_summary.py

@@ -146,11 +146,11 @@ class CourseDateSummaryTest(SharedModuleStoreTestCase):
         block = TodaysDate(self.course, self.user)
         self.assertTrue(block.is_enabled)
         self.assertEqual(block.date, datetime.now(pytz.UTC))
-        self.assertEqual(block.title, 'Today is Jan 02, 2015')
+        self.assertEqual(block.title, 'Today is Jan 02, 2015 (00:00 UTC)')
         self.assertNotIn('date-summary-date', block.render())
 
     @freezegun.freeze_time('2015-01-02')
-    def test_date_render(self):
+    def test_todays_date_render(self):
         self.setup_course_and_user()
         block = TodaysDate(self.course, self.user)
         self.assertIn('Jan 02, 2015', block.render())
@@ -162,6 +162,12 @@ class CourseDateSummaryTest(SharedModuleStoreTestCase):
         block = CourseStartDate(self.course, self.user)
         self.assertEqual(block.date, self.course.start)
 
+    @freezegun.freeze_time('2015-01-02')
+    def test_start_date_render(self):
+        self.setup_course_and_user()
+        block = CourseStartDate(self.course, self.user)
+        self.assertIn('in 1 day - Jan 03, 2015', block.render())
+
     ## CourseEndDate
 
     def test_course_end_date_during_course(self):

lms/static/sass/_developer.scss

@@ -380,10 +380,6 @@
     background-color: $gray-l4;
     @include border-left(3px solid $gray-l3);
 
-    .heading {
-      @include float(left);
-    }
-
     .description {
       margin-top: $baseline/2;
       margin-bottom: $baseline/2;
@@ -402,13 +398,17 @@
     }
 
     .date {
-      @include float(right);
       color: $lighter-base-font-color;
       font-size: 80%;
     }
 
     &-todays-date {
       @include border-left(3px solid $blue);
+
+      .heading {
+        font-weight: $font-regular;
+        font-size: 80%;
+      }
     }
 
     &-verified-upgrade-deadline {