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 647 additions and 582 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 {
float: left;
margin-left: ($baseline*0.75);
font-size: 15px;
line-height: 48px;
font-weight: 700;
text-transform: uppercase;
}
.pages {
position: relative;
}
.page { // status
display: none; .status {
position: absolute;
top: 0;
left: 0;
&:first-child {
display: block;
}
}
section {
padding: 0 10px;
}
.news-image {
height: 180px;
margin-bottom: ($baseline*0.75);
img { .list--nav {
width: 100%; margin: ($baseline/2) 0 0 0;
border: 1px solid $border-color-1; padding: 0;
}
} }
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,8 +285,12 @@ ...@@ -350,8 +285,12 @@
} }
} }
} }
}
}
// ==================== // +Dashboard - Course
// ====================
.dashboard .my-courses {
// UI: individual course item // UI: individual course item
.course { .course {
...@@ -360,64 +299,78 @@ ...@@ -360,64 +299,78 @@
@include clearfix(); @include clearfix();
@extend %ui-depth2; @extend %ui-depth2;
position: relative; position: relative;
margin: ($baseline/2);
.details {
@include clearfix();
.wrapper-course-image {
@include float(left);
@include margin-right(flex-gutter());
width: flex-grid(3);
.cover { .cover {
@include box-sizing(border-box); @include box-sizing(border-box);
@include transition(all 0.15s linear 0s); @include transition(all 0.15s linear 0s);
@include float(left);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@include float(left); max-height: 120px;
height: 100%; border-radius: ($baseline/5);
max-height: 100%;
width: 200px;
height: 120px;
margin: 0;
border-radius: ($baseline/10);
border: 1px solid $dashboard-course-cover-border; border: 1px solid $dashboard-course-cover-border;
border-bottom: 4px solid $dashboard-course-cover-border; border-bottom: 4px solid $dashboard-course-cover-border;
padding: ($baseline/10);
img { .course-image {
width: 100%; width: 100%;
min-height: 100%;
} }
} }
.info { // "enrolled as" status
@include clearfix(); .sts-enrollment {
@include padding(0, 10px, 0, 230px); @include float(left);
> hgroup {
padding: 0;
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 {
@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;
}
}
}
.wrapper-course-details {
display: block; display: block;
@include float(left);
width: flex-grid(9);
padding: 0;
}
.course-title {
a, span {
@extend %t-title3;
@extend %t-light;
display: inline-block;
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
font-family: $sans-serif;
font-size: 34px;
line-height: 42px;
font-weight: 300;
&:hover, &:focus { &:hover, &:focus {
text-decoration: none; text-decoration: none;
...@@ -425,209 +378,227 @@ ...@@ -425,209 +378,227 @@
} }
} }
.course-status { .course-info {
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(4);
margin-top: 17px; padding: 0;
margin-right: flex-gutter(); margin-top: ($baseline/2);
padding: ($baseline/4);
width: flex-grid(8);
float: left;
@include box-sizing(border-box);
p { [class*="info-"] {
color: $lighter-base-font-color; color: $gray-d1;
font-style: italic; @extend %t-title6;
letter-spacing: 1px; display: inline-block;
text-align: center;
}
} }
.course-status-completed { .info-date-block {
background: $gray-l3; @extend %t-title7;
color: $very-light-text; color: $gray-l1;
display: block;
p {
color: #222;
span {
font-weight: bold;
} }
} }
.wrapper-course-actions {
display: block;
@include float(right);
width: flex-grid(8);
padding: 0;
margin-top: ($baseline/2);
} }
.enter-course { .course-actions {
@include button(simple, $button-color);
// UI: course item actions
.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;
padding: 6px 32px 7px;
text-align: center;
margin-top: 16px;
&.archived {
@include button(simple, $button-archive-color);
font: normal 15px/1.6rem $sans-serif;
padding: 6px 32px 7px;
&:hover, &:focus { &:hover, &:focus {
text-decoration: none; color: $gray-d3;
} border: 1px solid $gray-l4;
} }
&:hover, &:focus { // STATE: is-disabled
text-decoration: none; &.is-disabled {
} color: $gray-l4;
}
} }
.prerequisites { // TYPE: facebook share
@include clearfix; &.action-facebook, {
color: $facebook-blue;
}
.tip { // TYPE: twitter share
font-family: $sans-serif; &.action-twitter {
font-size: 1em; color: $twitter-blue;
color: $lighter-base-font-color;
margin-top: ($baseline/2);
} }
} }
// "enrolled as" status // UI: general actions dropdown layout
.sts-enrollment { .wrapper-action-more {
position: absolute;
top: 105px;
@include left(0);
display: inline-block; display: inline-block;
text-align: center; position: relative;
width: 200px; @include float(right);
.label {
@extend %text-sr;
}
.deco-graphic { .actions-dropdown {
@extend %ui-no-list;
@extend %ui-depth1;
display: none;
position: absolute; position: absolute;
top: -5px; top: ($baseline*2);
right: -8px; right: 19px;
} pointer-events: none;
min-width: ($baseline*7);
.sts-enrollment-value { &.is-visible {
@extend %ui-depth1; display: block;
@extend %copy-badge; pointer-events: auto;
font-size: 0.6em;
line-height: 1.5em;
font-weight: 600;
border-radius: 0;
padding: 1px ($baseline/2);
color: white;
}
} }
// ==================== .actions-dropdown-list {
@extend %ui-no-list;
// CASE: "enrolled as" status - professional ed @include box-sizing(border-box);
&.professional { 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;
// changes to cover // ui triangle/nub
.cover { &:after,
border-color: $professional-color-lvl3; &:before {
padding: ($baseline/10); bottom: 100%;
@include right(3px);
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
} }
// course enrollment status message &:after {
.sts-enrollment { border-color: $transparent;
.label { border-bottom-color: $white;
@extend %text-sr; border-width: 6px;
@include margin-right(1px);
} }
// status message &:before {
.sts-enrollment-value { border-color: $transparent;
background: $professional-color-lvl3; border-bottom-color: $gray-l3;
} border-width: 7px;
} }
} }
// CASE: "enrolled as" status - verified .actions-item {
&.verified { @extend %t-title7;
display: block;
margin: 0;
// changes to cover &.is-hidden {
.cover { display: none;
border-color: $verified-color-lvl1;
padding: ($baseline/10);
} }
// course enrollment status message .action {
.sts-enrollment { @include margin-right(0);
.label {
@extend %text-sr;
}
.deco-graphic { &:hover, &:focus {
@extend %ui-depth3; border: 1px solid transparent;
width: 40px; }
position: absolute; }
top: -4px;
right: -6px;
} }
// status message
.sts-enrollment-value {
background: $verified-color-lvl1;
} }
} }
} }
// CASE: "enrolled as" status - honor code .course-status {
&.honor { 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: $honorcode-color-lvl2; font-style: italic;
padding: ($baseline/10); letter-spacing: 1px;
text-align: center;
}
} }
// status message .course-status-completed {
.sts-enrollment-value { background: $gray-l3;
background: $honorcode-color-lvl1; color: $very-light-text;
p {
color: $gray-d4;
span {
font-weight: bold;
}
} }
} }
// CASE: "enrolled as" status - auditing .enter-course {
&.audit { @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;
// changes to cover &.archived {
.cover { @include button(simple, $button-archive-color);
border-color: $audit-color-lvl2; font: normal 15px/1.6rem $sans-serif;
padding: ($baseline/10);
&:hover, &:focus {
text-decoration: none;
}
} }
// 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();
.messages-list {
margin: 0;
padding: 0;
} }
.message { .message {
@extend %ui-depth1;
border-radius: 3px; border-radius: 3px;
display: none; display: none;
z-index: 10;
margin: $baseline 0 ($baseline/2) 0; margin: $baseline 0 ($baseline/2) 0;
padding: ($baseline*0.5) $baseline; padding: ($baseline/2) $baseline;
font-family: $sans-serif; background: $gray-l5;
background: tint($yellow,70%); border: 1px solid $gray-l4;
border: 1px solid $gray-l3;
// STATE: shown // STATE: shown
&.is-shown { &.is-shown {
...@@ -674,6 +645,7 @@ ...@@ -674,6 +645,7 @@
.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 {
...@@ -695,12 +667,19 @@ ...@@ -695,12 +667,19 @@
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,38 +688,27 @@ ...@@ -709,38 +688,27 @@
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 {
@include transform(rotate(90deg));
}
@include ltr {
@include transform(rotate(-90deg));
}
} }
.message-copy { .message-copy {
float: right; @include float(right);
} }
} }
...@@ -789,7 +757,7 @@ ...@@ -789,7 +757,7 @@
} }
// TYPE: status // TYPE: status
.message-status { &.message-status {
background: tint($yellow,70%); background: tint($yellow,70%);
border-color: $gray-l3; border-color: $gray-l3;
...@@ -806,7 +774,7 @@ ...@@ -806,7 +774,7 @@
.actions { .actions {
.action { .action {
float: left; @include float(left);
margin: 0 15px 0 0; margin: 0 15px 0 0;
.btn, .cta { .btn, .cta {
...@@ -815,8 +783,8 @@ ...@@ -815,8 +783,8 @@
.btn { .btn {
@include box-sizing(border-box); @include box-sizing(border-box);
@include float(left);
border-radius: 3px; border-radius: 3px;
float: left;
font: normal 0.8rem/1.2rem $sans-serif; font: normal 0.8rem/1.2rem $sans-serif;
letter-spacing: 1px; letter-spacing: 1px;
padding: 6px 12px; padding: 6px 12px;
...@@ -826,18 +794,14 @@ ...@@ -826,18 +794,14 @@
cursor: default !important; cursor: default !important;
&:hover, &:focus { &:hover, &:focus {
@include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100% ));
background: #eee; 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 { .cta {
float: left; @include float(left);
font: normal 0.8rem/1.2rem $sans-serif; font: normal 0.8rem/1.2rem $sans-serif;
letter-spacing: 1px; letter-spacing: 1px;
padding: 6px 12px; padding: 6px 12px;
...@@ -871,8 +835,8 @@ ...@@ -871,8 +835,8 @@
.exam-button { .exam-button {
@include button(simple, $pink); @include button(simple, $pink);
@include float(right);
margin-top: 0; margin-top: 0;
float: right;
} }
.contact-button { .contact-button {
...@@ -981,14 +945,14 @@ ...@@ -981,14 +945,14 @@
.verification-reminder { .verification-reminder {
width: flex-grid(8, 12); width: flex-grid(8, 12);
@include float(left);
position: relative; position: relative;
float: left;
} }
.verification-cta { .verification-cta {
width: flex-grid(4, 12); width: flex-grid(4, 12);
@include float(left);
position: relative; position: relative;
float: left;
.cta { .cta {
@include button(simple, $green-d1); @include button(simple, $green-d1);
...@@ -1004,45 +968,110 @@ ...@@ -1004,45 +968,110 @@
} }
} }
a.unenroll { // TYPE: pre-requisites
@include float(right); .prerequisites {
display: block; @include clearfix;
font-style: italic;
.tip {
font-family: $sans-serif;
font-size: 1em;
color: $lighter-base-font-color; color: $lighter-base-font-color;
text-decoration: underline; margin-top: ($baseline/2);
font-size: .8em; }
margin-top: 32px; }
}
}
&:hover, &:focus { // ====================
color: #333;
// 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;
} }
a.email-settings { // status message
@extend a.unenroll; .sts-enrollment-value {
@include margin-right(10px); background: $professional-color-lvl3;
}
} }
} }
// account-related // CASE: "enrolled as" status - verified
.user-info { &.verified {
// status // changes to cover
.status { .wrapper-course-image .cover {
border-color: $verified-color-lvl1;
padding: ($baseline/10);
}
.list--nav { // course enrollment status message
margin: ($baseline/2) 0 0 0; .sts-enrollment {
padding: 0; .label {
@extend %text-sr;
} }
.nav__item { .deco-graphic {
@extend %t-weight4; @extend %ui-depth3;
@include font-size(13); width: 40px;
margin-left: 26px; position: absolute;
top: -5px;
@include right(0);
}
// status message
.sts-enrollment-value {
background: $verified-color-lvl1;
} }
} }
} }
// CASE: "enrolled as" status - honor code
&.honor {
// changes to cover
.wrapper-course-image .cover {
border-color: $honorcode-color-lvl2;
padding: ($baseline/10);
}
// status message
.sts-enrollment-value {
background: $honorcode-color-lvl1;
}
}
// CASE: "enrolled as" status - auditing
&.audit {
// changes to cover
.wrapper-course-image .cover {
border-color: $audit-color-lvl2;
padding: ($baseline/10);
}
// status message
.sts-enrollment-value {
background: $audit-color-lvl1;
}
}
}
}
// +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,6 +1256,7 @@ ...@@ -1227,6 +1256,7 @@
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;
...@@ -1237,32 +1267,21 @@ ...@@ -1237,32 +1267,21 @@
} }
} }
} }
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
// ====================
.dashboard .my-courses {
.dashboard-banner {
&:empty { &:empty {
display: none; display: none;
...@@ -1335,5 +1354,5 @@ ...@@ -1335,5 +1354,5 @@
} }
} }
} }
}
} }
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
<section class="profile-sidebar"> % 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
</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)}"
...@@ -131,17 +179,18 @@ ...@@ -131,17 +179,18 @@
## 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>
</form>
% else: % 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 _
...@@ -41,28 +41,25 @@ from student.helpers import ( ...@@ -41,28 +41,25 @@ from student.helpers import (
<% mode_class = '' %> <% mode_class = '' %>
% endif % endif
<article class="course${mode_class}"> <article class="course${mode_class}">
<% course_target = reverse('info', args=[unicode(course.id)]) %>
<% <section class="details">
course_target = reverse('info', args=[course.id.to_deprecated_string()]) <div class="wrapper-course-image" aria-hidden="true">
%>
% if show_courseware_link: % if show_courseware_link:
% if not is_course_blocked: % if not is_course_blocked:
<a href="${course_target}" class="cover"> <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}" /> <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> </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>
...@@ -72,34 +69,142 @@ from student.helpers import ( ...@@ -72,34 +69,142 @@ from student.helpers import (
<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>
<section class="info"> <div class="wrapper-course-details">
<hgroup> <h3 class="course-title">
<p class="date-block"> % if show_courseware_link:
% if not is_course_blocked:
<a href="${course_target}">${course.display_name_with_default}</a>
% else:
<a class="disable-look">${course.display_name_with_default}</a>
% endif
% else:
<span>${course.display_name_with_default}</span>
% endif
</h3>
<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(): % if course.has_ended():
${_("Course Completed - {end_date}").format(end_date=course.end_datetime_text("DATE_TIME"))} ${_("Ended - {end_date}").format(end_date=course.end_datetime_text("SHORT_DATE"))}
% elif course.has_started(): % elif course.has_started():
${_("Course Started - {start_date}").format(start_date=course.start_datetime_text("DATE_TIME"))} ${_("Started - {start_date}").format(start_date=course.start_datetime_text("SHORT_DATE"))}
% elif course.start_date_is_still_default: # Course start date TBD % elif course.start_date_is_still_default: # Course start date TBD
${_("Course has not yet started")} ${_("Coming Soon")}
% else: # hasn't started yet % else: # hasn't started yet
${_("Course Starts - {start_date}").format(start_date=course.start_datetime_text("DATE_TIME"))} ${_("Starts - {start_date}").format(start_date=course.start_datetime_text("SHORT_DATE"))}
% endif % endif
</p> </span>
<h2 class="university">${get_course_about_section(course, 'university')}</h2> </div>
<h3>
% if show_courseware_link: % if show_courseware_link:
<div class="wrapper-course-actions">
<div class="course-actions">
% if course.has_ended():
% 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}" class="enter-course archived">${_('View Archived Course')}<span class="sr">&nbsp;${course.display_name_with_default}</span></a>
% else: % else:
<a class="disable-look">${course.display_number_with_default | h} ${course.display_name_with_default}</a> <a class="enter-course-blocked archived">${_('View Archived Course')}<span class="sr">&nbsp;${course.display_name_with_default}</span></a>
% endif % endif
% else: % else:
<span>${course.display_number_with_default | h} ${course.display_name_with_default}</span> % 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
</h3> % endif
</hgroup> <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
...@@ -142,10 +247,9 @@ from student.helpers import ( ...@@ -142,10 +247,9 @@ from student.helpers import (
% if course_mode_info['show_upsell'] and not is_course_blocked: % if course_mode_info['show_upsell'] and not is_course_blocked:
<div class="message message-upsell has-actions is-expandable is-shown"> <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>
...@@ -167,6 +271,7 @@ from student.helpers import ( ...@@ -167,6 +271,7 @@ from student.helpers import (
</div> </div>
</div> </div>
%endif %endif
% if is_course_blocked: % if is_course_blocked:
<p id="block-course-msg" class="course-block"> <p id="block-course-msg" class="course-block">
${_("You can no longer access this course because payment has not yet been received. " ${_("You can no longer access this course because payment has not yet been received. "
...@@ -189,102 +294,11 @@ from student.helpers import ( ...@@ -189,102 +294,11 @@ from student.helpers import (
</p> </p>
%endif %endif
% if show_courseware_link:
% if course.has_ended():
% if not is_course_blocked:
<a href="${course_target}" class="enter-course archived">${_('View Archived Course')}</a>
% else:
<a class="enter-course-blocked archived">${_('View Archived Course')}</a>
% 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
% 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 not is_course_blocked:
<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>
% else:
<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>
% endif
% endif
</section>
% if course_requirements: % if course_requirements:
## Multiple pre-requisite courses are not supported on frontend that's why we are pulling first element ## 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'])]) %> <% prc_target = reverse('about_course', args=[unicode(course_requirements['courses'][0]['key'])]) %>
<section class="prerequisites"> <li class="prerequisites">
<p class="tip"> <p class="tip">
${_("You must successfully complete {link_start}{prc_display}{link_end} before you begin this course.").format( ${_("You must successfully complete {link_start}{prc_display}{link_end} before you begin this course.").format(
link_start='<a href="{}">'.format(prc_target), link_start='<a href="{}">'.format(prc_target),
...@@ -292,12 +306,13 @@ from student.helpers import ( ...@@ -292,12 +306,13 @@ from student.helpers import (
prc_display=course_requirements['courses'][0]['display'], prc_display=course_requirements['courses'][0]['display'],
)} )}
</p> </p>
</section> </li>
% endif % endif
</article> </ul>
</footer>
</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