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

Adding new styles for dashboard notifications.

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

@@ -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

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>

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

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>