Skip to content

E
edx-platform
Commit 2972e911 by Davorin Sego
Options

search input element styling improvements, test clean up

parent b9ed7582
Showing with 67 additions and 43 deletions
cms/envs/common.py
...@@ -150,7 +150,7 @@ FEATURES = { ...@@ -150,7 +150,7 @@ FEATURES = {
'LICENSING': False, 'LICENSING': False,
# Enable the courseware search functionality # Enable the courseware search functionality
'ENABLE_COURSEWARE_INDEX': True, 'ENABLE_COURSEWARE_INDEX': False,
# Enable content libraries search functionality # Enable content libraries search functionality
'ENABLE_LIBRARY_INDEX': False, 'ENABLE_LIBRARY_INDEX': False,
......
common/djangoapps/student/views.py
...@@ -972,9 +972,9 @@ def login_user(request, error=""): # pylint: disable-msg=too-many-statements,un ...@@ -972,9 +972,9 @@ def login_user(request, error=""): # pylint: disable-msg=too-many-statements,un
platform_name=settings.PLATFORM_NAME, provider_name=requested_provider.name platform_name=settings.PLATFORM_NAME, provider_name=requested_provider.name
) )
+ "<br/><br/>" + + "<br/><br/>" +
_("If you don't have an {platform_name} account yet, click <strong>Register</strong> at the top of the page.").format( _("If you don't have an {platform_name} account yet, "
platform_name=settings.PLATFORM_NAME "click <strong>Register</strong> at the top of the page.").format(
), platform_name=settings.PLATFORM_NAME),
content_type="text/plain", content_type="text/plain",
status=403 status=403
) )
......
lms/envs/common.py
...@@ -359,10 +359,10 @@ FEATURES = { ...@@ -359,10 +359,10 @@ FEATURES = {
'MODE_CREATION_FOR_TESTING': False, 'MODE_CREATION_FOR_TESTING': False,
# Courseware search feature # Courseware search feature
'ENABLE_COURSEWARE_SEARCH': True, 'ENABLE_COURSEWARE_SEARCH': False,
# Dashboard search feature # Dashboard search feature
'ENABLE_DASHBOARD_SEARCH': True, 'ENABLE_DASHBOARD_SEARCH': False,
# log all information from cybersource callbacks # log all information from cybersource callbacks
'LOG_POSTPAY_CALLBACKS': True, 'LOG_POSTPAY_CALLBACKS': True,
...@@ -389,7 +389,7 @@ FEATURES = { ...@@ -389,7 +389,7 @@ FEATURES = {
}, },
# Course discovery feature # Course discovery feature
'ENABLE_COURSE_DISCOVERY': True, 'ENABLE_COURSE_DISCOVERY': False,
# Software secure fake page feature flag # Software secure fake page feature flag
'ENABLE_SOFTWARE_SECURE_FAKE': False, 'ENABLE_SOFTWARE_SECURE_FAKE': False,
......
lms/static/js/discovery/app.js
...@@ -37,6 +37,7 @@ define(['backbone', 'course_discovery_meanings'], function(Backbone, meanings) { ...@@ -37,6 +37,7 @@ define(['backbone', 'course_discovery_meanings'], function(Backbone, meanings) {
dispatcher.listenTo(collection, 'search', function () { dispatcher.listenTo(collection, 'search', function () {
if (collection.length > 0) { if (collection.length > 0) {
form.showFoundMessage(collection.totalCount);
results.render(); results.render();
} }
else { else {
......
lms/static/js/discovery/form.js
...@@ -47,6 +47,15 @@ define(['jquery', 'backbone'], function ($, Backbone) { ...@@ -47,6 +47,15 @@ define(['jquery', 'backbone'], function ($, Backbone) {
this.$loadingIndicator.addClass('hidden'); 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) { showNotFoundMessage: function (term) {
var msg = interpolate( var msg = interpolate(
gettext('We couldn\'t find any results for "%s".'), gettext('We couldn\'t find any results for "%s".'),
......
lms/static/js/fixtures/discovery.html
<section class="courses-container"> <section class="courses-container">
<div id="discovery-form"> <div id="discovery-form" class="wrapper-search-context">
<form> <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 <input class="discovery-input" placeholder="Search for a course" type="text"/><!-- removes spacing
--><button type="submit" class="button postfix discovery-submit" aria-label="Search"> --><button type="submit" class="button postfix discovery-submit" aria-label="Search">
<i class="icon fa fa-search" aria-hidden="true"></i> <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> </button>
</form> </form>
<div id="discovery-message"></div>
<div aria-live="polite" aria-relevant="all"> <div id="filter-bar" class="filters hide-phone">
<div id="loading-indicator" class="hidden">
<i class="icon fa fa-spinner fa-spin"></i> Loading
</div>
</div> </div>
</div>
<div id="filter-bar" class="filters hide-phone"> <div class="courses" role="region" aria-label="${_('List of Courses')}">
</div> <ul class="courses-listing"></ul>
</div>
<section class="courses"> <aside aria-label="Refine your search" class="search-facets phone-menu">
<ul class="courses-listing"></ul> </aside>
</section>
<aside aria-label="Refine your search" class="search-facets phone-menu"> </section>
</aside>
</section> </section>
lms/static/js/spec/discovery/discovery_spec.js
...@@ -238,7 +238,7 @@ define([ ...@@ -238,7 +238,7 @@ define([
var data = this.item.model.attributes; var data = this.item.model.attributes;
this.item.render(); this.item.render();
expect(this.item.$el).toContainHtml(data.content.display_name); 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).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.org);
expect(this.item.$el.find('.course-name')).toContainHtml(data.content.number); expect(this.item.$el.find('.course-name')).toContainHtml(data.content.number);
......
lms/static/sass/base/_base.scss
...@@ -121,7 +121,6 @@ a:focus { ...@@ -121,7 +121,6 @@ a:focus {
width: flex-grid(12); width: flex-grid(12);
margin: 0 auto; margin: 0 auto;
background: $content-wrapper-bg; background: $content-wrapper-bg;
padding-bottom: ($baseline*2);
@media print { @media print {
padding-bottom: 0; padding-bottom: 0;
......
lms/static/sass/base/_variables.scss
...@@ -82,6 +82,7 @@ $gray-d2: shade($gray,40%); // #4c4c4c ...@@ -82,6 +82,7 @@ $gray-d2: shade($gray,40%); // #4c4c4c
$gray-d3: shade($gray,60%); // #323232 $gray-d3: shade($gray,60%); // #323232
$gray-d4: shade($gray,80%); // #191919 $gray-d4: shade($gray,80%); // #191919
$pink: rgb(182,37,103); // #b72567; $pink: rgb(182,37,103); // #b72567;
$pink-l1: tint($pink,20%); $pink-l1: tint($pink,20%);
$pink-l2: tint($pink,40%); $pink-l2: tint($pink,40%);
...@@ -133,16 +134,23 @@ $green-u1: desaturate($green,15%); ...@@ -133,16 +134,23 @@ $green-u1: desaturate($green,15%);
$green-u2: desaturate($green,30%); $green-u2: desaturate($green,30%);
$green-u3: desaturate($green,45%); $green-u3: desaturate($green,45%);
// ====================
// COLORS: social platforms // COLORS: social platforms
$twitter-blue: #55ACEE; $twitter-blue: #55ACEE;
$facebook-blue: #3B5998; $facebook-blue: #3B5998;
$linkedin-blue: #0077B5; $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. // 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); $blue: rgb(0, 120, 176);
$yellow: rgb(255, 252, 221); $yellow: rgb(255, 252, 221);
// ====================
// COLORS: old variables // COLORS: old variables
// DEPRECATED: use colors in lists above
$error-red: rgb(253, 87, 87); $error-red: rgb(253, 87, 87);
$danger-red: rgb(212, 64, 64); $danger-red: rgb(212, 64, 64);
$light-gray: rgb(221, 221, 221); $light-gray: rgb(221, 221, 221);
...@@ -152,7 +160,10 @@ $sidebar-color: rgb(246, 246, 246); ...@@ -152,7 +160,10 @@ $sidebar-color: rgb(246, 246, 246);
$outer-border-color: rgb(170, 170, 170); $outer-border-color: rgb(170, 170, 170);
$light-gray: rgb(221,221,221); // #dddddd $light-gray: rgb(221,221,221); // #dddddd
// ====================
// used by descriptor css // used by descriptor css
// DEPRECATED: use colors in lists above
$lightGrey: rgb(237,241,245); // #edf1f5 $lightGrey: rgb(237,241,245); // #edf1f5
$darkGrey: rgb(136,145,161); // #8891a1 $darkGrey: rgb(136,145,161); // #8891a1
$lightGrey1: $gray-l3; $lightGrey1: $gray-l3;
...@@ -160,6 +171,8 @@ $blue-d1: shade($blue,20%); ...@@ -160,6 +171,8 @@ $blue-d1: shade($blue,20%);
$blue-d2: shade($blue,40%); $blue-d2: shade($blue,40%);
$blue-d4: shade($blue,80%); $blue-d4: shade($blue,80%);
// ====================
// edx.org marketing site variables // edx.org marketing site variables
$m-gray: rgb(138,140,143); // #8A8C8F $m-gray: rgb(138,140,143); // #8A8C8F
$m-gray-l1: rgb(151,153,155); // #97999B $m-gray-l1: rgb(151,153,155); // #97999B
......
lms/static/sass/multicourse/_dashboard.scss
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
// ==================== // ====================
.dashboard { .dashboard {
@include clearfix(); @include clearfix();
padding: ($baseline*2) 0 0 0; padding: ($baseline*2) 0 $baseline 0;
.profile-sidebar { .profile-sidebar {
background: transparent; background: transparent;
......
lms/static/sass/multicourse/_home.scss
...@@ -20,7 +20,6 @@ $course-search-input-height: ($button-size); ...@@ -20,7 +20,6 @@ $course-search-input-height: ($button-size);
background-image: $homepage-bg-image; background-image: $homepage-bg-image;
box-shadow: 0 1px 0 0 $course-header-bg, inset 0 -1px 5px 0 $shadow-l1; box-shadow: 0 1px 0 0 $course-header-bg, inset 0 -1px 5px 0 $shadow-l1;
overflow: hidden; overflow: hidden;
margin-top: $header_image_margin;
padding: 0; padding: 0;
width: flex-grid(12); width: flex-grid(12);
...@@ -110,6 +109,7 @@ $course-search-input-height: ($button-size); ...@@ -110,6 +109,7 @@ $course-search-input-height: ($button-size);
height: $course-search-input-height; height: $course-search-input-height;
color: $black; color: $black;
font-style: normal; font-style: normal;
font-weight: normal;
// STATE: focus // STATE: focus
&:focus { &:focus {
......
lms/static/sass/shared/_header.scss
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
header.global { header.global {
@extend %ui-depth1; @extend %ui-depth1;
border-bottom: 4px solid $courseware-border-bottom-color; border-bottom: 1px solid $gray-l1;
box-shadow: 0 1px 5px 0 $shadow-l1; box-shadow: 0 1px 5px 0 $shadow-l1;
background: $header-bg; background: $header-bg;
position: relative; position: relative;
...@@ -286,7 +286,7 @@ header.global { ...@@ -286,7 +286,7 @@ header.global {
a { a {
display:block; display:block;
padding: ($baseline/4); padding: ($baseline/4);
color: $lighter-base-font-color; color: $link-color;
font-weight: 600; font-weight: 600;
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
......
lms/static/sass/views/_homepage.scss
...@@ -16,7 +16,7 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi ...@@ -16,7 +16,7 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi
@extend %ui-no-list; @extend %ui-no-list;
.courses-listing-item { .courses-listing-item {
margin: ($baseline*0.75) 0 ($baseline*1.5) 0; margin: 0 0 ($baseline*1.5) 0;
max-height: $course-card-height; max-height: $course-card-height;
} }
} }
......
lms/templates/course.html
...@@ -13,14 +13,14 @@ from courseware.courses import course_image_url, get_course_about_section ...@@ -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 class="learn-more" aria-hidden=true>${_("LEARN MORE")}</div>
</div> </div>
</header> </header>
<section class="course-info" aria-hidden=true> <div class="course-info" aria-hidden="true">
<h2 class="course-name"> <h2 class="course-name">
<span class="course-organization">${get_course_about_section(course, 'university')}</span> <span class="course-organization">${get_course_about_section(course, 'university')}</span>
<span class="course-code">${course.display_number_with_default}</span> <span class="course-code">${course.display_number_with_default}</span>
<span class="course-title">${get_course_about_section(course, 'title')}</span> <span class="course-title">${get_course_about_section(course, 'title')}</span>
</h2> </h2>
<div class="course-date" aria-hidden="true">${_("Starts")}: ${course.start_datetime_text()}</div> <div class="course-date" aria-hidden="true">${_("Starts")}: ${course.start_datetime_text()}</div>
</section> </div>
<div class="sr"> <div class="sr">
<ul> <ul>
<li>${get_course_about_section(course, 'university')}</li> <li>${get_course_about_section(course, 'university')}</li>
......
lms/templates/courseware/courses.html
...@@ -57,28 +57,28 @@ ...@@ -57,28 +57,28 @@
<section class="find-courses"> <section class="find-courses">
<section class="courses-container"> <section class="courses-container">
% if course_discovery_enabled: % if course_discovery_enabled:
<div id="discovery-form" role="search" aria-label="course" class="wrapper-search-context"> <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"> <form class="wrapper-search-input">
<input class="discovery-input" placeholder="${_('Search for a course')}" type="text"/><!-- removes spacing <input class="discovery-input" placeholder="${_('Search for a course')}" type="text"/>
--><button type="submit" class="button postfix discovery-submit" aria-label="${_('Search')}"> <button type="submit" class="button postfix discovery-submit" aria-label="${_('Search')}">
<i class="icon fa fa-search" aria-hidden="true"></i> <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> </button>
</form> </form>
<div id="discovery-message" class="search-status-label"></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>
<div id="filter-bar" class="filters hide-phone"> <div id="filter-bar" class="filters hide-phone">
</div> </div>
% endif % endif
<section class="courses${'' if course_discovery_enabled else ' no-course-discovery'}"> <section class="courses ${'' if course_discovery_enabled else ' no-course-discovery'}" role="region" aria-label="${_('List of Courses')}">
<ul class="courses-listing"> <ul class="courses-listing">
%for course in courses: %for course in courses:
<li class="courses-listing-item"> <li class="courses-listing-item">
......
lms/templates/discovery/result_item.underscore
<article class="course" role="region" aria-label="<%= content.display_name %>"> <article class="course" role="region" aria-label="<%= content.display_name %>">
<a href="/courses/<%- course %>/info"> <a href="/courses/<%- course %>/about">
<header class="course-image"> <header class="course-image">
<div class="cover-image"> <div class="cover-image">
<img src="<%- image_url %>" alt="<%= content.display_name %> <%= content.number %>" /> <img src="<%- image_url %>" alt="<%= content.display_name %> <%= content.number %>" />
<div class="learn-more" aria-hidden=true><%= gettext("LEARN MORE") %></div> <div class="learn-more" aria-hidden=true><%= gettext("LEARN MORE") %></div>
</div> </div>
</header> </header>
<section class="course-info" aria-hidden=true> <section class="course-info" aria-hidden="true">
<h2 class="course-name"> <h2 class="course-name">
<span class="course-organization"><%= org %></span> <span class="course-organization"><%= org %></span>
<span class="course-code"><%= content.number %></span> <span class="course-code"><%= content.number %></span>
......
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