ECOM-3201

Updated dashboard UI for empty list of courses and programs

common/djangoapps/student/tests/tests.py

@@ -499,11 +499,11 @@ class DashboardTest(ModuleStoreTestCase):
         self.client.login(username="jack", password="test")
         response = self.client.get(reverse("dashboard"))
 
-        # "Find courses" is shown in the side panel
-        self.assertContains(response, "Find courses")
+        # "Explore courses" is shown in the side panel
+        self.assertContains(response, "Explore courses")
 
         # But other links are hidden in the navigation
-        self.assertNotContains(response, "How it Works")
+        self.assertNotContains(response, "How it works")
         self.assertNotContains(response, "Schools & Partners")
 
     def test_course_mode_info_with_honor_enrollment(self):

lms/static/js/learner_dashboard/program_list_factory.js

@@ -12,6 +12,7 @@
             new CollectionListView({
                 el: '.program-cards-container',
                 childView: ProgramCardView,
+                context: options,
                 collection: new ProgramCollection(options.programsData)
             }).render();
 

lms/static/js/learner_dashboard/views/collection_list_view.js

@@ -1,22 +1,40 @@
 ;(function (define) {
     'use strict';
 
-    define(['backbone'],
-         function(
-             Backbone
-         ) {
+    define(['backbone',
+            'jquery',
+            'underscore',
+            'gettext',
+            'text!../../../templates/learner_dashboard/empty_programs_list.underscore'
+        ],
+        function (Backbone,
+                  $,
+                  _,
+                  gettext,
+                  emptyProgramsListTpl) {
             return Backbone.View.extend({
                 initialize: function(data) {
                     this.childView = data.childView;
+                    this.context = data.context;
                 },
 
                 render: function() {
-                    var childList = [];
-                    this.collection.each(function(program){
-                        var child = new this.childView({model:program});
-                        childList.push(child.el);
-                    }, this);
-                    this.$el.html(childList);
+                    var childList, tpl;
+
+                    if (!this.collection.length) {
+                        if (this.context.xseriesUrl) {
+                            //Only show the xseries advertising panel if the link is passed in
+                            tpl = _.template(emptyProgramsListTpl);
+                            this.$el.html(tpl(this.context));
+                        }
+                    } else {
+                        childList = [];
+                        this.collection.each(function (program) {
+                            var child = new this.childView({model: program});
+                            childList.push(child.el);
+                        }, this);
+                        this.$el.html(childList);
+                    }
                 }
             });
         }

lms/static/js/spec/learner_dashboard/collection_list_view_spec.js

@@ -95,6 +95,7 @@ define([
                 view = new CollectionListView({
                     el: '.program-cards-container',
                     childView: ProgramCardView,
+                    context: {'xseriesUrl': '/programs'},
                     collection: programCollection
                 });
                 view.render();

lms/static/sass/multicourse/_dashboard.scss

@@ -212,9 +212,44 @@
   }
 }
 
+// CASE: empty dashboard
+    .empty-dashboard-message {
+      border: 3px solid $gray-l4;
+      background: $gray-l6;
+      padding: ($baseline*2) 0;
+      text-align: center;
+
+      p {
+        @include font-size(24);
+        color: $lighter-base-font-color;
+        margin-bottom: $baseline;
+        text-shadow: 0 1px rgba(255,255,255, 0.6);
+      }
+
+      a {
+        background-color: $blue;
+        border: 1px solid $blue;
+        box-shadow: 0 1px 8px 0 $shadow-l1;
+        @include box-sizing(border-box);
+        color: $white;
+        font-family: $sans-serif;
+        display: inline-block;
+        letter-spacing: 1px;
+        margin-top: ($baseline/4);
+        margin-left: ($baseline/4);
+        padding: 15px 20px;
+
+        &:hover, &:focus {
+          background: $blue-l2;
+          text-decoration: none;
+        }
+      }
+    }
+
 // +Dashboard - Course Listing
 // ====================
 .dashboard {
+
   .my-courses {
     @include float(left);
     margin: 0;
@@ -231,43 +266,6 @@
       }
     }
 
-    // CASE: empty dashboard
-    .empty-dashboard-message {
-      padding: ($baseline*2) 0;
-      text-align: center;
-
-      p {
-        color: $lighter-base-font-color;
-        font-style: italic;
-        margin-bottom: $baseline;
-        text-shadow: 0 1px rgba(255,255,255, 0.6);
-      }
-
-      a {
-        background: rgb(240,240,240);
-        @include background-image($button-bg-image);
-        background-color: $button-bg-color;
-        border: 1px solid $border-color-2;
-        border-radius: 4px;
-        box-shadow: 0 1px 8px 0 $shadow-l1;
-        @include box-sizing(border-box);
-        color: $base-font-color;
-        font-family: $sans-serif;
-        display: inline-block;
-        letter-spacing: 1px;
-        @include margin-left($baseline/4);
-        padding: 5px 10px;
-        text-shadow: 0 1px rgba(255,255,255, 0.6);
-
-        &:hover, &:focus {
-          color: $link-color;
-          text-decoration: none;
-        }
-      }
-    }
-
-    // ====================
-
     // UI: course list
     .listing-courses {
       @extend %ui-no-list;

lms/static/sass/views/_program-list.scss

@@ -86,3 +86,67 @@ $pl-button-color: #0079bc;
     @include span-columns(3);
   }
 }
+
+// CASE: empty list of programs
+  .empty-programs-message {
+    border: 3px solid $gray-l4;
+    background: $gray-l6;
+    padding: ($baseline*2) 0;
+    text-align: center;
+
+    p {
+      @include font-size(24);
+      color: $lighter-base-font-color;
+      margin-bottom: $baseline;
+      text-shadow: 0 1px rgba(255,255,255, 0.6);
+    }
+
+    a {
+      @include box-sizing(border-box);
+      background-color: $blue;
+      border: 1px solid $blue;
+      box-shadow: 0 1px 8px 0 $shadow-l1;
+      color: $white;
+      font-family: $sans-serif;
+      display: inline-block;
+      letter-spacing: 1px;
+      margin-top: ($baseline/4);
+      margin-left: ($baseline/4);
+      padding: 15px 20px;
+
+      &:hover, &:focus {
+        background: $blue-l2;
+        text-decoration: none;
+      }
+    }
+
+    .find-xseries-programs {
+      @extend %btn-pl-black-base;
+      .action-xseries-icon {
+        @include float(left);
+        @include margin-right($baseline*0.4);
+
+        display: inline;
+        background: url('#{$static-path}/images/icon-sm-xseries-white.png') no-repeat;
+        background-color: transparent;
+
+        width: ($baseline*1.1);
+        height: ($baseline*1.1);
+      }
+      &:hover,
+      &:focus {
+
+        .action-xseries-icon {
+          @include float(left);
+          @include margin-right($baseline*0.4);
+
+          display: inline;
+          background: url('#{$static-path}/images/icon-sm-xseries-black.png') no-repeat;
+          background-color: transparent;
+
+          width: ($baseline*1.1);
+          height: ($baseline*1.1);
+        }
+      }
+    }
+  }

lms/templates/dashboard.html

@@ -103,12 +103,13 @@ from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_str
       </ul>
     % else:
       <section class="empty-dashboard-message">
-        <p>${_("Looks like you haven't enrolled in any courses yet.")}</p>
+        <p>${_("You are not enrolled in any courses yet.")}</p>
 
         % if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
           <a href="${marketing_link('COURSES')}">
-            ${_("Find courses now!")}
+            ${_("Explore courses")}
           </a>
+
         %endif
       </section>
     % endif

lms/templates/learner_dashboard/empty_programs_list.underscore

@@ -0,0 +1,9 @@
+
+    <section class="empty-programs-message">
+        <p><%- gettext('You are not enrolled in any XSeries Programs yet.') %></p>
+            <a class="find-xseries-programs" href="<%- xseriesUrl %>">
+                <i class="action-xseries-icon" aria-hidden="true"></i>
+                <span><%- gettext('Explore XSeries Programs') %></span>
+            </a>
+    </section>
+