Add notification to program detail view

ECOM-7385
This commit is contained in:
Matthew Piatetsky
2017-04-07 10:11:16 -04:00
parent 6431d0f675
commit 7330ff99b6
9 changed files with 212 additions and 22 deletions

View File

@@ -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
});
}
}
});
}

View File

@@ -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);

View File

@@ -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) {

View File

@@ -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',

View File

@@ -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;
}
}
}