Add notification to program detail view
ECOM-7385
This commit is contained in:
@@ -9,6 +9,7 @@
|
||||
'js/learner_dashboard/models/course_enroll_model',
|
||||
'js/learner_dashboard/views/upgrade_message_view_2017',
|
||||
'js/learner_dashboard/views/certificate_status_view_2017',
|
||||
'js/learner_dashboard/views/expired_notification_view',
|
||||
'js/learner_dashboard/views/course_enroll_view_2017',
|
||||
'text!../../../templates/learner_dashboard/course_card_2017.underscore'
|
||||
],
|
||||
@@ -21,6 +22,7 @@
|
||||
EnrollModel,
|
||||
UpgradeMessageView,
|
||||
CertificateStatusView,
|
||||
ExpiredNotificationView,
|
||||
CourseEnrollView,
|
||||
pageTpl
|
||||
) {
|
||||
@@ -50,7 +52,8 @@
|
||||
|
||||
postRender: function() {
|
||||
var $upgradeMessage = this.$('.upgrade-message'),
|
||||
$certStatus = this.$('.certificate-status');
|
||||
$certStatus = this.$('.certificate-status'),
|
||||
$expiredNotification = this.$('.expired-notification');
|
||||
|
||||
this.enrollView = new CourseEnrollView({
|
||||
$parentEl: this.$('.course-actions'),
|
||||
@@ -78,6 +81,13 @@
|
||||
$upgradeMessage.remove();
|
||||
$certStatus.remove();
|
||||
}
|
||||
|
||||
if (this.model.get('expired')) {
|
||||
this.expiredNotification = new ExpiredNotificationView({
|
||||
$el: $expiredNotification,
|
||||
model: this.model
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
(function(define) {
|
||||
'use strict';
|
||||
define(['backbone',
|
||||
'jquery',
|
||||
'underscore',
|
||||
'gettext',
|
||||
'edx-ui-toolkit/js/utils/html-utils',
|
||||
'text!../../../templates/learner_dashboard/expired_notification.underscore'
|
||||
],
|
||||
function(
|
||||
Backbone,
|
||||
$,
|
||||
_,
|
||||
gettext,
|
||||
HtmlUtils,
|
||||
expiredNotificationTpl
|
||||
) {
|
||||
return Backbone.View.extend({
|
||||
expiredNotificationTpl: HtmlUtils.template(expiredNotificationTpl),
|
||||
|
||||
initialize: function(options) {
|
||||
this.$el = options.$el;
|
||||
this.render();
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var data = this.model.toJSON();
|
||||
HtmlUtils.setHtml(this.$el, this.expiredNotificationTpl(data));
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
}).call(this, define || RequireJS.define);
|
||||
@@ -5,9 +5,9 @@
|
||||
'jquery',
|
||||
'edx-ui-toolkit/js/utils/html-utils',
|
||||
'text!../../../templates/learner_dashboard/program_header_view_2017.underscore',
|
||||
'text!/static/images/programs/micromasters-program-details.svg',
|
||||
'text!/static/images/programs/xseries-program-details.svg',
|
||||
'text!/static/images/programs/professional-certificate-program-details.svg'
|
||||
'text!../../../images/programs/micromasters-program-details.svg',
|
||||
'text!../../../images/programs/xseries-program-details.svg',
|
||||
'text!../../../images/programs/professional-certificate-program-details.svg'
|
||||
],
|
||||
function(Backbone, $, HtmlUtils, pageTpl, MicroMastersLogo,
|
||||
XSeriesLogo, ProfessionalCertificateLogo) {
|
||||
|
||||
@@ -31,6 +31,7 @@
|
||||
'js/groups/views/cohorts_dashboard_factory',
|
||||
'js/header_factory',
|
||||
'js/learner_dashboard/program_details_factory',
|
||||
'js/learner_dashboard/program_details_factory_2017',
|
||||
'js/learner_dashboard/program_list_factory',
|
||||
'js/search/course/course_search_factory',
|
||||
'js/search/dashboard/dashboard_search_factory',
|
||||
|
||||
@@ -357,7 +357,7 @@
|
||||
margin-bottom: 10px;
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
height: 100px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.section {
|
||||
@@ -366,7 +366,7 @@
|
||||
margin-right: 40px;
|
||||
margin-left: 15px;
|
||||
|
||||
@media(min-width: $bp-screen-md) {
|
||||
@media(min-width: $bp-screen-sm) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
@@ -496,5 +496,29 @@
|
||||
}
|
||||
}
|
||||
|
||||
.expired-notification {
|
||||
display: inline-block;
|
||||
padding-top: 5px;
|
||||
width: 300px;
|
||||
|
||||
@media(min-width: $bp-screen-sm) {
|
||||
padding-top: 10px;
|
||||
width: 500px;
|
||||
}
|
||||
@media(min-width: $bp-screen-md) {
|
||||
width: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.expired-icon {
|
||||
float: left;
|
||||
color: palette(primary, dark);
|
||||
}
|
||||
|
||||
.expired-text {
|
||||
overflow: hidden;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user