Merge pull request #503 from edx/ajpal/hide-charts

Changes to Learner Detail UI/A11y

analytics_dashboard/static/apps/learners/detail/templates/email.underscore

-<% if (!_(email).isEmpty()) { %>
-    <a href="mailto:<%- email %>">
-        <i class="fa fa-envelope-o" aria-hidden="true"></i>
-        <%- email %>
-    </a>
-<% } %>

analytics_dashboard/static/apps/learners/detail/templates/learner-detail.underscore

@@ -7,21 +7,19 @@
     </div>
 </section>
 
-<div class="section-heading bordered fake-tab">
-    <h4 class="section-title"><%- engagement %></h4>
-    <span class="section-heading-note small learner-email"></span>
-</div>
-
-<div class="section-heading">
-    <h4 class="section-title"><%- activity %></h4>
-</div>
-<div class="learner-engagement-timeline-container"></div>
-
-<div id="table-section">
+<section class="view-section" data-section="learner-engagement" aria-hidden="true">
     <div class="section-heading">
-        <h4 class="section-title"> <%- table %> </h4>
+        <h4 class="section-title"><%- activity %></h4>
     </div>
-    <div class="section-content section-data-table" data-role="engagement-table">
-        <div class="learner-engagement-table-container"></div>
+    <div class="section-content">
+        <div class="learner-engagement-timeline-container"></div>
+        <div id="table-section">
+            <div class="section-heading">
+                <h4 class="section-title"> <%- table %> </h4>
+            </div>
+            <div class="section-content section-data-table" data-role="engagement-table">
+                <div class="learner-engagement-table-container"></div>
+            </div>
+        </div>
     </div>
-</div>
+</section>
\ No newline at end of file

analytics_dashboard/static/apps/learners/detail/templates/learner-names.underscore

-<div class="learner-username"><%- username %></div>
 <div class="learner-name"><%- name %></div>
+<div class="learner-username"><%- username %></div>
+<div class="learner-email">
+	<% if (!_(email).isEmpty()) { %>
+	    <a href="mailto:<%- email %>">
+	        <i class="fa fa-envelope-o" aria-hidden="true"></i>
+	        <%- email %>
+	    </a>
+	<% } %>
+</div>
\ No newline at end of file

analytics_dashboard/static/apps/learners/detail/views/learner-detail.js

@@ -8,7 +8,6 @@ define(function (require) {
         Utils = require('utils/utils'),
 
         AlertView = require('learners/common/views/alert-view'),
-        LearnerEmailView = require('learners/detail/views/learner-email'),
         LearnerEngagementTableView = require('learners/detail/views/engagement-table'),
         LearnerEngagementTimelineView = require('learners/detail/views/engagement-timeline'),
         LearnerNameView = require('learners/detail/views/learner-names'),
@@ -25,8 +24,8 @@ define(function (require) {
 
         templateHelpers: function () {
             return {
-                // Translators: e.g. Student engagement
-                engagement: gettext('Engagement'),
+                // Translators: e.g. Student engagement activity
+                engagement: gettext('Engagement Activity'),
                 activity: gettext('Daily Activity'),
                 table: gettext('Activity Over Time')
             };
@@ -34,7 +33,6 @@ define(function (require) {
 
         regions: {
             learnerSummary: '.learner-summary-container',
-            learnerEmail: '.learner-email',
             names: '.learner-names',
             enrollment: '.learner-enrollment',
             cohort: '.learner-cohort',
@@ -86,10 +84,6 @@ define(function (require) {
                 });
             }
 
-            this.showChildView('learnerEmail', new LearnerEmailView({
-                model: learnerModel
-            }));
-
             this.showChildView('names', new LearnerNameView({
                 model: learnerModel
             }));

analytics_dashboard/static/apps/learners/detail/views/learner-email.js

-define(function (require) {
-    'use strict';
-
-    var _ = require('underscore'),
-        Marionette = require('marionette');
-
-    return Marionette.ItemView.extend({
-        template: _.template(require('text!learners/detail/templates/email.underscore')),
-        modelEvents: {
-            'change:email': 'render'
-        }
-    });
-
-});

analytics_dashboard/static/apps/learners/detail/views/learner-names.js

@@ -7,7 +7,8 @@ define(function (require) {
     return Marionette.ItemView.extend({
         template: _.template(require('text!learners/detail/templates/learner-names.underscore')),
         modelEvents: {
-            change: 'render'
+            change: 'render',
+            'change:email': 'render'
         }
     });
 

analytics_dashboard/static/sass/_developer.scss

@@ -851,24 +851,13 @@ table.dataTable thead th.sorting_desc:after {
 // styles for the learner details summary
 .learner-summary-container {
 
-  .learner-username {
-    font-size: $font-size-large;
-  }
-
   .learner-name {
-    font-size: $font-size-large * 1.5;
+    font-size: $font-size-large;
   }
 
   // e.g. "enrollment" or "cohort"
   .learner-summary-field {
-    color: $gray-l1;
+    color: $edx-gray-d2;
   }
 
 }
-
-.learner-detail-container {
-  // this heading will be replaced with a tab in the future
-  .bordered.fake-tab {
-    border-bottom-width: 3px;
-  }
-}