From afaaca969a20a0a065f4356832041c25ffed568c Mon Sep 17 00:00:00 2001
From: stephensanchez <steve@edx.org>
Date: Mon, 6 Oct 2014 15:41:38 +0000
Subject: [PATCH] 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
---
common/djangoapps/student/views.py | 5 ++++-
lms/djangoapps/courseware/features/signup.feature | 2 +-
lms/static/sass/elements/_system-feedback.scss | 2 --
lms/static/sass/multicourse/_dashboard.scss | 49 ++++++++++++++++++++++++++++---------------------
lms/templates/dashboard.html | 51 +++++++++++++++++++++++++++++++--------------------
lms/templates/dashboard/_dashboard_prompt_midcourse_reverify.html | 10 +++-------
lms/templates/dashboard/_dashboard_third_party_error.html | 12 ++++++++++++
lms/templates/enrollment/course_enrollment_message.html | 13 ++++++++++---
lms/templates/registration/activate_account_notice.html | 18 ++++++++++++++++--
9 files changed, 105 insertions(+), 57 deletions(-)
create mode 100644 lms/templates/dashboard/_dashboard_third_party_error.html
diff --git a/common/djangoapps/student/views.py b/common/djangoapps/student/views.py
index 6adca7a..2fecaf6 100644
--- a/common/djangoapps/student/views.py
+++ b/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
diff --git a/lms/djangoapps/courseware/features/signup.feature b/lms/djangoapps/courseware/features/signup.feature
index b04a950..60067d5 100644
--- a/lms/djangoapps/courseware/features/signup.feature
+++ b/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
diff --git a/lms/static/sass/elements/_system-feedback.scss b/lms/static/sass/elements/_system-feedback.scss
index 2943df4..9a6061f 100644
--- a/lms/static/sass/elements/_system-feedback.scss
+++ b/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);
diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss
index 9569ea1..f669f65 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/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;
+ }
+ }
+}
+
diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html
index be4acc8..23dac72 100644
--- a/lms/templates/dashboard.html
+++ b/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">
diff --git a/lms/templates/dashboard/_dashboard_prompt_midcourse_reverify.html b/lms/templates/dashboard/_dashboard_prompt_midcourse_reverify.html
index c77f8d9..9a28db1 100644
--- a/lms/templates/dashboard/_dashboard_prompt_midcourse_reverify.html
+++ b/lms/templates/dashboard/_dashboard_prompt_midcourse_reverify.html
@@ -1,6 +1,5 @@
<%! 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
diff --git a/lms/templates/dashboard/_dashboard_third_party_error.html b/lms/templates/dashboard/_dashboard_third_party_error.html
new file mode 100644
index 0000000..99ba0ae
--- /dev/null
+++ b/lms/templates/dashboard/_dashboard_third_party_error.html
@@ -0,0 +1,12 @@
+<%! 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>
diff --git a/lms/templates/enrollment/course_enrollment_message.html b/lms/templates/enrollment/course_enrollment_message.html
index f2d6054..1311c25 100644
--- a/lms/templates/enrollment/course_enrollment_message.html
+++ b/lms/templates/enrollment/course_enrollment_message.html
@@ -1,6 +1,13 @@
<%! 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
diff --git a/lms/templates/registration/activate_account_notice.html b/lms/templates/registration/activate_account_notice.html
index b65a36e..dc8b4e1 100644
--- a/lms/templates/registration/activate_account_notice.html
+++ b/lms/templates/registration/activate_account_notice.html
@@ -1,3 +1,17 @@
<%! 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>
--
libgit2 0.26.0