Skip to content

E
edx-platform
Commit 49320073 by Marco Morales
Options

Merge pull request #8296 from edx/marco/find-courses-page/styling-changes 

Styling improvements to openedX search through Find Courses page
parents d57fd0e4 51e47cf9
Showing with 95 additions and 81 deletions
common/djangoapps/student/views.py
......@@ -1085,9 +1085,9 @@ def login_user(request, error=""): # pylint: disable=too-many-statements,unused
platform_name=settings.PLATFORM_NAME, provider_name=requested_provider.name
)
+ "<br/><br/>" +
_("If you don't have an {platform_name} account yet, click <strong>Register Now</strong> at the top of the page.").format(
platform_name=settings.PLATFORM_NAME
),
_("If you don't have an {platform_name} account yet, "
"click <strong>Register</strong> at the top of the page.").format(
platform_name=settings.PLATFORM_NAME),
content_type="text/plain",
status=403
)
......
common/djangoapps/terrain/steps.py
......@@ -65,7 +65,7 @@ def i_should_be_on_the_dashboard(step):
@step(u'I (?:visit|access|open) the courses page$')
def i_am_on_the_courses_page(step):
world.visit('/courses')
assert world.is_css_present('section.courses')
assert world.is_css_present('div.courses')
@step(u'I press the "([^"]*)" button$')
......
lms/djangoapps/branding/tests/test_page.py
......@@ -220,7 +220,7 @@ class IndexPageCourseCardsSortingTests(ModuleStoreTestCase):
self.assertNotIn('<aside aria-label="Refine your search" class="search-facets phone-menu">', response.content)
# make sure we have the special css class on the section
self.assertIn('<section class="courses no-course-discovery">', response.content)
self.assertIn('<div class="courses no-course-discovery"', response.content)
@patch('student.views.render_to_response', RENDER_MOCK)
@patch('courseware.views.render_to_response', RENDER_MOCK)
......@@ -239,10 +239,10 @@ class IndexPageCourseCardsSortingTests(ModuleStoreTestCase):
response = self.client.get(reverse('branding.views.courses'))
self.assertEqual(response.status_code, 200)
# assert that the course discovery UI is not present
# assert that the course discovery UI is present
self.assertIn('Search for a course', response.content)
self.assertIn('<aside aria-label="Refine your search" class="search-facets phone-menu">', response.content)
self.assertIn('<section class="courses">', response.content)
self.assertIn('<div class="courses"', response.content)
@patch('student.views.render_to_response', RENDER_MOCK)
@patch('courseware.views.render_to_response', RENDER_MOCK)
......
lms/djangoapps/courseware/features/homepage.feature
......@@ -8,9 +8,9 @@ Feature: LMS.Homepage for web users
Given I visit the homepage
Then I should see a link called "Sign in"
Scenario: User can see the "Register Now" button
Scenario: User can see the "Register" button
Given I visit the homepage
Then I should see a link called "Register Now"
Then I should see a link called "Register"
Scenario Outline: User can see main parts of the page
Given I visit the homepage
......
lms/static/js/discovery/app.js
......@@ -37,6 +37,7 @@ define(['backbone', 'course_discovery_meanings'], function(Backbone, meanings) {
dispatcher.listenTo(collection, 'search', function () {
if (collection.length > 0) {
form.showFoundMessage(collection.totalCount);
results.render();
}
else {
......
lms/static/js/discovery/form.js
......@@ -47,6 +47,15 @@ define(['jquery', 'backbone'], function ($, Backbone) {
this.$loadingIndicator.addClass('hidden');
},
showFoundMessage: function (count) {
var msg = ngettext(
'Viewing %s course',
'Viewing %s courses',
count
);
this.$message.html(interpolate(msg, [count]));
},
showNotFoundMessage: function (term) {
var msg = interpolate(
gettext('We couldn\'t find any results for "%s".'),
......
lms/static/js/discovery/result_list_view.js
......@@ -11,7 +11,7 @@ define([
return Backbone.View.extend({
el: 'section.courses',
el: 'div.courses',
$window: $(window),
$document: $(document),
......
lms/static/js/fixtures/discovery.html
<section class="courses-container">
<div id="discovery-form">
<form>
<div id="discovery-form" class="wrapper-search-context">
<div id="discovery-message" class="search-status-label"></div>
<form class="wrapper-search-input">
<input class="discovery-input" placeholder="Search for a course" type="text"/><!-- removes spacing
--><button type="submit" class="button postfix discovery-submit" aria-label="Search">
<i class="icon fa fa-search" aria-hidden="true"></i>
<div aria-live="polite" aria-relevant="all">
<div id="loading-indicator" class="loading-spinner hidden">
<i class="icon fa fa-spinner fa-spin" aria-hidden="true"></i>
<span class="sr">Loading</span>
</div>
</div>
</button>
</form>
<div id="discovery-message"></div>
<div aria-live="polite" aria-relevant="all">
<div id="loading-indicator" class="hidden">
<i class="icon fa fa-spinner fa-spin"></i> Loading
</div>
<div id="filter-bar" class="filters hide-phone">
</div>
</div>
<div id="filter-bar" class="filters hide-phone">
</div>
<div class="courses" role="region" aria-label="${_('List of Courses')}">
<ul class="courses-listing"></ul>
</div>
<section class="courses">
<ul class="courses-listing"></ul>
</section>
<aside aria-label="Refine your search" class="search-facets phone-menu">
</aside>
<aside aria-label="Refine your search" class="search-facets phone-menu">
</aside>
</section>
</section>
lms/static/js/spec/discovery/discovery_spec.js
......@@ -238,7 +238,7 @@ define([
var data = this.item.model.attributes;
this.item.render();
expect(this.item.$el).toContainHtml(data.content.display_name);
expect(this.item.$el).toContain('a[href="/courses/' + data.course + '/info"]');
expect(this.item.$el).toContain('a[href="/courses/' + data.course + '/about"]');
expect(this.item.$el).toContain('img[src="' + data.image_url + '"]');
expect(this.item.$el.find('.course-name')).toContainHtml(data.org);
expect(this.item.$el.find('.course-name')).toContainHtml(data.content.number);
......
lms/static/sass/_build-lms.scss
......@@ -70,7 +70,7 @@
@import 'discussion/utilities/shame';
// search
@import 'search/_search';
@import 'search/search';
// news
@import 'news';
......
lms/static/sass/base/_base.scss
......@@ -121,7 +121,6 @@ a:focus {
width: flex-grid(12);
margin: 0 auto;
background: $content-wrapper-bg;
padding-bottom: ($baseline*2);
@media print {
padding-bottom: 0;
......
lms/static/sass/base/_variables.scss
......@@ -82,6 +82,7 @@ $gray-d2: shade($gray,40%); // #4c4c4c
$gray-d3: shade($gray,60%); // #323232
$gray-d4: shade($gray,80%); // #191919
$pink: rgb(182,37,103); // #b72567;
$pink-l1: tint($pink,20%);
$pink-l2: tint($pink,40%);
......@@ -133,16 +134,23 @@ $green-u1: desaturate($green,15%);
$green-u2: desaturate($green,30%);
$green-u3: desaturate($green,45%);
// ====================
// COLORS: social platforms
$twitter-blue: #55ACEE;
$facebook-blue: #3B5998;
$linkedin-blue: #0077B5;
// ====================
// TODO: both blue and yellow variables differ from CMS rgb value, need to confirm change to CMS variable is ok in current platform uses before switching.
$blue: rgb(0, 120, 176);
$yellow: rgb(255, 252, 221);
// ====================
// COLORS: old variables
// DEPRECATED: use colors in lists above
$error-red: rgb(253, 87, 87);
$danger-red: rgb(212, 64, 64);
$light-gray: rgb(221, 221, 221);
......@@ -152,7 +160,10 @@ $sidebar-color: rgb(246, 246, 246);
$outer-border-color: rgb(170, 170, 170);
$light-gray: rgb(221,221,221); // #dddddd
// ====================
// used by descriptor css
// DEPRECATED: use colors in lists above
$lightGrey: rgb(237,241,245); // #edf1f5
$darkGrey: rgb(136,145,161); // #8891a1
$lightGrey1: $gray-l3;
......@@ -160,6 +171,8 @@ $blue-d1: shade($blue,20%);
$blue-d2: shade($blue,40%);
$blue-d4: shade($blue,80%);
// ====================
// edx.org marketing site variables
$m-gray: rgb(138,140,143); // #8A8C8F
$m-gray-l1: rgb(151,153,155); // #97999B
......
lms/static/sass/multicourse/_dashboard.scss
......@@ -13,7 +13,7 @@
// ====================
.dashboard {
@include clearfix();
padding: ($baseline*2) 0 0 0;
padding: ($baseline*2) 0 $baseline 0;
.profile-sidebar {
background: transparent;
......
lms/static/sass/multicourse/_home.scss
@import '../base/grid-settings';
@import 'neat/neat'; // lib - Neat
$title-left-margin: grid-width(2) + $gw-gutter;
$title-left-margin: grid-width(3);
$button-size: ($baseline*2.75);
$course-search-input-height: ($button-size);
......@@ -15,14 +15,11 @@ $course-search-input-height: ($button-size);
> header {
@include linear-gradient($homepage__header--gradient__color--alpha, $homepage__header--gradient__color--bravo);
@include clearfix();
background-size: cover;
background-image: $homepage-bg-image;
border-bottom: 1px solid $border-color-3;
box-shadow: 0 1px 0 0 $course-header-bg, inset 0 -1px 5px 0 $shadow-l1;
@include clearfix();
height: 460px;
overflow: hidden;
margin-top: $header_image_margin;
padding: 0;
width: flex-grid(12);
......@@ -30,8 +27,8 @@ $course-search-input-height: ($button-size);
@include clearfix();
@extend .animation-home-header-pop-up;
position: relative;
margin: 0 auto ($baseline);
padding: ($baseline*5) ($baseline/2);
margin: 0 auto;
padding: ($baseline*3);
max-width: ($baseline*60);
}
......@@ -41,8 +38,7 @@ $course-search-input-height: ($button-size);
@include box-sizing(border-box);
@include transition(all 0.2s linear 0s);
position: relative;
border: 1px solid $border-color-3;
box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.5);
background: $white;
padding: ($baseline) ($baseline*1.5);
min-height: ($baseline*6);
......@@ -105,15 +101,15 @@ $course-search-input-height: ($button-size);
@include padding-right($button-size);
@include padding-left($baseline*0.5);
@extend %ui-depth1;
@extend %t-icon4;
@extend %t-demi-strong;
@extend %t-title5;
border: 2px solid $gray-l3;
border-radius: 3px;
box-shadow: none;
width: 100%;
height: $course-search-input-height;
color: $black;
font-style: $sans-serif;
font-style: normal;
font-weight: normal;
// STATE: focus
&:focus {
......
lms/static/sass/search/_search.scss
......@@ -123,7 +123,6 @@
}
.courseware-search-bar {
box-shadow: 0 1px 0 $white inset, 0 -1px 0 $shadow-l1 inset;
}
......
lms/static/sass/shared/_course_object.scss
......@@ -226,7 +226,7 @@
&:hover, &:focus {
background: $course-profile-bg;
border-color: $border-color-1;
box-shadow: 0 1px 16px 0 rgba($shadow-color, 0.4);
box-shadow: 0 1px 4px 0 rgba($shadow-color, 0.4);
.info {
top: -150px;
......
lms/static/sass/shared/_header.scss
......@@ -3,7 +3,7 @@
header.global {
@extend %ui-depth1;
border-bottom: 1px solid $m-gray;
border-bottom: 1px solid $gray-l1;
box-shadow: 0 1px 5px 0 $shadow-l1;
background: $header-bg;
position: relative;
......@@ -288,7 +288,7 @@ header.global {
a {
display:block;
padding: ($baseline/4);
color: $lighter-base-font-color;
color: $link-color;
font-weight: 600;
&:hover, &:focus, &:active {
......
lms/static/sass/views/_homepage.scss
// lms - views - homepage view
// ====================
// TO-DO: combine this with _home.scss as a cleanup story
$learn-more-horizontal-position: calc(50% - 100px); // calculate the left position for "LEARN MORE" content
.courses-container {
@include outer-container;
padding: ($baseline*0.9) ($baseline/2) 0 ($baseline/2);
.courses {
@include row();
......@@ -16,7 +16,7 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi
@extend %ui-no-list;
.courses-listing-item {
margin: ($baseline*0.75) 0 ($baseline*1.5) 0;
margin: 0 0 ($baseline*1.5) 0;
max-height: $course-card-height;
}
}
......@@ -75,11 +75,12 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi
.course-organization, .course-code, .course-date {
@extend %t-icon6;
color: $black;
color: $gray-d2;
}
.course-organization, .course-code, .course-title {
display: block;
text-transform: none;
}
.course-organization {
......
lms/templates/course.html
......@@ -13,14 +13,14 @@ from courseware.courses import course_image_url, get_course_about_section
<div class="learn-more" aria-hidden=true>${_("LEARN MORE")}</div>
</div>
</header>
<section class="course-info" aria-hidden=true>
<div class="course-info" aria-hidden="true">
<h2 class="course-name">
<span class="course-organization">${get_course_about_section(course, 'university')}</span>
<span class="course-code">${course.display_number_with_default}</span>
<span class="course-title">${get_course_about_section(course, 'title')}</span>
</h2>
<div class="course-date" aria-hidden="true">${_("Starts")}: ${course.start_datetime_text()}</div>
</section>
</div>
<div class="sr">
<ul>
<li>${get_course_about_section(course, 'university')}</li>
......
lms/templates/courseware/courses.html
......@@ -56,41 +56,29 @@
%>
<section class="find-courses">
<header class="search">
<div class="inner-wrapper main-search">
<hgroup>
<div class="logo">
<img src="${logo_file}" alt="${logo_alt_text}" />
</div>
<h2>${course_index_overlay_text}</h2>
</hgroup>
</div>
</header>
<section class="courses-container">
% if course_discovery_enabled:
<div id="discovery-form" role="search" aria-label="course">
<form>
<input class="discovery-input" placeholder="${_('Search for a course')}" type="text"/><!-- removes spacing
--><button type="submit" class="button postfix discovery-submit" aria-label="${_('Search')}">
<div id="discovery-form" role="search" aria-label="course" class="wrapper-search-context">
<div id="discovery-message" class="search-status-label"></div>
<form class="wrapper-search-input">
<input class="discovery-input" placeholder="${_('Search for a course')}" type="text"/>
<button type="submit" class="button postfix discovery-submit" aria-label="${_('Search')}">
<i class="icon fa fa-search" aria-hidden="true"></i>
<div aria-live="polite" aria-relevant="all">
<div id="loading-indicator" class="loading-spinner hidden">
<i class="icon fa fa-spinner fa-spin"></i>
<span class="sr">${_('Loading')}</span>
</div>
</div>
</button>
</form>
<div id="discovery-message"></div>
<div aria-live="polite" aria-relevant="all">
<div id="loading-indicator" class="hidden">
<i class="icon fa fa-spinner fa-spin"></i> ${_('Loading')}
</div>
</div>
</div>
<div id="filter-bar" class="filters hide-phone">
</div>
% endif
<section class="courses${'' if course_discovery_enabled else ' no-course-discovery'}">
<div class="courses${'' if course_discovery_enabled else ' no-course-discovery'}" role="region" aria-label="${_('List of Courses')}">
<ul class="courses-listing">
%for course in courses:
<li class="courses-listing-item">
......@@ -98,7 +86,7 @@
</li>
%endfor
</ul>
</section>
</div>
% if course_discovery_enabled:
......
lms/templates/discovery/result_item.underscore
<article class="course" role="region" aria-label="<%= content.display_name %>">
<a href="/courses/<%- course %>/info">
<a href="/courses/<%- course %>/about">
<header class="course-image">
<div class="cover-image">
<img src="<%- image_url %>" alt="<%= content.display_name %> <%= content.number %>" />
<div class="learn-more" aria-hidden=true><%= gettext("LEARN MORE") %></div>
</div>
</header>
<section class="course-info" aria-hidden=true>
<section class="course-info" aria-hidden="true">
<h2 class="course-name">
<span class="course-organization"><%= org %></span>
<span class="course-code"><%= content.number %></span>
......
lms/templates/discovery/search_facets_list.underscore
<h2>
<h2 class="header-search-facets">
<%= gettext('Refine your search') %>
</h2>
<section class="search-facets-lists">
......
lms/templates/discovery/search_facets_section.underscore
<h3>
<h3 class="header-facet">
<%= displayName %>
</h3>
<ul data-facet="<%= name %>" class="facet-list collapse">
......
lms/templates/navigation.html
......@@ -124,15 +124,21 @@ site_status_msg = get_site_status_msg(course_id)
% endif
</%block>
% if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
% if settings.FEATURES.get('ENABLE_COURSE_DISCOVERY'):
<li class="nav-global-05">
<a class="cta cta-discovery" href="/courses">${_("Find Courses")}</a>
</li>
%endif
% if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
<li class="nav-global-04">
<a class="cta cta-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register Now")}</a>
<a class="cta cta-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
</li>
% else:
<li class="nav-global-04">
<a class="cta cta-register" href="/register${login_query()}">${_("Register Now")}</a>
<a class="cta cta-register" href="/register${login_query()}">${_("Register")}</a>
</li>
% endif
% endif
</ol>
......
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