Skip to content

E
edx-platform
Commit a466b437 by AlasdairSwan
Options

ECOM-7386 Added a program progress circle to program details page

parent 64372dd5
Showing with 738 additions and 85 deletions
common/static/common/js/components/views/progress_circle_view.js 0 → 100644
(function(define) {
'use strict';
define(['backbone',
'jquery',
'underscore',
'gettext',
'text!../../../templates/components/progress_circle_view.underscore',
'text!../../../templates/components/progress_circle_segment.underscore'
],
function(
Backbone,
$,
_,
gettext,
progressViewTpl,
progressSegmentTpl
) {
return Backbone.View.extend({
x: 22,
y: 22,
radius: 16,
degrees: 180,
strokeWidth: 1.2,
viewTpl: _.template(progressViewTpl),
segmentTpl: _.template(progressSegmentTpl),
initialize: function() {
var progress = this.model.get('progress');
this.model.set({
totalCourses: progress.completed + progress.in_progress + progress.not_started
});
this.render();
},
render: function() {
var data = $.extend({}, this.model.toJSON(), {
circleSegments: this.getProgressSegments(),
x: this.x,
y: this.y,
radius: this.radius,
strokeWidth: this.strokeWidth
});
this.$el.html(this.viewTpl(data));
},
getDegreeIncrement: function(total) {
return 360 / total;
},
getOffset: function(total) {
return 100 - ((1 / total) * 100);
},
getProgressSegments: function() {
var progressHTML = [],
total = this.model.get('totalCourses'),
segmentDash = 2 * Math.PI * this.radius,
degreeInc = this.getDegreeIncrement(total),
data = {
// Remove strokeWidth to show a gap between the segments
dashArray: segmentDash - this.strokeWidth,
degrees: this.degrees,
offset: this.getOffset(total),
x: this.x,
y: this.y,
radius: this.radius,
strokeWidth: this.strokeWidth
},
i,
segmentData;
for (i = 0; i < total; i++) {
segmentData = $.extend({}, data, {
classList: (i >= this.model.get('progress').completed) ? 'incomplete' : 'complete',
degrees: data.degrees + (i * degreeInc)
});
// Want the incomplete segments to have no gaps
if (segmentData.classList === 'incomplete' && (i + 1) < total) {
segmentData.dashArray = segmentDash;
}
progressHTML.push(this.segmentTpl(segmentData));
}
return progressHTML.join('');
}
});
}
);
}).call(this, define || RequireJS.define);
common/static/common/js/spec/components/progress_circle_view_spec.js 0 → 100644
define([
'backbone',
'jquery',
'edx-ui-toolkit/js/utils/spec-helpers/spec-helpers',
'common/js/components/views/progress_circle_view'
], function(Backbone, $, SpecHelpers, ProgressCircleView) {
'use strict';
describe('Progress Circle View', function() {
var view = null,
context = {
title: 'XSeries Progress',
label: 'Earned Certificates',
progress: {
completed: 2,
in_progress: 1,
not_started: 3
}
},
testCircle,
testText,
initView,
getProgress,
testProgress;
testCircle = function(progress) {
var $circle = view.$('.progress-circle');
expect($circle.find('.complete').length).toEqual(progress.completed);
expect($circle.find('.incomplete').length).toEqual(progress.in_progress + progress.not_started);
};
testText = function(progress) {
var $numbers = view.$('.numbers'),
total = progress.completed + progress.in_progress + progress.not_started;
expect(view.$('.progress-heading').html()).toEqual('XSeries Progress');
expect(parseInt($numbers.find('.complete').html(), 10)).toEqual(progress.completed);
expect(parseInt($numbers.find('.total').html(), 10)).toEqual(total);
};
getProgress = function(x, y, z) {
return {
completed: x,
in_progress: y,
not_started: z
};
};
testProgress = function(x, y, z) {
var progress = getProgress(x, y, z);
view = initView(progress);
view.render();
testCircle(progress);
testText(progress);
};
initView = function(progress) {
var data = $.extend({}, context, {
progress: progress
});
return new ProgressCircleView({
el: '.js-program-progress',
model: new Backbone.Model(data)
});
};
beforeEach(function() {
setFixtures('<div class="js-program-progress"></div>');
});
afterEach(function() {
view.remove();
});
it('should exist', function() {
var progress = getProgress(2, 1, 3);
view = initView(progress);
view.render();
expect(view).toBeDefined();
});
it('should render the progress circle based on the passed in model', function() {
var progress = getProgress(2, 1, 3);
view = initView(progress);
view.render();
testCircle(progress);
});
it('should render the progress text based on the passed in model', function() {
var progress = getProgress(2, 1, 3);
view = initView(progress);
view.render();
testText(progress);
});
SpecHelpers.withData({
'should render the progress text with only completed courses': [5, 0, 0],
'should render the progress text with only in progress courses': [0, 4, 0],
'should render the progress circle with only not started courses': [0, 0, 5],
'should render the progress text with no completed courses': [0, 2, 3],
'should render the progress text with no in progress courses': [2, 0, 7],
'should render the progress text with no not started courses': [2, 4, 0]
}, testProgress);
});
});
common/static/common/js/spec/main_requirejs.js
...@@ -164,6 +164,7 @@ ...@@ -164,6 +164,7 @@
'common/js/spec/components/paginated_view_spec.js', 'common/js/spec/components/paginated_view_spec.js',
'common/js/spec/components/paging_header_spec.js', 'common/js/spec/components/paging_header_spec.js',
'common/js/spec/components/paging_footer_spec.js', 'common/js/spec/components/paging_footer_spec.js',
'common/js/spec/components/progress_circle_view_spec.js',
'common/js/spec/components/search_field_spec.js', 'common/js/spec/components/search_field_spec.js',
'common/js/spec/components/view_utils_spec.js', 'common/js/spec/components/view_utils_spec.js',
'common/js/spec/utils/edx.utils.validate_spec.js' 'common/js/spec/utils/edx.utils.validate_spec.js'
......
common/static/common/templates/components/progress_circle_segment.underscore 0 → 100644
<circle class="<%- classList %>"
r="<%- radius %>" cx="<%- x %>" cy="<%- y %>"
transform="rotate(<%- degrees %>, <%- x %>, <%- y %>)"
stroke-width="<%- strokeWidth %>"
fill="none"
stroke-dasharray="<%- dashArray %>"
stroke-dashoffset="<%- offset %>">
</circle>
common/static/common/templates/components/progress_circle_view.underscore 0 → 100644
<% if (title) { %>
<h2 class="progress-heading"><%- title %></h2>
<% } %>
<div class="progress-circle-wrapper">
<svg class="progress-circle" viewBox="0 0 44 44" aria-hidden="true">
<circle class="js-circle bg" r="<%- radius %>" cx="<%- x %>" cy="<%- y %>" stroke-width="<%- strokeWidth %>" fill="none"></circle>
<%= circleSegments %>
</svg>
<div class="progress-label">
<div class="numbers">
<span class="complete"><%- progress.completed %></span>/<span class="total"><%- totalCourses %></span>
</div>
<div class="label"><% if (label) { %><%- label %><% } %></div>
</div>
</div>
lms/static/js/learner_dashboard/views/certificate_list_view.js 0 → 100644
(function(define) {
'use strict';
define(['backbone',
'jquery',
'underscore',
'gettext',
'text!../../../templates/learner_dashboard/certificate_list.underscore'
],
function(
Backbone,
$,
_,
gettext,
certificateTpl
) {
return Backbone.View.extend({
tpl: _.template(certificateTpl),
initialize: function(options) {
this.title = options.title || false;
this.render();
},
render: function() {
var data = {
title: this.title,
certificateList: this.collection.toJSON()
};
this.$el.html(this.tpl(data));
}
});
}
);
}).call(this, define || RequireJS.define);
lms/static/js/learner_dashboard/views/program_details_sidebar_view.js
(function(define) { (function(define) {
'use strict'; 'use strict';
define(['backbone', define([
'backbone',
'jquery', 'jquery',
'underscore', 'underscore',
'gettext', 'gettext',
'js/learner_dashboard/views/explore_new_programs_view', 'edx-ui-toolkit/js/utils/html-utils',
'js/learner_dashboard/views/certificate_view', 'edx-ui-toolkit/js/utils/string-utils',
'text!../../../templates/learner_dashboard/sidebar.underscore' 'common/js/components/views/progress_circle_view',
'js/learner_dashboard/views/certificate_list_view',
'text!../../../templates/learner_dashboard/program_details_sidebar.underscore'
], ],
function( function(
Backbone, Backbone,
$, $,
_, _,
gettext, gettext,
NewProgramsView, HtmlUtils,
StringUtils,
ProgramProgressView,
CertificateView, CertificateView,
sidebarTpl sidebarTpl
) { ) {
return Backbone.View.extend({ return Backbone.View.extend({
el: '.sidebar', tpl: HtmlUtils.template(sidebarTpl),
tpl: _.template(sidebarTpl), initialize: function(options) {
this.courseModel = options.courseModel || {};
initialize: function(data) { this.certificateCollection = options.certificateCollection || [];
this.context = data.context; this.programCertificate = this.getProgramCertificate();
this.render();
}, },
render: function() { render: function() {
this.$el.html(this.tpl(this.context)); var data = $.extend({}, this.model.toJSON(), {
programCertificate: this.programCertificate ?
this.programCertificate.toJSON() : {}
});
HtmlUtils.setHtml(this.$el, this.tpl(data));
this.postRender(); this.postRender();
}, },
postRender: function() { postRender: function() {
this.newProgramsView = new NewProgramsView({ if (!this.programCertificate) {
context: this.context this.progressModel = new Backbone.Model({
title: StringUtils.interpolate(
gettext('{type} Progress'),
{type: this.model.get('type')}
),
label: gettext('Earned Certificates'),
progress: {
completed: this.courseModel.get('completed').length,
in_progress: this.courseModel.get('in_progress').length,
not_started: this.courseModel.get('not_started').length
}
}); });
this.newCertificateView = new CertificateView({ this.programProgressView = new ProgramProgressView({
context: this.context el: '.js-program-progress',
model: this.progressModel
}); });
} }
if (this.certificateCollection.length) {
this.certificateView = new CertificateView({
el: '.js-course-certificates',
collection: this.certificateCollection,
title: gettext('Earned Certificates')
});
}
},
getProgramCertificate: function() {
var certificate = this.certificateCollection.findWhere({type: 'program'}),
base = '/static/images/programs/program-certificate-';
if (certificate) {
certificate.set({
img: base + this.getType() + '.gif'
});
}
return certificate;
},
getType: function() {
var type = this.model.get('type').toLowerCase();
return type.replace(/\s+/g, '-');
}
}); });
} }
); );
......
lms/static/js/learner_dashboard/views/program_details_view_2017.js
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
this.options = options; this.options = options;
this.programModel = new Backbone.Model(this.options.programData); this.programModel = new Backbone.Model(this.options.programData);
this.courseData = new Backbone.Model(this.options.courseData); this.courseData = new Backbone.Model(this.options.courseData);
this.certificateCollection = new Backbone.Collection(this.options.certificateData);
this.completedCourseCollection = new CourseCardCollection( this.completedCourseCollection = new CourseCardCollection(
this.courseData.get('completed') || [], this.courseData.get('completed') || [],
this.options.userPreferences this.options.userPreferences
...@@ -61,7 +62,7 @@ ...@@ -61,7 +62,7 @@
remainingCount: remainingCount, remainingCount: remainingCount,
completedCount: completedCount completedCount: completedCount
}; };
data = $.extend(data, this.options.programData); data = $.extend(data, this.programModel.toJSON());
HtmlUtils.setHtml(this.$el, this.tpl(data)); HtmlUtils.setHtml(this.$el, this.tpl(data));
this.postRender(); this.postRender();
}, },
...@@ -99,10 +100,12 @@ ...@@ -99,10 +100,12 @@
}).render(); }).render();
} }
new SidebarView({ this.sidebarView = new SidebarView({
el: '.sidebar', el: '.js-program-sidebar',
context: this.options model: this.programModel,
}).render(); courseModel: this.courseData,
certificateCollection: this.certificateCollection
});
} }
}); });
} }
......
lms/static/js/spec/learner_dashboard/program_details_sidebar_view_spec.js 0 → 100644
define([
'backbone',
'js/learner_dashboard/views/program_details_sidebar_view'
], function(Backbone, ProgramSidebarView) {
'use strict';
describe('Program Progress View', function() {
/* jslint maxlen: 500 */
var view = null,
// Don't bother linting the format of the test data
/* eslint-disable */
data = {
programData: {"subtitle": "Explore water management concepts and technologies.", "overview": "\u003ch3\u003eXSeries Program Overview\u003c/h3\u003e\n\u003cp\u003eSafe water supply and hygienic water treatment are prerequisites for the well-being of communities all over the world. This Water XSeries, offered by the water management experts of TU Delft, will give you a unique opportunity to gain access to world-class knowledge and expertise in this field.\u003c/p\u003e\n\u003cp\u003eThis 3-course series will cover questions such as: How does climate change affect water cycle and public safety? How to use existing technologies to treat groundwater and surface water so we have safe drinking water? How do we take care of sewage produced in the cities on a daily basis? You will learn what are the physical, chemical and biological processes involved; carry out simple experiments at home; and have the chance to make a basic design of a drinking water treatment plant\u003c/p\u003e", "weeks_to_complete": null, "corporate_endorsements": [], "video": null, "type": "XSeries", "applicable_seat_types": ["verified", "professional", "credit"], "max_hours_effort_per_week": null, "transcript_languages": ["en-us"], "expected_learning_items": [], "uuid": "988e7ea8-f5e2-4d2e-998a-eae4ad3af322", "title": "Water Management", "languages": ["en-us"], "subjects": [{"card_image_url": "https://stage.edx.org/sites/default/files/subject/image/card/engineering.jpg", "name": "Engineering", "subtitle": "Learn about engineering and more from the best universities and institutions around the world.", "banner_image_url": "https://stage.edx.org/sites/default/files/engineering-1440x210.jpg", "slug": "engineering", "description": "Enroll in an online introduction to engineering course or explore specific areas such as structural, mechanical, electrical, software or aeronautical engineering. EdX offers free online courses in thermodynamics, robot mechanics, aerodynamics and more from top engineering universities."}, {"card_image_url": "https://stage.edx.org/sites/default/files/subject/image/card/biology.jpg", "name": "Biology \u0026 Life Sciences", "subtitle": "Learn about biology and life sciences and more from the best universities and institutions around the world.", "banner_image_url": "https://stage.edx.org/sites/default/files/plant-stomas-1440x210.jpg", "slug": "biology-life-sciences", "description": "Take free online biology courses in genetics, biotechnology, biochemistry, neurobiology and other disciplines. Courses include Fundamentals of Neuroscience from Harvard University, Molecular Biology from MIT and an Introduction to Bioethics from Georgetown."}, {"card_image_url": "https://stage.edx.org/sites/default/files/subject/image/card/science.jpg", "name": "Science", "subtitle": "Learn about science and more from the best universities and institutions around the world.", "banner_image_url": "https://stage.edx.org/sites/default/files/neuron-1440x210.jpg", "slug": "science", "description": "Science is one of the most popular subjects on edX and online courses range from beginner to advanced levels. Areas of study include neuroscience, genotyping, DNA methylation, innovations in environmental science, modern astrophysics and more from top universities and institutions worldwide."}, {"card_image_url": "https://stage.edx.org/sites/default/files/subject/image/card/physics.jpg", "name": "Physics", "subtitle": "Learn about physics and more from the best universities and institutions around the world.", "banner_image_url": "https://stage.edx.org/sites/default/files/header-bg-physics.png", "slug": "physics", "description": "Find online courses in quantum mechanics and magnetism the likes of MIT and Rice University or get an introduction to the violent universe from Australian National University."}, {"card_image_url": "https://stage.edx.org/sites/default/files/subject/image/card/engery.jpg", "name": "Energy \u0026 Earth Sciences", "subtitle": "Learn about energy and earth sciences and more from the best universities and institutions around the world.", "banner_image_url": "https://stage.edx.org/sites/default/files/energy-1440x210.jpg", "slug": "energy-earth-sciences", "description": "EdX\u2019s online Earth sciences courses cover very timely and important issues such as climate change and energy sustainability. Learn about natural disasters and our ability to predict them. Explore the universe with online courses in astrophysics, space plasmas and fusion energy."}, {"card_image_url": "https://stage.edx.org/sites/default/files/subject/image/card/environmental-studies.jpg", "name": "Environmental Studies", "subtitle": "Learn about environmental studies, and more from the best universities and institutions around the world.", "banner_image_url": "https://stage.edx.org/sites/default/files/environment-studies-1440x210.jpg", "slug": "environmental-studies", "description": "Take online courses in environmental science, natural resource management, environmental policy and civic ecology. Learn how to solve complex problems related to pollution control, water treatment and environmental sustainability with free online courses from leading universities worldwide."}, {"card_image_url": "https://stage.edx.org/sites/default/files/subject/image/card/health.jpg", "name": "Health \u0026 Safety", "subtitle": "Learn about health and safety and more from the best universities and institutions around the world.", "banner_image_url": "https://stage.edx.org/sites/default/files/health-and-safety-1440x210.jpg", "slug": "health-safety", "description": "From public health initiatives to personal wellbeing, find online courses covering a wide variety of health and medical subjects. Enroll in free courses from major universities on topics like epidemics, global healthcare and the fundamentals of clinical trials."}, {"card_image_url": "https://stage.edx.org/sites/default/files/subject/image/card/electronics.jpg", "name": "Electronics", "subtitle": "Learn about electronics and more from the best universities and institutions around the world.", "banner_image_url": "https://stage.edx.org/sites/default/files/electronics-a-1440x210.jpg", "slug": "electronics", "description": "The online courses in electrical engineering explore computation structures, electronic interfaces and the principles of electric circuits. Learn the engineering behind drones and autonomous robots or find out how organic electronic devices are changing the way humans interact with machines."}], "individual_endorsements": [], "staff": [{"family_name": "Smets", "uuid": "6078b3dd-ade4-457d-9262-7439a5f4b07e", "bio": "Dr. Arno H.M. Smets is Professor in Solar Energy in the Photovoltaics Material and Devices group at the faculty of Electrical Engineering, Mathematics and Computer Science, Delft University of Technology. From 2005-2010 he worked at the Research Center for Photovoltaics at the National Institute of Advanced Industrial Science and Technology (AIST) in Tsukuba Japan. His research work is focused on processing of thin silicon films, innovative materials and new concepts for photovoltaic applications. He is lecturer for BSc and MSc courses on Photovoltaics and Sustainable Energy at TU Delft. His online edX course on Solar Energy attracted over 150,000 students worldwide. He is co-author of the book \u003cem\u003e\u201cSolar Energy. The physics and engineering of photovoltaic conversion technologies and systems.\u201d\u003c/em\u003e", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/arno-smets_x110.jpg", "given_name": "Arno", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": {"organization_name": "Delft University of Technology", "title": "Professor, Electrical Engineering, Mathematics and Computer Science"}, "works": [], "slug": "arno-smets"}, {"family_name": "van de Giesen", "uuid": "0e28153f-4e9f-4080-b56f-43480600ecd7", "bio": "Since July 2004, Nick van de Giesen has held the Van Kuffeler Chair of Water Resources Management of the Faculty of Civil Engineering and Geosciences. He teaches Integrated Water Resources Management and Water Management. His main interests are the modeling of complex water resources systems and the development of science-based decision support systems. The interaction between water systems and their users is the core theme in both research portfolio and teaching curriculum. Since 1 April 2009, he is chairman of the \u003ca href=\"http://www.environment.tudelft.nl\"\u003eDelft Research Initiative Environment\u003c/a\u003e.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/giesen_vd_nick_110p.jpg", "given_name": "Nick", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": null, "works": [], "slug": "nick-van-de-giesen"}, {"family_name": "Russchenberg", "uuid": "8a94bdb9-ac44-4bc1-a3d2-306f391682b4", "bio": "Herman Russchenberg is engaged in intensive and extensive research into the causes of climate change. His own research involves investigating the role played by clouds and dust particles in the atmosphere, but he is also head of the TU Delft Climate Institute, established in March 2012 to bring together TU Delft researchers working on all aspects of climate and climate change. Russchenberg started out in the faculty of Electrical Engineering, conducting research into the influence of the atmosphere (rain, clouds) on satellite signals. After obtaining his PhD in 1992, he shifted his attention to the physics of water vapour, water droplets, dust particles, sunlight, radiation and emissions in the atmosphere. He is now based in the faculty of Civil Engineering and Geosciences.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/russchenberg_herman_110p.jpg", "given_name": "Herman", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": null, "works": [], "slug": "herman-russchenberg"}, {"family_name": "Savenije", "uuid": "4ebdcd93-bb4e-4c0c-9faf-4e513b1a2e33", "bio": "Prof. Savenije was born in 1952 in the Netherlands and studied at the Delft University of Technology, in the Netherlands, where he obtained his MSc in 1977 in Hydrology. As a young graduate hydrologist he worked for six years in Mozambique where he developed a theory on salt intrusion in estuaries and studied the hydrology of international rivers. From 1985-1990 he worked as an international consultant mostly in Asia and Africa. He joined academia in 1990 to complete his PhD in 1992. In 1994 he was appointed Professor of Water Resources Management at the IHE (now UNESCO-IHE, Institute for Water Education) in Delft, the Netherlands. Since 1999, he is Professor of Hydrology at the Delft University of Technology, where he is the head of the Water Resources Section. He is President of the International Association of Hydrological Sciences and Executive Editor of the journal Hydrology and Earth System Sciences.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/savenije_hubert_110p.jpg", "given_name": "Hubert", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": null, "works": [], "slug": "hubert-savenije"}, {"family_name": "Stive", "uuid": "a7364bab-8e9c-4265-bd14-598afac1f086", "bio": "Marcel Stive studied Civil engineering at the Delft University of Technology, where he graduated in 1977 and received his doctorate in 1988. After graduating in 1977 Stive started working at WL-Delft Hydraulics, where he worked until 1992. In 1992 he became a professor at the Polytechnic University of Catalonia in Barcelona, Spain. In 1994 her returned to WL-Delft Hydraulics and at the same time began to work as a professor of Coastal Morphodynamics at the Delft University of Technology. Since 2001 Stive is a professor of Coastal Engineering at Delft University of Technology and he is the scientific director of the Water Research Centre Delft since 2003.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/stive_marcel_110p.jpg", "given_name": "Marcel", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": {"organization_name": "TU Delft", "title": "Professor"}, "works": [], "slug": "marcel-stive"}, {"family_name": "Rietveld", "uuid": "1b70c71d-20cc-487d-be10-4b31baeff559", "bio": "\u003cp\u003eLuuk Rietveld is professor of Urban Water Cycle Technology at Delft University of Technology. After finalizing his studies in Civil Engineering at Delft University of Technology in 1987, he worked, until 1991, as lecturer/researcher in Sanitary Engineering at the Eduardo Mondlane University, Maputo, Mozambique. Between 1991 and 1994, he was employed at the Management Centre for International Co-operation, and since 1994 he has had an appointment at the Department of Water Management of Delft University of Technology. In 2005, he defended his PhD thesis entitled \"Improving Operation of Drinking Water Treatment through Modelling\".\u003c/p\u003e\n\u003cp\u003eLuuk Rietveld\u2019s main research interests are modelling and optimisation of processes in the urban water cycle, and technological innovations in drinking water treatment and water reclamation for industrial purposes. In addition, he has extensive experience in education, in various cultural contexts, and is interested to explore the use of new ways of teaching through activated and blended learning and MOOCs.\u003c/p\u003e", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/rietveld_luuk_110p.jpg", "given_name": "Luuk", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": null, "works": [], "slug": "luuk-rietveld-0"}, {"family_name": "van Halem", "uuid": "4ce9ef2a-19e9-46de-9f34-5d755f26736a", "bio": "Doris van Halem is a tenure track Assistant Professor within the Department of Water Management, section Sanitary Engineering of Delft University of Technology. She graduated from Delft University of Technology in Civil Engineering and Geosciences with a cum laude MSc degree (2007). During her studies she developed an interest in global drinking water challenges, illustrated by her internships in Sri Lanka and Benin, resulting in an MSc thesis \u201cCeramic silver impregnated pot filter for household drinking water treatment in developing countries\u201d. In 2011 she completed her PhD research (with honours) on subsurface iron and arsenic removal for drinking water supply in Bangladesh under the guidance of prof. J.C. van Dijk (TU Delft) and prof. dr. G.L. Amy (Unesco-IHE). Currently she supervises BSc, MSc and PhD students, focusing on inorganic constituent behaviour and trace compound removal during soil passage and drinking water treatment - with a particular interest in smart, pro-poor drinking water solutions.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/doris_van_halem_1.jpg", "given_name": "Doris", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": {"organization_name": "Delft University of Technology", "title": "Assistant Professor, Sanitary Engineering"}, "works": [], "slug": "doris-van-halem-0"}, {"family_name": "Grefte", "uuid": "463c3f1a-95fc-45aa-b7c0-d01b14126f02", "bio": "Anke Grefte is project manager open, online and blended education for the Faculty of Civil Engineering and Geosciences, Delft University of Technology. She graduated from Delft University of Technology in Civil Engineering with a master\u2019s thesis entitled \"Behaviour of particles in a drinking water distribution network; test rig results\". For this thesis Anke was awarded the Gijs Oskam award for best young researcher. In November 2013, she finished her Ph.D. research on the removal of Natural Organic Matter (NOM) fractions by ion exchange and the impact on drinking water treatment processes and biological stability.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/grefte_anke_110p.jpg", "given_name": "Anke", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": null, "works": [], "slug": "anke-grefte-0"}, {"family_name": "Lier", "uuid": "349aa2cc-0107-4632-ad10-869f23966049", "bio": "Jules van Lier is full professor of Environmental Engineering and Wastewater Treatment at the Sanitary Engineering Section of Delft University of Technology and has a 1 day per week posted position at the Unesco-IHE Institute for Water Education, also in Delft Jules van Lier accomplished his PhD on Thermophilic Anaerobic Wastewater Treatment under the supervision of Prof. Gatze Lettinga (1995) at Wageningen University. Throughout his career he has been involved as a senior researcher / project manager in various (inter)national research projects, working on cost-effective water treatment for resource recovery (water, nutrients, biogas, elements). His research projects are focused on closing water cycles in industries and sewage water recovery for irrigated agriculture. The further development of anaerobic treatment technology is his prime focus. In addition to university work he is an Executive Board Member and Scientific Advisor to the LeAF Foundation; regional representative for Western Europe Anaerobic Digestion Specialist group of the International Water Association (IWA); editor of scientific journals (e.g Water Science Technology and Advances in Environmental Research and Development); member of the Paques Technological Advisory Commission; and member of the Advisory Board of World-Waternet, Amsterdam.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/lier_van_jules_110p.jpg", "given_name": "Jules van", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": {"organization_name": "Delft University of Technology", "title": "Professor, Sanitary Engineering"}, "works": [], "slug": "jules-van-lier"}, {"family_name": "Kreuk", "uuid": "c1e50a84-1b09-47b5-b704-5e16309d0cba", "bio": "Merle de Kreuk is a wastewater Associate Professor at the Sanitary Engineering department of the Delft University of Technology. Her research focus is on (municipal and industrial) wastewater treatment systems and anaerobic processes, aiming to link the world of Biotechnology to the Civil Engineering, as well as fundamental research to industrial applications. Her main research topics are hydrolysis processes in anaerobic treatment and granule formation and deterioration. Merle\u2019s PhD and Post-Doc research involved the development of aerobic granular sludge technology and up scaling the technology from a three litre lab scale reactor to the full scale Nereda\u00ae process\u00ae. The first application of aerobic granular sludge technology in the Netherlands was opened in May 2012, and currently many more installations are being built, due to its compactness, low energy use and good effluent characteristics. Her previous work experience also involved the position of water treatment technology innovator at Water authority Hollandse Delta on projects such as the Energy Factory in which 14 water authorities cooperated to develop an energy producing sewage treatment plant.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/kreuk_de_merle_110p.jpg", "given_name": "Merle de", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": {"organization_name": "Delft University of Technology", "title": "Associate Professor, Sanitary Engineering"}, "works": [], "slug": "merle-de-kreuk"}], "marketing_slug": "water-management", "marketing_url": "https://stage.edx.org/xseries/water-management", "status": "active", "credit_redemption_overview": "These courses can be taken in any order.", "card_image_url": "https://stage.edx.org/sites/default/files/card/images/waterxseries_course0.png", "faq": [], "price_ranges": [{"currency": "USD", "max": 15.0, "total": 35.0, "min": 10.0}], "banner_image": {"small": {"url": "https://d385l2sek0vys7.cloudfront.net/media/programs/banner_images/988e7ea8-f5e2-4d2e-998a-eae4ad3af322.small.jpg", "width": 435, "height": 145}, "large": {"url": "https://d385l2sek0vys7.cloudfront.net/media/programs/banner_images/988e7ea8-f5e2-4d2e-998a-eae4ad3af322.large.jpg", "width": 1440, "height": 480}, "medium": {"url": "https://d385l2sek0vys7.cloudfront.net/media/programs/banner_images/988e7ea8-f5e2-4d2e-998a-eae4ad3af322.medium.jpg", "width": 726, "height": 242}, "x-small": {"url": "https://d385l2sek0vys7.cloudfront.net/media/programs/banner_images/988e7ea8-f5e2-4d2e-998a-eae4ad3af322.x-small.jpg", "width": 348, "height": 116}}, "authoring_organizations": [{"description": "Delft University of Technology is the largest and oldest technological university in the Netherlands. Our research is inspired by the desire to increase fundamental understanding, as well as by societal challenges. We encourage our students to be independent thinkers so they will become engineers capable of solving complex problems. Our students have chosen Delft University of Technology because of our reputation for quality education and research.", "tags": ["charter", "contributor"], "name": "Delft University of Technology (TU Delft)", "homepage_url": null, "key": "DelftX", "certificate_logo_image_url": null, "marketing_url": "https://stage.edx.org/school/delftx", "logo_image_url": "https://stage.edx.org/sites/default/files/school/image/banner/delft_logo_200x101_0.png", "uuid": "c484a523-d396-4aff-90f4-bb7e82e16bf6"}], "job_outlook_items": [], "credit_backing_organizations": [], "weeks_to_complete_min": 4, "weeks_to_complete_max": 8, "min_hours_effort_per_week": null},
courseData: {
"completed": [{"owners": [{"uuid": "c484a523-d396-4aff-90f4-bb7e82e16bf6", "key": "DelftX", "name": "Delft University of Technology (TU Delft)"}], "uuid": "4ce7a648-3172-475a-84f3-9f843b2157f3", "title": "Introduction to Water and Climate", "image": {"src": "https://stage.edx.org/sites/default/files/course/image/promoted/wc_home_378x225.jpg", "height": null, "description": null, "width": null}, "key": "Delftx+CTB3300WCx", "course_runs": [{"upgrade_url": null, "image": {"src": "https://stage.edx.org/sites/default/files/course/image/promoted/wc_home_378x225.jpg", "height": null, "description": null, "width": null}, "max_effort": null, "is_enrollment_open": true, "course": "Delftx+CTB3300WCx", "content_language": "en-us", "eligible_for_financial_aid": true, "seats": [{"sku": "18AC1BC", "credit_hours": null, "price": "0.00", "currency": "USD", "upgrade_deadline": null, "credit_provider": null, "type": "honor"}, {"sku": "86A734B", "credit_hours": null, "price": "10.00", "currency": "USD", "upgrade_deadline": null, "credit_provider": null, "type": "verified"}], "course_url": "/courses/course-v1:Delftx+CTB3300WCx+2015_T3/", "availability": "Archived", "transcript_languages": ["en-us"], "staff": [{"family_name": "van de Giesen", "uuid": "0e28153f-4e9f-4080-b56f-43480600ecd7", "bio": "Since July 2004, Nick van de Giesen has held the Van Kuffeler Chair of Water Resources Management of the Faculty of Civil Engineering and Geosciences. He teaches Integrated Water Resources Management and Water Management. His main interests are the modeling of complex water resources systems and the development of science-based decision support systems. The interaction between water systems and their users is the core theme in both research portfolio and teaching curriculum. Since 1 April 2009, he is chairman of the \u003ca href=\"http://www.environment.tudelft.nl\"\u003eDelft Research Initiative Environment\u003c/a\u003e.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/giesen_vd_nick_110p.jpg", "given_name": "Nick", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": null, "works": [], "slug": "nick-van-de-giesen"}, {"family_name": "Russchenberg", "uuid": "8a94bdb9-ac44-4bc1-a3d2-306f391682b4", "bio": "Herman Russchenberg is engaged in intensive and extensive research into the causes of climate change. His own research involves investigating the role played by clouds and dust particles in the atmosphere, but he is also head of the TU Delft Climate Institute, established in March 2012 to bring together TU Delft researchers working on all aspects of climate and climate change. Russchenberg started out in the faculty of Electrical Engineering, conducting research into the influence of the atmosphere (rain, clouds) on satellite signals. After obtaining his PhD in 1992, he shifted his attention to the physics of water vapour, water droplets, dust particles, sunlight, radiation and emissions in the atmosphere. He is now based in the faculty of Civil Engineering and Geosciences.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/russchenberg_herman_110p.jpg", "given_name": "Herman", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": null, "works": [], "slug": "herman-russchenberg"}, {"family_name": "Savenije", "uuid": "4ebdcd93-bb4e-4c0c-9faf-4e513b1a2e33", "bio": "Prof. Savenije was born in 1952 in the Netherlands and studied at the Delft University of Technology, in the Netherlands, where he obtained his MSc in 1977 in Hydrology. As a young graduate hydrologist he worked for six years in Mozambique where he developed a theory on salt intrusion in estuaries and studied the hydrology of international rivers. From 1985-1990 he worked as an international consultant mostly in Asia and Africa. He joined academia in 1990 to complete his PhD in 1992. In 1994 he was appointed Professor of Water Resources Management at the IHE (now UNESCO-IHE, Institute for Water Education) in Delft, the Netherlands. Since 1999, he is Professor of Hydrology at the Delft University of Technology, where he is the head of the Water Resources Section. He is President of the International Association of Hydrological Sciences and Executive Editor of the journal Hydrology and Earth System Sciences.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/savenije_hubert_110p.jpg", "given_name": "Hubert", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": null, "works": [], "slug": "hubert-savenije"}, {"family_name": "Stive", "uuid": "a7364bab-8e9c-4265-bd14-598afac1f086", "bio": "Marcel Stive studied Civil engineering at the Delft University of Technology, where he graduated in 1977 and received his doctorate in 1988. After graduating in 1977 Stive started working at WL-Delft Hydraulics, where he worked until 1992. In 1992 he became a professor at the Polytechnic University of Catalonia in Barcelona, Spain. In 1994 her returned to WL-Delft Hydraulics and at the same time began to work as a professor of Coastal Morphodynamics at the Delft University of Technology. Since 2001 Stive is a professor of Coastal Engineering at Delft University of Technology and he is the scientific director of the Water Research Centre Delft since 2003.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/stive_marcel_110p.jpg", "given_name": "Marcel", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": {"organization_name": "TU Delft", "title": "Professor"}, "works": [], "slug": "marcel-stive"}], "announcement": "2015-06-09T00:00:00Z", "end": "2015-11-04T12:00:00Z", "uuid": "a36f5673-6637-11e6-a8e3-22000bdde520", "title": "Introduction to Water and Climate", "certificate_url": "/certificates/a37c59143d9d422eb6ab11e1053b8eb5", "enrollment_start": null, "start": "2015-09-01T04:00:00Z", "min_effort": null, "short_description": "Explore how climate change, water availability, and engineering innovation are key challenges for our planet.", "hidden": false, "level_type": "Intermediate", "type": "verified", "enrollment_open_date": "Jan 01, 1900", "marketing_url": "https://stage.edx.org/course/introduction-water-climate-delftx-ctb3300wcx-0", "is_course_ended": true, "instructors": [], "full_description": "\u003cp\u003eWater is essential for life on earth and of crucial importance for society. Cycling across the planet and the atmosphere, it also has a major influence on our climate.\u003c/p\u003e\n\u003cp\u003eWeekly modules are hosted by four different professors, all of them being international experts in their field. The course consists of knowledge clips, movies, exercises, discussion and homework assignments. It finishes with an examination.\u003c/p\u003e\n\u003cp\u003eThis course combined with the courses \"Introduction to Drinking Water Treatment\" (new edition to start in January 2016) and \"Introduction to the Treatment of Urban Sewage\" (new edition to start in April 2016) forms the Water XSeries, Faculty of Civil Engineering and Geosciences, TU Delft.\u003c/p\u003e\n\u003cp\u003e\u003cem\u003e\u003cstrong\u003eLICENSE\u003c/strong\u003e\u003cbr /\u003e\nThe course materials of this course are Copyright Delft University of Technology and are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike (CC-BY-NC-SA) 4.0 International License.\u003c/em\u003e\u003c/p\u003e", "key": "course-v1:Delftx+CTB3300WCx+2015_T3", "enrollment_end": null, "reporting_type": "mooc", "advertised_start": null, "mobile_available": true, "modified": "2017-04-06T12:26:52.594942Z", "is_enrolled": false, "pacing_type": "instructor_paced", "video": {"src": "http://www.youtube.com/watch?v=dJEhwq0sXiQ", "image": {"src": "https://stage.edx.org/sites/default/files/course/image/featured-card/wc_home_378x225.jpg", "width": null, "description": null, "height": null}, "description": null}}]}, {"owners": [{"uuid": "c484a523-d396-4aff-90f4-bb7e82e16bf6", "key": "DelftX", "name": "Delft University of Technology (TU Delft)"}], "uuid": "a0aade38-7a50-4afb-97cd-2214c572cc86", "title": "Urban Sewage Treatment", "image": {"src": "https://stage.edx.org/sites/default/files/course/image/promoted/sewage_home_378x225.jpg", "height": null, "description": null, "width": null}, "key": "DelftX+CTB3365STx", "course_runs": [{"upgrade_url": null, "image": {"src": "https://stage.edx.org/sites/default/files/course/image/promoted/sewage_home_378x225.jpg", "height": null, "description": null, "width": null}, "max_effort": null, "is_enrollment_open": true, "course": "DelftX+CTB3365STx", "content_language": "en-us", "eligible_for_financial_aid": true, "seats": [{"sku": "01CDD4F", "credit_hours": null, "price": "0.00", "currency": "USD", "upgrade_deadline": null, "credit_provider": null, "type": "honor"}, {"sku": "B4F253D", "credit_hours": null, "price": "10.00", "currency": "USD", "upgrade_deadline": null, "credit_provider": null, "type": "verified"}], "course_url": "/courses/course-v1:Delftx+CTB3365STx+1T2016/", "availability": "Archived", "transcript_languages": ["en-us"], "staff": [{"family_name": "Lier", "uuid": "349aa2cc-0107-4632-ad10-869f23966049", "bio": "Jules van Lier is full professor of Environmental Engineering and Wastewater Treatment at the Sanitary Engineering Section of Delft University of Technology and has a 1 day per week posted position at the Unesco-IHE Institute for Water Education, also in Delft Jules van Lier accomplished his PhD on Thermophilic Anaerobic Wastewater Treatment under the supervision of Prof. Gatze Lettinga (1995) at Wageningen University. Throughout his career he has been involved as a senior researcher / project manager in various (inter)national research projects, working on cost-effective water treatment for resource recovery (water, nutrients, biogas, elements). His research projects are focused on closing water cycles in industries and sewage water recovery for irrigated agriculture. The further development of anaerobic treatment technology is his prime focus. In addition to university work he is an Executive Board Member and Scientific Advisor to the LeAF Foundation; regional representative for Western Europe Anaerobic Digestion Specialist group of the International Water Association (IWA); editor of scientific journals (e.g Water Science Technology and Advances in Environmental Research and Development); member of the Paques Technological Advisory Commission; and member of the Advisory Board of World-Waternet, Amsterdam.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/lier_van_jules_110p.jpg", "given_name": "Jules van", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": {"organization_name": "Delft University of Technology", "title": "Professor, Sanitary Engineering"}, "works": [], "slug": "jules-van-lier"}, {"family_name": "Kreuk", "uuid": "c1e50a84-1b09-47b5-b704-5e16309d0cba", "bio": "Merle de Kreuk is a wastewater Associate Professor at the Sanitary Engineering department of the Delft University of Technology. Her research focus is on (municipal and industrial) wastewater treatment systems and anaerobic processes, aiming to link the world of Biotechnology to the Civil Engineering, as well as fundamental research to industrial applications. Her main research topics are hydrolysis processes in anaerobic treatment and granule formation and deterioration. Merle\u2019s PhD and Post-Doc research involved the development of aerobic granular sludge technology and up scaling the technology from a three litre lab scale reactor to the full scale Nereda\u00ae process\u00ae. The first application of aerobic granular sludge technology in the Netherlands was opened in May 2012, and currently many more installations are being built, due to its compactness, low energy use and good effluent characteristics. Her previous work experience also involved the position of water treatment technology innovator at Water authority Hollandse Delta on projects such as the Energy Factory in which 14 water authorities cooperated to develop an energy producing sewage treatment plant.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/kreuk_de_merle_110p.jpg", "given_name": "Merle de", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": {"organization_name": "Delft University of Technology", "title": "Associate Professor, Sanitary Engineering"}, "works": [], "slug": "merle-de-kreuk"}], "announcement": "2015-07-24T00:00:00Z", "end": "2016-07-01T22:30:00Z", "uuid": "a36f70c1-6637-11e6-a8e3-22000bdde520", "title": "Introduction to the Treatment of Urban Sewage", "certificate_url": "/certificates/bed3980e67ca40f0b31e309d9dfe9e7e", "enrollment_start": null, "start": "2016-04-12T04:00:00Z", "min_effort": null, "short_description": "Learn about urban water services, focusing on basic sewage treatment technologies.", "hidden": false, "level_type": "Intermediate", "type": "verified", "enrollment_open_date": "Jan 01, 1900", "marketing_url": "https://stage.edx.org/course/introduction-treatment-urban-sewage-delftx-ctb3365stx-0", "is_course_ended": true, "instructors": [], "full_description": "\u003cp\u003eThis course will focus on basic technologies for the treatment of urban sewage. Unit processes involved in the treatment chain will be described as well as the physical, chemical and biological processes involved. There will be an emphasis on water quality and the functionality of each unit process within the treatment chain. After the course one should be able to recognise the process units, describe their function and make simple design calculations on urban sewage treatment plants.\u003c/p\u003e\n\u003cp\u003eThe course consists of 6 modules:\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003eSewage treatment plant overview. In this module you will learn what major pollutants are present in the sewage and why we need to treat sewage prior to discharge to surface waters. The functional units will be briefly discussed\u003c/li\u003e\n\u003cli\u003ePrimary treatment. In this module you learn how coarse material, sand \u0026 grit are removed from the sewage and how to design primary clarification tanks\u003c/li\u003e\n\u003cli\u003eBiological treatment. In this module you learn the basics of the carbon, nitrogen and phosphorous cycle and how biological processes are used to treat the main pollutants of concern.\u003c/li\u003e\n\u003cli\u003eActivated sludge process. In this module you learn the design principles of conventional activated sludge processes including the secondary clarifiers and aeration demand of aeration tanks.\u003c/li\u003e\n\u003cli\u003eNitrogen and phosphorus removal. In this module you learn the principles of biological nitrogen removal as well as phosphorus removal by biological and/or chemical means.\u003c/li\u003e\n\u003cli\u003eSludge treatment. In this module you will the design principles of sludge thickeners, digesters and dewatering facilities for the concentration and stabilisation of excess sewage sludge. Potentials for energy recovery via the produced biogas will be discussed as well as the direct anaerobic treatment of urban sewage in UASB reactors when climate conditions allow.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eThis course in combination with the courses \"\u003ca href=\"https://www.edx.org/course/introduction-water-climate-delftx-ctb3300wcx-0\"\u003eIntroduction to Water and Climate\u003c/a\u003e\" and \"\u003ca href=\"https://www.edx.org/course/introduction-drinking-water-treatment-delftx-ctb3365dwx-0\"\u003eIntroduction to Drinking Water Treatment\u003c/a\u003e\" forms the Water XSeries, by DelftX.\u003c/p\u003e\n\u003chr /\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cem\u003eLICENSE\u003c/em\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eThe course materials of this course are Copyright Delft University of Technology and are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike (CC-BY-NC-SA) 4.0 International License.\u003c/em\u003e\u003c/p\u003e", "key": "course-v1:Delftx+CTB3365STx+1T2016", "enrollment_end": null, "reporting_type": "mooc", "advertised_start": null, "mobile_available": true, "modified": "2017-04-06T12:26:52.679900Z", "is_enrolled": true, "pacing_type": "instructor_paced", "video": {"src": "http://www.youtube.com/watch?v=pcSsOE-F4e8", "image": {"src": "https://stage.edx.org/sites/default/files/course/image/featured-card/sewage_home_378x225.jpg", "width": null, "description": null, "height": null}, "description": null}}]}],
"in_progress": [], "uuid": "988e7ea8-f5e2-4d2e-998a-eae4ad3af322",
"not_started": [{"owners": [{"uuid": "c484a523-d396-4aff-90f4-bb7e82e16bf6", "key": "DelftX", "name": "Delft University of Technology (TU Delft)"}], "uuid": "51275d00-1f3f-462f-8231-ce42821cc1dd", "title": "Solar Energy", "image": {"src": "https://stage.edx.org/sites/default/files/course/image/promoted/solar-energy_378x225.jpg", "height": null, "description": null, "width": null}, "key": "DelftX+ET3034TUx", "course_runs": [{"upgrade_url": null, "image": {"src": "https://stage.edx.org/sites/default/files/course/image/promoted/solar-energy_378x225.jpg", "height": null, "description": null, "width": null}, "max_effort": null, "is_enrollment_open": true, "course": "DelftX+ET3034TUx", "content_language": null, "eligible_for_financial_aid": true, "seats": [{"sku": "E433FA8", "credit_hours": null, "price": "0.00", "currency": "USD", "upgrade_deadline": null, "credit_provider": null, "type": "honor"}], "course_url": "/courses/DelftX/ET3034TUx/2013_Fall/", "availability": "Archived", "transcript_languages": [], "staff": [{"family_name": "Smets", "uuid": "6078b3dd-ade4-457d-9262-7439a5f4b07e", "bio": "Dr. Arno H.M. Smets is Professor in Solar Energy in the Photovoltaics Material and Devices group at the faculty of Electrical Engineering, Mathematics and Computer Science, Delft University of Technology. From 2005-2010 he worked at the Research Center for Photovoltaics at the National Institute of Advanced Industrial Science and Technology (AIST) in Tsukuba Japan. His research work is focused on processing of thin silicon films, innovative materials and new concepts for photovoltaic applications. He is lecturer for BSc and MSc courses on Photovoltaics and Sustainable Energy at TU Delft. His online edX course on Solar Energy attracted over 150,000 students worldwide. He is co-author of the book \u003cem\u003e\u201cSolar Energy. The physics and engineering of photovoltaic conversion technologies and systems.\u201d\u003c/em\u003e", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/arno-smets_x110.jpg", "given_name": "Arno", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": {"organization_name": "Delft University of Technology", "title": "Professor, Electrical Engineering, Mathematics and Computer Science"}, "works": [], "slug": "arno-smets"}], "announcement": "2013-05-08T00:00:00Z", "end": "2013-12-06T10:30:00Z", "uuid": "f33a9660-b5d0-47a9-9bfa-a326d9ed4ef2", "title": "Solar Energy", "certificate_url": null, "enrollment_start": null, "start": "2013-09-16T04:00:00Z", "min_effort": null, "short_description": "Discover the power of solar energy and design a complete photovoltaic system.", "hidden": false, "level_type": null, "type": "honor", "enrollment_open_date": "Jan 01, 1900", "marketing_url": "https://stage.edx.org/course/solar-energy-delftx-et3034tux", "is_course_ended": true, "instructors": [], "full_description": "", "key": "DelftX/ET3034TUx/2013_Fall", "enrollment_end": null, "reporting_type": "mooc", "advertised_start": null, "mobile_available": false, "modified": "2017-04-06T12:26:54.345710Z", "is_enrolled": false, "pacing_type": "instructor_paced", "video": {"src": "http://www.youtube.com/watch?v=LLiNzrIubF0", "image": null, "description": null}}]}, {"owners": [{"uuid": "c484a523-d396-4aff-90f4-bb7e82e16bf6", "key": "DelftX", "name": "Delft University of Technology (TU Delft)"}], "uuid": "7c430382-d477-4bac-9c29-f36c24f1935f", "title": "Drinking Water Treatment", "image": {"src": "https://stage.edx.org/sites/default/files/course/image/promoted/drinking_water_home_378x225.jpg", "height": null, "description": null, "width": null}, "key": "DelftX+CTB3365DWx", "course_runs": [{"upgrade_url": null, "image": {"src": "https://stage.edx.org/sites/default/files/course/image/promoted/drinking_water_home_378x225.jpg", "height": null, "description": null, "width": null}, "max_effort": null, "is_enrollment_open": true, "course": "DelftX+CTB3365DWx", "content_language": "en-us", "eligible_for_financial_aid": true, "seats": [{"sku": "74AC06B", "credit_hours": 100, "price": "15.00", "currency": "USD", "upgrade_deadline": "2016-04-30T00:00:00Z", "credit_provider": "mit", "type": "credit"}, {"sku": "0BBAE34", "credit_hours": null, "price": "0.00", "currency": "USD", "upgrade_deadline": null, "credit_provider": null, "type": "honor"}, {"sku": "8E52FAE", "credit_hours": null, "price": "10.00", "currency": "USD", "upgrade_deadline": "2016-03-25T01:06:00Z", "credit_provider": null, "type": "verified"}], "course_url": "/courses/course-v1:DelftX+CTB3365DWx+1T2016/", "availability": "Current", "transcript_languages": ["en-us"], "staff": [{"family_name": "Rietveld", "uuid": "1b70c71d-20cc-487d-be10-4b31baeff559", "bio": "\u003cp\u003eLuuk Rietveld is professor of Urban Water Cycle Technology at Delft University of Technology. After finalizing his studies in Civil Engineering at Delft University of Technology in 1987, he worked, until 1991, as lecturer/researcher in Sanitary Engineering at the Eduardo Mondlane University, Maputo, Mozambique. Between 1991 and 1994, he was employed at the Management Centre for International Co-operation, and since 1994 he has had an appointment at the Department of Water Management of Delft University of Technology. In 2005, he defended his PhD thesis entitled \"Improving Operation of Drinking Water Treatment through Modelling\".\u003c/p\u003e\n\u003cp\u003eLuuk Rietveld\u2019s main research interests are modelling and optimisation of processes in the urban water cycle, and technological innovations in drinking water treatment and water reclamation for industrial purposes. In addition, he has extensive experience in education, in various cultural contexts, and is interested to explore the use of new ways of teaching through activated and blended learning and MOOCs.\u003c/p\u003e", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/rietveld_luuk_110p.jpg", "given_name": "Luuk", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": null, "works": [], "slug": "luuk-rietveld-0"}, {"family_name": "van Halem", "uuid": "4ce9ef2a-19e9-46de-9f34-5d755f26736a", "bio": "Doris van Halem is a tenure track Assistant Professor within the Department of Water Management, section Sanitary Engineering of Delft University of Technology. She graduated from Delft University of Technology in Civil Engineering and Geosciences with a cum laude MSc degree (2007). During her studies she developed an interest in global drinking water challenges, illustrated by her internships in Sri Lanka and Benin, resulting in an MSc thesis \u201cCeramic silver impregnated pot filter for household drinking water treatment in developing countries\u201d. In 2011 she completed her PhD research (with honours) on subsurface iron and arsenic removal for drinking water supply in Bangladesh under the guidance of prof. J.C. van Dijk (TU Delft) and prof. dr. G.L. Amy (Unesco-IHE). Currently she supervises BSc, MSc and PhD students, focusing on inorganic constituent behaviour and trace compound removal during soil passage and drinking water treatment - with a particular interest in smart, pro-poor drinking water solutions.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/doris_van_halem_1.jpg", "given_name": "Doris", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": {"organization_name": "Delft University of Technology", "title": "Assistant Professor, Sanitary Engineering"}, "works": [], "slug": "doris-van-halem-0"}, {"family_name": "Grefte", "uuid": "463c3f1a-95fc-45aa-b7c0-d01b14126f02", "bio": "Anke Grefte is project manager open, online and blended education for the Faculty of Civil Engineering and Geosciences, Delft University of Technology. She graduated from Delft University of Technology in Civil Engineering with a master\u2019s thesis entitled \"Behaviour of particles in a drinking water distribution network; test rig results\". For this thesis Anke was awarded the Gijs Oskam award for best young researcher. In November 2013, she finished her Ph.D. research on the removal of Natural Organic Matter (NOM) fractions by ion exchange and the impact on drinking water treatment processes and biological stability.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/grefte_anke_110p.jpg", "given_name": "Anke", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": null, "works": [], "slug": "anke-grefte-0"}], "announcement": "2015-07-24T00:00:00Z", "end": "2017-07-20T21:30:00Z", "uuid": "a36ed16a-6637-11e6-a8e3-22000bdde520", "title": "Introduction to Drinking Water Treatment", "certificate_url": null, "enrollment_start": "2016-06-15T00:00:00Z", "start": "2016-01-12T05:00:00Z", "min_effort": null, "short_description": "Learn about urban water services, focusing on conventional technologies for drinking water treatment.", "hidden": false, "level_type": "Intermediate", "type": "credit", "enrollment_open_date": "Jun 15, 2016", "marketing_url": "https://stage.edx.org/course/introduction-drinking-water-treatment-delftx-ctb3365dwx-0", "is_course_ended": false, "instructors": [], "full_description": "\u003cp\u003eThis course focuses on conventional technologies for drinking water treatment. Unit processes, involved in the treatment chain, are discussed as well as the physical, chemical and biological processes involved. The emphasis is on the effect of treatment on water quality and the dimensions of the unit processes in the treatment chain. After the course one should be able to recognise the process units, describe their function, and make basic calculations for a preliminary design of a drinking water treatment plant.\u003c/p\u003e\n\u003cp\u003eThe course consists of 4 modules:\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003eIntroduction to drinking water treatment. In this module you learn to describe the important disciplines, schemes and evaluation criteria involved in the design phase.\u003c/li\u003e\n\u003cli\u003eWater quality. In this module you learn to identify the drinking water quality parameters to be improved and explain what treatment train or scheme is needed.\u003c/li\u003e\n\u003cli\u003eGroundwater treatment. In this module you learn to calculate the dimensions of the groundwater treatment processes and draw groundwater treatment schemes.\u003c/li\u003e\n\u003cli\u003eSurface water treatment. In this module you learn to calculate the dimensions of the surface water treatment processes and draw surface water treatment schemes.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eThis course in combination with the courses \"\u003ca href=\"https://www.edx.org/course/introduction-water-climate-delftx-ctb3300wcx-0\"\u003eIntroduction to Water and Climate\u003c/a\u003e\" and \"\u003ca href=\"https://www.edx.org/course/introduction-treatment-urban-sewage-delftx-ctb3365stx\"\u003eIntroduction to the Treatment of Urban Sewage\u003c/a\u003e\" forms the Water XSeries, by DelftX.\u003c/p\u003e\n\u003chr /\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cem\u003eLICENSE\u003c/em\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eThe course materials of this course are Copyright Delft University of Technology and are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike (CC-BY-NC-SA) 4.0 International License.\u003c/em\u003e\u003c/p\u003e", "key": "course-v1:DelftX+CTB3365DWx+1T2016", "enrollment_end": null, "reporting_type": "mooc", "advertised_start": null, "mobile_available": true, "modified": "2017-04-06T12:26:52.652365Z", "is_enrolled": false, "pacing_type": "instructor_paced", "video": {"src": "http://www.youtube.com/watch?v=0xPZXLHtRJw", "image": {"src": "https://stage.edx.org/sites/default/files/course/image/featured-card/h20_new_378x225.jpg", "width": null, "description": null, "height": null}, "description": null}}]}]},
certificateData: [
{
"url": "/certificates/a37c59143d9d422eb6ab11e1053b8eb5", "type": "course", "title": "Introduction to Water and Climate"
}, {
"url": "/certificates/bed3980e67ca40f0b31e309d9dfe9e7e", "type": "course", "title": "Introduction to the Treatment of Urban Sewage"
}
],
urls: {"program_listing_url": "/dashboard/programs/", "commerce_api_url": "/api/commerce/v0/baskets/", "track_selection_url": "/course_modes/choose/"},
userPreferences: {"pref-lang": "en"}
},
/* eslint-enable */
programModel,
courseData,
certificateCollection,
testCircle,
testText,
initView;
testCircle = function(progress) {
var $circle = view.$('.progress-circle'),
incomplete = progress.in_progress.length + progress.not_started.length;
expect($circle.find('.complete').length).toEqual(progress.completed.length);
expect($circle.find('.incomplete').length).toEqual(incomplete);
};
testText = function(progress) {
var $numbers = view.$('.numbers'),
total = progress.completed.length + progress.in_progress.length + progress.not_started.length;
expect(view.$('.progress-heading').html()).toEqual('XSeries Progress');
expect(parseInt($numbers.find('.complete').html(), 10)).toEqual(progress.completed.length);
expect(parseInt($numbers.find('.total').html(), 10)).toEqual(total);
};
initView = function() {
return new ProgramSidebarView({
el: '.js-program-sidebar',
model: programModel,
courseModel: courseData,
certificateCollection: certificateCollection
});
};
beforeEach(function() {
setFixtures('<div class="js-program-sidebar"></div>');
programModel = new Backbone.Model(data.programData);
courseData = new Backbone.Model(data.courseData);
certificateCollection = new Backbone.Collection(data.certificateData);
});
afterEach(function() {
view.remove();
});
it('should exist', function() {
view = initView();
expect(view).toBeDefined();
});
it('should render the progress view if there is no program certificate', function() {
view = initView();
testCircle(data.courseData);
testText(data.courseData);
});
it('should render the program certificate if earned', function() {
var $certLink,
programCert = {
url: '/program-cert',
type: 'program',
title: 'And Justice For All...'
},
altText = 'Open the certificate you earned for the ' + programCert.title + ' program.';
certificateCollection.add(programCert);
view = initView();
expect(view.$('.progress-circle-wrapper')[0]).not.toBeInDOM();
$certLink = view.$('.program-cert-link');
expect($certLink[0]).toBeInDOM();
expect($certLink.attr('href')).toEqual(programCert.url);
expect($certLink.find('.program-cert').attr('alt')).toEqual(altText);
expect(view.$('.certificate-heading')).toHaveText('Your XSeries Certificate');
});
it('should render the course certificate list', function() {
var $certificates;
view = initView();
$certificates = view.$('.certificate-list .certificate');
expect(view.$('.course-list-heading').html()).toEqual('Earned Certificates');
expect($certificates).toHaveLength(certificateCollection.length);
$certificates.each(function(i, el) {
var $link = $(el).find('.certificate-link'),
model = certificateCollection.at(i);
expect($link.attr('href')).toEqual(model.get('url'));
expect($link.html()).toEqual(model.get('title'));
});
});
it('should not render the course certificate view if no certificates have been earned', function() {
certificateCollection.reset();
view = initView();
expect(view).toBeDefined();
expect(view.$('.js-course-certificates')).toBeEmpty();
});
});
});
lms/static/lms/js/spec/main.js
...@@ -743,6 +743,7 @@ ...@@ -743,6 +743,7 @@
'js/spec/learner_dashboard/program_card_view_spec.js', 'js/spec/learner_dashboard/program_card_view_spec.js',
'js/spec/learner_dashboard/sidebar_view_spec.js', 'js/spec/learner_dashboard/sidebar_view_spec.js',
'js/spec/learner_dashboard/program_details_header_spec.js', 'js/spec/learner_dashboard/program_details_header_spec.js',
'js/spec/learner_dashboard/program_details_sidebar_view_spec.js',
'js/spec/learner_dashboard/course_card_view_spec.js', 'js/spec/learner_dashboard/course_card_view_spec.js',
'js/spec/learner_dashboard/course_enroll_view_spec.js', 'js/spec/learner_dashboard/course_enroll_view_spec.js',
'js/spec/learner_dashboard/course_enroll_view_spec_2017.js', 'js/spec/learner_dashboard/course_enroll_view_spec_2017.js',
......
lms/static/sass/_build-learner-dashboard.scss
...@@ -6,5 +6,6 @@ ...@@ -6,5 +6,6 @@
@import 'elements/course-card'; @import 'elements/course-card';
@import 'elements/program-card'; @import 'elements/program-card';
@import 'elements-v2/icons'; @import 'elements-v2/icons';
@import 'elements/progress-circle';
@import 'views/program-details'; @import 'views/program-details';
@import 'views/program-list'; @import 'views/program-list';
lms/static/sass/elements/_progress-circle.scss 0 → 100644
$progress-title-color: $blue-d1 !default;
$progress-complete-color: $blue-u1 !default;
$progress-incomplete-color: $gray-l3 !default;
$progress-complete-number-color: $blue-d1 !default;
$progress-incomplete-number-color: $gray !default;
$progress-number-label-color: palette(grayscale, base) !default;
.program-progress {
width: 300px;
margin: 0 auto 30px;
@media(min-width: $bp-screen-md) {
margin-left: 0;
}
}
.progress-heading {
color: $progress-title-color;
text-align: center;
margin-bottom: 0;
font: {
size: 1.1em;
weight: 700;
}
}
.progress-circle-wrapper {
position: relative;
margin-top: -20px;
width: 300px;
height: 300px;
.progress-label {
position: absolute;
width: 100%;
top: 92px;
text-align: center;
}
.numbers {
font-size: 3em;
color: $progress-incomplete-number-color;
.complete {
color: $progress-complete-number-color;
}
}
.label {
font: {
size: 1.1em;
weight: 600;
}
color: $progress-number-label-color;
}
}
.progress-circle {
.complete {
stroke: $progress-complete-color;
}
.incomplete {
stroke: $progress-incomplete-color;
}
}
lms/static/sass/views/_program-details.scss
...@@ -47,8 +47,8 @@ ...@@ -47,8 +47,8 @@
} }
.crumb { .crumb {
@include float(left);
position: relative; position: relative;
float: left;
font-size: font-size(x-small); font-size: font-size(x-small);
line-height: line-height(x-small); line-height: line-height(x-small);
color: palette(grayscale, dark); color: palette(grayscale, dark);
...@@ -78,14 +78,18 @@ ...@@ -78,14 +78,18 @@
} }
// CSS for April 2017 version of Program Details Page // CSS for April 2017 version of Program Details Page
.program-details { .program-details {
.window-wrap { .window-wrap {
background-color: $white; background-color: $white;
} }
.wrapper-footer {
@include clearfix();
clear: both;
}
} }
.program-details-wrapper {
.program-details-wrapper {
.program-details-header { .program-details-header {
background-color: $light-gray4; background-color: $light-gray4;
display: flex; display: flex;
...@@ -93,14 +97,20 @@ ...@@ -93,14 +97,20 @@
font-family: 'Open Sans'; font-family: 'Open Sans';
font-weight: normal; font-weight: normal;
flex-wrap: wrap; flex-wrap: wrap;
padding-top: 40px; padding: 40px 10px 35px;
padding-bottom: 35px;
margin-left: 10px;
margin-right: 10px;
@media(min-width: $bp-screen-md) { @media(min-width: $bp-screen-md) {
margin-left: 30px; padding: {
margin-right: 80px; left: 30px;
right: 30px;
}
}
@media(min-width: $lms-max-width) {
padding: {
left: calc(((100% - 1180px) / 2) + 30px);
right: calc(((100% - 1180px) / 2) + 30px);
}
} }
.hd-1 { .hd-1 {
...@@ -111,7 +121,7 @@ ...@@ -111,7 +121,7 @@
} }
.program-details-icon { .program-details-icon {
margin-left: 3px; @include margin-left(3px);
margin-top: 10px; margin-top: 10px;
height: auto; height: auto;
...@@ -177,7 +187,7 @@ ...@@ -177,7 +187,7 @@
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
@media(min-width: $bp-screen-md) { @media(min-width: $bp-screen-md) {
margin: 10px 0 0 0; @include margin-right(10px 0 0 0);
} }
} }
...@@ -187,8 +197,8 @@ ...@@ -187,8 +197,8 @@
width: 30%; width: 30%;
.orgs .org-logo { .orgs .org-logo {
@include margin-left(2.5%);
width: 46.5%; width: 46.5%;
margin-left: 2.5%;
height: auto; height: auto;
} }
} }
...@@ -197,26 +207,49 @@ ...@@ -197,26 +207,49 @@
width: 25%; width: 25%;
} }
} }
} }
.program-details-content { .program-details-content {
width: 100%;
margin-bottom: 30px;
padding: 30px 10px;
@media(min-width: $bp-screen-md) { @media(min-width: $bp-screen-md) {
margin-left: 30px; @include float(left);
padding: {
left: 30px;
right: 30px;
} }
margin-left: 10px; width: calc( 100% - 330px );
position: relative;
} }
@media(min-width: $bp-screen-lg) {
width: calc( 100% - 510px );
max-width: 700px;
}
@media(min-width: $lms-max-width) {
@include margin-left(calc((100% - 1180px) / 2));
}
}
.course-list-heading { .course-list-heading {
font-family: "Open Sans"; font-family: "Open Sans";
font-weight: bold; font-weight: bold;
text-transform: uppercase;
color: palette(primary, dark); color: palette(primary, dark);
font-size: 0.9375em; font-size: 0.9375em;
line-height: normal; line-height: normal;
margin-top: 10px; padding-bottom: 5px;
margin-bottom: 0; border-bottom: 3px solid $divider-color;
margin: {
top: 10px;
bottom: 20px;
}
.status { .status {
margin-right: 7px; @include margin-right(7px);
} }
} }
...@@ -225,27 +258,9 @@ ...@@ -225,27 +258,9 @@
} }
.course-list-headings { .course-list-headings {
width: 700px;
.divider {
margin-left: 0;
margin-bottom: 20px;
background-color: $divider-color;
margin-top: 5px;
height: 3px;
width: 315px;
@media(min-width: $bp-screen-sm) {
width: 550px;
}
@media(min-width: $bp-screen-md) {
width: 700px;
}
border: none;
}
.motivating-section { .motivating-section {
@include margin-left(15px);
font-size: 0.9375em; font-size: 0.9375em;
margin-left: 15px;
width: 310px; width: 310px;
@media(min-width: $bp-screen-sm) { @media(min-width: $bp-screen-sm) {
width: auto; width: auto;
...@@ -264,11 +279,7 @@ ...@@ -264,11 +279,7 @@
} }
.program-heading { .program-heading {
@media(min-width: $bp-screen-md) { width: 100%;
width: 70%;
}
width: 90%;
margin-top: 40px;
margin-bottom: 40px; margin-bottom: 40px;
.program-heading-title { .program-heading-title {
...@@ -313,17 +324,17 @@ ...@@ -313,17 +324,17 @@
/* IE11 CSS styles */ /* IE11 CSS styles */
@media(min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) { @media(min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
float: right; @include float(right);
} }
} }
} }
.select-choice { .select-choice {
@include margin-right(2px);
font-family: "Open Sans"; font-family: "Open Sans";
font-weight: bold; font-weight: bold;
font-size: 0.9375em; font-size: 0.9375em;
color: palette(grayscale, base); color: palette(grayscale, base);
margin-top: 6px; margin-top: 6px;
margin-right: 2px;
display: block; display: block;
@media(min-width: $bp-screen-md) { @media(min-width: $bp-screen-md) {
...@@ -339,21 +350,19 @@ ...@@ -339,21 +350,19 @@
} }
} }
.run-select { .run-select {
@include margin-right(10px);
width: 95%; width: 95%;
@media(min-width: $bp-screen-sm) { @media(min-width: $bp-screen-sm) {
width: 300px; width: 300px;
} }
height: 34px; height: 34px;
padding: 0; padding: 0;
margin-right: 10px;
} }
} }
.program-course-card { .program-course-card {
@media(min-width: $bp-screen-md) {
width: 100%; width: 100%;
} padding: 15px;
margin-bottom: 10px; margin-bottom: 10px;
@media(min-width: $bp-screen-md) { @media(min-width: $bp-screen-md) {
...@@ -363,12 +372,6 @@ ...@@ -363,12 +372,6 @@
.section { .section {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-right: 40px;
margin-left: 15px;
@media(min-width: $bp-screen-sm) {
margin-left: 20px;
}
@media(min-width: $bp-screen-md) { @media(min-width: $bp-screen-md) {
flex-wrap: wrap; flex-wrap: wrap;
...@@ -400,9 +403,12 @@ ...@@ -400,9 +403,12 @@
.course-meta-container { .course-meta-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-wrap: wrap;
@media(min-width: $bp-screen-md) { @media(min-width: $bp-screen-md) {
width: 100%; width: 100%;
flex-direction: row;
justify-content: space-between;
} }
} }
...@@ -417,6 +423,10 @@ ...@@ -417,6 +423,10 @@
} }
} }
.course-certificate {
width: 100%;
}
.upgrade-message { .upgrade-message {
flex-wrap: wrap; flex-wrap: wrap;
...@@ -432,7 +442,7 @@ ...@@ -432,7 +442,7 @@
/* IE11 CSS styles */ /* IE11 CSS styles */
@media(min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) { @media(min-width: $bp-screen-md) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
float: right; @include float(right);
} }
} }
...@@ -495,6 +505,109 @@ ...@@ -495,6 +505,109 @@
font-size: 0.9375em; font-size: 0.9375em;
} }
} }
}
}
.program-sidebar {
padding: 30px 10px;
@media(min-width: $bp-screen-md) {
@include float(right);
width: 300px;
padding-right: 30px;
position: relative;
}
@media(min-width: $bp-screen-lg) {
width: 450px;
.program-progress {
@include margin-left(50px);
}
}
@media(min-width: $lms-max-width) {
@include margin-right(calc((100% - 1180px) / 2));
}
}
.certificate-heading {
margin-bottom: 10px;
@media(min-width: $bp-screen-md) {
@include margin-right(30px);
}
@media(min-width: $bp-screen-lg) {
@include margin-left(10px);
@include margin-right(0);
}
}
.program-cert-link {
display: inline-block;
&:active,
&:focus,
&:hover {
.program-cert {
border-color: $blue-d1;
}
}
}
.program-cert {
width: 100%;
border: 1px solid $divider-color;
@media(min-width: $bp-screen-md) {
width: calc(100% - 30px);
}
@media(min-width: $bp-screen-lg) {
width: 100%;
}
}
.certificate-list {
@include margin(0, 0, 0, 10px);
list-style: none;
.certificate {
display: flex;
flex-direction: row;
padding: 5px 0 10px;
}
.certificate-link {
@include margin-left(20px);
color: $black;
font: {
size: 1.1em;
weight: 600;
}
@media(min-width: $bp-screen-md) {
font-size: 0.9em;
}
@media(min-width: $bp-screen-lg) {
font-size: 1.1em;
}
&:active,
&:focus,
&:hover {
.sample-cert {
border-color: $blue-d1;
}
}
}
.sample-cert {
width: 120px;
border: 3px solid $gray-l3;
border-radius: 5px;
.expired-notification { .expired-notification {
display: inline-block; display: inline-block;
...@@ -511,7 +624,7 @@ ...@@ -511,7 +624,7 @@
} }
.expired-icon { .expired-icon {
float: left; @include float(left);
color: palette(primary, dark); color: palette(primary, dark);
} }
...@@ -520,5 +633,12 @@ ...@@ -520,5 +633,12 @@
padding-left: 10px; padding-left: 10px;
} }
@media(min-width: $bp-screen-md) {
width: 100px;
}
@media(min-width: $bp-screen-lg) {
width: 120px;
}
} }
} }
lms/templates/learner_dashboard/certificate_list.underscore 0 → 100644
<div class="certificate-container">
<% if (title) { %>
<h2 class="course-list-heading"><%- title %></h2>
<% } %>
<ul class="certificate-list">
<% _.each(certificateList, function(certificate){ %>
<li class="certificate">
<a class="image-link" href="<%- certificate.url %>" aria-hidden="true" tabindex="-1"><img src="/static/images/programs/sample-cert.png" class="sample-cert" alt=""></a>
<a class="certificate-link" href="<%- certificate.url %>"><%- certificate.title %></a>
</li>
<% }); %>
</ul>
</div>
lms/templates/learner_dashboard/course_card_2017.underscore
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
</div> </div>
</div> </div>
<div class="course-actions col-12 md-col-4 sm-col-12"></div> <div class="course-actions col-12 md-col-4 sm-col-12"></div>
<div class="certificate-status"></div> <div class="course-certificate certificate-status"></div>
</div> </div>
</div> </div>
<div class="section action-msg-view"></div> <div class="section action-msg-view"></div>
......
lms/templates/learner_dashboard/program_details_sidebar.underscore 0 → 100644
<aside class="aside js-program-progress program-progress">
<% if (programCertificate) { %>
<h2 class="progress-heading certificate-heading"><%- StringUtils.interpolate(gettext('Your {program} Certificate'), {program: type}, true) %></h2>
<a href="<%- programCertificate.url %>" class="program-cert-link">
<img src="<%- programCertificate.img %>" class="program-cert" alt="<%- interpolate(gettext('Open the certificate you earned for the %(title)s program.'), {title: programCertificate.title}, true) %>" />
</a>
<% } %>
</aside>
<aside class="aside js-course-certificates"></aside>
lms/templates/learner_dashboard/program_details_view_2017.underscore
<header class="js-program-header program-header full-width-banner"></header> <header class="js-program-header program-header full-width-banner"></header>
<div class="program-details-content"> <section class="program-details-content">
<div class="js-program-progress-view"></div>
<div class="program-heading"> <div class="program-heading">
<% if (inProgressCount === totalCount) { %> <% if (inProgressCount === totalCount) { %>
<h3 class="program-heading-title"><%- gettext('Congratulations!') %></h3> <h3 class="program-heading-title"><%- gettext('Congratulations!') %></h3>
...@@ -29,7 +28,6 @@ ...@@ -29,7 +28,6 @@
<span class="status"><%- gettext('COURSES IN PROGRESS') %></span> <span class="status"><%- gettext('COURSES IN PROGRESS') %></span>
<span class="count"><%- inProgressCount %></span> <span class="count"><%- inProgressCount %></span>
</h4> </h4>
<div class="divider"></div>
<div class="course-list js-course-list-in-progress row"></div> <div class="course-list js-course-list-in-progress row"></div>
</div> </div>
<% } %> <% } %>
...@@ -39,7 +37,6 @@ ...@@ -39,7 +37,6 @@
<span class="status"><%- gettext('REMAINING COURSES') %></span> <span class="status"><%- gettext('REMAINING COURSES') %></span>
<span class="count"><%- remainingCount %></span> <span class="count"><%- remainingCount %></span>
</h4> </h4>
<div class="divider"></div>
<div class="course-list js-course-list-remaining row"></div> <div class="course-list js-course-list-remaining row"></div>
</div> </div>
<% } %> <% } %>
...@@ -48,7 +45,6 @@ ...@@ -48,7 +45,6 @@
<span class="status"><%- gettext('COMPLETED COURSES') %></span> <span class="status"><%- gettext('COMPLETED COURSES') %></span>
<span class="count"><%- completedCount %></span> <span class="count"><%- completedCount %></span>
</h4> </h4>
<div class="divider"></div>
<% if (completedCount) { %> <% if (completedCount) { %>
<div class="course-list js-course-list-completed row"></div> <div class="course-list js-course-list-completed row"></div>
<% } else { %> <% } else { %>
...@@ -59,6 +55,5 @@ ...@@ -59,6 +55,5 @@
<% } %> <% } %>
</div> </div>
</div> </div>
</section>
<aside class="js-course-sidebar"></aside> <aside class="js-program-sidebar program-sidebar"></aside>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment