Skip to content
Snippets Groups Projects
Commit bd5b0b31 authored by Marco Morales's avatar Marco Morales
Browse files

Matt - javascript and test changes, Marco - styling feedback from initial reviews

parent 58618d8c
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 451 additions and 543 deletions
common/djangoapps/student/tests/test_bulk_email_settings.py
+ 4
− 5
View file @ bd5b0b31
......@@ -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',
......
common/test/acceptance/pages/lms/dashboard.py
+ 4
− 6
View file @ bd5b0b31
......@@ -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
lms/djangoapps/courseware/features/registration.py
+ 8
− 1
View file @ bd5b0b31
......@@ -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
+ 24
− 12
View file @ bd5b0b31
......@@ -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(
......
lms/static/sass/base/_variables.scss
+ 5
− 0
View file @ bd5b0b31
......@@ -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/multicourse/_dashboard.scss
+ 334
− 341
View file @ bd5b0b31
This diff is collapsed.
lms/static/sass/shared/_header.scss
+ 11
− 11
View file @ bd5b0b31
......@@ -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
+ 15
− 72
View file @ bd5b0b31
......@@ -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">
......
lms/templates/dashboard/_dashboard_course_listing.html
+ 46
− 95
View file @ bd5b0b31
This diff is collapsed.
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