Skip to content

E
edx-platform
Commit 2fe52df7 by AlasdairSwan
Options

UPdated a11y approach for program card progress bars

parent 61ef49b9
Showing with 307 additions and 349 deletions
lms/djangoapps/learner_dashboard/views.py
...@@ -33,11 +33,15 @@ def view_programs(request): ...@@ -33,11 +33,15 @@ def view_programs(request):
slug=program['marketing_slug'] slug=program['marketing_slug']
) )
return render_to_response('learner_dashboard/programs.html', { context = {
'programs': programs, 'programs': programs,
'progress': meter.progress, 'progress': meter.progress,
'xseries_url': marketing_root if ProgramsApiConfig.current().show_xseries_ad else None, 'xseries_url': marketing_root if ProgramsApiConfig.current().show_xseries_ad else None,
'nav_hidden': True, 'nav_hidden': True,
'show_program_listing': show_program_listing, 'show_program_listing': show_program_listing,
'credentials': _get_xseries_credentials(request.user) 'credentials': _get_xseries_credentials(request.user),
}) 'disable_courseware_js': True,
'uses_pattern_library': True
}
return render_to_response('learner_dashboard/programs.html', context)
lms/envs/common.py
...@@ -1495,6 +1495,18 @@ PIPELINE_CSS = { ...@@ -1495,6 +1495,18 @@ PIPELINE_CSS = {
], ],
'output_filename': 'css/certificates-style-rtl.css' 'output_filename': 'css/certificates-style-rtl.css'
}, },
'style-learner-dashboard': {
'source_filenames': [
'css/lms-learner-dashboard.css',
],
'output_filename': 'css/lms-learner-dashboard.css',
},
'style-learner-dashboard-rtl': {
'source_filenames': [
'css/lms-learner-dashboard-rtl.css',
],
'output_filename': 'css/lms-learner-dashboard-rtl.css',
},
} }
......
lms/static/js/spec/learner_dashboard/certificate_view_spec.js
...@@ -38,14 +38,14 @@ define([ ...@@ -38,14 +38,14 @@ define([
}); });
it('should load the certificates based on passed in certificates list', function() { it('should load the certificates based on passed in certificates list', function() {
var $certificates = view.$el.find('.certificate-box'); var $certificates = view.$el.find('.certificate-link');
expect($certificates.length).toBe(2); expect($certificates.length).toBe(2);
$certificates.each(function(index, el){ $certificates.each(function(index, el){
expect($(el).html().trim()).toEqual(data.context.certificatesData[index].display_name); expect($(el).html().trim()).toEqual(data.context.certificatesData[index].display_name);
expect($(el).attr('href')).toEqual(data.context.certificatesData[index].credential_url); expect($(el).attr('href')).toEqual(data.context.certificatesData[index].credential_url);
}); });
expect(view.$el.find('.title').html().trim()).toEqual('XSeries Program Certificates:'); expect(view.$el.find('.hd-6').html().trim()).toEqual('XSeries Program Certificates:');
expect(view.$el.find('img').attr('src')).toEqual('/images/testing.png'); expect(view.$el.find('img').attr('src')).toEqual('/images/testing.png');
}); });
...@@ -57,7 +57,7 @@ define([ ...@@ -57,7 +57,7 @@ define([
context: {certificatesData: []} context: {certificatesData: []}
}); });
view.render(); view.render();
$certificate = view.$el.find('.certificate-box'); $certificate = view.$el.find('.certificate-link');
expect($certificate.length).toBe(0); expect($certificate.length).toBe(0);
}); });
}); });
......
lms/static/js/spec/learner_dashboard/sidebar_view_spec.js
...@@ -46,7 +46,7 @@ define([ ...@@ -46,7 +46,7 @@ define([
}); });
it('should load the certificates based on passed in certificates list', function() { it('should load the certificates based on passed in certificates list', function() {
expect(view.$('.certificate-box').length).toBe(1); expect(view.$('.certificate-link').length).toBe(1);
}); });
it('should not load the xseries advertising if no xseriesUrl passed in', function(){ it('should not load the xseries advertising if no xseriesUrl passed in', function(){
...@@ -59,7 +59,7 @@ define([ ...@@ -59,7 +59,7 @@ define([
view.render(); view.render();
$ad = view.$el.find('.program-advertise'); $ad = view.$el.find('.program-advertise');
expect($ad.length).toBe(0); expect($ad.length).toBe(0);
expect(view.$('.certificate-box').length).toBe(0); expect(view.$('.certificate-link').length).toBe(0);
}); });
}); });
......
lms/static/sass/_build-learner-dashboard.scss 0 → 100644
// ------------------------------
// Learner Dashboard: Shared Build Compile
// Uses the Pattern Library
@import 'views/program-list';
@import 'elements/program-card';
lms/static/sass/_build-lms-v1.scss
...@@ -18,7 +18,6 @@ ...@@ -18,7 +18,6 @@
@import 'elements/navigation'; @import 'elements/navigation';
@import 'elements/pagination'; @import 'elements/pagination';
@import 'elements/creative-commons'; @import 'elements/creative-commons';
@import 'elements/program-card';
// shared - course // shared - course
@import 'shared/fields'; @import 'shared/fields';
...@@ -59,8 +58,7 @@ ...@@ -59,8 +58,7 @@
@import "views/financial-assistance"; @import "views/financial-assistance";
@import 'views/bookmarks'; @import 'views/bookmarks';
@import 'course/auto-cert'; @import 'course/auto-cert';
@import 'xseries_certificates'; @import 'elements/xseries-certificates';
@import 'views/program-list';
@import 'views/api-access'; @import 'views/api-access';
// app - discussion // app - discussion
......
lms/static/sass/base/_variables.scss
...@@ -306,10 +306,6 @@ $credit-color-base: rgb(244,195,0); // accessible with black text ...@@ -306,10 +306,6 @@ $credit-color-base: rgb(244,195,0); // accessible with black text
// edx-specific: Studio/Staff actions // edx-specific: Studio/Staff actions
$staff-color: $pink; $staff-color: $pink;
// from the edX Pattern Library
$x-light: #E5E9EB;
$success-dark: #1E8142;
$warning-base: #FDBC56;
// ---------------------------- // ----------------------------
// #TYPOGRAPHY // #TYPOGRAPHY
......
lms/static/sass/elements/_program-card.scss
// +Imports
// ====================
@import '../base/grid-settings';
@import 'neat/neat'; // lib - Neat
%hide-until-focus { %hide-until-focus {
@include left(0); @include left(0);
display: inline-block; display: inline-block;
position: absolute; position: absolute;
top: -($baseline*30); top: -1000px;
overflow: hidden; overflow: hidden;
} }
.program-card{ .program-card{
@include span-columns(12); @include span(12);
border: 1px solid $border-color-l3; border: 1px solid $border-color-l3;
border-bottom: none; border-bottom: none;
box-sizing: border-box; margin-bottom: $baseline + px;
margin-bottom: $baseline;
position: relative; position: relative;
display: inline;
@include susy-media($bp-screen-md) {
@include span(6);
&:nth-child(2n) {
@include margin-right(0);
}
}
.card-link{ .card-link{
@include left(0); @include left(0);
@include right(0);
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
right: 0;
border: 0; border: 0;
z-index: 1; z-index: 1;
opacity: 0.8; opacity: 0.8;
&:active,
&:hover, &:hover,
&:focus{ &:focus{
opacity: 1; opacity: 1;
...@@ -37,7 +40,11 @@ ...@@ -37,7 +40,11 @@
.banner-image-container{ .banner-image-container{
position: relative; position: relative;
overflow: hidden; overflow: hidden;
height: 116px; height: 166px;
@include susy-media($bp-screen-sm) { height: 242px; }
@include susy-media($bp-screen-md) { height: 116px; }
@include susy-media($bp-screen-lg) { height: 145px; }
.banner-image{ .banner-image{
@include left(50%); @include left(50%);
...@@ -51,58 +58,61 @@ ...@@ -51,58 +58,61 @@
} }
.text-section{ .text-section{
padding: 40px $baseline $baseline; padding: 40px $baseline + px $baseline + px;
margin-top: 106px;
position: relative; position: relative;
margin-top: 156px;
.meta-info{ @include susy-media($bp-screen-sm) { margin-top: 232px; }
@include outer-container; @include susy-media($bp-screen-md) { margin-top: 106px; }
font-size: em(12); @include susy-media($bp-screen-lg) { margin-top: 135px; }
color: $gray; }
position: absolute;
top: $baseline;
width: calc(100% - 40px);
.organization{
@include span-columns(6);
white-space: nowrap;
overflow: hidden;
}
.category{ .meta-info{
@include span-columns(6); font-size: font-size(x-small);
text-align: right; color: palette(grayscale, dark);
position: absolute;
top: $baseline + px;
width: calc(100% - 40px);
}
.category-text{ .organization{
@include float(right); @include span(6);
} white-space: nowrap;
overflow: hidden;
}
.xseries-icon{ .category{
@include float(right); @include span(6);
@include margin-right($baseline*0.25); @include text-align(right);
background: url('#{$static-path}/images/icon-sm-xseries-black.png') no-repeat;
background-color: transparent; .category-text{
background-size: 100%; @include float(right);
width: ($baseline*0.7);
height: ($baseline*0.7);
}
}
} }
.title{ .xseries-icon{
@extend %t-title4; @include float(right);
font-size: em(24); @include margin-right($baseline*0.25 + px);
color: $gray-d2; background: url('#{$static-path}/images/icon-sm-xseries-black.png') no-repeat;
margin-bottom: 10px; background-color: transparent;
line-height: 1.2; background-size: 100%;
min-height: ($baseline*3); width: ($baseline*0.7 + px);
height: ($baseline*0.7 + px);
} }
} }
.hd-3 {
color: palette(grayscale, x-dark);
min-height: ($baseline*3) + px;
line-height: 1;
}
.certificate-status { .certificate-status {
margin-bottom: 0;
.status-text { .status-text {
font-size: em(12); font-size: font-size(x-small);
color: $gray; color: palette(grayscale, dark);
line-height: 1;
} }
.secondary { .secondary {
...@@ -113,7 +123,7 @@ ...@@ -113,7 +123,7 @@
&:focus, &:focus,
&:active { &:active {
position: relative; position: relative;
top: auto; top: 4px;
width: auto; width: auto;
height: auto; height: auto;
margin: 0; margin: 0;
...@@ -128,7 +138,7 @@ ...@@ -128,7 +138,7 @@
.progress { .progress {
height: 5px; height: 5px;
background: $x-light; background: palette(grayscale-cool, x-light);
.bar { .bar {
@include float(left); @include float(left);
...@@ -136,84 +146,12 @@ ...@@ -136,84 +146,12 @@
position: relative; position: relative;
&.complete { &.complete {
background: $success-dark; background: palette(success, dark);
} }
&.in-progress { &.in-progress {
background: $warning-base; background: palette(warning, base);
}
}
}
}
@include media($bp-small) {
.program-card{
@include omega(n);
@include span-columns(4);
.card-link{
.banner-image-container{
height: 166px;
} }
} }
.text-section{
margin-top: 156px;
}
} }
} }
@include media($bp-medium) {
.program-card{
@include omega(n);
@include span-columns(8);
.card-link{
.banner-image-container{
height: 242px;
}
}
.text-section{
margin-top: 232px;
}
}
}
@include media($bp-large) {
.program-card{
@include omega(2n);
@include span-columns(6);
.card-link{
.banner-image-container{
height: 116px;
}
}
.text-section{
margin-top: 106px;
}
}
}
@include media($bp-huge) {
.program-card{
@include omega(2n);
@include span-columns(6);
.card-link{
.banner-image-container{
height: 145px;
}
}
.text-section{
margin-top: 135px;
}
}
}
lms/static/sass/_xseries_certificates.scss → lms/static/sass/elements/_xseries-certificates.scss
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
margin-bottom:$baseline; margin-bottom:$baseline;
color: $gray; color: $gray;
} }
.certificate-box{ .certificate-link{
padding-top: $baseline; padding-top: $baseline;
display: block; display: block;
} }
......
lms/static/sass/lms-learner-dashboard-rtl.scss 0 → 100644
// ------------------------------
// LMS Learner Dashboard styling
// users the Pattern Library
// NOTE: This is the right-to-left (RTL) configured style compile.
// It should mirror lms-learner-dashboard-rtl w/ the exception of bi-app references.
// Load the RTL version of lms main
@import 'lms-main-v2-rtl';
// Load the shared build
@import 'build-learner-dashboard';
lms/static/sass/lms-learner-dashboard.scss 0 → 100644
// ------------------------------
// LMS Learner Dashboard styling
// users the Pattern Library
// NOTE: This is the left-to-right (LTR) configured style compile.
// It should mirror lms-learner-dashboard-rtl w/ the exception of bi-app references.
// Load the LTR version of lms main
@import 'lms-main-v2';
// Load the shared build
@import 'build-learner-dashboard';
lms/static/sass/shared-v2/_base.scss
// LMS base styles // LMS base styles
.content-wrapper { .content-wrapper {
margin: 0 auto; width: span(12);
padding: 10px; margin: 0 auto;
background: palette(grayscale, white-t);
@media print {
padding-bottom: 0;
}
} }
lms/static/sass/shared-v2/_header.scss
// LMS header styles // LMS header styles
.header-global { .header-global {
@extend %ui-depth1; @extend %ui-depth1;
box-sizing: border-box;
position: relative;
width: 100%;
border-bottom: 1px solid $gray-l1;
box-shadow: 0 1px 5px 0 $shadow-l1;
background: $header-bg;
.wrapper-header {
@include clearfix();
box-sizing: border-box; box-sizing: border-box;
position: relative; height: 74px;
margin: 0 auto;
padding: 10px 10px 0;
width: 100%; width: 100%;
border-bottom: 4px solid $courseware-border-bottom-color; max-width: 1180px;
box-shadow: 0 1px 5px 0 $shadow-l1;
background: $header-bg;
.wrapper-header { .logo {
@include clearfix(); @include float(left);
box-sizing: border-box; @include margin-right(39px);
height: 74px; @include margin-left(10px);
margin: 0 auto; margin-top: 4px;
padding: 10px 10px 0; margin-bottom: 0;
width: 100%; position: relative;
max-width: 1180px; }
.logo { .left {
@include float(left); @include float(left);
@include margin-right(39px); }
@include margin-left(10px);
margin-top: 4px;
margin-bottom: 0;
position: relative;
}
.left { .right {
@include float(left); @include float(right);
} }
.right { .wrapper-user-menu {
@include float(right); @include float(right);
} margin-top: 4px;
width: auto;
}
.wrapper-user-menu { .dropdown-menu {
@include float(right); @include text-align(left);
margin-top: 4px; top: inherit;
width: auto; }
}
.dropdown-menu { .list-inline {
@include text-align(left); &.nav-global {
top: inherit; margin-top: 12px;
} }
&.nav-courseware {
margin-top: 5px;
}
.list-inline { .item {
&.nav-global { font-weight: font-weight(semi-bold);
margin-top: 12px; text-transform: uppercase;
}
&.nav-courseware { &.active {
margin-top: 5px; a {
} text-decoration: none;
color: $link-color;
}
}
}
}
.item { .tab-nav-item{
font-weight: font-weight(semi-bold); @include float(left);
text-transform: uppercase; display: flex;
margin: 0;
justify-content: center;
&.active { .tab-nav-link{
a { font-size: font-size(base);
text-decoration: none; font-weight: font-weight(semi-bold);
color: $link-color; color: palette(grayscale, dark);
} padding: 5px 25px 23px;
} display: inline-block;
}
&:active,
&:focus,
&:hover {
border-bottom: 4px solid $courseware-border-bottom-color;
} }
}
.active{
border-bottom: 4px solid $black-t3 !important;
}
} }
}
} }
lms/static/sass/views/_program-list.scss
// +Imports .program-list-wrapper {
// ==================== padding: $baseline + px;
@import '../base/grid-settings';
@import 'neat/neat'; // lib - Neat
//Patern Library button colors
$pl-button-border-color: #065683;
$pl-button-color: #0079bc;
.program-list-wrapper{
@include outer-container;
padding: $baseline $baseline;
} }
.program-cards-container{ .program-cards-container {
@include outer-container; @include span(12);
@include span-columns(12);
@include susy-media($bp-screen-md) {
@include span(9);
}
} }
.sidebar{
@include outer-container; .sidebar {
@include span-columns(12); @include span(12);
@include float(right); @include float(right);
margin-bottom: $baseline; margin-bottom: $baseline + px;
.certificate-container{
@include xseries-certificate-container(); @include susy-media($bp-screen-md) {
@include span(3);
} }
.program-advertise{
padding: $baseline; .aside {
padding: $baseline + px;
margin-bottom: $baseline + px;
background-color: $body-bg; background-color: $body-bg;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid $border-color-l3; border: 1px solid $border-color-l3;
}
.program-advertise {
clear: both; clear: both;
.advertise-message{
font-size: em(12); .btn-neutral {
color: $gray-d4; width: 100%;
margin-bottom: $baseline; text-align: center;
padding: 10px;
} }
.ad-link{
text-align:center; .advertise-message {
a{ font-size: font-size(x-small);
padding: $baseline * 0.5; color: palette(grayscale, black);
border: 1px solid $pl-button-border-color; margin-bottom: $baseline + px;
color: $pl-button-color;
font-size: em(16);
text-decoration: none;
display: block;
line-height: 1.2;
&:hover,
&:focus,
&:active{
color: $white;
background-color: $pl-button-color;
}
span{
@include margin-left($baseline*0.25);
}
}
} }
} }
}
.certificate-container {
.hd-6 {
color: palette(grayscale, dark);
font-weight: font-weight(normal);
margin-bottom: $baseline + px;
}
.certificate-link {
padding-top: $baseline + px;
color: palette(primary, base);
display: block;
@include media($bp-medium) { &:active,
.program-cards-container{ &:focus,
@include span-columns(8); &:hover {
} color: $link-hover;
.sidebar{ text-decoration: underline;
@include span-columns(8); }
}
} }
} }
.empty-programs-message {
border: 3px solid $gray-l4;
background: $gray-l6;
padding: ($baseline*2) + px 0;
text-align: center;
margin-bottom: 20px;
.hd-3 {
@include media($bp-large) { color: $black;
.program-cards-container{ margin-bottom: $baseline + px;
@include span-columns(9);
}
.sidebar{
@include omega(n);
@include span-columns(3);
} }
}
@include media($bp-huge) { .find-xseries-programs {
.program-cards-container{ background: $black;
@include span-columns(9); border-color: $black;
} color: $white;
.sidebar{
@include omega(n);
@include span-columns(3);
}
}
// CASE: empty list of programs .action-xseries-icon {
.empty-programs-message { @include float(left);
border: 3px solid $gray-l4; @include margin-right($baseline*0.4 + px);
background: $gray-l6;
padding: ($baseline*2) 0;
text-align: center;
.text {
@include font-size(24);
margin: {
top: 0;
bottom: $baseline;
}
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-transform: none;
font-family: $sans-serif;
letter-spacing: initial;
color: $black;
}
a { display: inline;
@include box-sizing(border-box); background: url('#{$static-path}/images/icon-sm-xseries-white.png') no-repeat;
background-color: $blue; background-color: transparent;
border: 1px solid $blue; width: ($baseline*1.1) + px;
box-shadow: 0 1px 8px 0 $shadow-l1; height: ($baseline*1.1) + px;
color: $white;
font-family: $sans-serif;
display: inline-block;
letter-spacing: 1px;
margin-top: ($baseline/4);
margin-left: ($baseline/4);
padding: 15px 20px;
&:hover, &:focus {
background: $blue-l2;
text-decoration: none;
}
} }
.find-xseries-programs { &:active,
@extend %btn-pl-black-base; &:hover,
.action-xseries-icon { &:focus {
@include float(left); background: $white;
@include margin-right($baseline*0.4); color: $black;
display: inline;
background: url('#{$static-path}/images/icon-sm-xseries-white.png') no-repeat;
background-color: transparent;
width: ($baseline*1.1);
height: ($baseline*1.1);
}
&:hover,
&:focus {
.action-xseries-icon {
@include float(left);
@include margin-right($baseline*0.4);
display: inline;
background: url('#{$static-path}/images/icon-sm-xseries-black.png') no-repeat;
background-color: transparent;
width: ($baseline*1.1); .action-xseries-icon {
height: ($baseline*1.1); background: url('#{$static-path}/images/icon-sm-xseries-black.png') no-repeat;
}
} }
} }
} }
}
lms/templates/learner_dashboard/certificate.underscore
<div class="certificate-container"> <div class="certificate-container">
<p class="title"><%- gettext('XSeries Program Certificates') %>:</p> <h2 class="hd-6"><%- gettext('XSeries Program Certificates') %>:</h2>
<img src="<%- xseriesImage %>" alt=""> <img src="<%- xseriesImage %>" alt="">
<% _.each(certificatesData, function(certificate){ %> <% _.each(certificatesData, function(certificate){ %>
<a class="certificate-box" href="<%- gettext(certificate.credential_url) %>"><%- gettext(certificate.display_name) %></a> <a class="certificate-link" href="<%- gettext(certificate.credential_url) %>"><%- gettext(certificate.display_name) %></a>
<% }); %> <% }); %>
</div> </div>
lms/templates/learner_dashboard/empty_programs_list.underscore
<section class="empty-programs-message"> <section class="empty-programs-message">
<h2 class="text"><%- gettext('You are not enrolled in any XSeries Programs yet.') %></h2> <h2 class="hd-3"><%- gettext('You are not enrolled in any XSeries Programs yet.') %></h2>
<a class="find-xseries-programs" href="<%- xseriesUrl %>"> <a class="btn-neutral find-xseries-programs" href="<%- xseriesUrl %>">
<span class="action-xseries-icon" aria-hidden="true"></span> <span class="action-xseries-icon" aria-hidden="true"></span>
<span><%- gettext('Explore XSeries Programs') %></span> <span><%- gettext('Explore XSeries Programs') %></span>
</a> </a>
......
lms/templates/learner_dashboard/explore_new_programs.underscore
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<%- gettext('Browse recently launched courses and see what\'s new in your favorite subjects') %> <%- gettext('Browse recently launched courses and see what\'s new in your favorite subjects') %>
</div> </div>
<div class="ad-link"> <div class="ad-link">
<a href="<%- xseriesUrl %>" class="btn"> <a href="<%- xseriesUrl %>" class="btn-neutral">
<i class="icon fa fa-search" aria-hidden="true"></i> <i class="icon fa fa-search" aria-hidden="true"></i>
<span><%- gettext('Explore New XSeries') %></span> <span><%- gettext('Explore New XSeries') %></span>
</a> </a>
......
lms/templates/learner_dashboard/program_card.underscore
<div class="text-section"> <div class="text-section">
<h3 id="program-<%- id %>" class="title"><%- gettext(name) %></h3> <h3 id="program-<%- id %>" class="title hd-3"><%- gettext(name) %></h3>
<div class="meta-info"> <div class="meta-info grid-container">
<div class="organization"><%- orgList %></div> <div class="organization col"><%- orgList %></div>
<div class="category"> <div class="category col col-last">
<span class="category-text"><%- gettext(type) %></span> <span class="category-text"><%- gettext(type) %></span>
<span class="xseries-icon" aria-hidden="true"></span> <span class="xseries-icon" aria-hidden="true"></span>
</div> </div>
......
lms/templates/learner_dashboard/programs.html
## Override the default styles_version to the Pattern Library version (version 2)
<%! main_css = "style-learner-dashboard" %>
<%page expression_filter="h"/> <%page expression_filter="h"/>
<%inherit file="../main.html" /> <%inherit file="../main.html" />
<%namespace name='static' file='../static_content.html'/> <%namespace name='static' file='../static_content.html'/>
...@@ -23,9 +26,9 @@ ProgramListFactory({ ...@@ -23,9 +26,9 @@ ProgramListFactory({
<%block name="pagetitle">${_("Programs")}</%block> <%block name="pagetitle">${_("Programs")}</%block>
<main id="main" aria-label="Content" tabindex="-1"> <main id="main" aria-label="Content" tabindex="-1">
<div class="program-list-wrapper"> <div class="program-list-wrapper grid-container">
<h2 class="sr">${_("Your Programs")}</h2> <h2 class="sr-only">${_("Your Programs")}</h2>
<div class="program-cards-container"></div> <div class="program-cards-container col"></div>
<div class="sidebar"></div> <div class="sidebar col col-last"></div>
</div> </div>
</main> </main>
lms/templates/learner_dashboard/sidebar.underscore
<div class="program-advertise"></div> <aside class="aside program-advertise"></aside>
<div class="certificates-list"></div> <aside class="aside certificates-list"></aside>
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