From bd5b0b31a096c17e170a5d7edd1e120a078f2e3a Mon Sep 17 00:00:00 2001
From: Marco Morales <marco@edx.org>
Date: Tue, 17 Mar 2015 14:05:56 -0400
Subject: [PATCH] Matt - javascript and test changes, Marco - styling feedback
from initial reviews
---
.../student/tests/test_bulk_email_settings.py | 9 +-
common/test/acceptance/pages/lms/dashboard.py | 10 +-
.../courseware/features/registration.py | 9 +-
lms/static/js/dashboard/legacy.js | 36 +-
lms/static/sass/base/_variables.scss | 5 +
lms/static/sass/multicourse/_dashboard.scss | 675 +++++++++---------
lms/static/sass/shared/_header.scss | 22 +-
lms/templates/dashboard.html | 87 +--
.../dashboard/_dashboard_course_listing.html | 141 ++--
9 files changed, 451 insertions(+), 543 deletions(-)
diff --git a/common/djangoapps/student/tests/test_bulk_email_settings.py b/common/djangoapps/student/tests/test_bulk_email_settings.py
index 0fd2a62f3ba..4d8146405cb 100644
--- a/common/djangoapps/student/tests/test_bulk_email_settings.py
+++ b/common/djangoapps/student/tests/test_bulk_email_settings.py
@@ -40,9 +40,9 @@ class TestStudentDashboardEmailView(ModuleStoreTestCase):
self.url = reverse('dashboard')
# URL for email settings modal
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-optout="False">Email Settings</a>'
+ 'data-dashboard-index="0" data-optout="False">Email Settings</a>'
).format(
org=self.course.org,
num=self.course.number,
@@ -86,7 +86,6 @@ class TestStudentDashboardEmailView(ModuleStoreTestCase):
# Assert that the URL for the email view is not in the response
# if this course isn't authorized
response = self.client.get(self.url)
- print response.content
self.assertTrue(self.email_modal_link in response.content)
@@ -112,9 +111,9 @@ class TestStudentDashboardEmailViewXMLBacked(ModuleStoreTestCase):
# URL for email settings modal
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-optout="False">Email Settings</a>'
+ 'data-dashboard-index="0" data-optout="False">Email Settings</a>'
).format(
org='edX',
num='toy',
diff --git a/common/test/acceptance/pages/lms/dashboard.py b/common/test/acceptance/pages/lms/dashboard.py
index a1b5ca69ecf..7736ab3e0ab 100644
--- a/common/test/acceptance/pages/lms/dashboard.py
+++ b/common/test/acceptance/pages/lms/dashboard.py
@@ -45,9 +45,7 @@ class DashboardPage(PageObject):
Return list of the names of available courses (e.g. "999 edX Demonstration Course")
"""
def _get_course_name(el):
- # The first component in the link text is the course number
- course_name = el.text
- return course_name
+ return el.text
return self.q(css='h3.course-title > a').map(_get_course_name).results
@@ -64,7 +62,7 @@ class DashboardPage(PageObject):
@property
def username(self):
"""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):
"""Get the enrollment mode for a given course on the dashboard.
@@ -113,7 +111,7 @@ class DashboardPage(PageObject):
el = course_listing[0]
# 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()
upgrade_page.wait_for_page()
@@ -176,4 +174,4 @@ class DashboardPage(PageObject):
"""
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
diff --git a/lms/djangoapps/courseware/features/registration.py b/lms/djangoapps/courseware/features/registration.py
index 85f2c1f5e35..ebe4ec52df2 100644
--- a/lms/djangoapps/courseware/features/registration.py
+++ b/lms/djangoapps/courseware/features/registration.py
@@ -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 "([^"]*)"')
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)
+
button_css = 'section#unenroll-modal input[value="Unenroll"]'
+ assert world.is_css_present(button_css)
world.css_click(button_css)
diff --git a/lms/static/js/dashboard/legacy.js b/lms/static/js/dashboard/legacy.js
index 47096c5a4f0..9abdad1a318 100644
--- a/lms/static/js/dashboard/legacy.js
+++ b/lms/static/js/dashboard/legacy.js
@@ -97,14 +97,26 @@
}
function toggleCourseActionsDropdown(event) {
- var dropdown = $(event.target).closest('.action-more').find('.actions-dropdown-list')
-
- event.preventDefault();
-
- $(this).toggleClass('is-visible');
+ 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');
+ }
- // add BI event here
+ // 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() {
@@ -122,7 +134,7 @@
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_number").text( $(event.target).data("course-number") );
if($(event.target).data("optout") === "False") {
@@ -130,7 +142,7 @@
}
});
- $(".unenroll").click(function(event) {
+ $(".action-unenroll").click(function(event) {
$("#unenroll_course_id").val( $(event.target).data("course-id") );
$("#unenroll_course_number").text( $(event.target).data("course-number") );
});
@@ -247,8 +259,8 @@
"#dashboard-main"
);
- $(".email-settings").each(function(index){
- $(this).attr("id", "unenroll-" + index);
+ $(".action-email-settings").each(function(index){
+ $(this).attr("id", "email-settings-" + index);
// a bit of a hack, but gets the unique selector for the modal trigger
var trigger = "#" + $(this).attr("id");
accessibleModal(
@@ -259,8 +271,8 @@
);
});
- $(".unenroll").each(function(index){
- $(this).attr("id", "email-settings-" + index);
+ $(".action-unenroll").each(function(index){
+ $(this).attr("id", "unenroll-" + index);
// a bit of a hack, but gets the unique selector for the modal trigger
var trigger = "#" + $(this).attr("id");
accessibleModal(
diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss
index bab8e1c0773..2b07279b381 100644
--- a/lms/static/sass/base/_variables.scss
+++ b/lms/static/sass/base/_variables.scss
@@ -133,6 +133,11 @@ $green-u1: desaturate($green,15%);
$green-u2: desaturate($green,30%);
$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.
$blue: rgb(29,157,217);
$yellow: rgb(255, 252, 221);
diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss
index 03d63887394..af6a01c3e0f 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/lms/static/sass/multicourse/_dashboard.scss
@@ -4,6 +4,8 @@
// Table of Contents
// * +Dashboard - Sidebar
// * +Dashboard - Course Listing
+// * +Dashboard - Course Item
+// * +Misc - Uncategorized
// * +Dashboard - Banner
@@ -22,17 +24,21 @@
.profile {
@include box-sizing(border-box);
border: 1px solid $border-color-2;
- border-bottom: none;
border-radius: ($baseline/4) ($baseline/4) 0 0;
width: flex-grid(12);
- .user-name {
- @extend %t-title6;
+ .username-header {
+ margin-bottom: 0;
+ }
+
+ .username-label {
+ @extend %t-title7;
@extend %t-ultrastrong;
@extend %cont-truncated;
+ text-align: center;
display: block;
margin: 0;
- padding: $baseline $baseline 0;
+ padding: ($baseline*0.75) $baseline;
color: $base-font-color;
text-transform: none;
}
@@ -279,286 +285,306 @@
}
}
}
+ }
+}
- // ====================
-
- // UI: individual course item
- .course {
- @include box-sizing(box);
- @include transition(all 0.15s linear 0s);
+// +Dashboard - Course
+// ====================
+.dashboard .my-courses {
+
+ // UI: individual course item
+ .course {
+ @include box-sizing(box);
+ @include transition(all 0.15s linear 0s);
+ @include clearfix();
+ @extend %ui-depth2;
+ position: relative;
+ margin: ($baseline/2);
+
+ .details {
@include clearfix();
- @extend %ui-depth2;
- position: relative;
- padding: ($baseline/2);
- .details {
- @include clearfix();
+ .wrapper-course-image {
+ @include float(left);
+ @include margin-right(flex-gutter());
+ width: flex-grid(3);
.cover {
@include box-sizing(border-box);
@include transition(all 0.15s linear 0s);
@include float(left);
- @include margin-right(flex-gutter());
- width: flex-grid(3);
- min-width: 150px;
overflow: hidden;
- display: block;
position: relative;
- max-height: 100%;
- height: 120px;
- border-radius: ($baseline/10);
+ max-height: 120px;
+ border-radius: ($baseline/5);
border: 1px solid $dashboard-course-cover-border;
border-bottom: 4px solid $dashboard-course-cover-border;
- &:before {
- content: "";
- display: block;
- padding-top: 75%; // 4:3 aspect ratio
- }
-
- img {
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
+ .course-image {
width: 100%;
}
}
- .wrapper-course-details {
- display: block;
+ // "enrolled as" status
+ .sts-enrollment {
@include float(left);
- width: flex-grid(9);
- padding: 0;
- height: 120px;
- }
+ width: 100%;
+ position: relative;
+ bottom: 15px;
+ display: inline-block;
+ text-align: center;
- .course-title {
- border-bottom: 2px solid $gray-l5;
+ .label {
+ @extend %text-sr;
+ }
- a, span {
- @extend %t-title3;
- @extend %t-light;
- display: block;
- margin-bottom: ($baseline/2);
+ .deco-graphic {
+ position: absolute;
+ top: -5px;
+ @include right(0);
+ }
- &:hover, &:focus {
- text-decoration: none;
- }
+ .sts-enrollment-value {
+ @extend %ui-depth1;
+ @extend %copy-badge;
+ @extend %t-demi-strong;
+ font-size: 0.6em;
+ line-height: 1.5em;
+ border-radius: 0;
+ padding: 1px ($baseline/4);
+ color: white;
}
}
+ }
- .course-info {
- display: block;
- @include float(left);
- width: flex-grid(4);
- padding: 0;
- margin-top: ($baseline/2);
+ .wrapper-course-details {
+ display: block;
+ @include float(left);
+ width: flex-grid(9);
+ padding: 0;
+ }
- [class*="info-"] {
- color: $gray-d1;
- @extend %t-title6;
- display: inline-block;
- }
+ .course-title {
- .info-date-block {
- @extend %t-title7;
- color: $gray-l1;
- display: block;
+ a, span {
+ @extend %t-title3;
+ @extend %t-light;
+ display: inline-block;
+ margin-bottom: ($baseline/2);
+
+ &:hover, &:focus {
+ text-decoration: none;
}
}
+ }
+
+ .course-info {
+ display: block;
+ @include float(left);
+ width: flex-grid(4);
+ padding: 0;
+ margin-top: ($baseline/2);
+
+ [class*="info-"] {
+ color: $gray-d1;
+ @extend %t-title6;
+ display: inline-block;
+ }
- .wrapper-course-actions {
+ .info-date-block {
+ @extend %t-title7;
+ color: $gray-l1;
display: block;
- @include float(right);
- width: flex-grid(8);
- padding: 0;
- margin-top: ($baseline/2);
}
+ }
- .course-actions {
- position: relative;
- top: 50%;
- transform: translateY(-50%);
+ .wrapper-course-actions {
+ display: block;
+ @include float(right);
+ width: flex-grid(8);
+ padding: 0;
+ margin-top: ($baseline/2);
+ }
- // UI: course item actions
+ .course-actions {
- .action {
- @include box-sizing(border-box);
- @include margin-right($baseline/2);
- display: inline-block;
- float: right;
- min-width: ($baseline*2);
- color: $gray-l3;
- border-radius: 3px;
- padding: 12px;
- border: 1px solid $white;
-
- &:hover, &:focus {
- color: #333;
- border: 1px solid $gray-l4;
- }
+ // UI: course item actions
- // STATE: is-disabled
- &.is-disabled {
- color: #808080;
- color: $gray-l4;
- }
+ .action {
+ @include box-sizing(border-box);
+ @include margin-right($baseline/2);
+ @include float(right);
+ min-width: ($baseline*2);
+ color: $gray-l1;
+ border-radius: 3px;
+ padding: 12px;
+ border: 1px solid $white;
+
+ &:hover, &:focus {
+ color: $gray-d3;
+ border: 1px solid $gray-l4;
+ }
- // TYPE: facebook share
- &.action-facebook, {
- color: #3b5998;
- }
+ // STATE: is-disabled
+ &.is-disabled {
+ color: $gray-l4;
+ }
- // TYPE: twitter share
- &.action-twitter {
- color: #55ACEE;
- }
+ // TYPE: facebook share
+ &.action-facebook, {
+ color: $facebook-blue;
}
- // UI: general actions dropdown layout
- .wrapper-action-more {
+ // TYPE: twitter share
+ &.action-twitter {
+ color: $twitter-blue;
+ }
+ }
- .actions-dropdown {
- @extend %ui-no-list;
- @extend %ui-depth1;
- display: none;
- position: absolute;
- top: ($baseline*2);
- left: 17px;
- pointer-events: none;
- min-width: ($baseline*6.5);
+ // UI: general actions dropdown layout
+ .wrapper-action-more {
+ display: inline-block;
+ position: relative;
+ @include float(right);
- &.is-expanded {
- display: block;
- pointer-events: auto;
- }
- .actions-dropdown-list {
- @extend %ui-no-list;
- display: table;
- @include box-sizing(border-box);
- 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/2) ($baseline*0.75);
- 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;
- }
+ .actions-dropdown {
+ @extend %ui-no-list;
+ @extend %ui-depth1;
+ display: none;
+ position: absolute;
+ top: ($baseline*2);
+ right: 19px;
+ pointer-events: none;
+ min-width: ($baseline*7);
- &:after {
- border-color: $transparent;
- border-bottom-color: $white;
- border-width: 6px;
- @include margin-right(1px);
- }
+ &.is-visible {
+ display: block;
+ pointer-events: auto;
+ }
- &:before {
- border-color: $transparent;
- border-bottom-color: $gray-l3;
- border-width: 7px;
- }
+ .actions-dropdown-list {
+ @extend %ui-no-list;
+ @include box-sizing(border-box);
+ 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;
}
- .actions-item {
- @extend %t-title7;
- display: block;
- margin: 0;
+ &:after {
+ border-color: $transparent;
+ border-bottom-color: $white;
+ border-width: 6px;
+ @include margin-right(1px);
+ }
- &.is-hidden {
- display: none;
- }
+ &:before {
+ border-color: $transparent;
+ border-bottom-color: $gray-l3;
+ border-width: 7px;
+ }
+ }
- .action {
- @include margin-right(0);
+ .actions-item {
+ @extend %t-title7;
+ display: block;
+ margin: 0;
- &:hover, &:focus {
- border: 1px solid transparent;
- }
- }
+ &.is-hidden {
+ display: none;
+ }
+
+ .action {
+ @include margin-right(0);
+
+ &:hover, &:focus {
+ border: 1px solid transparent;
+ }
}
}
}
}
+ }
- .course-status {
- 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);
- float: left;
- @include box-sizing(border-box);
+ .course-status {
+ 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);
- p {
- color: $lighter-base-font-color;
- font-style: italic;
- letter-spacing: 1px;
- text-align: center;
- }
+ p {
+ color: $lighter-base-font-color;
+ font-style: italic;
+ letter-spacing: 1px;
+ text-align: center;
}
+ }
- .course-status-completed {
- background: $gray-l3;
- color: $very-light-text;
+ .course-status-completed {
+ background: $gray-l3;
+ color: $very-light-text;
- p {
- color: #222;
+ p {
+ color: $gray-d4;
- span {
- font-weight: bold;
- }
+ span {
+ font-weight: bold;
}
}
+ }
- .enter-course {
- @include button(simple, $button-color);
- @include box-sizing(border-box);
- border-radius: 3px;
- @include float(right);
- font: normal 15px/1.6rem $sans-serif;
- letter-spacing: 0;
- text-align: center;
-
- &.archived {
- @include button(simple, $button-archive-color);
- font: normal 15px/1.6rem $sans-serif;
+ .enter-course {
+ @include button(simple, $button-color);
+ @include box-sizing(border-box);
+ border-radius: 3px;
+ @include float(right);
+ font: normal 15px/1.6rem $sans-serif;
+ letter-spacing: 0;
+ text-align: center;
- &:hover, &:focus {
- text-decoration: none;
- }
- }
+ &.archived {
+ @include button(simple, $button-archive-color);
+ font: normal 15px/1.6rem $sans-serif;
&:hover, &:focus {
text-decoration: none;
}
}
+
+ &:hover, &:focus {
+ text-decoration: none;
+ }
}
+ }
- // ====================
+ // ====================
- // UI: message
- .wrapper-message-primary {
- @include clearfix();
- }
+ // UI: messages
+ .wrapper-messages-primary {
+ @include clearfix();
.messages-list {
margin: 0;
@@ -570,7 +596,7 @@
border-radius: 3px;
display: none;
margin: $baseline 0 ($baseline/2) 0;
- padding: ($baseline*0.5) $baseline;
+ padding: ($baseline/2) $baseline;
background: $gray-l5;
border: 1px solid $gray-l4;
@@ -619,6 +645,7 @@
.message-title, .message-copy {
margin-bottom: 0;
+ display: inline-block;
}
.message-title .value, .message-copy {
@@ -640,51 +667,48 @@
display: none;
opacity: 0.0;
}
+ }
- // STATE: is expanded
- &.is-expanded {
+ // STATE: is expanded
+ &.is-expanded {
- .ui-toggle-expansion {
- @include transform(rotate(0));
- @include transform-origin(50% 50%);
+ .ui-toggle-expansion {
+ @include rtl {
+ @include transform(rotate(-90deg));
}
- .wrapper-extended {
- display: block;
- opacity: 1.0;
+ @include ltr {
+ @include transform(rotate(90deg));
}
+ @include transform-origin(50% 50%);
+ }
+
+ .wrapper-extended {
+ display: block;
+ opacity: 1.0;
}
}
// TYPE: upsell
- .message-upsell {
+ &.message-upsell {
.wrapper-tip {
@include clearfix();
.message-title {
- float: left;
+ @include float(left);
}
.ui-toggle-expansion {
@include transition(all $tmg-f2 ease-in-out 0s);
- @include transform-origin(50% 50%);
- @include font-size(21);
+ @include font-size(18);
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
-
- @include rtl {
- @include transform(rotate(90deg));
- }
-
- @include ltr {
- @include transform(rotate(-90deg));
- }
}
.message-copy {
- float: right;
+ @include float(right);
}
}
@@ -733,7 +757,7 @@
}
// TYPE: status
- .message-status {
+ &.message-status {
background: tint($yellow,70%);
border-color: $gray-l3;
@@ -750,7 +774,7 @@
.actions {
.action {
- float: left;
+ @include float(left);
margin: 0 15px 0 0;
.btn, .cta {
@@ -759,8 +783,8 @@
.btn {
@include box-sizing(border-box);
+ @include float(left);
border-radius: 3px;
- float: left;
font: normal 0.8rem/1.2rem $sans-serif;
letter-spacing: 1px;
padding: 6px 12px;
@@ -770,18 +794,14 @@
cursor: default !important;
&:hover, &:focus {
+ @include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100% ));
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 {
- float: left;
+ @include float(left);
font: normal 0.8rem/1.2rem $sans-serif;
letter-spacing: 1px;
padding: 6px 12px;
@@ -815,8 +835,8 @@
.exam-button {
@include button(simple, $pink);
+ @include float(right);
margin-top: 0;
- float: right;
}
.contact-button {
@@ -925,14 +945,14 @@
.verification-reminder {
width: flex-grid(8, 12);
+ @include float(left);
position: relative;
- float: left;
}
.verification-cta {
width: flex-grid(4, 12);
+ @include float(left);
position: relative;
- float: left;
.cta {
@include button(simple, $green-d1);
@@ -960,126 +980,97 @@
}
}
}
+ }
-
- // "enrolled as" status
- .sts-enrollment {
- position: absolute;
- top: 105px;
- @include left(0);
- display: inline-block;
- text-align: center;
- width: 200px;
+ // ====================
+ // CASE: "enrolled as" status - professional ed
+ &.professional {
+
+ // changes to cover
+ .wrapper-course-image .cover {
+ border-color: $professional-color-lvl3;
+ padding: ($baseline/10);
+ }
+
+ // course enrollment status message
+ .sts-enrollment {
.label {
@extend %text-sr;
}
- .deco-graphic {
- position: absolute;
- top: -5px;
- right: -8px;
- }
-
+ // status message
.sts-enrollment-value {
- @extend %ui-depth1;
- @extend %copy-badge;
- font-size: 0.6em;
- line-height: 1.5em;
- font-weight: 600;
- border-radius: 0;
- padding: 1px ($baseline/2);
- color: white;
+ background: $professional-color-lvl3;
}
}
+ }
- // ====================
-
- // CASE: "enrolled as" status - professional ed
- &.professional {
-
- // changes to cover
- .cover {
- border-color: $professional-color-lvl3;
- padding: ($baseline/10);
- }
-
- // course enrollment status message
- .sts-enrollment {
- .label {
- @extend %text-sr;
- }
+ // CASE: "enrolled as" status - verified
+ &.verified {
- // status message
- .sts-enrollment-value {
- background: $professional-color-lvl3;
- }
- }
+ // changes to cover
+ .wrapper-course-image .cover {
+ border-color: $verified-color-lvl1;
+ padding: ($baseline/10);
}
- // CASE: "enrolled as" status - verified
- &.verified {
-
- // changes to cover
- .cover {
- border-color: $verified-color-lvl1;
- padding: ($baseline/10);
+ // course enrollment status message
+ .sts-enrollment {
+ .label {
+ @extend %text-sr;
}
- // course enrollment status message
- .sts-enrollment {
- .label {
- @extend %text-sr;
- }
-
- .deco-graphic {
- @extend %ui-depth3;
- width: 40px;
- position: absolute;
- top: -4px;
- right: -6px;
- }
+ .deco-graphic {
+ @extend %ui-depth3;
+ width: 40px;
+ position: absolute;
+ top: -5px;
+ @include right(0);
+ }
- // status message
- .sts-enrollment-value {
- background: $verified-color-lvl1;
- }
+ // status message
+ .sts-enrollment-value {
+ background: $verified-color-lvl1;
}
}
+ }
- // CASE: "enrolled as" status - honor code
- &.honor {
+ // CASE: "enrolled as" status - honor code
+ &.honor {
- // changes to cover
- .cover {
- border-color: $honorcode-color-lvl2;
- padding: ($baseline/10);
- }
+ // changes to cover
+ .wrapper-course-image .cover {
+ border-color: $honorcode-color-lvl2;
+ padding: ($baseline/10);
+ }
- // status message
- .sts-enrollment-value {
- background: $honorcode-color-lvl1;
- }
+ // status message
+ .sts-enrollment-value {
+ background: $honorcode-color-lvl1;
}
+ }
- // CASE: "enrolled as" status - auditing
- &.audit {
+ // CASE: "enrolled as" status - auditing
+ &.audit {
- // changes to cover
- .cover {
- border-color: $audit-color-lvl2;
- padding: ($baseline/10);
- }
+ // changes to cover
+ .wrapper-course-image .cover {
+ border-color: $audit-color-lvl2;
+ padding: ($baseline/10);
+ }
- // status message
- .sts-enrollment-value {
- background: $audit-color-lvl1;
- }
+ // status message
+ .sts-enrollment-value {
+ background: $audit-color-lvl1;
}
}
}
+}
-
+// +Misc - Uncategorized
+// ====================
+.dashboard .my-courses {
// status - language
.status-language {
@@ -1253,8 +1244,8 @@
.enter-course-blocked{
@include box-sizing(border-box);
+ @include float(left);
display: block;
- float: left;
font: normal 15px/1.6rem $sans-serif;
letter-spacing: 0;
padding: 6px 32px 7px;
@@ -1285,9 +1276,11 @@
@extend .cover;
opacity: 0.5;
}
+}
- // +Dashboard - Banner
- // ====================
+// +Dashboard - Banner
+// ====================
+.dashboard .my-courses {
.dashboard-banner {
&:empty {
diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss
index e08ff32f1b9..45e7bc30c48 100644
--- a/lms/static/sass/shared/_header.scss
+++ b/lms/static/sass/shared/_header.scss
@@ -117,7 +117,7 @@ header.global {
.user {
@include float(right);
- margin-top: 4px;
+ margin-top: ($baseline/4);
> .primary {
display: block;
@@ -135,7 +135,7 @@ header.global {
> a {
@include border-radius(0, 4px, 4px, 0);
@include border-left(none);
- padding: 3px 8px 9px 8px;
+ padding: ($baseline/4) 8px 11px ($baseline/2);
&.shopping-cart {
border-radius: 4px;
@@ -148,7 +148,7 @@ header.global {
}
a.user-link {
- @include padding(3px, 12px, 8px, 8px);
+ @include padding(5px, 12px, 10px, 10px);
position: relative;
text-transform: none;
font-size: 14px;
@@ -196,17 +196,17 @@ header.global {
}
.dropdown-menu {
- background: $border-color-4;
+ background: $white;
border-radius: 4px;
- box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3);
- border: 1px solid $border-color-3;
+ box-shadow: 0 2px 2px 0 rgba(0,0,0, 0.3);
+ border: 1px solid $gray-l3;
display: none;
margin-top: 0;
padding: 5px 10px;
position: absolute;
@include right(0px);
- top: 34px;
- width: 170px;
+ top: 37px;
+ min-width: 120px;
z-index: 3;
&.expanded {
@@ -221,14 +221,14 @@ header.global {
bottom: 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: "";
display: block;
height: 0px;
position: absolute;
@include transform(rotate(-45deg));
@include right(7px);
- top: -6px;
+ top: -5px;
width: 0px;
}
@@ -579,7 +579,7 @@ header.global-new {
li {
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);
&:first-child {
diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html
index 8c3f1749cfa..6aa2c15d5af 100644
--- a/lms/templates/dashboard.html
+++ b/lms/templates/dashboard.html
@@ -74,26 +74,25 @@
</div>
<section class="container dashboard" id="dashboard-main">
- <section class="my-courses" id="my-courses">
+ <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 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" />
+ % 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">
@@ -122,11 +121,12 @@
% endfor
</ul>
% endfor
+ </div>
% endif
</section>
- <section class="profile-sidebar">
+ <section class="profile-sidebar" role="region" aria-label="User info">
<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>
<section class="user-info">
<ul>
@@ -220,61 +220,6 @@
</ul>
</section>
-<<<<<<< HEAD
-
- </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
-=======
->>>>>>> dashboard styling cleanup changes, including reversing the positions of the sidebar and course listing, html for new social icons (not currently wired up), new actions dropdown for unenrollment and email settings, partial reorganization of dashboard.scss styles as well
</section>
</section>
@@ -309,8 +254,6 @@
</div>
</section>
-
-
<section id="password_reset_complete" class="modal" aria-hidden="true">
<div class="inner-wrapper" role="dialog" aria-labelledby="password-reset-email">
<button class="close-modal">
diff --git a/lms/templates/dashboard/_dashboard_course_listing.html b/lms/templates/dashboard/_dashboard_course_listing.html
index 3147641c63c..19e5af2c9bc 100644
--- a/lms/templates/dashboard/_dashboard_course_listing.html
+++ b/lms/templates/dashboard/_dashboard_course_listing.html
@@ -1,4 +1,4 @@
-<%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 _
@@ -42,64 +42,23 @@ from student.helpers import (
% endif
<article class="course${mode_class}">
-
- <% course_target = reverse('info', args=[course.id.to_deprecated_string()]) %>
- % if show_courseware_link:
- % if not is_course_blocked:
- <a href="${course_target}" class="cover">
- <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}" />
- </a>
- % else:
- <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}" />
- </a>
- % endif
- % else:
- <div 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}" />
- </div>
- % endif
-
- % if settings.FEATURES.get('ENABLE_VERIFIED_CERTIFICATES'):
- <span class="sts-enrollment" title="${course_verified_certs.get('enrollment_title')}">
- <span class="label">${_("Enrolled as: ")}</span>
- % 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')}" />
- % endif
- <div class="sts-enrollment-value">${course_verified_certs.get('enrollment_value')}</div>
- </span>
- % endif
-
- <section class="info">
- <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>
- </hgroup>
- </section>
+ <% course_target = reverse('info', args=[unicode(course.id)]) %>
<section class="details">
+ <div class="wrapper-course-image" aria-hidden="true">
% if show_courseware_link:
% if not is_course_blocked:
- <a href="${course_target}" class="cover">
- <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}" />
- </a>
+ <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:
- <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}" />
- </a>
- % endif
+ <a class="fade-cover">
+ <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>
+ % endif
% else:
- <div 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}" />
- </div>
+ <a class="cover">
+ <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>
% endif
% if settings.FEATURES.get('ENABLE_VERIFIED_CERTIFICATES'):
<span class="sts-enrollment" title="${course_verified_certs.get('enrollment_title')}">
@@ -110,6 +69,7 @@ from student.helpers import (
<div class="sts-enrollment-value">${course_verified_certs.get('enrollment_value')}</div>
</span>
% endif
+ </div>
<div class="wrapper-course-details">
<h3 class="course-title">
% if show_courseware_link:
@@ -141,44 +101,35 @@ from student.helpers import (
<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')}</a>
+ % if not is_course_blocked:
+ <a href="${course_target}" class="enter-course archived">${_('View Archived Course')}<span class="sr"> ${course.display_name_with_default}</span></a>
+ % else:
+ <a class="enter-course-blocked archived">${_('View Archived Course')}<span class="sr"> ${course.display_name_with_default}</span></a>
+ % endif
% else:
- <a class="enter-course-blocked archived">${_('View Archived Course')}</a>
+ % if not is_course_blocked:
+ <a href="${course_target}" class="enter-course">${_('View Course')}<span class="sr"> ${course.display_name_with_default}</span></a>
+ % else:
+ <a class="enter-course-blocked">${_('View Course')}<span class="sr"> ${course.display_name_with_default}</span></a>
+ % endif
% endif
- % else:
- % if not is_course_blocked:
- <a href="${course_target}" class="enter-course">${_('View Course')}</a>
- % else:
- <a class="enter-course-blocked">${_('View Course')}</a>
- % endif
- % endif
-
- <a href="#" data-tooltip="${_('Share on Facebook')}" class="action action-facebook" aria-haspopup="true" aria-expanded="false">
- <span class="sr">Facebook</span>
- <i class="fa fa-facebook" aria-hidden="true"></i>
- </a>
- <a href="#" data-tooltip="${_('Share on Twitter')}" class="action action-twitter" aria-haspopup="true" aria-expanded="false">
- <span class="sr">Twitter</span>
- <i class="fa fa-twitter" aria-hidden="true"></i>
- </a>
<div class="wrapper-action-more">
- <a href="#" class="action action-more" aria-haspopup="true" aria-expanded="false">
- <span class="sr">Course options dropdown</span>
+ <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">
- <ul class="actions-dropdown-list" aria-label="More Options" role="menu">
- <li class="actions-item">
+ <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's name will be added to the end of this sentence.
+ ## 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}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the purchased course")}';
+ <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}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the purchased course")}';
+ <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>
@@ -186,12 +137,12 @@ from student.helpers import (
% 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}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the purchased course")}';
+ <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}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the purchased course")}';
+ <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>
@@ -199,23 +150,23 @@ from student.helpers import (
% 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}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from")}'; document.getElementById('refund-info').innerHTML=''">
+ <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}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from")}'; document.getElementById('refund-info').innerHTML=''">
+ <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}" 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)}';
+ <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}" 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)}';
+ <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>
@@ -223,24 +174,24 @@ from student.helpers import (
% 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}" 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)}';
+ <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}" 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)}';
+ <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">
+ <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-optout="${unicode(course.id) in course_optouts}">${_('Email Settings')}</a>
+ <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-optout="${unicode(course.id) in course_optouts}">${_('Email Settings')}</a>
+ <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>
@@ -252,7 +203,7 @@ from student.helpers import (
% endif
</div>
</section>
- <aside class="wrapper-messages-primary">
+ <footer class="wrapper-messages-primary">
<ul class="messages-list">
% if course.may_certify() and cert_status:
<%include file='_dashboard_certificate_information.html' args='cert_status=cert_status,course=course, enrollment=enrollment'/>
@@ -298,7 +249,7 @@ from student.helpers import (
<div class="message message-upsell has-actions is-expandable is-shown">
<div class="wrapper-tip">
<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>
</h4>
<p class="message-copy">${_("Take this course as an ID-verified student.")}</p>
@@ -358,7 +309,7 @@ from student.helpers import (
</li>
% endif
</ul>
- </aside>
+ </footer>
</article>
</li>
<script>
--
GitLab