From fd397964b39b67ca6125629cbe7c7062acf54c8c Mon Sep 17 00:00:00 2001 From: Peter Fogg Date: Mon, 9 Nov 2015 17:15:11 -0500 Subject: [PATCH] Styling and template changes for the Course Home page. ECOM-2810 --- lms/djangoapps/courseware/date_summary.py | 5 +- lms/djangoapps/survey/tests/test_views.py | 3 +- lms/static/sass/_developer.scss | 25 +++--- lms/static/sass/base/_layouts.scss | 7 ++ lms/static/sass/base/_variables.scss | 2 +- lms/static/sass/course/_info.scss | 61 +++++++++---- lms/static/sass/course/base/_base.scss | 3 +- .../course/layout/_courseware_header.scss | 40 +++++---- lms/static/sass/shared/_header.scss | 89 +++++-------------- lms/templates/courseware/date_summary.html | 2 +- lms/templates/courseware/info.html | 55 ++++++------ lms/templates/navigation-edx.html | 10 ++- lms/templates/navigation.html | 12 ++- .../user_api/accounts/tests/test_views.py | 5 ++ 14 files changed, 172 insertions(+), 147 deletions(-) diff --git a/lms/djangoapps/courseware/date_summary.py b/lms/djangoapps/courseware/date_summary.py index 20a9a2fca7..59448608cf 100644 --- a/lms/djangoapps/courseware/date_summary.py +++ b/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 diff --git a/lms/djangoapps/survey/tests/test_views.py b/lms/djangoapps/survey/tests/test_views.py index 66f4c3f0c7..ebd16373ff 100644 --- a/lms/djangoapps/survey/tests/test_views.py +++ b/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 = ''' diff --git a/lms/static/sass/_developer.scss b/lms/static/sass/_developer.scss index d1d8102dca..5570d4a40b 100644 --- a/lms/static/sass/_developer.scss +++ b/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; } } diff --git a/lms/static/sass/base/_layouts.scss b/lms/static/sass/base/_layouts.scss index 01afb7624d..128f14f526 100644 --- a/lms/static/sass/base/_layouts.scss +++ b/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; } diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index f72403bd37..c7211d9b86 100644 --- a/lms/static/sass/base/_variables.scss +++ b/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 diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss index 0bbca1d757..8ccef38430 100644 --- a/lms/static/sass/course/_info.scss +++ b/lms/static/sass/course/_info.scss @@ -1,11 +1,39 @@ +.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); diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index 7aba39d2b6..775a77995a 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/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; } diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index 4b01542e8c..b88275cbbc 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/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 { diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index fd5bc1f996..d1dc31e846 100644 --- a/lms/static/sass/shared/_header.scss +++ b/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)); } } diff --git a/lms/templates/courseware/date_summary.html b/lms/templates/courseware/date_summary.html index 5fec70a850..754b78612d 100644 --- a/lms/templates/courseware/date_summary.html +++ b/lms/templates/courseware/date_summary.html @@ -11,7 +11,7 @@ % endif % if link and link_text: - ${link_text} + ${link_text} % endif diff --git a/lms/templates/courseware/info.html b/lms/templates/courseware/info.html index 71eedeb4f5..8cdf6b47be 100644 --- a/lms/templates/courseware/info.html +++ b/lms/templates/courseware/info.html @@ -14,50 +14,55 @@ from openedx.core.djangoapps.self_paced.models import SelfPacedConfiguration <%static:css group='style-course'/> - % if show_enroll_banner: -
-
-
-

${_("You are not enrolled yet")}

-
-

- ${_(u"You are not currently enrolled in this course. {link_start}Sign up now!{link_end}").format( - link_start=u"".format(url_to_enroll), - link_end=u"" - )} -

-
+
+
+
+

${_("You are not enrolled yet")}

+
+

+ ${_(u"You are not currently enrolled in this course. {link_start}Sign up now!{link_end}").format( + link_start=u"".format(url_to_enroll), + link_end=u"" + )} +

+
% endif <%include file="/courseware/course_navigation.html" args="active_page='info'" /> <%block name="js_extra"> - - + + <%block name="bodyclass">view-in-course view-course-info ${course.css_class or ''}
+
+
+

${_("Welcome to {org}'s {course_name}!").format(org=course.id.org, course_name=course.id.course) | h}

+

${course.display_name | h}

+
+
% if user.is_authenticated():
% if studio_url is not None and masquerade and masquerade.role == 'staff': -
- - ${_("View Updates in Studio")} - -
+
+ + ${_("View Updates in Studio")} + +
% endif -

${_("Course Updates & News")}

+

${_("Course Updates and News")}

${get_course_info_section(request, masquerade_user, course, 'updates')}
diff --git a/lms/templates/navigation-edx.html b/lms/templates/navigation-edx.html index 0e005d0d1d..320dbbc953 100644 --- a/lms/templates/navigation-edx.html +++ b/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)
  • ${_("Dashboard for:")} -
    ${user.username}
    + <% + username = user.username + profile_image_url = get_profile_image_urls_for_user(user)['medium'] + %> + ${_('Profile image for {username}').format(username=username)} +
    ${username}
  • diff --git a/lms/templates/navigation.html b/lms/templates/navigation.html index 75f7b1f612..962153e5d1 100644 --- a/lms/templates/navigation.html +++ b/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)
  • ${_("Dashboard for:")} -
    - ${user.username} -
    + <% + username = user.username + profile_image_url = get_profile_image_urls_for_user(user)['medium'] + %> + ${_('Profile image for {username}').format(username=username)} +
    ${username}
  • diff --git a/openedx/core/djangoapps/user_api/accounts/tests/test_views.py b/openedx/core/djangoapps/user_api/accounts/tests/test_views.py index 2ce732e056..e525c14743 100644 --- a/openedx/core/djangoapps/user_api/accounts/tests/test_views.py +++ b/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.