diff --git a/lms/static/js/learner_analytics_dashboard/LearnerAnalyticsDashboard.jsx b/lms/static/js/learner_analytics_dashboard/LearnerAnalyticsDashboard.jsx index 08f5632cc1..e6bfb40d43 100644 --- a/lms/static/js/learner_analytics_dashboard/LearnerAnalyticsDashboard.jsx +++ b/lms/static/js/learner_analytics_dashboard/LearnerAnalyticsDashboard.jsx @@ -49,9 +49,15 @@ function getStreakIcons(count) { )); } +function getStreakEncouragement(count) { + const action = (count > 0) ? 'Maintain' : 'Start'; + + return `${action} your active streak by`; +} + function getStreakString(count) { const unit = (count ===1) ? 'week' : 'weeks'; - return `Active ${count} ${unit} in a row`; + return (count > 0) ? `Active ${count} ${unit} in a row` : false; } export function LearnerAnalyticsDashboard(props) { @@ -107,21 +113,23 @@ export function LearnerAnalyticsDashboard(props) { -
0} - )}> +

Timing

Course due dates

- {week_streak > 0 && -
+
+

Week streak

+ {week_streak > 0 && -

Week streak

-

{getStreakString(week_streak)}

-
- } + } +

{getStreakString(week_streak)}

+

{getStreakEncouragement(week_streak)}

+
    +
  • Answering problems
  • +
  • Participating in discussions
  • +
  • Watching course videos
  • +
+
{weekly_active_users.toLocaleString('en', {useGrouping:true})} diff --git a/lms/static/sass/features/_learner-analytics-dashboard.scss b/lms/static/sass/features/_learner-analytics-dashboard.scss index b861edf31f..0c4e9a64f7 100644 --- a/lms/static/sass/features/_learner-analytics-dashboard.scss +++ b/lms/static/sass/features/_learner-analytics-dashboard.scss @@ -244,7 +244,7 @@ $trophy-gold: #f39c12; color: $font-color; .streak-icon-wrapper { - margin-bottom: 10px; + margin: 10px 0; } .fa-trophy { @@ -256,6 +256,14 @@ $trophy-gold: #f39c12; .section-heading { margin-bottom: 0; } + + .streak-encouragement { + margin-bottom: 5px; + } + + .streak-criteria { + margin-bottom: 20px; + } } .active-users-wrapper {