Updated Page Header/Title

acceptance_tests/pages.py

@@ -66,7 +66,7 @@ class CourseEnrollmentGeographyPage(CoursePage):
         self.page_url += '/enrollment/geography/'
 
     def is_browser_on_page(self):
-        return super(CourseEnrollmentGeographyPage, self).is_browser_on_page() and 'Enrollment Geography' in self.browser.title
+        return super(CourseEnrollmentGeographyPage, self).is_browser_on_page() and 'Geographic Distribution' in self.browser.title
 
 
 class CourseEngagementContentPage(CoursePage):

analytics_dashboard/courses/templates/courses/enrollment_activity.html

@@ -34,7 +34,6 @@ Individual course-centric enrollment activity view.
 
     <h4 class="section-title">
       <span class="section-title-value">{% blocktrans %}Enrollment Statistics{% endblocktrans %}</span>
-      <span class="section-title-note small">{% blocktrans %}How many students are in my course?{% endblocktrans %}</span>
     </h4>
 
     <hr/>

analytics_dashboard/courses/templates/courses/enrollment_geography.html

@@ -17,12 +17,6 @@ Individual course-centric enrollment geography view.
 {% block content %}
 
   <section class="view-section" data-section="enrollment-location">
-    <h4 class="section-title">
-      <span class="section-title-value">{% trans "Geographic Distribution" %}</span>
-      <span class="section-title-note small">{% trans "Where are my students learning?" %}</span>
-    </h4>
-
-    <hr class="has-emphasis"/>
     <div class="row">
       <div class="col-sm-12">
              <span class="section-title-value small">

analytics_dashboard/courses/tests/test_views.py

@@ -278,7 +278,7 @@ class CourseEnrollmentGeographyViewTests(CourseEnrollmentViewTestMixin, TestCase
         self.assertEqual(response.status_code, 200)
 
         # check page title
-        self.assertEqual(context['page_title'], 'Enrollment Geography')
+        self.assertEqual(context['page_title'], _('Geographic Distribution'))
 
         page_data = json.loads(context['page_data'])
         expected_date = 'January 01, 2014'

analytics_dashboard/courses/views.py

@@ -28,6 +28,7 @@ class CourseContextMixin(object):
     """
     # Title displayed on the page
     page_title = None
+    page_subtitle = None
 
     # Page name used for usage tracking/analytics
     page_name = None
@@ -45,6 +46,7 @@ class CourseContextMixin(object):
         context = {
             'course_id': self.course_id,
             'page_title': self.page_title,
+            'page_subtitle': self.page_subtitle,
             'js_data': {
                 'course': {
                     'courseId': self.course_id
@@ -256,6 +258,7 @@ class JSONResponseMixin(object):
 class EnrollmentActivityView(EnrollmentTemplateView):
     template_name = 'courses/enrollment_activity.html'
     page_title = _('Enrollment Activity')
+    page_subtitle = _('How many students are in my course?')
     page_name = 'enrollment_activity'
     active_secondary_nav_item = 'activity'
 
@@ -300,7 +303,8 @@ class EnrollmentActivityView(EnrollmentTemplateView):
 
 class EnrollmentGeographyView(EnrollmentTemplateView):
     template_name = 'courses/enrollment_geography.html'
-    page_title = _('Enrollment Geography')
+    page_title = _('Geographic Distribution')
+    page_subtitle = _('Where are my students learning?')
     page_name = 'enrollment_geography'
     active_secondary_nav_item = 'geography'
 

analytics_dashboard/static/sass/_developer.scss

@@ -51,7 +51,6 @@
 
 // --------------------
 
-
 .section-title-button {
   float: right;
 }
@@ -191,3 +190,15 @@ table.dataTable thead th.sorting_asc:after,
 table.dataTable thead th.sorting_desc:after {
   color: $edx-blue;
 }
+
+.page-title-outer {
+  .page-subtitle {
+    @extend .text-muted;
+    font-size: ($font-size-h1 * 0.5);
+
+    @media (min-width: $screen-md-min) {
+      text-align: right;
+      margin-top: ($line-height-computed * 1.5);
+    }
+  }
+}

analytics_dashboard/templates/base.html

@@ -46,7 +46,14 @@
           {% block content-outer %}
             <main class="col-xs-12 main" id="content">
                 <div class="view-head">
-                    {% block header-text %}<h1 class="clearfix">{{ page_title }} <small>{{ page_subtitle }}</small></h1>{% endblock %}
+                    {% block header-text %}
+                      <div class="row page-title-outer">
+                        <div class="col-md-6 col-xs-12">
+                          <h1>{{ page_title }}</h1>
+                        </div>
+                      <div class="col-md-6 col-xs-12"><div class="page-subtitle">{{ page_subtitle|default_if_none:'' }}</div></div>
+                      </div>
+                    {% endblock %}
                 </div>
 
                 <div class="view-intro">