Commit 743326d2 by Stephen Sanchez

Merge pull request #5497 from edx/sanchez/update-message-styles

Adding new styles for dashboard notifications.
parents 1c2913dc afaaca96
...@@ -480,7 +480,10 @@ def dashboard(request): ...@@ -480,7 +480,10 @@ def dashboard(request):
message = "" message = ""
if not user.is_active: 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 # Global staff can see what courses errored on their dashboard
staff_access = False staff_access = False
......
...@@ -16,4 +16,4 @@ Feature: LMS.Sign in ...@@ -16,4 +16,4 @@ Feature: LMS.Sign in
And I check the checkbox named "terms_of_service" And I check the checkbox named "terms_of_service"
And I check the checkbox named "honor_code" And I check the checkbox named "honor_code"
And I submit the registration form 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
...@@ -6,8 +6,6 @@ ...@@ -6,8 +6,6 @@
// UI : message // UI : message
.wrapper-msg { .wrapper-msg {
display: block; display: block;
margin-bottom: ($baseline/4);
box-shadow: 0 0 5px $shadow-d1 inset;
background: $notify-banner-bg-1; background: $notify-banner-bg-1;
padding: $baseline ($baseline*1.5); padding: $baseline ($baseline*1.5);
......
...@@ -5,27 +5,6 @@ ...@@ -5,27 +5,6 @@
@include clearfix; @include clearfix;
padding: ($baseline*2) 0 0 0; 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 { .profile-sidebar {
float: left; float: left;
margin-right: flex-gutter(); margin-right: flex-gutter();
...@@ -1166,3 +1145,31 @@ ...@@ -1166,3 +1145,31 @@
opacity: 0.5; 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;
}
}
}
...@@ -24,6 +24,13 @@ ...@@ -24,6 +24,13 @@
<script type="text/javascript"> <script type="text/javascript">
(function() { (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); $('.message.is-expandable .wrapper-tip').bind('click', toggleExpandMessage);
function toggleExpandMessage(e) { function toggleExpandMessage(e) {
...@@ -178,30 +185,34 @@ ...@@ -178,30 +185,34 @@
</script> </script>
</%block> </%block>
% if reverifications["must_reverify"] or reverifications["denied"]: <div class="dashboard-notifications" tabindex="-1">
<section class="dashboard-banner"> % if reverifications["must_reverify"] or reverifications["denied"]:
<%include file='dashboard/_dashboard_prompt_midcourse_reverify.html' /> ## Section Element must be outside of the re-verify template. The template is re-used for courseware, and has separate styling.
</section> <section class="dashboard-banner">
% endif <%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: % if duplicate_provider:
<section class="dashboard-banner"> <section class="dashboard-banner third-party-auth">
${message} <%include file='dashboard/_dashboard_third_party_error.html' />
</section> </section>
%endif % endif
%if enrollment_message: %if enrollment_message:
${enrollment_message} <section class="dashboard-banner">
%endif ${enrollment_message}
</section>
%endif
</div>
% if duplicate_provider: <section class="container dashboard" id="dashboard-main">
<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="profile-sidebar"> <section class="profile-sidebar">
<header class="profile"> <header class="profile">
......
<%! from django.utils.translation import ugettext as _ %> <%! from django.utils.translation import ugettext as _ %>
<%! from django.core.urlresolvers import reverse %> <%! from django.core.urlresolvers import reverse %>
% if reverifications["must_reverify"]: % if reverifications["must_reverify"]:
% if len(reverifications["must_reverify"]) > 1: % if len(reverifications["must_reverify"]) > 1:
...@@ -32,7 +31,6 @@ ...@@ -32,7 +31,6 @@
</nav> </nav>
</div> </div>
</div> </div>
</div>
% elif reverifications["must_reverify"]: % elif reverifications["must_reverify"]:
<div class="wrapper-msg urgency-high"> <div class="wrapper-msg urgency-high">
...@@ -57,13 +55,12 @@ ...@@ -57,13 +55,12 @@
</nav> </nav>
</div> </div>
</div> </div>
</div>
% endfor % endfor
%endif %endif
%endif %endif
%if reverifications["denied"] and denied_banner: %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 msg-reverify is-dismissable">
<div class="msg-content"> <div class="msg-content">
<h2 class="title">${_("Your re-verification failed")}</h2> <h2 class="title">${_("Your re-verification failed")}</h2>
...@@ -79,13 +76,12 @@ ...@@ -79,13 +76,12 @@
)} )}
</p> </p>
</div> </div>
% endif
% endfor
</div> </div>
<div class="action-dismiss"> <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> <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>
</div> </div>
</div>
% endif
% endfor
%endif %endif
<%! 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>
<%! from django.utils.translation import ugettext as _ %> <%! from django.utils.translation import ugettext as _ %>
% for course, enrollment in recent_course_enrollment_pairs: % for course, enrollment in recent_course_enrollment_pairs:
<section class="dashboard-banner"> <div class="wrapper-msg urgency-high">
<p class='activation-message'>${_("You have successfully enrolled in {enrolled_course}.").format(enrolled_course=course.display_name)}</p> <div class="msg">
</section> <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 % endfor
<%! from django.utils.translation import ugettext as _ %> <%! from django.utils.translation import ugettext as _ %>
<h2>${_("Thanks For Registering!")}</h2> <div class="wrapper-msg urgency-high">
<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="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