Merge pull request #16625 from edx/waheed/LEARNER-3206-dates-mobile-fragment-changes

Course dates mobile fragment improvements.

lms/envs/common.py

@@ -545,6 +545,7 @@ MAKO_TEMPLATE_DIRS_BASE = [
     OPENEDX_ROOT / 'core' / 'djangoapps' / 'cors_csrf' / 'templates',
     OPENEDX_ROOT / 'core' / 'djangoapps' / 'dark_lang' / 'templates',
     OPENEDX_ROOT / 'core' / 'lib' / 'license' / 'templates',
+    OPENEDX_ROOT / 'features' / 'course_experience' / 'templates',
 ]
 
 
@@ -1674,6 +1675,18 @@ PIPELINE_CSS = {
         ],
         'output_filename': 'css/lms-learner-dashboard-rtl.css',
     },
+    'style-mobile': {
+        'source_filenames': [
+            'css/lms-mobile.css',
+        ],
+        'output_filename': 'css/lms-mobile.css',
+    },
+    'style-mobile-rtl': {
+        'source_filenames': [
+            'css/lms-mobile-rtl.css',
+        ],
+        'output_filename': 'css/lms-mobile-rtl.css',
+    },
 }
 
 

lms/static/sass/_build-mobile.scss

+// ------------------------------
+// Mobile: Shared Build Compile
+
+// Base build
+@import 'base/build';
+@import 'mobile/main';

lms/static/sass/lms-mobile-rtl.scss

+// ------------------------------
+// Mobile styling
+@import 'bourbon/bourbon';
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
+@import 'build-mobile';

lms/static/sass/lms-mobile.scss

+// ------------------------------
+// Mobile styling
+@import 'bourbon/bourbon';
+@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
+@import 'build-mobile';

lms/static/sass/mobile/_main.scss

+body {
+  @include padding-left($baseline);
+  @include padding-right($baseline);
+
+  background: theme-color("inverse");
+}

openedx/features/course_experience/templates/course_experience/course-dates-fragment.html

@@ -11,28 +11,7 @@ from django.utils.translation import ugettext as _
 ## Should be organized by date, last date appearing at the bottom
 
 % for course_date in course_date_blocks:
-    <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:
-                    <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
-        </div>
-    </div>
+    <%include file="dates-summary.html" args="course_date=course_date" />
 % endfor
 
 <%static:require_module_async module_name="js/dateutil_factory" class_name="DateUtilFactory">

openedx/features/course_experience/templates/course_experience/dates-summary.html

+<%!
+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:
+                <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
+    </div>
+</div>

openedx/features/course_experience/templates/course_experience/mobile/course-dates-fragment.html

+## mako
+
+<%page expression_filter="h"/>
+
+<%namespace name="static" file="../../static_content.html"/>
+
+% for course_date in course_date_blocks:
+    <%include file="../dates-summary.html" args="course_date=course_date"/>
+% endfor
+
+<%static:require_module_async module_name="js/dateutil_factory" class_name="DateUtilFactory">
+    DateUtilFactory.transform(".localized-datetime");
+</%static:require_module_async>

openedx/features/course_experience/tests/views/test_course_dates.py

@@ -38,7 +38,6 @@ class TestCourseDatesFragmentView(ModuleStoreTestCase):
 
     def test_course_dates_fragment(self):
         response = self.client.get(self.dates_fragment_url)
-        self.assertContains(response, 'Important Course Dates')
         self.assertContains(response, 'Today is')
         self.assertContains(response, 'Course End')
 

openedx/features/course_experience/views/course_dates.py

@@ -3,6 +3,7 @@ Fragment for rendering the course dates sidebar.
 """
 from django.http import Http404
 from django.template.loader import render_to_string
+from django.utils.translation import get_language_bidi
 from opaque_keys.edx.keys import CourseKey
 from web_fragments.fragment import Fragment
 
@@ -14,6 +15,8 @@ class CourseDatesFragmentView(EdxFragmentView):
     """
     A fragment to important dates within a course.
     """
+    template_name = 'course_experience/course-dates-fragment.html'
+
     def render_to_fragment(self, request, course_id=None, **kwargs):
         """
         Render the course dates fragment.
@@ -25,8 +28,11 @@ class CourseDatesFragmentView(EdxFragmentView):
         context = {
             'course_date_blocks': course_date_blocks
         }
-        html = render_to_string('course_experience/course-dates-fragment.html', context)
-        return Fragment(html)
+        html = render_to_string(self.template_name, context)
+        dates_fragment = Fragment(html)
+        self.add_fragment_resource_urls(dates_fragment)
+
+        return dates_fragment
 
 
 class CourseDatesFragmentMobileView(CourseDatesFragmentView):
@@ -39,8 +45,23 @@ class CourseDatesFragmentMobileView(CourseDatesFragmentView):
     mechanism to automatically create/recreate session with the server for all
     authenticated requests if the server returns 404.
     """
+    template_name = 'course_experience/mobile/course-dates-fragment.html'
+
     def get(self, request, *args, **kwargs):
         if not request.user.is_authenticated():
             raise Http404
 
         return super(CourseDatesFragmentMobileView, self).get(request, *args, **kwargs)
+
+    def css_dependencies(self):
+        """
+        Returns list of CSS files that this view depends on.
+
+        The helper function that it uses to obtain the list of CSS files
+        works in conjunction with the Django pipeline to ensure that in development mode
+        the files are loaded individually, but in production just the single bundle is loaded.
+        """
+        if get_language_bidi():
+            return self.get_css_dependencies('style-mobile-rtl')
+        else:
+            return self.get_css_dependencies('style-mobile')