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 132 additions and 101 deletions
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,
......@@ -111,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',
......
common/test/acceptance/pages/lms/dashboard.py
......@@ -45,11 +45,9 @@ 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.split(' ', 1)
return course_name
return el.text
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
def full_name(self):
......@@ -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
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)
lms/static/js/dashboard/legacy.js
......@@ -41,6 +41,7 @@
}
$('.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
// a `track` call whenever a bound link is clicked. Usually the page would change before
......@@ -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() {
$.ajax({
url: urls.verifyToggleBannerFailedOff,
......@@ -110,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") {
......@@ -118,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") );
});
......@@ -235,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(
......@@ -247,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(
......
lms/static/sass/_shame.scss
......@@ -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
.course-content .discussion-post.edit-post-form .topic-menu {
padding-left: 0;
......
lms/static/sass/base/_base.scss
......@@ -128,7 +128,7 @@ a:focus {
@include clearfix();
@include box-sizing(border-box);
margin: 0 auto 0;
padding: 0 ($baseline*1.5);
padding: ($baseline*2) 0;
max-width: grid-width(12);
min-width: 760px;
width: flex-grid(12);
......
lms/static/sass/base/_extends.scss
......@@ -120,3 +120,11 @@
padding: ($baseline/5) ($baseline/2);
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%);
$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);
......
lms/static/sass/elements/_typography.scss
......@@ -41,6 +41,7 @@
}
%t-title3 {
@extend %t-title;
@include font-size(36);
@include line-height(36);
}
......
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 {
......
lms/templates/dashboard.html
......@@ -74,10 +74,59 @@
</div>
<section class="container dashboard" id="dashboard-main">
<section class="my-courses" id="my-courses" role="main" aria-label="Content">
<header class="wrapper-header-courses">
<h2 class="header-courses">${_("Current Courses")}</h2>
</header>
% if len(course_enrollment_pairs) > 0:
<ul class="listing-courses">
% for dashboard_index, (course, enrollment) in enumerate(course_enrollment_pairs):
<% show_courseware_link = (course.id in show_courseware_links_for) %>
<% cert_status = cert_statuses.get(course.id) %>
<% show_email_settings = (course.id in show_email_settings_for) %>
<% course_mode_info = all_course_modes.get(course.id) %>
<% show_refund_option = (course.id in show_refund_option_for) %>
<% is_paid_course = (course.id in enrolled_courses_either_paid) %>
<% is_course_blocked = (course.id in block_courses) %>
<% course_verification_status = verification_status_by_course.get(course.id, {}) %>
<% course_requirements = courses_requirements_not_met.get(course.id) %>
<%include file='dashboard/_dashboard_course_listing.html' args="course=course, enrollment=enrollment, show_courseware_link=show_courseware_link, cert_status=cert_status, show_email_settings=show_email_settings, course_mode_info=course_mode_info, show_refund_option = show_refund_option, is_paid_course = is_paid_course, is_course_blocked = is_course_blocked, verification_status=course_verification_status, course_requirements=course_requirements, dashboard_index=dashboard_index" />
% endfor
</ul>
% else:
<section class="empty-dashboard-message">
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
<p>${_("Looks like you haven't enrolled in any courses yet.")}</p>
<a href="${marketing_link('COURSES')}">
${_("Find courses now!")}
</a>
% else:
<p>${_("Looks like you haven't enrolled in any courses yet.")}</p>
%endif
</section>
% endif
% if staff_access and len(errored_courses) > 0:
<div id="course-errors">
<h2>${_("Course-loading errors")}</h2>
<section class="profile-sidebar">
% for course_dir, errors in errored_courses.items():
<h3>${course_dir | h}</h3>
<ul>
% for (msg, err) in errors:
<li>${msg}
<ul><li><pre>${err}</pre></li></ul>
</li>
% endfor
</ul>
% endfor
</div>
% endif
</section>
<section class="profile-sidebar" role="region" aria-label="User info">
<header class="profile">
<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>
......@@ -119,7 +168,6 @@
<span class="provider">${state.provider.NAME}</span>
<span class="control">
% if state.has_account:
<form
action="${pipeline.get_disconnect_url(state.provider.NAME)}"
......@@ -128,20 +176,21 @@
<input type="hidden" name="csrfmiddlewaretoken" value="${csrf_token}">
<a href="#" onclick="document.${state.get_unlink_form_name()}.submit()">
## Translators: clicking on this removes the link between a user's edX account and their account with an external authentication provider (like Google or LinkedIn).
${_("Unlink")}
## 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")}
</a>
% else:
</form>
% else:
<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).
${_("Link")}
## 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")}
</a>
% endif
</form>
</span>
</div>
% endfor
</span>
</span>
</li>
% endif
......@@ -171,58 +220,6 @@
</ul>
</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>
......@@ -257,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">
......
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