Skip to content

Commit

Permalink
Mobile UI changes (#492)
Browse files Browse the repository at this point in the history
* mobile ui changes

* add bracket

---------

Co-authored-by: Muhammad Faraz  Maqsood <[email protected]>
  • Loading branch information
Faraz32123 and Muhammad Faraz Maqsood authored Jan 15, 2024
1 parent b26e0c4 commit 4e17475
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 6 deletions.
3 changes: 2 additions & 1 deletion lms/djangoapps/learner_dashboard/programs.py
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
10 changes: 9 additions & 1 deletion lms/static/js/learner_dashboard/program_list_factory.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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,
Expand All @@ -30,5 +38,5 @@ function ProgramListFactory(options) {
}).render();
}
}

}
export { ProgramListFactory }; // eslint-disable-line import/prefer-default-export
37 changes: 37 additions & 0 deletions lms/static/js/learner_dashboard/views/program_list_header_view.js
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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>
20 changes: 16 additions & 4 deletions lms/templates/learner_dashboard/programs_fragment.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

0 comments on commit 4e17475

Please sign in to comment.