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):
slug=program['marketing_slug']
)
return render_to_response('learner_dashboard/programs.html', {
context = {
'programs': programs,
'progress': meter.progress,
'xseries_url': marketing_root if ProgramsApiConfig.current().show_xseries_ad else None,
'nav_hidden': True,
'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 = {
],
'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([
});
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);
$certificates.each(function(index, el){
expect($(el).html().trim()).toEqual(data.context.certificatesData[index].display_name);
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');
});
......@@ -57,7 +57,7 @@ define([
context: {certificatesData: []}
});
view.render();
$certificate = view.$el.find('.certificate-box');
$certificate = view.$el.find('.certificate-link');
expect($certificate.length).toBe(0);
});
});
......
lms/static/js/spec/learner_dashboard/sidebar_view_spec.js
......@@ -46,7 +46,7 @@ define([
});
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(){
......@@ -59,7 +59,7 @@ define([
view.render();
$ad = view.$el.find('.program-advertise');
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 @@
@import 'elements/navigation';
@import 'elements/pagination';
@import 'elements/creative-commons';
@import 'elements/program-card';
// shared - course
@import 'shared/fields';
......@@ -59,8 +58,7 @@
@import "views/financial-assistance";
@import 'views/bookmarks';
@import 'course/auto-cert';
@import 'xseries_certificates';
@import 'views/program-list';
@import 'elements/xseries-certificates';
@import 'views/api-access';
// app - discussion
......
lms/static/sass/base/_variables.scss
......@@ -306,10 +306,6 @@ $credit-color-base: rgb(244,195,0); // accessible with black text
// edx-specific: Studio/Staff actions
$staff-color: $pink;
// from the edX Pattern Library
$x-light: #E5E9EB;
$success-dark: #1E8142;
$warning-base: #FDBC56;
// ----------------------------
// #TYPOGRAPHY
......
lms/static/sass/elements/_program-card.scss
// +Imports
// ====================
@import '../base/grid-settings';
@import 'neat/neat'; // lib - Neat
%hide-until-focus {
@include left(0);
display: inline-block;
position: absolute;
top: -($baseline*30);
top: -1000px;
overflow: hidden;
}
.program-card{
@include span-columns(12);
@include span(12);
border: 1px solid $border-color-l3;
border-bottom: none;
box-sizing: border-box;
margin-bottom: $baseline;
margin-bottom: $baseline + px;
position: relative;
display: inline;
@include susy-media($bp-screen-md) {
@include span(6);
&:nth-child(2n) {
@include margin-right(0);
}
}
.card-link{
@include left(0);
@include right(0);
position: absolute;
top: 0;
bottom: 0;
right: 0;
border: 0;
z-index: 1;
opacity: 0.8;
&:active,
&:hover,
&:focus{
opacity: 1;
......@@ -37,7 +40,11 @@
.banner-image-container{
position: relative;
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{
@include left(50%);
......@@ -51,58 +58,61 @@
}
.text-section{
padding: 40px $baseline $baseline;
margin-top: 106px;
padding: 40px $baseline + px $baseline + px;
position: relative;
margin-top: 156px;
.meta-info{
@include outer-container;
font-size: em(12);
color: $gray;
position: absolute;
top: $baseline;
width: calc(100% - 40px);
.organization{
@include span-columns(6);
white-space: nowrap;
overflow: hidden;
}
@include susy-media($bp-screen-sm) { margin-top: 232px; }
@include susy-media($bp-screen-md) { margin-top: 106px; }
@include susy-media($bp-screen-lg) { margin-top: 135px; }
}
.category{
@include span-columns(6);
text-align: right;
.meta-info{
font-size: font-size(x-small);
color: palette(grayscale, dark);
position: absolute;
top: $baseline + px;
width: calc(100% - 40px);
}
.category-text{
@include float(right);
}
.organization{
@include span(6);
white-space: nowrap;
overflow: hidden;
}
.xseries-icon{
@include float(right);
@include margin-right($baseline*0.25);
background: url('#{$static-path}/images/icon-sm-xseries-black.png') no-repeat;
background-color: transparent;
background-size: 100%;
width: ($baseline*0.7);
height: ($baseline*0.7);
}
}
.category{
@include span(6);
@include text-align(right);
.category-text{
@include float(right);
}
.title{
@extend %t-title4;
font-size: em(24);
color: $gray-d2;
margin-bottom: 10px;
line-height: 1.2;
min-height: ($baseline*3);
.xseries-icon{
@include float(right);
@include margin-right($baseline*0.25 + px);
background: url('#{$static-path}/images/icon-sm-xseries-black.png') no-repeat;
background-color: transparent;
background-size: 100%;
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 {
margin-bottom: 0;
.status-text {
font-size: em(12);
color: $gray;
font-size: font-size(x-small);
color: palette(grayscale, dark);
line-height: 1;
}
.secondary {
......@@ -113,7 +123,7 @@
&:focus,
&:active {
position: relative;
top: auto;
top: 4px;
width: auto;
height: auto;
margin: 0;
......@@ -128,7 +138,7 @@
.progress {
height: 5px;
background: $x-light;
background: palette(grayscale-cool, x-light);
.bar {
@include float(left);
......@@ -136,84 +146,12 @@
position: relative;
&.complete {
background: $success-dark;
background: palette(success, dark);
}
&.in-progress {
background: $warning-base;
}
}
}
}
@include media($bp-small) {
.program-card{
@include omega(n);
@include span-columns(4);
.card-link{
.banner-image-container{
height: 166px;
background: palette(warning, base);
}
}
.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 @@
margin-bottom:$baseline;
color: $gray;
}
.certificate-box{
.certificate-link{
padding-top: $baseline;
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
.content-wrapper {
margin: 0 auto;
padding: 10px;
width: span(12);
margin: 0 auto;
background: palette(grayscale, white-t);
@media print {
padding-bottom: 0;
}
}
lms/static/sass/shared-v2/_header.scss
// LMS header styles
.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;
position: relative;
height: 74px;
margin: 0 auto;
padding: 10px 10px 0;
width: 100%;
border-bottom: 4px solid $courseware-border-bottom-color;
box-shadow: 0 1px 5px 0 $shadow-l1;
background: $header-bg;
max-width: 1180px;
.wrapper-header {
@include clearfix();
box-sizing: border-box;
height: 74px;
margin: 0 auto;
padding: 10px 10px 0;
width: 100%;
max-width: 1180px;
.logo {
@include float(left);
@include margin-right(39px);
@include margin-left(10px);
margin-top: 4px;
margin-bottom: 0;
position: relative;
}
.logo {
@include float(left);
@include margin-right(39px);
@include margin-left(10px);
margin-top: 4px;
margin-bottom: 0;
position: relative;
}
.left {
@include float(left);
}
.left {
@include float(left);
}
.right {
@include float(right);
}
.right {
@include float(right);
}
.wrapper-user-menu {
@include float(right);
margin-top: 4px;
width: auto;
}
.wrapper-user-menu {
@include float(right);
margin-top: 4px;
width: auto;
}
.dropdown-menu {
@include text-align(left);
top: inherit;
}
.dropdown-menu {
@include text-align(left);
top: inherit;
}
.list-inline {
&.nav-global {
margin-top: 12px;
}
&.nav-courseware {
margin-top: 5px;
}
.list-inline {
&.nav-global {
margin-top: 12px;
}
.item {
font-weight: font-weight(semi-bold);
text-transform: uppercase;
&.nav-courseware {
margin-top: 5px;
}
&.active {
a {
text-decoration: none;
color: $link-color;
}
}
}
}
.item {
font-weight: font-weight(semi-bold);
text-transform: uppercase;
.tab-nav-item{
@include float(left);
display: flex;
margin: 0;
justify-content: center;
&.active {
a {
text-decoration: none;
color: $link-color;
}
}
}
.tab-nav-link{
font-size: font-size(base);
font-weight: font-weight(semi-bold);
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
// ====================
@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-list-wrapper {
padding: $baseline + px;
}
.program-cards-container{
@include outer-container;
@include span-columns(12);
.program-cards-container {
@include span(12);
@include susy-media($bp-screen-md) {
@include span(9);
}
}
.sidebar{
@include outer-container;
@include span-columns(12);
.sidebar {
@include span(12);
@include float(right);
margin-bottom: $baseline;
.certificate-container{
@include xseries-certificate-container();
margin-bottom: $baseline + px;
@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;
box-sizing: border-box;
border: 1px solid $border-color-l3;
}
.program-advertise {
clear: both;
.advertise-message{
font-size: em(12);
color: $gray-d4;
margin-bottom: $baseline;
.btn-neutral {
width: 100%;
text-align: center;
padding: 10px;
}
.ad-link{
text-align:center;
a{
padding: $baseline * 0.5;
border: 1px solid $pl-button-border-color;
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);
}
}
.advertise-message {
font-size: font-size(x-small);
color: palette(grayscale, black);
margin-bottom: $baseline + px;
}
}
}
.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) {
.program-cards-container{
@include span-columns(8);
}
.sidebar{
@include span-columns(8);
&:active,
&:focus,
&:hover {
color: $link-hover;
text-decoration: underline;
}
}
}
}
.empty-programs-message {
border: 3px solid $gray-l4;
background: $gray-l6;
padding: ($baseline*2) + px 0;
text-align: center;
margin-bottom: 20px;
@include media($bp-large) {
.program-cards-container{
@include span-columns(9);
}
.sidebar{
@include omega(n);
@include span-columns(3);
.hd-3 {
color: $black;
margin-bottom: $baseline + px;
}
}
@include media($bp-huge) {
.program-cards-container{
@include span-columns(9);
}
.sidebar{
@include omega(n);
@include span-columns(3);
}
}
.find-xseries-programs {
background: $black;
border-color: $black;
color: $white;
// CASE: empty list of programs
.empty-programs-message {
border: 3px solid $gray-l4;
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;
}
.action-xseries-icon {
@include float(left);
@include margin-right($baseline*0.4 + px);
a {
@include box-sizing(border-box);
background-color: $blue;
border: 1px solid $blue;
box-shadow: 0 1px 8px 0 $shadow-l1;
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;
}
display: inline;
background: url('#{$static-path}/images/icon-sm-xseries-white.png') no-repeat;
background-color: transparent;
width: ($baseline*1.1) + px;
height: ($baseline*1.1) + px;
}
.find-xseries-programs {
@extend %btn-pl-black-base;
.action-xseries-icon {
@include float(left);
@include margin-right($baseline*0.4);
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;
&:active,
&:hover,
&:focus {
background: $white;
color: $black;
width: ($baseline*1.1);
height: ($baseline*1.1);
}
.action-xseries-icon {
background: url('#{$static-path}/images/icon-sm-xseries-black.png') no-repeat;
}
}
}
}
lms/templates/learner_dashboard/certificate.underscore
<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="">
<% _.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>
lms/templates/learner_dashboard/empty_programs_list.underscore
<section class="empty-programs-message">
<h2 class="text"><%- gettext('You are not enrolled in any XSeries Programs yet.') %></h2>
<a class="find-xseries-programs" href="<%- xseriesUrl %>">
<h2 class="hd-3"><%- gettext('You are not enrolled in any XSeries Programs yet.') %></h2>
<a class="btn-neutral find-xseries-programs" href="<%- xseriesUrl %>">
<span class="action-xseries-icon" aria-hidden="true"></span>
<span><%- gettext('Explore XSeries Programs') %></span>
</a>
......
lms/templates/learner_dashboard/explore_new_programs.underscore
......@@ -2,7 +2,7 @@
<%- gettext('Browse recently launched courses and see what\'s new in your favorite subjects') %>
</div>
<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>
<span><%- gettext('Explore New XSeries') %></span>
</a>
......
lms/templates/learner_dashboard/program_card.underscore
<div class="text-section">
<h3 id="program-<%- id %>" class="title"><%- gettext(name) %></h3>
<div class="meta-info">
<div class="organization"><%- orgList %></div>
<div class="category">
<h3 id="program-<%- id %>" class="title hd-3"><%- gettext(name) %></h3>
<div class="meta-info grid-container">
<div class="organization col"><%- orgList %></div>
<div class="category col col-last">
<span class="category-text"><%- gettext(type) %></span>
<span class="xseries-icon" aria-hidden="true"></span>
</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"/>
<%inherit file="../main.html" />
<%namespace name='static' file='../static_content.html'/>
......@@ -23,9 +26,9 @@ ProgramListFactory({
<%block name="pagetitle">${_("Programs")}</%block>
<main id="main" aria-label="Content" tabindex="-1">
<div class="program-list-wrapper">
<h2 class="sr">${_("Your Programs")}</h2>
<div class="program-cards-container"></div>
<div class="sidebar"></div>
<div class="program-list-wrapper grid-container">
<h2 class="sr-only">${_("Your Programs")}</h2>
<div class="program-cards-container col"></div>
<div class="sidebar col col-last"></div>
</div>
</main>
lms/templates/learner_dashboard/sidebar.underscore
<div class="program-advertise"></div>
<div class="certificates-list"></div>
<aside class="aside program-advertise"></aside>
<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