Styling and template changes for the Course Home page.

ECOM-2810

lms/djangoapps/courseware/date_summary.py

@@ -186,7 +186,10 @@ class VerifiedUpgradeDeadlineDate(DateSummary):
     """
     css_class = 'verified-upgrade-deadline'
     title = _('Verification Upgrade Deadline')
-    description = _('You are still eligible to upgrade to a Verified Certificate!')
+    description = _(
+        'You are still eligible to upgrade to a Verified Certificate! '
+        'Pursue it to highlight the knowledge and skills you gain in this course.'
+    )
     link_text = _('Upgrade to Verified Certificate')
 
     @property

lms/djangoapps/survey/tests/test_views.py

@@ -11,6 +11,7 @@ from django.core.urlresolvers import reverse
 
 from survey.models import SurveyForm, SurveyAnswer
 
+from student.tests.factories import UserFactory
 from xmodule.modulestore.tests.factories import CourseFactory
 from xmodule.modulestore.tests.django_utils import ModuleStoreTestCase
 
@@ -29,7 +30,7 @@ class SurveyViewsTests(ModuleStoreTestCase):
 
         # Create two accounts
         self.password = 'abc'
-        self.student = User.objects.create_user('student', 'student@test.com', self.password)
+        self.student = UserFactory.create(username='student', email='student@test.com', password=self.password)
 
         self.test_survey_name = 'TestSurvey'
         self.test_form = '''

lms/static/sass/_developer.scss

@@ -231,40 +231,41 @@
 .date-summary-container {
   .date-summary {
     @include clearfix;
-    margin-top: $baseline/2;
-    margin-bottom: $baseline/2;
     padding: 10px;
-    background-color: $gray-l4;
     @include border-left(3px solid $gray-l3);
 
+    .heading {
+      @extend %t-title7;
+      color: $gray-d2;
+    }
+
     .description {
       margin-top: $baseline/2;
       margin-bottom: $baseline/2;
       display: inline-block;
-      color: $lighter-base-font-color;
-      font-size: 80%;
+      color: $gray-d1;
+      @extend %t-title8;
     }
 
     .date-summary-link {
-      @include float(right);
-      font-size: 80%;
+      @extend %t-title8;
       font-weight: $font-semibold;
       a {
-        color: $base-font-color;
+        color: $link-color;
+        font-weight: normal;
       }
     }
 
     .date {
-      color: $lighter-base-font-color;
-      font-size: 80%;
+      color: $gray-d1;
+      @extend %t-title9;
     }
 
     &-todays-date {
       @include border-left(3px solid $blue);
 
       .heading {
-        font-weight: $font-regular;
-        font-size: 80%;
+        @extend %t-title8;
       }
     }
 

lms/static/sass/base/_layouts.scss

@@ -32,9 +32,16 @@ body.view-in-course {
   .wrapper-course-material .course-material,
   .wrapper-preview-menu .preview-menu  {
     width: auto;
+  }
+
+  .wrapper-preview-menu .preview-menu {
     padding: 15px 2%;
   }
 
+  .wrapper-course-material .course-material {
+    padding: ($baseline/2) 0 0 0;
+  }
+
   .wrapper-course-material .course-material .course-tabs {
     padding: 0;
   }

lms/static/sass/base/_variables.scss

@@ -514,7 +514,7 @@ $light-gray: rgb(221, 221, 221) !default;
 $dark-gray: rgb(51, 51, 51) !default;
 $border-color: rgb(200, 200, 200) !default;
 $sidebar-color: rgb(246, 246, 246) !default;
-$outer-border-color: rgb(170, 170, 170);
+$outer-border-color: $gray-l3;
 $light-gray: rgb(221,221,221) !default;
 
 // used by descriptor css

lms/static/sass/course/_info.scss

+.home-wrapper {
+  max-width: 1180px;
+  margin: 0 auto;
+
+  .home {
+    margin: $baseline;
+
+    .page-title {
+      margin-bottom: 5px;
+      color: $dark-gray1;
+      font-size: 24px;
+    }
+
+    .page-subtitle {
+      color: $dark-gray2;
+      font-size: 14px;
+      text-transform: none;
+    }
+  }
+}
+
 div.info-wrapper {
 
+  background-color: rgb(252, 252, 252);
+
   section.updates {
     @extend .content;
+    @include padding-left($baseline);
     line-height: lh();
 
-    > h1 {
-      @extend .top-header;
+    h1 {
+      @include text-align(left);
+      @extend %t-strong;
+      @extend %t-title6;
+      margin-bottom: $baseline;
+      font-style: normal;
     }
 
     > p {
@@ -19,10 +47,10 @@ div.info-wrapper {
 
       > li,article {
         @extend .clearfix;
-        border-bottom: 1px solid lighten($border-color, 10%);
+        padding: $baseline;
         list-style-type: none;
         margin-bottom: lh(1.5);
-        padding-bottom: lh(.75);
+        background-color: $white;
 
         ol, ul {
           ol,ul {
@@ -31,8 +59,9 @@ div.info-wrapper {
         }
 
         h2 {
-          font-size: $body-font-size;
-          font-weight: bold;
+          @extend %t-title9;
+          margin-bottom: ($baseline/4);
+          text-transform: none;
           background: url('#{$static-path}/images/calendar-icon.png') 0 center no-repeat;
           padding-left: $baseline;
         }
@@ -81,8 +110,7 @@ div.info-wrapper {
     padding: 20px 30px;
     margin: 0;
     @extend .sidebar;
-    border-radius: 0 4px 4px 0;
-    @include border-left(1px solid #ddd);
+    background: rgba(0, 0, 0, 0);
     box-shadow: none;
     font-size: 14px;
 
@@ -97,15 +125,14 @@ div.info-wrapper {
 
     h1 {
       @include text-align(left);
+      @extend %t-strong;
+      @extend %t-title6;
       margin-bottom: 0;
       padding: 12px 26px 20px 0;
-      font-size: 18px;
       font-style: normal;
-      font-weight: bold;
     }
 
     ul {
-      background-color: #f6f6f6;
       margin-bottom: 14px;
     }
 
@@ -119,7 +146,8 @@ div.info-wrapper {
           padding: 0;
           color: $link-color;
 
-          &:hover, &:focus {
+          &:hover,
+          &:focus {
             background: transparent;
           }
         }
@@ -154,7 +182,8 @@ div.info-wrapper {
             display: inline-block;
             padding: 0;
 
-            &:hover, &:focus {
+            &:hover,
+            &:focus {
               background: transparent;
             }
           }
@@ -175,7 +204,8 @@ div.info-wrapper {
               display: inline-block;
               padding: 0;
 
-              &:hover, &:focus {
+              &:hover,
+              &:focus {
                 background: transparent;
               }
             }
@@ -191,7 +221,8 @@ div.info-wrapper {
           position: absolute;
           width: 100%;
 
-          &:hover, &:focus {
+          &:hover,
+          &:focus {
             opacity: 0.6;
             filter: alpha(opacity=60);
 

lms/static/sass/course/base/_base.scss

@@ -24,8 +24,7 @@
     display: table;
     table-layout: fixed;
     width: 100%;
-    border-radius: 3px;
-    border: 1px solid $outer-border-color;
+    border: 1px solid $border-color-2;
     background: $container-bg;
     box-shadow: 0 1px 2px $shadow-l2;
   }

lms/static/sass/course/layout/_courseware_header.scss

@@ -15,48 +15,50 @@
   ol.course-tabs {
     @include border-top-radius(4px);
     @include clearfix();
-    @include margin-left(10px);
     padding: ($baseline*0.75) 0 ($baseline*0.75) 0;
 
     li {
       @include float(left);
       list-style: none;
-      margin-right: 6px;
 
       &.prominent {
         margin-right: 16px;
-        background: rgba(255, 255, 255, .5);
+        @include margin-right(16px);
+        background: rgba(255, 255, 255, 0.5);
         border-radius: 3px;
       }
 
       &.prominent + li {
-          padding-left: ($baseline*0.75);
-          border-left: 1px solid #333;
+        @include padding-left($baseline*0.75);
+        @include border-left(1px solid $gray-d3);
       }
 
       a {
-        border-radius: 3px;
-        color: #555;
+        @include padding(($baseline/2), ($baseline*0.75), 13px, ($baseline*0.75));
+        @extend %t-title7;
+        @extend %t-strong;
+        border-bottom: 3px solid transparent;
+        color: $gray-d1;
         display: block;
         text-align: center;
-        padding: ($baseline/2) 13px 12px;
-        font-size: 14px;
-        font-weight: bold;
         text-decoration: none;
         // text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
 
-        &:hover, &:focus {
-          color: #333;
-          background: rgba(255, 255, 255, .6);
+        &:hover,
+        &:focus {
+          color: $blue;
+          border-bottom: 3px solid $blue;
         }
 
         &.active {
-          // background: $shadow;
-          @include linear-gradient(top, rgba(0, 0, 0, .4), rgba(0, 0, 0, .25));
+          border-bottom: 3px solid $gray-d4;
           background-color: transparent;
-          box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 1px 1px rgba(0, 0, 0, .3) inset;
-          color: $white;
-          text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
+          color: $gray-d4;
+
+          &:hover,
+          &:focus {
+            color: $gray-d4;
+          }
         }
       }
     }
@@ -87,7 +89,7 @@ header.global.slim {
   }
 
   .guest .secondary {
-    margin-right: 0;
+    @include margin-right(0);
   }
 
   .guest .secondary a {

lms/static/sass/shared/_header.scss

@@ -115,8 +115,8 @@ header.global {
   .user {
     @include float(right);
     @extend %ui-print-excluded;
-    margin-top: ($baseline/4);
     padding-left: 0;
+    margin: 0;
 
     .settings-language-form {
       margin-top: 4px;
@@ -135,7 +135,7 @@ header.global {
 
       &:last-child {
         > a {
-          padding: ($baseline/5) ($baseline/2);
+          padding: ($baseline/2);
 
           &.shopping-cart {
             border-radius: 4px;
@@ -147,14 +147,19 @@ header.global {
       }
     }
 
-    a.user-link {
-      @include padding(5px, 2px, 10px, 10px);
+    .user-link {
+      padding: 0;
       position: relative;
       text-transform: none;
       font-size: 14px;
       font-weight: bold;
       letter-spacing: 0;
 
+      .user-image-frame {
+        max-width: ($baseline*2);
+        border-radius: 10%;
+      }
+
       .icon {
         display: inline-block;
         @include float(left);
@@ -163,35 +168,9 @@ header.global {
         color: $m-gray;
       }
 
-      .avatar {
-
-        // CASE: right to left layout
-
-        display: inline-block;
-        @include left(8px);
-        opacity: 0.5;
-        overflow: hidden;
-        top: 4px;
-        margin-top: 1px;
-        margin-right: 2px;
-        @include transition(all 0.15s linear 0s);
-        width: 19px;
-      }
-      div {
-        margin-top: 3px;
-        float: right;
-        margin-left: 4px;
-      }
-      div {
-        margin-top: 3px;
-        float: right;
-        margin-left: 4px;
-      }
-
-      &:hover, &:focus {
-        .avatar {
-          opacity: 0.8;
-        }
+      .label-username {
+        @include float(right);
+        @include margin(($baseline*0.75), ($baseline/4), ($baseline*0.75), ($baseline*0.75));
       }
     }
 
@@ -471,7 +450,6 @@ header.global-new {
 
   .user {
     @include float(right);
-    margin-top: 4px;
 
     > .primary {
       display: block;
@@ -489,7 +467,7 @@ header.global-new {
         > a {
           @include border-radius(0, 4px, 4px, 0);
           @include border-left(none);
-          padding: ($baseline/5) ($baseline/2);
+          padding: ($baseline/2) ($baseline/2);
 
           &.shopping-cart {
             border-radius: 4px;
@@ -500,14 +478,19 @@ header.global-new {
         }
       }
     }
-    a.user-link {
-      @include padding(5px, 2px, 10px, 10px);
+    .user-link {
+      padding: 0;
       position: relative;
       text-transform: none;
       font-size: 14px;
       font-weight: bold;
       letter-spacing: 0;
 
+      .user-image-frame {
+        max-width: ($baseline/2);
+        border-radius: 10%;
+      }
+
       .icon {
         display: inline-block;
         @include float(left);
@@ -516,35 +499,9 @@ header.global-new {
         color: $m-gray;
       }
 
-      .avatar {
-
-        // CASE: right to left layout
-
-        display: inline-block;
-        @include left(8px);
-        opacity: 0.5;
-        overflow: hidden;
-        top: 4px;
-        margin-top: 1px;
-        margin-right: 2px;
-        @include transition(all 0.15s linear 0s);
-        width: 19px;
-      }
-      div {
-        margin-top: 3px;
-        float: right;
-        margin-left: 4px;
-      }
-      div {
-        margin-top: 3px;
-        float: right;
-        margin-left: 4px;
-      }
-
-      &:hover, &:focus {
-        .avatar {
-          opacity: 0.8;
-        }
+      .label-username {
+        @include float(right);
+        @include margin(($baseline*0.75), ($baseline/4), ($baseline*0.75), ($baseline*0.75));
       }
     }
 

lms/templates/courseware/date_summary.html

@@ -11,7 +11,7 @@
         % endif
         % if link and link_text:
           <span class="date-summary-link">
-              <a href="${link}">${link_text} <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
+              <a href="${link}">${link_text}</a>
           </span>
         % endif
     </div>

lms/templates/courseware/info.html

@@ -14,50 +14,55 @@ from openedx.core.djangoapps.self_paced.models import SelfPacedConfiguration
 <%static:css group='style-course'/>
 </%block>
 
-
 % if show_enroll_banner:
-  <div class="wrapper-msg urgency-low" id="failed-verification-banner">
-    <div class="msg msg-reverify is-dismissable">
-      <div class="msg-content">
-        <h2 class="title">${_("You are not enrolled yet")}</h2>
-        <div class="copy">
-          <p class='enroll-message'>
-            ${_(u"You are not currently enrolled in this course. {link_start}Sign up now!{link_end}").format(
-            link_start=u"<a href={}>".format(url_to_enroll),
-            link_end=u"</a>"
-            )}
-          </p>
-        </div>
+<div class="wrapper-msg urgency-low" id="failed-verification-banner">
+  <div class="msg msg-reverify is-dismissable">
+    <div class="msg-content">
+      <h2 class="title">${_("You are not enrolled yet")}</h2>
+      <div class="copy">
+        <p class='enroll-message'>
+          ${_(u"You are not currently enrolled in this course. {link_start}Sign up now!{link_end}").format(
+          link_start=u"<a href={}>".format(url_to_enroll),
+          link_end=u"</a>"
+          )}
+        </p>
       </div>
     </div>
   </div>
+</div>
 % endif
 
 <%include file="/courseware/course_navigation.html" args="active_page='info'" />
 
 <%block name="js_extra">
-  <script type="text/javascript" src="${static.url('js/jquery.treeview.js')}"></script>
-  <script type="text/javascript" charset="utf-8">
-$(document).ready(function(){
-    $(".handouts").treeview({collapsed:true, unique:true/*, cookieId: "treeview-book-nav", persist: "cookie"*/});
-    });
-  </script>
+<script type="text/javascript" src="${static.url('js/jquery.treeview.js')}"></script>
+<script type="text/javascript" charset="utf-8">
+ $(document).ready(function(){
+     $(".handouts").treeview({collapsed:true, unique:true/*, cookieId: "treeview-book-nav", persist: "cookie"*/});
+ });
+</script>
 </%block>
 
 <%block name="bodyclass">view-in-course view-course-info ${course.css_class or ''}</%block>
 <section class="container">
+  <div class="home-wrapper">
+    <section class="home">
+        <h1 class="page-title">${_("Welcome to {org}'s {course_name}!").format(org=course.id.org, course_name=course.id.course) | h}</h1>
+        <h2 class="page-subtitle">${course.display_name | h}</h2>
+    </section>
+  </div>
   <div class="info-wrapper">
     % if user.is_authenticated():
     <section class="updates">
       % if studio_url is not None and masquerade and masquerade.role == 'staff':
-        <div class="wrap-instructor-info studio-view">
-          <a class="instructor-info-action" href="${studio_url}">
-            ${_("View Updates in Studio")}
-          </a>
-        </div>
+      <div class="wrap-instructor-info studio-view">
+        <a class="instructor-info-action" href="${studio_url}">
+          ${_("View Updates in Studio")}
+        </a>
+      </div>
       % endif
 
-      <h1>${_("Course Updates &amp; News")}</h1>
+      <h1>${_("Course Updates and News")}</h1>
       ${get_course_info_section(request, masquerade_user, course, 'updates')}
     </section>
     <section aria-label="${_('Handout Navigation')}" class="handouts">

lms/templates/navigation-edx.html

@@ -5,6 +5,9 @@
 from django.core.urlresolvers import reverse
 from django.utils.translation import ugettext as _
 
+from microsite_configuration.templatetags.microsite import platform_name
+from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_image_urls_for_user
+
 # App that handles subdomain specific branding
 from branding import api as branding_api
 # app that handles site status messages
@@ -76,7 +79,12 @@ site_status_msg = get_site_status_msg(course_id)
       <li class="primary">
         <a href="${reverse('dashboard')}" class="user-link">
           <span class="sr">${_("Dashboard for:")}</span>
-          <div>${user.username}</div>
+          <%
+          username = user.username
+          profile_image_url = get_profile_image_urls_for_user(user)['medium']
+          %>
+          <img class="user-image-frame" src="${profile_image_url}" alt="${_('Profile image for {username}').format(username=username)}">
+          <div class="label-username">${username}</div>
         </a>
       </li>
       <li class="primary">

lms/templates/navigation.html

@@ -6,6 +6,9 @@ from django.core.urlresolvers import reverse
 from django.utils.translation import ugettext as _
 
 from lms.djangoapps.ccx.overrides import get_current_ccx
+from microsite_configuration import microsite
+from microsite_configuration.templatetags.microsite import platform_name
+from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_image_urls_for_user
 
 # App that handles subdomain specific branding
 from branding import api as branding_api
@@ -101,9 +104,12 @@ site_status_msg = get_site_status_msg(course_id)
       <li class="primary">
         <a href="${reverse('dashboard')}" class="user-link">
           <span class="sr">${_("Dashboard for:")}</span>
-          <div>
-          ${user.username}
-          </div>
+          <%
+          username = user.username
+          profile_image_url = get_profile_image_urls_for_user(user)['medium']
+          %>
+          <img class="user-image-frame" src="${profile_image_url}" alt="${_('Profile image for {username}').format(username=username)}">
+          <div class="label-username">${username}</div>
         </a>
       </li>
       <li class="primary">

openedx/core/djangoapps/user_api/accounts/tests/test_views.py

@@ -538,6 +538,11 @@ class TestAccountAPI(UserAPITestCase):
         verify_change_info(name_change_info[0], old_name, self.user.username, "Donald Duck",)
         verify_change_info(name_change_info[1], "Mickey Mouse", self.user.username, "Donald Duck")
 
+    @patch.dict(
+        'openedx.core.djangoapps.user_api.accounts.image_helpers.PROFILE_IMAGE_SIZES_MAP',
+        {'full': 50, 'medium': 30, 'small': 10},
+        clear=True
+    )
     def test_patch_email(self):
         """
         Test that the user can request an email change through the accounts API.