Skip to content

E
edx-platform
Commit d9611dcd by Matt Drayer
Options

Merge pull request #7382 from edx/mattdrayer/SOL-461 

mattdrayer/SOL-461: Student dashboard clean-up
parents 2fea7b4c bd5b0b31
Showing with 1083 additions and 1018 deletions
common/djangoapps/student/tests/test_bulk_email_settings.py
...@@ -40,9 +40,9 @@ class TestStudentDashboardEmailView(ModuleStoreTestCase): ...@@ -40,9 +40,9 @@ class TestStudentDashboardEmailView(ModuleStoreTestCase):
self.url = reverse('dashboard') self.url = reverse('dashboard')
# URL for email settings modal # URL for email settings modal
self.email_modal_link = ( self.email_modal_link = (
'<a href="#email-settings-modal" class="email-settings" rel="leanModal" ' '<a href="#email-settings-modal" class="action action-email-settings" rel="leanModal" '
'data-course-id="{org}/{num}/{name}" data-course-number="{num}" ' 'data-course-id="{org}/{num}/{name}" data-course-number="{num}" '
'data-optout="False">Email Settings</a>' 'data-dashboard-index="0" data-optout="False">Email Settings</a>'
).format( ).format(
org=self.course.org, org=self.course.org,
num=self.course.number, num=self.course.number,
...@@ -111,9 +111,9 @@ class TestStudentDashboardEmailViewXMLBacked(ModuleStoreTestCase): ...@@ -111,9 +111,9 @@ class TestStudentDashboardEmailViewXMLBacked(ModuleStoreTestCase):
# URL for email settings modal # URL for email settings modal
self.email_modal_link = ( self.email_modal_link = (
'<a href="#email-settings-modal" class="email-settings" rel="leanModal" ' '<a href="#email-settings-modal" class="action action-email-settings" rel="leanModal" '
'data-course-id="{org}/{num}/{name}" data-course-number="{num}" ' 'data-course-id="{org}/{num}/{name}" data-course-number="{num}" '
'data-optout="False">Email Settings</a>' 'data-dashboard-index="0" data-optout="False">Email Settings</a>'
).format( ).format(
org='edX', org='edX',
num='toy', num='toy',
......
common/test/acceptance/pages/lms/dashboard.py
...@@ -45,11 +45,9 @@ class DashboardPage(PageObject): ...@@ -45,11 +45,9 @@ class DashboardPage(PageObject):
Return list of the names of available courses (e.g. "999 edX Demonstration Course") Return list of the names of available courses (e.g. "999 edX Demonstration Course")
""" """
def _get_course_name(el): def _get_course_name(el):
# The first component in the link text is the course number return el.text
_, course_name = el.text.split(' ', 1)
return course_name
return self.q(css='section.info > hgroup > h3 > a').map(_get_course_name).results return self.q(css='h3.course-title > a').map(_get_course_name).results
@property @property
def full_name(self): def full_name(self):
...@@ -64,7 +62,7 @@ class DashboardPage(PageObject): ...@@ -64,7 +62,7 @@ class DashboardPage(PageObject):
@property @property
def username(self): def username(self):
"""Return the displayed value for the user's username""" """Return the displayed value for the user's username"""
return self.q(css='.user-name').text[0] return self.q(css='.username-label').text[0]
def get_enrollment_mode(self, course_name): def get_enrollment_mode(self, course_name):
"""Get the enrollment mode for a given course on the dashboard. """Get the enrollment mode for a given course on the dashboard.
...@@ -113,7 +111,7 @@ class DashboardPage(PageObject): ...@@ -113,7 +111,7 @@ class DashboardPage(PageObject):
el = course_listing[0] el = course_listing[0]
# Expand the upsell copy and click the upgrade button # Expand the upsell copy and click the upgrade button
el.find_element_by_css_selector('.message-upsell').click() el.find_element_by_css_selector('.message-upsell .ui-toggle-expansion').click()
el.find_element_by_css_selector('#upgrade-to-verified').click() el.find_element_by_css_selector('#upgrade-to-verified').click()
upgrade_page.wait_for_page() upgrade_page.wait_for_page()
...@@ -176,4 +174,4 @@ class DashboardPage(PageObject): ...@@ -176,4 +174,4 @@ class DashboardPage(PageObject):
""" """
Verify if pre-requisite course messages are being displayed. Verify if pre-requisite course messages are being displayed.
""" """
return self.q(css='section.prerequisites > .tip').visible return self.q(css='li.prerequisites > .tip').visible
lms/djangoapps/courseware/features/registration.py
...@@ -47,7 +47,14 @@ def i_should_see_that_course_in_my_dashboard(_step, doesnt_appear, course): ...@@ -47,7 +47,14 @@ def i_should_see_that_course_in_my_dashboard(_step, doesnt_appear, course):
@step(u'I unenroll from the course numbered "([^"]*)"') @step(u'I unenroll from the course numbered "([^"]*)"')
def i_unenroll_from_that_course(_step, course): def i_unenroll_from_that_course(_step, course):
unregister_css = 'section.info a[href*="#unenroll-modal"][data-course-number*="%s"]' % course more_actions_dropdown_link_selector = '[id*=actions-dropdown-link-0]'
assert world.is_css_present(more_actions_dropdown_link_selector)
world.css_click(more_actions_dropdown_link_selector)
unregister_css = 'li.actions-item a.action-unenroll[data-course-number*="{course_number}"][href*=unenroll-modal]'.format(course_number=course)
assert world.is_css_present(unregister_css)
world.css_click(unregister_css) world.css_click(unregister_css)
button_css = 'section#unenroll-modal input[value="Unenroll"]' button_css = 'section#unenroll-modal input[value="Unenroll"]'
assert world.is_css_present(button_css)
world.css_click(button_css) world.css_click(button_css)
lms/static/js/dashboard/legacy.js
...@@ -41,6 +41,7 @@ ...@@ -41,6 +41,7 @@
} }
$('.message.is-expandable .wrapper-tip').bind('click', toggleExpandMessage); $('.message.is-expandable .wrapper-tip').bind('click', toggleExpandMessage);
$('.action-more').bind('click', toggleCourseActionsDropdown);
// Track clicks of the upgrade button. The `trackLink` method is a helper that makes // Track clicks of the upgrade button. The `trackLink` method is a helper that makes
// a `track` call whenever a bound link is clicked. Usually the page would change before // a `track` call whenever a bound link is clicked. Usually the page would change before
...@@ -95,6 +96,29 @@ ...@@ -95,6 +96,29 @@
}); });
} }
function toggleCourseActionsDropdown(event) {
var dashboard_index = $(this).data('dashboard-index');
// Toggle the visibility control for the selected element and set the focus
var dropdown_selector = 'div#actions-dropdown-' + dashboard_index;
var dropdown = $(dropdown_selector);
dropdown.toggleClass('is-visible');
if (dropdown.hasClass('is-visible')) {
dropdown.attr('tabindex', -1);
} else {
dropdown.removeAttr('tabindex');
}
// Inform the ARIA framework that the dropdown has been expanded
var anchor_selector = 'a#actions-dropdown-link-' + dashboard_index;
var anchor = $(anchor_selector);
var aria_expanded_state = (anchor.attr('aria-expanded') === 'true');
anchor.attr('aria-expanded', !aria_expanded_state);
// Suppress the actual click event from the browser
event.preventDefault();
}
$("#failed-verification-button-dismiss").click(function() { $("#failed-verification-button-dismiss").click(function() {
$.ajax({ $.ajax({
url: urls.verifyToggleBannerFailedOff, url: urls.verifyToggleBannerFailedOff,
...@@ -110,7 +134,7 @@ ...@@ -110,7 +134,7 @@
Logger.log('edx.course.enrollment.upgrade.clicked', [user, course], null); Logger.log('edx.course.enrollment.upgrade.clicked', [user, course], null);
}); });
$(".email-settings").click(function(event) { $(".action-email-settings").click(function(event) {
$("#email_settings_course_id").val( $(event.target).data("course-id") ); $("#email_settings_course_id").val( $(event.target).data("course-id") );
$("#email_settings_course_number").text( $(event.target).data("course-number") ); $("#email_settings_course_number").text( $(event.target).data("course-number") );
if($(event.target).data("optout") === "False") { if($(event.target).data("optout") === "False") {
...@@ -118,7 +142,7 @@ ...@@ -118,7 +142,7 @@
} }
}); });
$(".unenroll").click(function(event) { $(".action-unenroll").click(function(event) {
$("#unenroll_course_id").val( $(event.target).data("course-id") ); $("#unenroll_course_id").val( $(event.target).data("course-id") );
$("#unenroll_course_number").text( $(event.target).data("course-number") ); $("#unenroll_course_number").text( $(event.target).data("course-number") );
}); });
...@@ -235,8 +259,8 @@ ...@@ -235,8 +259,8 @@
"#dashboard-main" "#dashboard-main"
); );
$(".email-settings").each(function(index){ $(".action-email-settings").each(function(index){
$(this).attr("id", "unenroll-" + index); $(this).attr("id", "email-settings-" + index);
// a bit of a hack, but gets the unique selector for the modal trigger // a bit of a hack, but gets the unique selector for the modal trigger
var trigger = "#" + $(this).attr("id"); var trigger = "#" + $(this).attr("id");
accessibleModal( accessibleModal(
...@@ -247,8 +271,8 @@ ...@@ -247,8 +271,8 @@
); );
}); });
$(".unenroll").each(function(index){ $(".action-unenroll").each(function(index){
$(this).attr("id", "email-settings-" + index); $(this).attr("id", "unenroll-" + index);
// a bit of a hack, but gets the unique selector for the modal trigger // a bit of a hack, but gets the unique selector for the modal trigger
var trigger = "#" + $(this).attr("id"); var trigger = "#" + $(this).attr("id");
accessibleModal( accessibleModal(
......
lms/static/sass/_shame.scss
...@@ -258,13 +258,6 @@ footer .references { ...@@ -258,13 +258,6 @@ footer .references {
// ==================== // ====================
// poor cascade made worse by CSS splitting requires us to redefine the dashboard views' visual top padding
.dashboard {
padding-top: 60px;
}
// ====================
// poor definition/scope on ul elements inside .vert-mod element in courseware - override needed for inline discussion editing // poor definition/scope on ul elements inside .vert-mod element in courseware - override needed for inline discussion editing
.course-content .discussion-post.edit-post-form .topic-menu { .course-content .discussion-post.edit-post-form .topic-menu {
padding-left: 0; padding-left: 0;
......
lms/static/sass/base/_base.scss
...@@ -128,7 +128,7 @@ a:focus { ...@@ -128,7 +128,7 @@ a:focus {
@include clearfix(); @include clearfix();
@include box-sizing(border-box); @include box-sizing(border-box);
margin: 0 auto 0; margin: 0 auto 0;
padding: 0 ($baseline*1.5); padding: ($baseline*2) 0;
max-width: grid-width(12); max-width: grid-width(12);
min-width: 760px; min-width: 760px;
width: flex-grid(12); width: flex-grid(12);
......
lms/static/sass/base/_extends.scss
...@@ -120,3 +120,11 @@ ...@@ -120,3 +120,11 @@
padding: ($baseline/5) ($baseline/2); padding: ($baseline/5) ($baseline/2);
color: shade($warning-color, 45%); color: shade($warning-color, 45%);
} }
// extends - content - text overflow by ellipsis
%cont-truncated {
@include box-sizing(border-box);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
lms/static/sass/base/_variables.scss
...@@ -133,6 +133,11 @@ $green-u1: desaturate($green,15%); ...@@ -133,6 +133,11 @@ $green-u1: desaturate($green,15%);
$green-u2: desaturate($green,30%); $green-u2: desaturate($green,30%);
$green-u3: desaturate($green,45%); $green-u3: desaturate($green,45%);
// COLORS: social platforms
$twitter-blue: #55ACEE;
$facebook-blue: #3B5998;
$linkedin-blue: #0077B5;
// TODO: both blue and yellow variables differ from CMS rgb value, need to confirm change to CMS variable is ok in current platform uses before switching. // TODO: both blue and yellow variables differ from CMS rgb value, need to confirm change to CMS variable is ok in current platform uses before switching.
$blue: rgb(29,157,217); $blue: rgb(29,157,217);
$yellow: rgb(255, 252, 221); $yellow: rgb(255, 252, 221);
......
lms/static/sass/elements/_typography.scss
...@@ -41,6 +41,7 @@ ...@@ -41,6 +41,7 @@
} }
%t-title3 { %t-title3 {
@extend %t-title;
@include font-size(36); @include font-size(36);
@include line-height(36); @include line-height(36);
} }
......
lms/static/sass/multicourse/_dashboard.scss
// lms - views - user/student dashboard // lms - views - user/student dashboard
// ==================== // ====================
// Table of Contents
// * +Dashboard - Sidebar
// * +Dashboard - Course Listing
// * +Dashboard - Course Item
// * +Misc - Uncategorized
// * +Dashboard - Banner
// +Dashboard - Sidebar
// ====================
.dashboard { .dashboard {
@include clearfix(); @include clearfix();
padding: ($baseline*2) 0 0 0; padding: ($baseline*2) 0 0 0;
.profile-sidebar { .profile-sidebar {
background: transparent; @include float(right);
@include float(left); @include margin-left(flex-gutter());
@include margin-right(flex-gutter());
width: flex-grid(3); width: flex-grid(3);
background: transparent; background: transparent;
box-shadow: 0 0 1px $shadow-l1;
header.profile { .profile {
@include box-sizing(border-box); @include box-sizing(border-box);
border: 1px solid $border-color-2; border: 1px solid $border-color-2;
border-radius: ($baseline/4) ($baseline/4) 0 0; border-radius: ($baseline/4) ($baseline/4) 0 0;
width: flex-grid(12); width: flex-grid(12);
background: $dashboard-profile-color;
.user-name { .username-header {
margin-bottom: 0;
}
.username-label {
@extend %t-title7;
@extend %t-ultrastrong;
@extend %cont-truncated;
text-align: center;
display: block; display: block;
overflow: hidden;
margin: 0; margin: 0;
padding: ($baseline*0.75) ($baseline/2) 0; padding: ($baseline*0.75) $baseline;
color: $base-font-color; color: $base-font-color;
text-transform: none; text-transform: none;
text-wrap: nowrap;
text-overflow: ellipsis;
text-align: center;
font-weight: 700;
line-height: 1.2em;
} }
} }
...@@ -185,121 +194,47 @@ ...@@ -185,121 +194,47 @@
} }
} }
} }
}
.news-carousel {
@include clearfix();
margin: 30px 10px 0;
border: 1px solid $border-color-2;
background: $dashboard-profile-color;
box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.15);
* {
font-family: $sans-serif;
}
header {
@include clearfix();
height: 50px;
}
.page-dots {
float: right;
margin: 18px 15px 0 0;
li {
float: left;
margin-left: 6px;
}
}
.page-dot {
display: block;
width: 11px;
height: 11px;
border-radius: 11px;
background: $dot-color;
&:hover, &:focus {
background: $lighter-base-font-color;
}
&.current {
background: $link-color;
}
}
h4 { // status
float: left; .status {
margin-left: ($baseline*0.75);
font-size: 15px;
line-height: 48px;
font-weight: 700;
text-transform: uppercase;
}
.pages {
position: relative;
}
.page {
display: none;
position: absolute;
top: 0;
left: 0;
&:first-child {
display: block;
}
}
section {
padding: 0 10px;
}
.news-image { .list--nav {
height: 180px; margin: ($baseline/2) 0 0 0;
margin-bottom: ($baseline*0.75); padding: 0;
img {
width: 100%;
border: 1px solid $border-color-1;
} }
}
h5 { .nav__item {
margin-bottom: 8px; @extend %t-weight4;
margin-left: ($baseline/4); @include font-size(13);
margin-left: 26px;
a {
font-size: 16px;
font-weight: 700;
} }
} }
.excerpt {
margin-left: ($baseline/4);
font-size: 13px;
padding-bottom: 40px;
}
} }
} }
}
// ==================== // +Dashboard - Course Listing
// ====================
// course listings .dashboard {
.my-courses { .my-courses {
@include float(left); @include float(left);
margin: 0; margin: 0;
width: flex-grid(9); width: flex-grid(9);
> header {
border-bottom: 1px solid $border-color-2; .wrapper-header-courses {
margin-bottom: ($baseline*1.5); border-bottom: 4px solid $border-color-l4;
margin-bottom: $baseline;
.header-courses {
@extend %t-title5;
@include padding-right($baseline/2);
}
} }
// CASE: empty dashboard
.empty-dashboard-message { .empty-dashboard-message {
padding: 60px 0px; padding: ($baseline*2) 0;
text-align: center; text-align: center;
p { p {
...@@ -339,9 +274,9 @@ ...@@ -339,9 +274,9 @@
@extend %ui-no-list; @extend %ui-no-list;
.course-item { .course-item {
margin-bottom: ($baseline*2.5); margin-bottom: $baseline;
border-bottom: 4px solid $border-color-l4; border-bottom: 4px solid $border-color-l4;
padding-bottom: ($baseline*2.5); padding-bottom: $baseline;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
...@@ -350,357 +285,401 @@ ...@@ -350,357 +285,401 @@
} }
} }
} }
}
}
// ==================== // +Dashboard - Course
// ====================
.dashboard .my-courses {
// UI: individual course item // UI: individual course item
.course { .course {
@include box-sizing(box); @include box-sizing(box);
@include transition(all 0.15s linear 0s); @include transition(all 0.15s linear 0s);
@include clearfix();
@extend %ui-depth2;
position: relative;
margin: ($baseline/2);
.details {
@include clearfix(); @include clearfix();
@extend %ui-depth2;
position: relative;
.cover { .wrapper-course-image {
@include box-sizing(border-box);
@include transition(all 0.15s linear 0s);
overflow: hidden;
position: relative;
@include float(left); @include float(left);
height: 100%; @include margin-right(flex-gutter());
max-height: 100%; width: flex-grid(3);
width: 200px;
height: 120px;
margin: 0;
border-radius: ($baseline/10);
border: 1px solid $dashboard-course-cover-border;
border-bottom: 4px solid $dashboard-course-cover-border;
padding: ($baseline/10);
img { .cover {
width: 100%; @include box-sizing(border-box);
min-height: 100%; @include transition(all 0.15s linear 0s);
} @include float(left);
} overflow: hidden;
position: relative;
max-height: 120px;
border-radius: ($baseline/5);
border: 1px solid $dashboard-course-cover-border;
border-bottom: 4px solid $dashboard-course-cover-border;
.info { .course-image {
@include clearfix(); width: 100%;
@include padding(0, 10px, 0, 230px); }
}
> hgroup { // "enrolled as" status
padding: 0; .sts-enrollment {
@include float(left);
width: 100%; width: 100%;
position: relative;
bottom: 15px;
display: inline-block;
text-align: center;
.university { .label {
color: $lighter-base-font-color; @extend %text-sr;
font-family: $sans-serif;
font-size: 16px;
font-weight: 400;
margin: 0 0 6px;
text-transform: none;
letter-spacing: 0;
} }
.date-block { .deco-graphic {
position: absolute; position: absolute;
top: 0; top: -5px;
@include right(0); @include right(0);
font-family: $sans-serif;
font-size: 13px;
font-style: italic;
color: $lighter-base-font-color;
} }
h3 a, h3 span { .sts-enrollment-value {
display: block; @extend %ui-depth1;
margin-bottom: ($baseline/2); @extend %copy-badge;
font-family: $sans-serif; @extend %t-demi-strong;
font-size: 34px; font-size: 0.6em;
line-height: 42px; line-height: 1.5em;
font-weight: 300; border-radius: 0;
padding: 1px ($baseline/4);
&:hover, &:focus { color: white;
text-decoration: none;
}
} }
} }
}
.course-status { .wrapper-course-details {
background: $yellow; display: block;
border: 1px solid $border-color-2; @include float(left);
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6); width: flex-grid(9);
margin-top: 17px; padding: 0;
margin-right: flex-gutter(); }
padding: ($baseline/4);
width: flex-grid(8);
float: left;
@include box-sizing(border-box);
p { .course-title {
color: $lighter-base-font-color;
font-style: italic; a, span {
letter-spacing: 1px; @extend %t-title3;
text-align: center; @extend %t-light;
display: inline-block;
margin-bottom: ($baseline/2);
&:hover, &:focus {
text-decoration: none;
} }
} }
}
.course-status-completed { .course-info {
background: $gray-l3; display: block;
color: $very-light-text; @include float(left);
width: flex-grid(4);
padding: 0;
margin-top: ($baseline/2);
p { [class*="info-"] {
color: #222; color: $gray-d1;
@extend %t-title6;
display: inline-block;
}
span { .info-date-block {
font-weight: bold; @extend %t-title7;
} color: $gray-l1;
} display: block;
} }
}
.wrapper-course-actions {
display: block;
@include float(right);
width: flex-grid(8);
padding: 0;
margin-top: ($baseline/2);
}
.course-actions {
.enter-course { // UI: course item actions
@include button(simple, $button-color);
.action {
@include box-sizing(border-box); @include box-sizing(border-box);
@include margin-right($baseline/2);
@include float(right);
min-width: ($baseline*2);
color: $gray-l1;
border-radius: 3px; border-radius: 3px;
display: block; padding: 12px;
@include float(left); border: 1px solid $white;
font: normal 15px/1.6rem $sans-serif;
letter-spacing: 0; &:hover, &:focus {
padding: 6px 32px 7px; color: $gray-d3;
text-align: center; border: 1px solid $gray-l4;
margin-top: 16px; }
&.archived { // STATE: is-disabled
@include button(simple, $button-archive-color); &.is-disabled {
font: normal 15px/1.6rem $sans-serif; color: $gray-l4;
padding: 6px 32px 7px; }
&:hover, &:focus { // TYPE: facebook share
text-decoration: none; &.action-facebook, {
} color: $facebook-blue;
} }
&:hover, &:focus { // TYPE: twitter share
text-decoration: none; &.action-twitter {
color: $twitter-blue;
} }
} }
}
.prerequisites { // UI: general actions dropdown layout
@include clearfix; .wrapper-action-more {
display: inline-block;
position: relative;
@include float(right);
.tip {
font-family: $sans-serif;
font-size: 1em;
color: $lighter-base-font-color;
margin-top: ($baseline/2);
}
}
// "enrolled as" status .actions-dropdown {
.sts-enrollment { @extend %ui-no-list;
position: absolute; @extend %ui-depth1;
top: 105px; display: none;
@include left(0); position: absolute;
display: inline-block; top: ($baseline*2);
text-align: center; right: 19px;
width: 200px; pointer-events: none;
min-width: ($baseline*7);
.label { &.is-visible {
@extend %text-sr; display: block;
} pointer-events: auto;
}
.deco-graphic { .actions-dropdown-list {
position: absolute; @extend %ui-no-list;
top: -5px; @include box-sizing(border-box);
right: -8px; display: table;
} box-shadow: 0 1px 1px $shadow-l1;
position: relative;
width: 100%;
border-radius: 3px;
margin: ($baseline/4) 0 0 0;
border: 1px solid $gray-l3;
padding: ($baseline/4) ($baseline/2);
background: $white;
// ui triangle/nub
&:after,
&:before {
bottom: 100%;
@include right(3px);
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.sts-enrollment-value { &:after {
@extend %ui-depth1; border-color: $transparent;
@extend %copy-badge; border-bottom-color: $white;
font-size: 0.6em; border-width: 6px;
line-height: 1.5em; @include margin-right(1px);
font-weight: 600; }
border-radius: 0;
padding: 1px ($baseline/2);
color: white;
}
}
// ==================== &:before {
border-color: $transparent;
border-bottom-color: $gray-l3;
border-width: 7px;
}
}
// CASE: "enrolled as" status - professional ed .actions-item {
&.professional { @extend %t-title7;
display: block;
margin: 0;
// changes to cover &.is-hidden {
.cover { display: none;
border-color: $professional-color-lvl3; }
padding: ($baseline/10);
}
// course enrollment status message .action {
.sts-enrollment { @include margin-right(0);
.label {
@extend %text-sr;
}
// status message &:hover, &:focus {
.sts-enrollment-value { border: 1px solid transparent;
background: $professional-color-lvl3; }
}
}
} }
} }
} }
// CASE: "enrolled as" status - verified .course-status {
&.verified { background: $yellow;
border: 1px solid $border-color-2;
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
margin-top: 17px;
margin-right: flex-gutter();
padding: ($baseline/4);
width: flex-grid(8);
@include float(left);
@include box-sizing(border-box);
// changes to cover p {
.cover { color: $lighter-base-font-color;
border-color: $verified-color-lvl1; font-style: italic;
padding: ($baseline/10); letter-spacing: 1px;
text-align: center;
} }
}
// course enrollment status message .course-status-completed {
.sts-enrollment { background: $gray-l3;
.label { color: $very-light-text;
@extend %text-sr;
}
.deco-graphic { p {
@extend %ui-depth3; color: $gray-d4;
width: 40px;
position: absolute;
top: -4px;
right: -6px;
}
// status message span {
.sts-enrollment-value { font-weight: bold;
background: $verified-color-lvl1;
} }
} }
} }
// CASE: "enrolled as" status - honor code .enter-course {
&.honor { @include button(simple, $button-color);
@include box-sizing(border-box);
// changes to cover border-radius: 3px;
.cover { @include float(right);
border-color: $honorcode-color-lvl2; font: normal 15px/1.6rem $sans-serif;
padding: ($baseline/10); letter-spacing: 0;
} text-align: center;
// status message
.sts-enrollment-value {
background: $honorcode-color-lvl1;
}
}
// CASE: "enrolled as" status - auditing &.archived {
&.audit { @include button(simple, $button-archive-color);
font: normal 15px/1.6rem $sans-serif;
// changes to cover &:hover, &:focus {
.cover { text-decoration: none;
border-color: $audit-color-lvl2; }
padding: ($baseline/10);
} }
// status message &:hover, &:focus {
.sts-enrollment-value { text-decoration: none;
background: $audit-color-lvl1;
} }
} }
} }
// ==================== // ====================
// UI: message // UI: messages
.wrapper-message-primary { .wrapper-messages-primary {
@include clearfix(); @include clearfix();
}
.message { .messages-list {
border-radius: 3px; margin: 0;
display: none; padding: 0;
z-index: 10;
margin: $baseline 0 ($baseline/2) 0;
padding: ($baseline*0.5) $baseline;
font-family: $sans-serif;
background: tint($yellow,70%);
border: 1px solid $gray-l3;
// STATE: shown
&.is-shown {
display: block;
} }
a { .message {
font-family: $sans-serif; @extend %ui-depth1;
} border-radius: 3px;
display: none;
margin: $baseline 0 ($baseline/2) 0;
padding: ($baseline/2) $baseline;
background: $gray-l5;
border: 1px solid $gray-l4;
strong { // STATE: shown
font-weight: 700; &.is-shown {
display: block;
}
a { a {
font-family: $sans-serif;
}
strong {
font-weight: 700; font-weight: 700;
a {
font-weight: 700;
}
} }
}
.actions { .actions {
@include clearfix(); @include clearfix();
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.message-title, .message-title,
.message-copy .title { .message-copy .title {
@extend %t-title6; @extend %t-title6;
@extend %t-weight4; @extend %t-weight4;
line-height: 1em; line-height: 1em;
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
} }
.message-copy, .message-copy,
.message-copy .copy { .message-copy .copy {
@extend %t-copy-sub1; @extend %t-copy-sub1;
margin: 2px 0 0 0; margin: 2px 0 0 0;
} }
// CASE: expandable // CASE: expandable
&.is-expandable { &.is-expandable {
.wrapper-tip { .wrapper-tip {
.message-title, .message-copy { .message-title, .message-copy {
margin-bottom: 0; margin-bottom: 0;
} display: inline-block;
}
.message-title .value, .message-copy { .message-title .value, .message-copy {
@include transition(color $tmg-f2 ease-in-out 0s); @include transition(color $tmg-f2 ease-in-out 0s);
} }
// STATE: hover // STATE: hover
&:hover { &:hover {
cursor: pointer; cursor: pointer;
.message-title .value, .message-copy, .ui-toggle-expansion { .message-title .value, .message-copy, .ui-toggle-expansion {
color: $link-color; color: $link-color;
}
} }
} }
}
.wrapper-extended { .wrapper-extended {
@include transition(opacity $tmg-f2 ease-in-out 0); @include transition(opacity $tmg-f2 ease-in-out 0);
display: none; display: none;
opacity: 0.0; opacity: 0.0;
}
} }
// STATE: is expanded // STATE: is expanded
&.is-expanded { &.is-expanded {
.ui-toggle-expansion { .ui-toggle-expansion {
@include transform(rotate(0)); @include rtl {
@include transform(rotate(-90deg));
}
@include ltr {
@include transform(rotate(90deg));
}
@include transform-origin(50% 50%); @include transform-origin(50% 50%);
} }
...@@ -709,339 +688,389 @@ ...@@ -709,339 +688,389 @@
opacity: 1.0; opacity: 1.0;
} }
} }
}
}
// TYPE: upsell // TYPE: upsell
.message-upsell { &.message-upsell {
.wrapper-tip { .wrapper-tip {
@include clearfix(); @include clearfix();
.message-title { .message-title {
float: left; @include float(left);
} }
.ui-toggle-expansion { .ui-toggle-expansion {
@include transition(all $tmg-f2 ease-in-out 0s); @include transition(all $tmg-f2 ease-in-out 0s);
@include transform-origin(50% 50%); @include font-size(18);
@include font-size(21); display: inline-block;
display: inline-block; vertical-align: middle;
vertical-align: middle; margin-right: ($baseline/4);
margin-right: ($baseline/4); }
@include rtl { .message-copy {
@include transform(rotate(90deg)); @include float(right);
}
} }
@include ltr { .wrapper-extended {
@include transform(rotate(-90deg)); padding: ($baseline/2) 0;
.message-copy {
margin-bottom: $baseline;
}
} }
}
.message-copy { .action-upgrade {
float: right; @extend %btn-primary-green;
} @include clearfix();
} position: relative;
left: ($baseline/2);
padding: 8px $baseline 8px ($baseline*2);
.deco-graphic {
position: absolute;
top: -($baseline/4);
left: -($baseline*0.75);
width: ($baseline*2);
}
.wrapper-extended { span {
padding: ($baseline/2) 0; color: $white; // nasty but needed override for poor <span> styling
}
.message-copy { .copy, .copy-sub {
margin-bottom: $baseline; display: inline-block;
} vertical-align: middle;
} }
.action-upgrade { .copy {
@extend %btn-primary-green; @extend %t-action3;
@include clearfix(); @extend %t-weight4;
position: relative; margin-right: $baseline;
left: ($baseline/2); }
padding: 8px $baseline 8px ($baseline*2);
.deco-graphic { .copy-sub {
position: absolute; @extend %t-action4;
top: -($baseline/4); opacity: 0.875;
left: -($baseline*0.75); }
width: ($baseline*2); }
} }
span { // TYPE: status
color: $white; // nasty but needed override for poor <span> styling &.message-status {
} background: tint($yellow,70%);
border-color: $gray-l3;
.copy, .copy-sub { .message-copy {
display: inline-block; @extend %t-copy-sub1;
vertical-align: middle; margin: 0;
}
.copy { .grade-value {
@extend %t-action3; font-size: 1.2rem;
@extend %t-weight4; font-weight: bold;
margin-right: $baseline; }
} }
.copy-sub { .actions {
@extend %t-action4;
opacity: 0.875;
}
}
}
// TYPE: status .action {
.message-status { @include float(left);
background: tint($yellow,70%); margin: 0 15px 0 0;
border-color: $gray-l3;
.message-copy { .btn, .cta {
@extend %t-copy-sub1; display: inline-block;
margin: 0; }
.grade-value { .btn {
font-size: 1.2rem; @include box-sizing(border-box);
font-weight: bold; @include float(left);
} border-radius: 3px;
} font: normal 0.8rem/1.2rem $sans-serif;
letter-spacing: 1px;
padding: 6px 12px;
text-align: center;
&.disabled {
cursor: default !important;
&:hover, &:focus {
@include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100% ));
background: #eee;
}
}
}
.actions { .cta {
@include float(left);
font: normal 0.8rem/1.2rem $sans-serif;
letter-spacing: 1px;
padding: 6px 12px;
text-align: center;
}
}
}
.action { .exam-registration-number {
float: left; font-family: $sans-serif;
margin: 0 15px 0 0; font-size: 18px;
.btn, .cta { a {
display: inline-block; font-family: $sans-serif;
}
} }
.btn { &.exam-register {
@include box-sizing(border-box);
border-radius: 3px; .message-copy {
float: left; margin-top: ($baseline/4);
font: normal 0.8rem/1.2rem $sans-serif; width: 55%;
letter-spacing: 1px;
padding: 6px 12px;
text-align: center;
&.disabled {
cursor: default !important;
&:hover, &:focus {
background: #eee;
background-image: -webkit-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
background-image: -moz-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
background-image: -ms-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
background-image: -o-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
background-image: linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
}
} }
} }
.cta { &.exam-schedule {
float: left; .exam-button {
font: normal 0.8rem/1.2rem $sans-serif; margin-top: ($baseline/4);
letter-spacing: 1px; }
padding: 6px 12px;
text-align: center;
} }
}
}
.exam-registration-number {
font-family: $sans-serif;
font-size: 18px;
a { .exam-button {
font-family: $sans-serif; @include button(simple, $pink);
} @include float(right);
} margin-top: 0;
}
&.exam-register { .contact-button {
@include button(simple, $pink);
}
.message-copy { .button {
margin-top: ($baseline/4); display: inline-block;
width: 55%; margin-top: ($baseline/2);
} padding: 9px 18px 10px;
} font-size: 13px;
font-weight: bold;
letter-spacing: 0;
&.exam-schedule { &:hover, &:focus {
.exam-button { text-decoration: none;
margin-top: ($baseline/4); }
} }
}
.exam-button { &.course-status-processing {
@include button(simple, $pink); background-color: $gray-l5;
margin-top: 0; border: 0;
float: right; }
}
.contact-button { &.course-status-certnotavailable {
@include button(simple, $pink); background-color: $gray-l5;
} border: 0;
}
.button { &.course-status-certrendering {
display: inline-block; background-color: $gray-l5;
margin-top: ($baseline/2); border: 0;
padding: 9px 18px 10px;
font-size: 13px;
font-weight: bold;
letter-spacing: 0;
&:hover, &:focus { .cta {
text-decoration: none; margin-top: 2px;
} }
} }
&.course-status-processing { &.course-status-certavailable {
background-color: $gray-l5; background-color: $gray-l5;
border: 0; border: 0;
}
&.course-status-certnotavailable { .message-copy {
background-color: $gray-l5; width: flex-grid(6, 12);
border: 0; position: relative;
} @include float(left);
}
&.course-status-certrendering { .actions-primary {
background-color: $gray-l5; width: flex-grid(6, 12);
border: 0; position: relative;
@include float(right);
.cta { .action {
margin-top: 2px; @include margin(0, 0, ($baseline/2), ($baseline*.75));
} float: none;
} text-align: center;
&.course-status-certavailable { &:last-child {
background-color: $gray-l5; margin-bottom: 0;
border: 0; }
.message-copy { .btn {
width: flex-grid(6, 12); float: none;
position: relative; }
@include float(left); }
}
.actions-primary { .action-certificate .btn {
width: flex-grid(6, 12); @extend %btn-inherited-primary;
position: relative; @include box-sizing(border-box);
@include float(right); float: none;
border-radius: 3px;
display: block;
@include padding(7px, ($baseline*.75), 7px, ($baseline*.75));
text-align: center;
.action { a:link, a:visited {
@include margin(0, 0, ($baseline/2), ($baseline*.75)); color: #fff;
float: none; }
text-align: center; }
&:last-child { .action-share .btn {
margin-bottom: 0; display: inline;
letter-spacing: 0;
}
} }
}
.actions-secondary {
margin-top: ($baseline/2);
border-top: 1px solid $gray-l4;
padding-top: ($baseline/2);
.btn { .action-share {
float: none; @include float(right);
margin: 0;
} }
} }
.action-certificate .btn { .certificate-explanation {
@extend %btn-inherited-primary; @extend %t-copy-sub1;
@include box-sizing(border-box); margin-top: ($baseline/2);
float: none; border-top: 1px solid $gray-l4;
border-radius: 3px; padding-top: ($baseline/2);
display: block; }
@include padding(7px, ($baseline*.75), 7px, ($baseline*.75));
text-align: center;
a:link, a:visited { .verification-reminder {
color: #fff; width: flex-grid(8, 12);
@include float(left);
position: relative;
}
.verification-cta {
width: flex-grid(4, 12);
@include float(left);
position: relative;
.cta {
@include button(simple, $green-d1);
@include box-sizing(border-box);
@include float(right);
border-radius: 3px;
display: block;
font: normal 15px/1.6rem $sans-serif;
letter-spacing: 0;
padding: 6px 32px 7px;
text-align: center;
} }
} }
}
.action-share .btn { // TYPE: pre-requisites
display: inline; .prerequisites {
letter-spacing: 0; @include clearfix;
.tip {
font-family: $sans-serif;
font-size: 1em;
color: $lighter-base-font-color;
margin-top: ($baseline/2);
} }
} }
} }
}
.actions-secondary { // ====================
margin-top: ($baseline/2);
border-top: 1px solid $gray-l4;
padding-top: ($baseline/2);
.action-share { // CASE: "enrolled as" status - professional ed
@include float(right); &.professional {
margin: 0;
} // changes to cover
.wrapper-course-image .cover {
border-color: $professional-color-lvl3;
padding: ($baseline/10);
} }
.certificate-explanation { // course enrollment status message
@extend %t-copy-sub1; .sts-enrollment {
margin-top: ($baseline/2); .label {
border-top: 1px solid $gray-l4; @extend %text-sr;
padding-top: ($baseline/2); }
// status message
.sts-enrollment-value {
background: $professional-color-lvl3;
}
} }
}
.verification-reminder { // CASE: "enrolled as" status - verified
width: flex-grid(8, 12); &.verified {
position: relative;
float: left; // changes to cover
.wrapper-course-image .cover {
border-color: $verified-color-lvl1;
padding: ($baseline/10);
} }
.verification-cta { // course enrollment status message
width: flex-grid(4, 12); .sts-enrollment {
position: relative; .label {
float: left; @extend %text-sr;
}
.cta { .deco-graphic {
@include button(simple, $green-d1); @extend %ui-depth3;
@include box-sizing(border-box); width: 40px;
@include float(right); position: absolute;
border-radius: 3px; top: -5px;
display: block; @include right(0);
font: normal 15px/1.6rem $sans-serif; }
letter-spacing: 0;
padding: 6px 32px 7px; // status message
text-align: center; .sts-enrollment-value {
background: $verified-color-lvl1;
} }
} }
} }
a.unenroll { // CASE: "enrolled as" status - honor code
@include float(right); &.honor {
display: block;
font-style: italic;
color: $lighter-base-font-color;
text-decoration: underline;
font-size: .8em;
margin-top: 32px;
&:hover, &:focus { // changes to cover
color: #333; .wrapper-course-image .cover {
border-color: $honorcode-color-lvl2;
padding: ($baseline/10);
} }
}
a.email-settings { // status message
@extend a.unenroll; .sts-enrollment-value {
@include margin-right(10px); background: $honorcode-color-lvl1;
}
} }
}
// account-related // CASE: "enrolled as" status - auditing
.user-info { &.audit {
// status // changes to cover
.status { .wrapper-course-image .cover {
border-color: $audit-color-lvl2;
.list--nav { padding: ($baseline/10);
margin: ($baseline/2) 0 0 0;
padding: 0;
} }
.nav__item { // status message
@extend %t-weight4; .sts-enrollment-value {
@include font-size(13); background: $audit-color-lvl1;
margin-left: 26px;
} }
} }
} }
}
// +Misc - Uncategorized
// ====================
.dashboard .my-courses {
// status - language // status - language
.status-language { .status-language {
...@@ -1215,8 +1244,8 @@ ...@@ -1215,8 +1244,8 @@
.enter-course-blocked{ .enter-course-blocked{
@include box-sizing(border-box); @include box-sizing(border-box);
@include float(left);
display: block; display: block;
float: left;
font: normal 15px/1.6rem $sans-serif; font: normal 15px/1.6rem $sans-serif;
letter-spacing: 0; letter-spacing: 0;
padding: 6px 32px 7px; padding: 6px 32px 7px;
...@@ -1227,113 +1256,103 @@ ...@@ -1227,113 +1256,103 @@
border:0; border:0;
color:white; color:white;
box-shadow:none; box-shadow:none;
&.archived { &.archived {
@include button(simple, $button-archive-color); @include button(simple, $button-archive-color);
font: normal 15px/1.6rem $sans-serif; font: normal 15px/1.6rem $sans-serif;
padding: 6px 32px 7px; padding: 6px 32px 7px;
&:hover, &:focus { &:hover, &:focus {
text-decoration: none; text-decoration: none;
} }
} }
} }
a.disable-look{ a.disable-look{
color: #808080; color: #808080;
} }
a.disable-look-unregister{
color: #808080;
float: right;
display: block;
font-style: italic;
color: $lighter-base-font-color;
text-decoration: underline;
font-size: .8em;
margin-top: 32px;
}
a.disable-look-settings{
@extend a.disable-look-unregister;
margin-right: ($baseline/2);
}
}
a.fade-cover{ a.fade-cover{
@extend .cover; @extend .cover;
opacity: 0.5; opacity: 0.5;
} }
}
.dashboard-banner { // +Dashboard - Banner
// ====================
&:empty { .dashboard .my-courses {
display: none; .dashboard-banner {
}
.wrapper-msg {
padding-bottom: 0;
.msg { &:empty {
@include clearfix(); display: none;
font-family: $sans-serif; }
padding-bottom: $baseline;
border-bottom: thin solid $gray;
&.title { .wrapper-msg {
@extend %t-title5; padding-bottom: 0;
@extend %t-weight4;
font-family: $f-sans-serif;
// Overriding Platform h2 styles .msg {
text-transform: none; @include clearfix();
letter-spacing: 0; font-family: $sans-serif;
} padding-bottom: $baseline;
border-bottom: thin solid $gray;
&.has-actions { &.title {
@extend %t-title5;
@extend %t-weight4;
font-family: $f-sans-serif;
.donate-content { // Overriding Platform h2 styles
width: flex-grid(8, 12); text-transform: none;
letter-spacing: 0;
} }
.donate-actions { &.has-actions {
width: flex-grid(4, 12);
vertical-align: bottom;
display: inline-block;
.monetary-symbol { .donate-content {
vertical-align: middle; width: flex-grid(8, 12);
color: $white;
font-weight: 600;
} }
.amount { .donate-actions {
height: 40px; width: flex-grid(4, 12);
width: 80px; vertical-align: bottom;
vertical-align: middle; display: inline-block;
text-align: left;
border: 2px solid $white;
&.validation-error { .monetary-symbol {
border: 2px solid $error-color; vertical-align: middle;
color: $white;
font-weight: 600;
} }
}
.action-donate { .amount {
@extend %btn-primary-blue; height: 40px;
vertical-align: middle; width: 80px;
padding-top: ($baseline/2); vertical-align: middle;
padding-bottom: ($baseline/2); text-align: left;
text-shadow: none; border: 2px solid $white;
text-transform: none;
letter-spacing: 0;
color: $white;
font-weight: 600;
}
.donation-error-msg { &.validation-error {
padding: ($baseline/2) 0; border: 2px solid $error-color;
}
}
.action-donate {
@extend %btn-primary-blue;
vertical-align: middle;
padding-top: ($baseline/2);
padding-bottom: ($baseline/2);
text-shadow: none;
text-transform: none;
letter-spacing: 0;
color: $white;
font-weight: 600;
}
.donation-error-msg {
padding: ($baseline/2) 0;
}
} }
} }
} }
} }
} }
} }
lms/static/sass/shared/_header.scss
...@@ -117,7 +117,7 @@ header.global { ...@@ -117,7 +117,7 @@ header.global {
.user { .user {
@include float(right); @include float(right);
margin-top: 4px; margin-top: ($baseline/4);
> .primary { > .primary {
display: block; display: block;
...@@ -135,7 +135,7 @@ header.global { ...@@ -135,7 +135,7 @@ header.global {
> a { > a {
@include border-radius(0, 4px, 4px, 0); @include border-radius(0, 4px, 4px, 0);
@include border-left(none); @include border-left(none);
padding: 3px 8px 9px 8px; padding: ($baseline/4) 8px 11px ($baseline/2);
&.shopping-cart { &.shopping-cart {
border-radius: 4px; border-radius: 4px;
...@@ -148,7 +148,7 @@ header.global { ...@@ -148,7 +148,7 @@ header.global {
} }
a.user-link { a.user-link {
@include padding(3px, 12px, 8px, 8px); @include padding(5px, 12px, 10px, 10px);
position: relative; position: relative;
text-transform: none; text-transform: none;
font-size: 14px; font-size: 14px;
...@@ -196,17 +196,17 @@ header.global { ...@@ -196,17 +196,17 @@ header.global {
} }
.dropdown-menu { .dropdown-menu {
background: $border-color-4; background: $white;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3); box-shadow: 0 2px 2px 0 rgba(0,0,0, 0.3);
border: 1px solid $border-color-3; border: 1px solid $gray-l3;
display: none; display: none;
margin-top: 0; margin-top: 0;
padding: 5px 10px; padding: 5px 10px;
position: absolute; position: absolute;
@include right(0px); @include right(0px);
top: 34px; top: 37px;
width: 170px; min-width: 120px;
z-index: 3; z-index: 3;
&.expanded { &.expanded {
...@@ -221,14 +221,14 @@ header.global { ...@@ -221,14 +221,14 @@ header.global {
bottom: 6px solid transparent; bottom: 6px solid transparent;
left: 6px solid transparent; left: 6px solid transparent;
} }
box-shadow: 1px 0 0 0 $border-color-3, 0 -1px 0 0 $border-color-3; box-shadow: 1px 0 0 0 $gray-l3, 0 -1px 0 0 $gray-l3;
content: ""; content: "";
display: block; display: block;
height: 0px; height: 0px;
position: absolute; position: absolute;
@include transform(rotate(-45deg)); @include transform(rotate(-45deg));
@include right(7px); @include right(7px);
top: -6px; top: -5px;
width: 0px; width: 0px;
} }
...@@ -579,7 +579,7 @@ header.global-new { ...@@ -579,7 +579,7 @@ header.global-new {
li { li {
display: block; display: block;
border-top: 1px dotted $border-color-2; border-top: 1px solid $gray-l3;
box-shadow: inset 0 1px 0 0 rgba(255,255,255, 0.05); box-shadow: inset 0 1px 0 0 rgba(255,255,255, 0.05);
&:first-child { &:first-child {
......
lms/templates/dashboard.html
...@@ -74,10 +74,59 @@ ...@@ -74,10 +74,59 @@
</div> </div>
<section class="container dashboard" id="dashboard-main"> <section class="container dashboard" id="dashboard-main">
<section class="my-courses" id="my-courses" role="main" aria-label="Content">
<header class="wrapper-header-courses">
<h2 class="header-courses">${_("Current Courses")}</h2>
</header>
% if len(course_enrollment_pairs) > 0:
<ul class="listing-courses">
% for dashboard_index, (course, enrollment) in enumerate(course_enrollment_pairs):
<% show_courseware_link = (course.id in show_courseware_links_for) %>
<% cert_status = cert_statuses.get(course.id) %>
<% show_email_settings = (course.id in show_email_settings_for) %>
<% course_mode_info = all_course_modes.get(course.id) %>
<% show_refund_option = (course.id in show_refund_option_for) %>
<% is_paid_course = (course.id in enrolled_courses_either_paid) %>
<% is_course_blocked = (course.id in block_courses) %>
<% course_verification_status = verification_status_by_course.get(course.id, {}) %>
<% course_requirements = courses_requirements_not_met.get(course.id) %>
<%include file='dashboard/_dashboard_course_listing.html' args="course=course, enrollment=enrollment, show_courseware_link=show_courseware_link, cert_status=cert_status, show_email_settings=show_email_settings, course_mode_info=course_mode_info, show_refund_option = show_refund_option, is_paid_course = is_paid_course, is_course_blocked = is_course_blocked, verification_status=course_verification_status, course_requirements=course_requirements, dashboard_index=dashboard_index" />
% endfor
</ul>
% else:
<section class="empty-dashboard-message">
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
<p>${_("Looks like you haven't enrolled in any courses yet.")}</p>
<a href="${marketing_link('COURSES')}">
${_("Find courses now!")}
</a>
% else:
<p>${_("Looks like you haven't enrolled in any courses yet.")}</p>
%endif
</section>
% endif
% if staff_access and len(errored_courses) > 0:
<div id="course-errors">
<h2>${_("Course-loading errors")}</h2>
<section class="profile-sidebar"> % for course_dir, errors in errored_courses.items():
<h3>${course_dir | h}</h3>
<ul>
% for (msg, err) in errors:
<li>${msg}
<ul><li><pre>${err}</pre></li></ul>
</li>
% endfor
</ul>
% endfor
</div>
% endif
</section>
<section class="profile-sidebar" role="region" aria-label="User info">
<header class="profile"> <header class="profile">
<h2><span class="sr">${_("Username")}: </span><span class="user-name">${ user.username }</span></h2> <h2 class="username-header"><span class="sr">${_("Username")}: </span><span class="username-label">${ user.username }</span></h2>
</header> </header>
<section class="user-info"> <section class="user-info">
<ul> <ul>
...@@ -119,7 +168,6 @@ ...@@ -119,7 +168,6 @@
<span class="provider">${state.provider.NAME}</span> <span class="provider">${state.provider.NAME}</span>
<span class="control"> <span class="control">
% if state.has_account: % if state.has_account:
<form <form
action="${pipeline.get_disconnect_url(state.provider.NAME)}" action="${pipeline.get_disconnect_url(state.provider.NAME)}"
...@@ -128,20 +176,21 @@ ...@@ -128,20 +176,21 @@
<input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}"> <input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}">
<a href="#" onclick="document.${state.get_unlink_form_name()}.submit()"> <a href="#" onclick="document.${state.get_unlink_form_name()}.submit()">
## Translators: clicking on this removes the link between a user's edX account and their account with an external authentication provider (like Google or LinkedIn). ## Translators: clicking on this removes the link between a user's edX account and their account with an external authentication provider (like Google or LinkedIn).
${_("Unlink")} ${_("Unlink")}
</a> </a>
% else: </form>
% else:
<a href="${pipeline.get_login_url(state.provider.NAME, pipeline.AUTH_ENTRY_DASHBOARD, redirect_url='/')}"> <a href="${pipeline.get_login_url(state.provider.NAME, pipeline.AUTH_ENTRY_DASHBOARD, redirect_url='/')}">
## Translators: clicking on this creates a link between a user's edX account and their account with an external authentication provider (like Google or LinkedIn). ## Translators: clicking on this creates a link between a user's edX account and their account with an external authentication provider (like Google or LinkedIn).
${_("Link")} ${_("Link")}
</a> </a>
% endif % endif
</form>
</span> </span>
</div> </div>
% endfor % endfor
</span>
</span> </span>
</li> </li>
% endif % endif
...@@ -171,58 +220,6 @@ ...@@ -171,58 +220,6 @@
</ul> </ul>
</section> </section>
</section>
<section id="my-courses" class="my-courses" role="main" aria-label="Content">
<header>
<h2>${_("Current Courses")}</h2>
</header>
% if len(course_enrollment_pairs) > 0:
<ul class="listing-courses">
% for course, enrollment in course_enrollment_pairs:
<% show_courseware_link = (course.id in show_courseware_links_for) %>
<% cert_status = cert_statuses.get(course.id) %>
<% show_email_settings = (course.id in show_email_settings_for) %>
<% course_mode_info = all_course_modes.get(course.id) %>
<% show_refund_option = (course.id in show_refund_option_for) %>
<% is_paid_course = (course.id in enrolled_courses_either_paid) %>
<% is_course_blocked = (course.id in block_courses) %>
<% course_verification_status = verification_status_by_course.get(course.id, {}) %>
<% course_requirements = courses_requirements_not_met.get(course.id) %>
<%include file='dashboard/_dashboard_course_listing.html' args="course=course, enrollment=enrollment, show_courseware_link=show_courseware_link, cert_status=cert_status, show_email_settings=show_email_settings, course_mode_info=course_mode_info, show_refund_option = show_refund_option, is_paid_course = is_paid_course, is_course_blocked = is_course_blocked, verification_status=course_verification_status, course_requirements=course_requirements" />
% endfor
</ul>
% else:
<section class="empty-dashboard-message">
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
<p>${_("Looks like you haven't enrolled in any courses yet.")}</p>
<a href="${marketing_link('COURSES')}">
${_("Find courses now!")}
</a>
% else:
<p>${_("Looks like you haven't enrolled in any courses yet.")}</p>
%endif
</section>
% endif
% if staff_access and len(errored_courses) > 0:
<div id="course-errors">
<h2>${_("Course-loading errors")}</h2>
% for course_dir, errors in errored_courses.items():
<h3>${course_dir | h}</h3>
<ul>
% for (msg, err) in errors:
<li>${msg}
<ul><li><pre>${err}</pre></li></ul>
</li>
% endfor
</ul>
% endfor
% endif
</section> </section>
</section> </section>
...@@ -257,8 +254,6 @@ ...@@ -257,8 +254,6 @@
</div> </div>
</section> </section>
<section id="password_reset_complete" class="modal" aria-hidden="true"> <section id="password_reset_complete" class="modal" aria-hidden="true">
<div class="inner-wrapper" role="dialog" aria-labelledby="password-reset-email"> <div class="inner-wrapper" role="dialog" aria-labelledby="password-reset-email">
<button class="close-modal"> <button class="close-modal">
......
lms/templates/dashboard/_dashboard_course_listing.html
<%page args="course, enrollment, show_courseware_link, cert_status, show_email_settings, course_mode_info, show_refund_option, is_paid_course, is_course_blocked, verification_status, course_requirements" /> <%page args="course, enrollment, show_courseware_link, cert_status, show_email_settings, course_mode_info, show_refund_option, is_paid_course, is_course_blocked, verification_status, course_requirements, dashboard_index" />
<%! <%!
from django.utils.translation import ugettext as _ from django.utils.translation import ugettext as _
...@@ -39,113 +39,217 @@ from student.helpers import ( ...@@ -39,113 +39,217 @@ from student.helpers import (
%> %>
% else: % else:
<% mode_class = '' %> <% mode_class = '' %>
% endif % endif
<article class="course${mode_class}">
<%
course_target = reverse('info', args=[course.id.to_deprecated_string()])
%>
% if show_courseware_link: <article class="course${mode_class}">
% if not is_course_blocked: <% course_target = reverse('info', args=[unicode(course.id)]) %>
<a href="${course_target}" class="cover"> <section class="details">
<img src="${course_image_url(course)}" alt="${_('{course_number} {course_name} Home Page').format(course_number=course.number, course_name=course.display_name_with_default) |h}" /> <div class="wrapper-course-image" aria-hidden="true">
</a> % if show_courseware_link:
% if not is_course_blocked:
<a href="${course_target}" class="cover">
<img src="${course_image_url(course)}" class="course-image" alt="${_('{course_number} {course_name} Home Page').format(course_number=course.number, course_name=course.display_name_with_default) |h}" />
</a>
% else: % else:
<a class="fade-cover"> <a class="fade-cover">
<img src="${course_image_url(course)}" alt="${_('{course_number} {course_name} Cover Image').format(course_number=course.number, course_name=course.display_name_with_default) |h}" /> <img src="${course_image_url(course)}" class="course-image" alt="${_('{course_number} {course_name} Cover Image').format(course_number=course.number, course_name=course.display_name_with_default) |h}" />
</a> </a>
% endif % endif
% else: % else:
<div class="cover"> <a class="cover">
<img src="${course_image_url(course)}" alt="${_('{course_number} {course_name} Cover Image').format(course_number=course.number, course_name=course.display_name_with_default) | h}" /> <img src="${course_image_url(course)}" class="course-image" alt="${_('{course_number} {course_name} Cover Image').format(course_number=course.number, course_name=course.display_name_with_default) | h}" />
</div> </a>
% endif % endif
% if settings.FEATURES.get('ENABLE_VERIFIED_CERTIFICATES'):
% if settings.FEATURES.get('ENABLE_VERIFIED_CERTIFICATES'): <span class="sts-enrollment" title="${course_verified_certs.get('enrollment_title')}">
<span class="sts-enrollment" title="${course_verified_certs.get('enrollment_title')}"> <span class="label">${_("Enrolled as: ")}</span>
<span class="label">${_("Enrolled as: ")}</span> % if course_verified_certs.get('show_image'):
% if course_verified_certs.get('show_image'): <img class="deco-graphic" src="${static.url('images/verified-ribbon.png')}" alt="${course_verified_certs.get('image_alt')}" />
<img class="deco-graphic" src="${static.url('images/verified-ribbon.png')}" alt="${course_verified_certs.get('image_alt')}" /> % endif
% endif <div class="sts-enrollment-value">${course_verified_certs.get('enrollment_value')}</div>
<div class="sts-enrollment-value">${course_verified_certs.get('enrollment_value')}</div> </span>
</span> % endif
% endif </div>
<div class="wrapper-course-details">
<section class="info"> <h3 class="course-title">
<hgroup>
<p class="date-block">
% if course.has_ended():
${_("Course Completed - {end_date}").format(end_date=course.end_datetime_text("DATE_TIME"))}
% elif course.has_started():
${_("Course Started - {start_date}").format(start_date=course.start_datetime_text("DATE_TIME"))}
% elif course.start_date_is_still_default: # Course start date TBD
${_("Course has not yet started")}
% else: # hasn't started yet
${_("Course Starts - {start_date}").format(start_date=course.start_datetime_text("DATE_TIME"))}
% endif
</p>
<h2 class="university">${get_course_about_section(course, 'university')}</h2>
<h3>
% if show_courseware_link: % if show_courseware_link:
% if not is_course_blocked: % if not is_course_blocked:
<a href="${course_target}">${course.display_number_with_default | h} ${course.display_name_with_default}</a> <a href="${course_target}">${course.display_name_with_default}</a>
% else: % else:
<a class="disable-look">${course.display_number_with_default | h} ${course.display_name_with_default}</a> <a class="disable-look">${course.display_name_with_default}</a>
% endif % endif
% else: % else:
<span>${course.display_number_with_default | h} ${course.display_name_with_default}</span> <span>${course.display_name_with_default}</span>
% endif % endif
</h3> </h3>
</hgroup> <div class="course-info">
<span class="info-university">${get_course_about_section(course, 'university')} - </span>
<span class="info-course-id">${course.display_number_with_default | h}</span>
<span class="info-date-block" data-tooltip="Hi">
% if course.has_ended():
${_("Ended - {end_date}").format(end_date=course.end_datetime_text("SHORT_DATE"))}
% elif course.has_started():
${_("Started - {start_date}").format(start_date=course.start_datetime_text("SHORT_DATE"))}
% elif course.start_date_is_still_default: # Course start date TBD
${_("Coming Soon")}
% else: # hasn't started yet
${_("Starts - {start_date}").format(start_date=course.start_datetime_text("SHORT_DATE"))}
% endif
</span>
</div>
% if show_courseware_link:
<div class="wrapper-course-actions">
<div class="course-actions">
% if course.has_ended():
% if not is_course_blocked:
<a href="${course_target}" class="enter-course archived">${_('View Archived Course')}<span class="sr">&nbsp;${course.display_name_with_default}</span></a>
% else:
<a class="enter-course-blocked archived">${_('View Archived Course')}<span class="sr">&nbsp;${course.display_name_with_default}</span></a>
% endif
% else:
% if not is_course_blocked:
<a href="${course_target}" class="enter-course">${_('View Course')}<span class="sr">&nbsp;${course.display_name_with_default}</span></a>
% else:
<a class="enter-course-blocked">${_('View Course')}<span class="sr">&nbsp;${course.display_name_with_default}</span></a>
% endif
% endif
<div class="wrapper-action-more">
<a href="#actions-dropdown-${dashboard_index}" class="action action-more" id="actions-dropdown-link-${dashboard_index}" aria-haspopup="true" aria-expanded="false" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}">
<span class="sr">${_('Course options dropdown')}</span>
<i class="fa fa-cog" aria-hidden="true"></i>
</a>
<div class="actions-dropdown" id="actions-dropdown-${dashboard_index}" aria-label="${_('Additional Actions Menu')}">
<ul class="actions-dropdown-list" id="actions-dropdown-list-${dashboard_index}" aria-label="${_('Available Actions')}" role="menu">
<li class="actions-item" id="actions-item-unenroll-${dashboard_index}">
% if is_paid_course and show_refund_option:
## Translators: The course name will be added to the end of this sentence.
% if not is_course_blocked:
<a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the purchased course")}';
document.getElementById('refund-info').innerHTML=gettext('You will be refunded the amount you paid.')">
${_('Unenroll')}
</a>
% else:
<a class="action action-unenroll is-disabled" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the purchased course")}';
document.getElementById('refund-info').innerHTML=gettext('You will be refunded the amount you paid.')">
${_('Unenroll')}
</a>
% endif
% elif is_paid_course and not show_refund_option:
## Translators: The course's name will be added to the end of this sentence.
% if not is_course_blocked:
<a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the purchased course")}';
document.getElementById('refund-info').innerHTML=gettext('You will not be refunded the amount you paid.')">
${_('Unenroll')}
</a>
% else:
<a class="action action-unenroll is-disabled" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the purchased course")}';
document.getElementById('refund-info').innerHTML=gettext('You will not be refunded the amount you paid.')">
${_('Unenroll')}
</a>
% endif
% elif enrollment.mode != "verified":
## Translators: The course's name will be added to the end of this sentence.
% if not is_course_blocked:
<a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from")}'; document.getElementById('refund-info').innerHTML=''">
${_('Unenroll')}
</a>
% else:
<a class="action action-unenroll is-disabled" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from")}'; document.getElementById('refund-info').innerHTML=''">
${_('Unenroll')}
</a>
% endif
% elif show_refund_option:
## Translators: The course's name will be added to the end of this sentence.
% if not is_course_blocked:
<a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the verified {cert_name_long} track of").format(cert_name_long=cert_name_long)}';
document.getElementById('refund-info').innerHTML=gettext('You will be refunded the amount you paid.')">
${_('Unenroll')}
</a>
% else:
<a class="action action-unenroll is-disabled" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the verified {cert_name_long} track of").format(cert_name_long=cert_name_long)}';
document.getElementById('refund-info').innerHTML=gettext('You will be refunded the amount you paid.')">
${_('Unenroll')}
</a>
% endif
% else:
## Translators: The course's name will be added to the end of this sentence.
% if not is_course_blocked:
<a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the verified {cert_name_long} track of").format(cert_name_long=cert_name_long)}';
document.getElementById('refund-info').innerHTML=gettext('The refund deadline for this course has passed, so you will not receive a refund.')">
${_('Unenroll')}
</a>
% else:
<a class="action action-unenroll is-disabled" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the verified {cert_name_long} track of").format(cert_name_long=cert_name_long)}';
document.getElementById('refund-info').innerHTML=gettext('The refund deadline for this course has passed, so you will not receive a refund.')">
${_('Unenroll')}
</a>
% endif
% endif
</li>
<li class="actions-item" id="actions-item-email-settings-${dashboard_index}">
% if show_email_settings:
% if not is_course_blocked:
<a href="#email-settings-modal" class="action action-email-settings" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" data-optout="${unicode(course.id) in course_optouts}">${_('Email Settings')}</a>
% else:
<a class="action action-email-settings is-disabled" data-course-id="${course.id| h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" data-optout="${unicode(course.id) in course_optouts}">${_('Email Settings')}</a>
% endif
% endif
</li>
</ul>
</div>
</div>
</div>
</div>
% endif
</div>
</section>
<footer class="wrapper-messages-primary">
<ul class="messages-list">
% if course.may_certify() and cert_status: % if course.may_certify() and cert_status:
<%include file='_dashboard_certificate_information.html' args='cert_status=cert_status,course=course, enrollment=enrollment'/> <%include file='_dashboard_certificate_information.html' args='cert_status=cert_status,course=course, enrollment=enrollment'/>
% endif % endif
% if verification_status.get('status') in [VERIFY_STATUS_NEED_TO_VERIFY, VERIFY_STATUS_SUBMITTED, VERIFY_STATUS_APPROVED, VERIFY_STATUS_NEED_TO_REVERIFY] and not is_course_blocked: % if verification_status.get('status') in [VERIFY_STATUS_NEED_TO_VERIFY, VERIFY_STATUS_SUBMITTED, VERIFY_STATUS_APPROVED, VERIFY_STATUS_NEED_TO_REVERIFY] and not is_course_blocked:
<div class="message message-status wrapper-message-primary is-shown"> <div class="message message-status wrapper-message-primary is-shown">
% if verification_status['status'] == VERIFY_STATUS_NEED_TO_VERIFY: % if verification_status['status'] == VERIFY_STATUS_NEED_TO_VERIFY:
<div class="verification-reminder"> <div class="verification-reminder">
% if verification_status['days_until_deadline'] is not None: % if verification_status['days_until_deadline'] is not None:
<h4 class="message-title">${_('Verification not yet complete.')}</h4> <h4 class="message-title">${_('Verification not yet complete.')}</h4>
<p class="message-copy">${ungettext( <p class="message-copy">${ungettext(
'You only have {days} day left to verify for this course.', 'You only have {days} day left to verify for this course.',
'You only have {days} days left to verify for this course.', 'You only have {days} days left to verify for this course.',
verification_status['days_until_deadline'] verification_status['days_until_deadline']
).format(days=verification_status['days_until_deadline'])}</p> ).format(days=verification_status['days_until_deadline'])}</p>
% else: % else:
<h4 class="message-title">${_('Almost there!')}</h4> <h4 class="message-title">${_('Almost there!')}</h4>
<p class="message-copy">${_('You still need to verify for this course.')}</p> <p class="message-copy">${_('You still need to verify for this course.')}</p>
% endif
</div>
<div class="verification-cta">
<a href="${reverse('verify_student_verify_later', kwargs={'course_id': unicode(course.id)})}" class="cta" data-course-id="${course.id | h}">${_('Verify Now')}</a>
</div>
% elif verification_status['status'] == VERIFY_STATUS_SUBMITTED:
<h4 class="message-title">${_('You have already verified your ID!')}</h4>
<p class="message-copy">${_('Thanks for your patience as we process your request.')}</p>
% elif verification_status['status'] == VERIFY_STATUS_APPROVED:
<h4 class="message-title">${_('You have already verified your ID!')}</h4>
% if verification_status['verification_good_until'] is not None:
<p class="message-copy">${_('Your verification status is good until {date}.').format(date=verification_status['verification_good_until'])}
% endif % endif
</div> % elif verification_status['status'] == VERIFY_STATUS_NEED_TO_REVERIFY:
<div class="verification-cta"> <h4 class="message-title">${_('Your verification will expire soon!')}</h4>
<a href="${reverse('verify_student_verify_later', kwargs={'course_id': unicode(course.id)})}" class="cta" data-course-id="${course.id | h}">${_('Verify Now')}</a> ## Translators: start_link and end_link will be replaced with HTML tags;
</div> ## please do not translate these.
% elif verification_status['status'] == VERIFY_STATUS_SUBMITTED: <p class="message-copy">${_('Your current verification will expire before the verification deadline for this course. {start_link}Re-verify your identity now{end_link} using a webcam and a government-issued ID.').format(start_link='<a href="{href}">'.format(href=reverse('verify_student_reverify')), end_link='</a>')}</p>
<h4 class="message-title">${_('You have already verified your ID!')}</h4>
<p class="message-copy">${_('Thanks for your patience as we process your request.')}</p>
% elif verification_status['status'] == VERIFY_STATUS_APPROVED:
<h4 class="message-title">${_('You have already verified your ID!')}</h4>
% if verification_status['verification_good_until'] is not None:
<p class="message-copy">${_('Your verification status is good until {date}.').format(date=verification_status['verification_good_until'])}
% endif % endif
% elif verification_status['status'] == VERIFY_STATUS_NEED_TO_REVERIFY: </div>
<h4 class="message-title">${_('Your verification will expire soon!')}</h4>
## Translators: start_link and end_link will be replaced with HTML tags;
## please do not translate these.
<p class="message-copy">${_('Your current verification will expire before the verification deadline for this course. {start_link}Re-verify your identity now{end_link} using a webcam and a government-issued ID.').format(start_link='<a href="{href}">'.format(href=reverse('verify_student_reverify')), end_link='</a>')}</p>
% endif % endif
</div>
% endif
% if course_mode_info['show_upsell'] and not is_course_blocked:
<div class="message message-upsell has-actions is-expandable is-shown">
% if course_mode_info['show_upsell'] and not is_course_blocked:
<div class="message message-upsell has-actions is-expandable is-shown">
<div class="wrapper-tip"> <div class="wrapper-tip">
<h4 class="message-title"> <h4 class="message-title">
<i class="icon fa fa-caret-down ui-toggle-expansion"></i> <i class="icon fa fa-caret-right ui-toggle-expansion"></i>
<span class="value">${_("Challenge Yourself!")}</span> <span class="value">${_("Challenge Yourself!")}</span>
</h4> </h4>
<p class="message-copy">${_("Take this course as an ID-verified student.")}</p> <p class="message-copy">${_("Take this course as an ID-verified student.")}</p>
...@@ -165,139 +269,50 @@ from student.helpers import ( ...@@ -165,139 +269,50 @@ from student.helpers import (
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
%endif %endif
% if is_course_blocked:
<p id="block-course-msg" class="course-block">
${_("You can no longer access this course because payment has not yet been received. "
"You can {contact_link_start}contact the account holder{contact_link_end} "
"to request payment, or you can "
"{unenroll_link_start}unenroll{unenroll_link_end} "
"from this course").format(
contact_link_start='<a href="#">',
contact_link_end='</a>',
unenroll_link_start=(
'<a id="unregister_block_course" rel="leanModal" '
'data-course-id="{course_id}" data-course-number="{course_number}" '
'href="#unenroll-modal">'.format(
course_id=escape(course.id),
course_number=escape(course.number),
)
),
unenroll_link_end="</a>",
)}
</p>
%endif
% if show_courseware_link: % if is_course_blocked:
% if course.has_ended(): <p id="block-course-msg" class="course-block">
% if not is_course_blocked: ${_("You can no longer access this course because payment has not yet been received. "
<a href="${course_target}" class="enter-course archived">${_('View Archived Course')}</a> "You can {contact_link_start}contact the account holder{contact_link_end} "
% else: "to request payment, or you can "
<a class="enter-course-blocked archived">${_('View Archived Course')}</a> "{unenroll_link_start}unenroll{unenroll_link_end} "
% endif "from this course").format(
% else: contact_link_start='<a href="#">',
% if not is_course_blocked: contact_link_end='</a>',
<a href="${course_target}" class="enter-course">${_('View Course')}</a> unenroll_link_start=(
% else: '<a id="unregister_block_course" rel="leanModal" '
<a class="enter-course-blocked">${_('View Course')}</a> 'data-course-id="{course_id}" data-course-number="{course_number}" '
% endif 'href="#unenroll-modal">'.format(
% endif course_id=escape(course.id),
% endif course_number=escape(course.number),
)
),
unenroll_link_end="</a>",
)}
</p>
%endif
% if is_paid_course and show_refund_option:
## Translators: The course's name will be added to the end of this sentence.
% if not is_course_blocked:
<a href="#unenroll-modal" class="unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the purchased course")}';
document.getElementById('refund-info').innerHTML=gettext('You will be refunded the amount you paid.')">
${_('Unenroll')}
</a>
% else:
<a class="disable-look-unregister" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the purchased course")}';
document.getElementById('refund-info').innerHTML=gettext('You will be refunded the amount you paid.')">
${_('Unenroll')}
</a>
% endif
% elif is_paid_course and not show_refund_option:
## Translators: The course's name will be added to the end of this sentence.
% if not is_course_blocked:
<a href="#unenroll-modal" class="unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the purchased course")}';
document.getElementById('refund-info').innerHTML=gettext('You will not be refunded the amount you paid.')">
${_('Unenroll')}
</a>
% else:
<a class="disable-look-unregister" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the purchased course")}';
document.getElementById('refund-info').innerHTML=gettext('You will not be refunded the amount you paid.')">
${_('Unenroll')}
</a>
% endif
% elif enrollment.mode != "verified":
## Translators: The course's name will be added to the end of this sentence.
% if not is_course_blocked:
<a href="#unenroll-modal" class="unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from")}'; document.getElementById('refund-info').innerHTML=''">
${_('Unenroll')}
</a>
% else:
<a class="disable-look-unregister" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from")}'; document.getElementById('refund-info').innerHTML=''">
${_('Unenroll')}
</a>
% endif
% elif show_refund_option:
## Translators: The course's name will be added to the end of this sentence.
% if not is_course_blocked:
<a href="#unenroll-modal" class="unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the verified {cert_name_long} track of").format(cert_name_long=cert_name_long)}';
document.getElementById('refund-info').innerHTML=gettext('You will be refunded the amount you paid.')">
${_('Unenroll')}
</a>
% else:
<a class="disable-look-unregister" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the verified {cert_name_long} track of").format(cert_name_long=cert_name_long)}';
document.getElementById('refund-info').innerHTML=gettext('You will be refunded the amount you paid.')">
${_('Unenroll')}
</a>
% endif
% else:
## Translators: The course's name will be added to the end of this sentence.
% if not is_course_blocked:
<a href="#unenroll-modal" class="unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the verified {cert_name_long} track of").format(cert_name_long=cert_name_long)}';
document.getElementById('refund-info').innerHTML=gettext('The refund deadline for this course has passed, so you will not receive a refund.')">
${_('Unenroll')}
</a>
% else:
<a class="disable-look-unregister" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the verified {cert_name_long} track of").format(cert_name_long=cert_name_long)}';
document.getElementById('refund-info').innerHTML=gettext('The refund deadline for this course has passed, so you will not receive a refund.')">
${_('Unenroll')}
</a>
% endif
% endif
% if show_email_settings: % if course_requirements:
% if not is_course_blocked: ## Multiple pre-requisite courses are not supported on frontend that's why we are pulling first element
<a href="#email-settings-modal" class="email-settings" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-optout="${unicode(course.id) in course_optouts}">${_('Email Settings')}</a> <% prc_target = reverse('about_course', args=[unicode(course_requirements['courses'][0]['key'])]) %>
% else: <li class="prerequisites">
<a class="disable-look-settings" data-course-id="${course.id| h}" data-course-number="${course.number | h}" data-optout="${unicode(course.id) in course_optouts}">${_('Email Settings')}</a> <p class="tip">
${_("You must successfully complete {link_start}{prc_display}{link_end} before you begin this course.").format(
link_start='<a href="{}">'.format(prc_target),
link_end='</a>',
prc_display=course_requirements['courses'][0]['display'],
)}
</p>
</li>
% endif % endif
% endif </ul>
</footer>
</section>
% if course_requirements:
## Multiple pre-requisite courses are not supported on frontend that's why we are pulling first element
<% prc_target = reverse('about_course', args=[unicode(course_requirements['courses'][0]['key'])]) %>
<section class="prerequisites">
<p class="tip">
${_("You must successfully complete {link_start}{prc_display}{link_end} before you begin this course.").format(
link_start='<a href="{}">'.format(prc_target),
link_end='</a>',
prc_display=course_requirements['courses'][0]['display'],
)}
</p>
</section>
% endif
</article>
</article> </article>
</li> </li>
<script> <script>
$( document ).ready(function() { $( document ).ready(function() {
if("${is_course_blocked}" == "True"){ if("${is_course_blocked}" == "True"){
...@@ -306,4 +321,4 @@ from student.helpers import ( ...@@ -306,4 +321,4 @@ from student.helpers import (
}); });
} }
}); });
</script> </script>
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