Skip to content

E
edx-platform
Commit fd397964 by Peter Fogg
Options

Styling and template changes for the Course Home page. 

ECOM-2810
parent 1cd5086b
Showing with 172 additions and 147 deletions
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.
......
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