Skip to content

E
edx-platform
Commit 2972e911 by Davorin Sego
Options

search input element styling improvements, test clean up

parent b9ed7582
Showing with 157 additions and 137 deletions
cms/envs/common.py
......@@ -150,7 +150,7 @@ FEATURES = {
'LICENSING': False,
# Enable the courseware search functionality
'ENABLE_COURSEWARE_INDEX': True,
'ENABLE_COURSEWARE_INDEX': False,
# Enable content libraries search functionality
'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
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</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
)
......
lms/envs/common.py
......@@ -359,10 +359,10 @@ FEATURES = {
'MODE_CREATION_FOR_TESTING': False,
# Courseware search feature
'ENABLE_COURSEWARE_SEARCH': True,
'ENABLE_COURSEWARE_SEARCH': False,
# Dashboard search feature
'ENABLE_DASHBOARD_SEARCH': True,
'ENABLE_DASHBOARD_SEARCH': False,
# log all information from cybersource callbacks
'LOG_POSTPAY_CALLBACKS': True,
......@@ -389,7 +389,7 @@ FEATURES = {
},
# Course discovery feature
'ENABLE_COURSE_DISCOVERY': True,
'ENABLE_COURSE_DISCOVERY': False,
# Software secure fake page feature flag
'ENABLE_SOFTWARE_SECURE_FAKE': False,
......
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/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>
</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="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="filter-bar" class="filters hide-phone">
</div>
<section class="courses">
<div class="courses" role="region" aria-label="${_('List of Courses')}">
<ul class="courses-listing"></ul>
</section>
</div>
<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/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/_courses.scss
......@@ -7,8 +7,7 @@
// * +Layout - Courses Container
// * +Header - Course Search
// * +Search Input
// * +Filters - Search
// * +Facets - Sidebar - Search
// * +Filters and Facets- Search
// * +All Other Styles
......@@ -28,12 +27,12 @@ $facet-background-color: #007db8;
.discovery-button:not(:disabled) {
@extend %t-action2;
@include text-align(left);
outline: 0 none;
box-shadow:none;
border: 0;
background: none;
padding: 0 ($baseline*0.6);
text-align: left;
text-decoration: none;
text-shadow: none;
text-transform: none;
......@@ -45,7 +44,7 @@ $facet-background-color: #007db8;
}
.courses-container {
padding: ($baseline*3) ($baseline/2) 0 ($baseline/2);
@include padding(($baseline*2), ($baseline/2), 0, ($baseline/2));
.courses {
@include rtl() { $layout-direction: "RTL"; }
......@@ -95,7 +94,8 @@ $facet-background-color: #007db8;
@include span-columns(12);
@include media($bp-medium) {
@include span-columns(8);
@include span-columns(4); // 4 of 8
@include omega(2n);
}
@include media($bp-large) {
......@@ -132,7 +132,7 @@ $facet-background-color: #007db8;
.find-courses, .university-profile {
header.search {
background: $course-profile-bg;
background: $gray-l5;
background-size: cover;
background-image: $homepage-bg-image;
background-position: center top !important;
......@@ -169,20 +169,20 @@ $facet-background-color: #007db8;
}
.logo {
display: inline-block;
@include border-right(1px solid $light-gray);
height: 80px;
@include margin-right(30px);
@include padding-right(30px);
display: inline-block;
height: 80px;
position: relative;
vertical-align: middle;
&::after {
@include right(0px);
content: "";
display: block;
height: 80px;
position: absolute;
right: 0px;
top: 0px;
}
......@@ -217,21 +217,54 @@ $facet-background-color: #007db8;
.find-courses {
.wrapper-search-context {
@include clearfix();
@include outer-container;
@include rtl() { $layout-direction: "RTL"; }
.search-status-label {
@extend %t-title4;
@include line-height(50);
display: inline-block;
width: flex-grid(9);
@extend %t-title3;
@include span-columns(9);
min-height: $course-search-input-height;
@include media($bp-tiny) {
@include fill-parent();
@include font-size(20);
}
@include media($bp-small) {
@include span-columns(4);
@include font-size(20);
}
@include media($bp-medium) {
@include span-columns(4);
}
@include media($bp-large) {
@include span-columns(8);
}
}
.wrapper-search-input {
display: inline-block;
width: flex-grid(3);
vertical-align: top;
margin-left: 24px;
@include span-columns(3);
@extend %ui-depth0;
position: relative;
@include media($bp-tiny) {
@include fill-parent();
}
@include media($bp-small) {
@include span-columns(4);
}
@include media($bp-medium) {
@include span-columns(4);
}
@include media($bp-large) {
@include span-columns(4);
}
}
}
......@@ -239,9 +272,9 @@ $facet-background-color: #007db8;
@extend %ui-depth1;
@extend %t-copy-sub1;
@extend %t-demi-strong;
@include border-radius(0);
@include border-top-left-radius(3px);
@include border-bottom-left-radius(3px);
@include border-radius(3px);
@include padding-right(55px);
width: 100%;
border: 2px solid $gray-l3;
height: $course-search-input-height;
color: $black;
......@@ -251,7 +284,7 @@ $facet-background-color: #007db8;
&:focus {
@extend %no-outline;
box-shadow: none;
border-color: $m-blue-d1;
border-color: $m-blue-d6;
}
}
......@@ -260,11 +293,13 @@ $facet-background-color: #007db8;
@extend %t-icon3;
@extend %t-strong;
@include margin-left(-2px);
position: relative;
border: 2px solid $m-blue-d1;
@include right(0);
position: absolute;
top: 0;
border: 2px solid $m-blue-d6;
border-radius: ($baseline*0.1);
box-shadow: none;
background: $m-blue-d5;
background: $blue;
padding: 0 ($baseline*0.7);
height: $course-search-input-height;
color: $white;
......@@ -272,12 +307,19 @@ $facet-background-color: #007db8;
//STATE: hover, focus
&:hover, &:focus {
background: $m-blue-l1;
background: $m-blue-d5;
}
}
.loading-spinner {
@include transition(all $tmg-f1 ease-out 0s);
background: $blue;
position: absolute;
top: ($baseline*0.7); // same as padding rule for .discovery-submit
}
}
// +Filters - Search
// +Filters and Facets - Search
// ====================
.find-courses {
......@@ -322,7 +364,7 @@ $facet-background-color: #007db8;
margin: ($baseline/2);
width: auto;
text-align: center;
color: $m-blue-d1;
color: $m-blue-d5;
}
.flt-right {
......@@ -330,11 +372,7 @@ $facet-background-color: #007db8;
}
}
}
// +Facets - Sidebar - Search
// ====================
.find-courses .search-facets {
.search-facets {
@include fill-parent();
@include omega();
@include box-sizing(border-box);
......@@ -348,15 +386,15 @@ $facet-background-color: #007db8;
max-height: ($baseline*100);
@include media($bp-tiny) {
@include span-columns(4);
@include fill-parent();
}
@include media($bp-small) {
@include span-columns(3);
@include span-columns(4);
}
@include media($bp-medium) {
@include span-columns(4);
@include span-columns(8);
}
@include media($bp-large) {
......@@ -385,114 +423,72 @@ $facet-background-color: #007db8;
content: "";
}
.header-search-facets, section {
.header-search-facets, .header-facet {
@extend %t-title6;
@extend %t-strong;
padding: ($baseline/2);
margin: 0;
color: $facet-text-color;
text-transform: none;
}
.header-search-facets {
@extend %t-title6;
}
section {
@extend %t-title6;
margin: 0 ($baseline/2);
}
.header-facet {
@extend %t-title6;
margin: 0 ($baseline/2) ($baseline/2) ($baseline/2);
color: $facet-text-color;
font-family: $sans-serif;
margin: 0 ($baseline/2);
padding: ($baseline/2) 0;
}
section {
margin: 0;
padding: ($baseline/2) 0;
.search-facets-lists section {
border-top: 1px solid $gray-l4;
}
a {
@include float(left);
@include box-sizing(border-box);
@include line-height(18.92);
@include transition(all $tmg-f2 ease-out 0s);
opacity: 1;
padding: 0 ($baseline*0.6);
width: 100%;
overflow: hidden;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
color: $facet-text-color;
.facet-list {
@extend %ui-no-list;
@include clearfix();
padding-bottom: ($baseline/2);
//STATE: hover, visited
&:hover,
&:visited {
color: $facet-text-color;
text-decoration: none;
&.collapse {
max-height: ($baseline*14);
}
}
.facet-option {
@include float(left);
@include box-sizing(border-box);
@include line-height(18.92);
@include transition(all $tmg-f2 ease-out 0s);
@include clearfix();
@extend %t-action3;
@extend %text-truncated;
padding: ($baseline/4) ($baseline/2);
border-radius: 0px;
opacity: 1;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: $facet-text-color;
&.collapse {
max-height: ($baseline*14);
}
li {
@include clearfix();
@include line-height(18.92);
@extend %t-icon6;
position: relative;
clear: both;
border-top: 1px solid $white;
padding: 0;
height: ($baseline*1.5);
overflow: hidden;
}
.count {
@include right($baseline*0.6);
@include box-sizing(border-box);
@include transition(all 0.2s ease-out);
@include line-height(18.92);
position: absolute;
}
//STATE: hover
&:hover {
//STATE: hover, focus
&:hover, &:focus {
background: $facet-background-color;
color: $white;
text-decoration: none;
.count,
a {
color: $white;
.count,
.facet-option {
.count {
color: $white;
}
}
}
}
}
.search-facets-lists section {
border-top: 1px solid $courseware-button-border-color;
}
.toggle {
@include clearfix();
......@@ -509,7 +505,7 @@ $facet-background-color: #007db8;
// +All Other Styles
// ====================
.find-courses, .university-profile {
background: $course-profile-bg;
background: $gray-l5;
padding-bottom: ($baseline*3);
......
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
......@@ -20,7 +20,6 @@ $course-search-input-height: ($button-size);
background-image: $homepage-bg-image;
box-shadow: 0 1px 0 0 $course-header-bg, inset 0 -1px 5px 0 $shadow-l1;
overflow: hidden;
margin-top: $header_image_margin;
padding: 0;
width: flex-grid(12);
......@@ -110,6 +109,7 @@ $course-search-input-height: ($button-size);
height: $course-search-input-height;
color: $black;
font-style: normal;
font-weight: normal;
// STATE: focus
&:focus {
......
lms/static/sass/shared/_header.scss
......@@ -3,7 +3,7 @@
header.global {
@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;
background: $header-bg;
position: relative;
......@@ -286,7 +286,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
......@@ -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;
}
}
......
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
......@@ -57,28 +57,28 @@
<section class="find-courses">
<section class="courses-container">
% if course_discovery_enabled:
<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"/><!-- removes spacing
--><button type="submit" class="button postfix discovery-submit" aria-label="${_('Search')}">
<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>
</button>
</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 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>
<div id="filter-bar" class="filters hide-phone">
</div>
% 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">
%for course in courses:
<li class="courses-listing-item">
......
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>
......
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