Mobile UI changes

lms/djangoapps/learner_dashboard/programs.py

@@ -61,7 +61,8 @@ def render_to_fragment(self, request, **kwargs):
         context = {
             'marketing_url': get_program_marketing_url(programs_config, mobile_only),
             'programs': meter.engaged_programs,
-            'progress': meter.progress()
+            'progress': meter.progress(),
+            'mobile_only': bool(mobile_only)
         }
         html = render_to_string('learner_dashboard/programs_fragment.html', context)
         programs_fragment = Fragment(html)

lms/static/js/learner_dashboard/program_list_factory.js

@@ -3,6 +3,7 @@ import ProgramCardView from './views/program_card_view';
 import ProgramCollection from './collections/program_collection';
 import ProgressCollection from './collections/program_progress_collection';
 import SidebarView from './views/sidebar_view';
+import HeaderView from './views/program_list_header_view';
 
 function ProgramListFactory(options) {
     const progressCollection = new ProgressCollection();
@@ -12,6 +13,13 @@ function ProgramListFactory(options) {
         options.progressCollection = progressCollection; // eslint-disable-line no-param-reassign
     }
 
+    if (options.programsData.length) {
+        if (!options.mobileOnly) {
+            new HeaderView({
+                context: options,
+            }).render();
+        }
+
     new CollectionListView({
         el: '.program-cards-container',
         childView: ProgramCardView,
@@ -30,5 +38,5 @@ function ProgramListFactory(options) {
         }).render();
     }
 }
-
+}
 export { ProgramListFactory }; // eslint-disable-line import/prefer-default-export

lms/static/js/learner_dashboard/views/program_list_header_view.js

@@ -0,0 +1,37 @@
+import Backbone from 'backbone';
+
+import HtmlUtils from 'edx-ui-toolkit/js/utils/html-utils';
+
+import programListHeaderTpl from '../../../templates/learner_dashboard/program_list_header_view.underscore';
+
+class ProgramListHeaderView extends Backbone.View {
+    constructor(options) {
+        const defaults = {
+            el: '.js-program-list-header',
+        };
+        super(Object.assign({}, defaults, options));
+    }
+
+    initialize({ context }) {
+        this.context = context;
+        this.tpl = HtmlUtils.template(programListHeaderTpl);
+        this.programAndSubscriptionData = context.programsData
+            .map((programData) => ({
+                programData,
+                subscriptionData: context.subscriptionCollection
+                    ?.findWhere({
+                        resource_id: programData.uuid,
+                        subscription_state: 'active',
+                    })
+                    ?.toJSON(),
+            }))
+            .filter(({ subscriptionData }) => !!subscriptionData);
+        this.render();
+    }
+
+    render() {
+        HtmlUtils.setHtml(this.$el, this.tpl(this.context));
+    }
+}
+
+export default ProgramListHeaderView;

lms/templates/learner_dashboard/program_list_header_view.underscore

@@ -0,0 +1,2 @@
+<h2><%- gettext('My programs') %></h2>
+<div class="js-program-list-alerts program-list-alerts program-subscription-alert-wrapper mr-md-3"></div>

lms/templates/learner_dashboard/programs_fragment.html

@@ -10,18 +10,30 @@
 from django.utils.translation import ugettext as _
 %>
 
+% if mobile_only:
+<div class="program-list-wrapper grid-container py-0">
+    <div class="program-list-container col-12 col-md-9">
+        <div class="program-cards-container col pt-4"></div>
+    </div>
+    <div class="sidebar col-12 col-md-3"></div>
+</div>
+% else:
 <div class="program-list-wrapper grid-container">
-    <h2 class="collection-title">${_("Programs")}</h2>
-    <div class="program-cards-container col"></div>
-    <div class="sidebar col col-last"></div>
+    <div class="program-list-container col-12 col-md-9">
+        <div class="js-program-list-header"></div>
+        <div class="program-cards-container col"></div>
+    </div>
+    <div class="sidebar col-12 col-md-3"></div>
 </div>
+% endif
 
 <%block name="js_extra">
 <%static:webpack entry="ProgramListFactory">
 ProgramListFactory({
     marketingUrl: '${marketing_url | n, js_escaped_string}',
     programsData: ${programs | n, dump_js_escaped_json},
-    userProgress: ${progress | n, dump_js_escaped_json}
+    userProgress: ${progress | n, dump_js_escaped_json},
+    mobileOnly: ${mobile_only | n, dump_js_escaped_json}
 });
 </%static:webpack>
 </%block>