Skip to content

E
edx-platform
Commit afaaca96 by stephensanchez
Options

Adding new styles for dashboard notifications. 

Change the reverification failure message styling.

Changing templates so new styles do not appear in courseware.

Removing unused aria tag.

PR comments on cleaning up SASS

Fix signup LMS test.

Copy changes per review on PR

Updating based on PR comments

Style and HTML changes for notifications
parent f34b57ad
Showing with 105 additions and 57 deletions
common/djangoapps/student/views.py
......@@ -480,7 +480,10 @@ def dashboard(request):
message = ""
if not user.is_active:
message = render_to_string('registration/activate_account_notice.html', {'email': user.email})
message = render_to_string(
'registration/activate_account_notice.html',
{'email': user.email, 'platform_name': settings.PLATFORM_NAME}
)
# Global staff can see what courses errored on their dashboard
staff_access = False
......
lms/djangoapps/courseware/features/signup.feature
......@@ -16,4 +16,4 @@ Feature: LMS.Sign in
And I check the checkbox named "terms_of_service"
And I check the checkbox named "honor_code"
And I submit the registration form
Then I should see "THANKS FOR REGISTERING!" in the dashboard banner
Then I should see "Thanks for Registering!" in the dashboard banner
lms/static/sass/elements/_system-feedback.scss
......@@ -6,8 +6,6 @@
// UI : message
.wrapper-msg {
display: block;
margin-bottom: ($baseline/4);
box-shadow: 0 0 5px $shadow-d1 inset;
background: $notify-banner-bg-1;
padding: $baseline ($baseline*1.5);
......
lms/static/sass/multicourse/_dashboard.scss
......@@ -5,27 +5,6 @@
@include clearfix;
padding: ($baseline*2) 0 0 0;
.dashboard-banner {
background: $yellow;
border: 1px solid rgb(200,200,200);
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
padding: 10px;
margin-bottom: 30px;
&:empty {
display: none;
background-color: #FFF;
}
h2 {
margin-bottom: 0;
}
p {
margin-bottom: 0;
}
}
.profile-sidebar {
float: left;
margin-right: flex-gutter();
......@@ -1166,3 +1145,31 @@
opacity: 0.5;
}
.dashboard-banner {
&:empty {
display: none;
}
.wrapper-msg {
padding-bottom: 0;
}
.msg {
@include clearfix();
font-family: $sans-serif;
padding-bottom: $baseline;
border-bottom: thin solid $gray;
&.title {
@extend %t-title5;
@extend %t-weight4;
font-family: $f-sans-serif;
// Overriding Platform h2 styles
text-transform: none;
letter-spacing: 0;
}
}
}
lms/templates/dashboard.html
......@@ -24,6 +24,13 @@
<script type="text/javascript">
(function() {
// On initialization, set focus to the first notification available
// for screen readers.
var notifications = $('.dashboard-notifications');
if (notifications.children().length > 0) {
notifications.focus();
}
$('.message.is-expandable .wrapper-tip').bind('click', toggleExpandMessage);
function toggleExpandMessage(e) {
......@@ -178,30 +185,34 @@
</script>
</%block>
% if reverifications["must_reverify"] or reverifications["denied"]:
<section class="dashboard-banner">
<%include file='dashboard/_dashboard_prompt_midcourse_reverify.html' />
</section>
% endif
<div class="dashboard-notifications" tabindex="-1">
% if reverifications["must_reverify"] or reverifications["denied"]:
## Section Element must be outside of the re-verify template. The template is re-used for courseware, and has separate styling.
<section class="dashboard-banner">
<%include file='dashboard/_dashboard_prompt_midcourse_reverify.html' />
</section>
% endif
<section class="container dashboard" id="dashboard-main" aria-hidden="false">
%if message:
<section class="dashboard-banner">
${message}
</section>
%endif
%if message:
<section class="dashboard-banner">
${message}
</section>
%endif
% if duplicate_provider:
<section class="dashboard-banner third-party-auth">
<%include file='dashboard/_dashboard_third_party_error.html' />
</section>
% endif
%if enrollment_message:
${enrollment_message}
%endif
%if enrollment_message:
<section class="dashboard-banner">
${enrollment_message}
</section>
%endif
</div>
% if duplicate_provider:
<section class="dashboard-banner third-party-auth">
## Translators: this message is displayed when a user tries to link their account with a third-party authentication provider (for example, Google or LinkedIn) with a given edX account, but their third-party account is already associated with another edX account. provider_name is the name of the third-party authentication provider, and platform_name is the name of the edX deployment.
<p>${_("The {provider_name} account you selected is already linked to another {platform_name} account.").format(provider_name='<strong>%s</strong>' % duplicate_provider.NAME, platform_name=platform_name)}
</section>
% endif
<section class="container dashboard" id="dashboard-main">
<section class="profile-sidebar">
<header class="profile">
......
lms/templates/dashboard/_dashboard_prompt_midcourse_reverify.html
<%! from django.utils.translation import ugettext as _ %>
<%! from django.core.urlresolvers import reverse %>
% if reverifications["must_reverify"]:
% if len(reverifications["must_reverify"]) > 1:
......@@ -32,7 +31,6 @@
</nav>
</div>
</div>
</div>
% elif reverifications["must_reverify"]:
<div class="wrapper-msg urgency-high">
......@@ -57,13 +55,12 @@
</nav>
</div>
</div>
</div>
% endfor
%endif
%endif
%if reverifications["denied"] and denied_banner:
<div class="wrapper-msg urgency-low" id="failed-verification-banner">
<div class="wrapper-msg urgency-high" id="failed-verification-banner">
<div class="msg msg-reverify is-dismissable">
<div class="msg-content">
<h2 class="title">${_("Your re-verification failed")}</h2>
......@@ -79,13 +76,12 @@
)}
</p>
</div>
% endif
% endfor
</div>
<div class="action-dismiss">
<button class="button-dismiss" id="failed-verification-button-dismiss"><i class="icon-remove-sign"></i> <span class="sr">${_('Dismiss')}</span></button>
</div>
</div>
</div>
</div>
% endif
% endfor
%endif
lms/templates/dashboard/_dashboard_third_party_error.html 0 → 100644
<%! from django.utils.translation import ugettext as _ %>
<div class="wrapper-msg urgency-high">
<div class="msg">
<div class="msg-content">
<h2 class="sr">${_("Could Not Link Accounts")}</h2>
<div class="copy">
## Translators: this message is displayed when a user tries to link their account with a third-party authentication provider (for example, Google or LinkedIn) with a given edX account, but their third-party account is already associated with another edX account. provider_name is the name of the third-party authentication provider, and platform_name is the name of the edX deployment.
<p>${_("The {provider_name} account you selected is already linked to another {platform_name} account.").format(provider_name='<strong>{duplicate_provider}</strong>'.format(duplicate_provider=duplicate_provider.NAME), platform_name=platform_name)}</p>
</div>
</div>
</div>
</div>
lms/templates/enrollment/course_enrollment_message.html
<%! from django.utils.translation import ugettext as _ %>
% for course, enrollment in recent_course_enrollment_pairs:
<section class="dashboard-banner">
<p class='activation-message'>${_("You have successfully enrolled in {enrolled_course}.").format(enrolled_course=course.display_name)}</p>
</section>
<div class="wrapper-msg urgency-high">
<div class="msg">
<div class="msg-content">
<h2 class="sr">${_("Enrollment Successful")}</h2>
<div class="copy">
<p>${_("You have successfully enrolled in {enrolled_course}.").format(enrolled_course=course.display_name)}</p>
</div>
</div>
</div>
</div>
% endfor
lms/templates/registration/activate_account_notice.html
<%! from django.utils.translation import ugettext as _ %>
<h2>${_("Thanks For Registering!")}</h2>
<p class='activation-message'>${_("Your account is not active yet. An activation link has been sent to {email}, along with instructions for activating your account.").format(email="<strong>{}</strong>".format(email))}</p>
<div class="wrapper-msg urgency-high">
<div class="msg">
<div class="msg-content">
<h2 class="title">${_("Thanks for Registering!")}</h2>
<div class="copy">
<p class='activation-message'>${_(
"You've successfully created an account on {platform_name}. We've sent an account "
"activation message to {email}. To activate your account and start enrolling in "
"courses, click the link in the message."
).format(email="<strong>{}</strong>".format(email), platform_name=platform_name
)}
</p>
</div>
</div>
</div>
</div>
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