Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Styling improvements to openedX search through Find Courses page
This commit is contained in:
Marco Morales
2015-07-14 08:14:35 -04:00
parent d57fd0e47c 51e47cf94f
commit 493200734e
25 changed files with 274 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
common/djangoapps/student/views.py
View File

@@ -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
)

2
common/djangoapps/terrain/steps.py
View File

@@ -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$')

6
lms/djangoapps/branding/tests/test_page.py
View File

@@ -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)

4
lms/djangoapps/courseware/features/homepage.feature
View File

@@ -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

1
lms/static/js/discovery/app.js
View File

@@ -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 {

9
lms/static/js/discovery/form.js
View File

@@ -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".'),

2
lms/static/js/discovery/result_list_view.js
View File

@@ -11,7 +11,7 @@ define([
return Backbone.View.extend({
el: 'section.courses',
el: 'div.courses',
$window: $(window),
$document: $(document),

32
lms/static/js/fixtures/discovery.html
View File

@@ -1,26 +1,28 @@
<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>
<aside aria-label="Refine your search" class="search-facets phone-menu">
</aside>
<section class="courses">
<ul class="courses-listing"></ul>
</section>
<aside aria-label="Refine your search" class="search-facets phone-menu">
</aside>
</section>

2
lms/static/js/spec/discovery/discovery_spec.js
View File

@@ -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);

2
lms/static/sass/_build-lms.scss
View File

@@ -70,7 +70,7 @@
@import 'discussion/utilities/shame';
// search
@import 'search/_search';
@import 'search/search';
// news
@import 'news';

1
lms/static/sass/base/_base.scss
View File

@@ -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;

13
lms/static/sass/base/_variables.scss
View File

@@ -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

293
lms/static/sass/multicourse/_courses.scss
View File

@@ -1,21 +1,38 @@
// lms - views - course discovery
// ====================
// Table of Contents
// * +Imports - Search
// * +Variables - Search
// * +Layout - Courses Container
// * +Header - Course Search
// * +Search Input
// * +Filters and Facets- Search
// * +All Other Styles
// +Imports - Search
// ====================
@import '../base/grid-settings';
@import 'neat/neat'; // lib - Neat
// +Variables - Search
// ====================
$facet-text-color: #3d3e3f;
$facet-background-color: #007db8;
// +Layout - Courses Container
// ====================
.find-courses, .university-profile {
background: $course-profile-bg;
padding-bottom: ($baseline*3);
.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;
@@ -27,17 +44,7 @@ $facet-background-color: #007db8;
}
.courses-container {
#discovery-form {
* {
display:inline;
}
#discovery-message,
#loading-indicator {
@include line-height(37.84);
}
}
@include padding(($baseline*2), ($baseline/2), 0, ($baseline/2));
.courses {
@include rtl() { $layout-direction: "RTL"; }
@@ -48,12 +55,12 @@ $facet-background-color: #007db8;
max-height: $course-card-height;
}
/* Style grid settings if course discovery turned on */
// CASE: Course Discovery Search enabled
&:not(.no-course-discovery) {
@include span-columns(9);
@include media($bp-medium) {
@include span-columns(4);
@include span-columns(8);
}
@include media($bp-large) {
@@ -66,8 +73,8 @@ $facet-background-color: #007db8;
.courses-listing .courses-listing-item {
@include media($bp-medium) {
@include span-columns(8); // 4 of 8
@include omega(1n);
@include span-columns(4); // 4 of 8
@include omega(2n);
}
@include media($bp-large) {
@@ -82,12 +89,13 @@ $facet-background-color: #007db8;
}
}
/* Style grid settings if course discovery turned off */
&.no-course-discovery{
// CASE: Course Discovery Search disabled
&.no-course-discovery {
@include span-columns(12);
@include media($bp-medium) {
@include span-columns(8);
@include span-columns(8); // 8 of 8
@include omega(2n);
}
@include media($bp-large) {
@@ -117,9 +125,14 @@ $facet-background-color: #007db8;
}
}
}
}
// +Hero - Home Header
// ====================
.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;
@@ -156,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;
}
@@ -197,22 +210,71 @@ $facet-background-color: #007db8;
}
}
}
}
section.message {
border-top: 1px solid $border-color-2;
@include clearfix();
margin-top: $baseline;
padding-top: ($baseline*3);
@include columns(2 20px);
// +Search Input
// ====================
.find-courses {
.wrapper-search-context {
@include outer-container;
@include rtl() { $layout-direction: "RTL"; }
.search-status-label {
@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 {
@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);
}
}
}
.discovery-input {
@extend %ui-depth1;
@extend %t-icon4;
@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;
@@ -222,7 +284,7 @@ $facet-background-color: #007db8;
&:focus {
@extend %no-outline;
box-shadow: none;
border-color: $m-blue-d1;
border-color: $m-blue-d6;
}
}
@@ -231,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;
@@ -243,15 +307,27 @@ $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 and Facets - Search
// ====================
.find-courses {
.filters {
@include clearfix();
margin-top: ($baseline/2);
border-top: 1px solid $courseware-button-border-color;
border-bottom: 1px solid $courseware-button-border-color;
border-top: 2px solid $courseware-button-border-color;
border-bottom: 2px solid $courseware-button-border-color;
width: 100%;
height: auto;
max-height: ($baseline*10);
@@ -285,10 +361,10 @@ $facet-background-color: #007db8;
@include line-height(29.73);
@extend %t-icon5;
@extend %t-strong;
margin: ($baseline/2) 0;
margin: ($baseline/2);
width: auto;
text-align: center;
color: $m-blue-d1;
color: $m-blue-d5;
}
.flt-right {
@@ -296,9 +372,7 @@ $facet-background-color: #007db8;
}
}
.search-facets{
.search-facets {
@include fill-parent();
@include omega();
@include box-sizing(border-box);
@@ -312,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) {
@@ -349,99 +423,73 @@ $facet-background-color: #007db8;
content: "";
}
h2,
section {
@extend %t-icon5;
.header-search-facets, .header-facet {
@extend %t-title6;
@extend %t-strong;
margin: 0 ($baseline/2);
border: medium none;
padding: ($baseline/2);
margin: 0;
color: $facet-text-color;
font-family: $sans-serif;
text-transform: none;
}
h3 {
@extend %t-icon6;
@extend %t-strong;
margin: 0 ($baseline/2) ($baseline/2) ($baseline/2);
color: $facet-text-color;
font-family: $sans-serif;
}
section {
margin: 0;
.header-facet {
margin: 0 ($baseline/2);
padding: ($baseline/2) 0;
}
.facet-option {
@include float(left);
@include box-sizing(border-box);
@include line-height(18.92);
@include transition(all $tmg-f2 ease-out 0s);
@extend %t-action3;
opacity: 1;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: $facet-text-color;
//STATE: hover, visited
&:hover,
&:visited {
color: $facet-text-color;
text-decoration: none;
}
.search-facets-lists section {
border-top: 1px solid $gray-l4;
}
ul {
margin: 0;
padding: 0;
overflow: hidden;
list-style: outside none none;
.facet-list {
@extend %ui-no-list;
@include clearfix();
padding-bottom: ($baseline/2);
&.collapse {
max-height: ($baseline*14);
}
}
.facet-option {
@include float(left);
@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%;
color: $facet-text-color;
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);
position: absolute;
}
//STATE: hover, focus
&:hover, &:focus {
background: $facet-background-color;
color: $white;
text-decoration: none;
.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 {
background: $facet-background-color;
color: $white;
text-decoration: none;
.count,
.facet-option {
color: $white;
}
}
}
}
.search-facets-lists section {
border-top: 1px solid $courseware-button-border-color;
}
.toggle {
@include clearfix();
@@ -453,3 +501,20 @@ $facet-background-color: #007db8;
}
}
}
// +All Other Styles
// ====================
.find-courses, .university-profile {
background: $gray-l5;
padding-bottom: ($baseline*3);
section.message {
@include columns(2 20px);
@include clearfix();
border-top: 1px solid $border-color-2;
margin-top: $baseline;
padding-top: ($baseline*3);
}
}

2
lms/static/sass/multicourse/_dashboard.scss
View File

@@ -13,7 +13,7 @@
// ====================
.dashboard {
@include clearfix();
padding: ($baseline*2) 0 0 0;
padding: ($baseline*2) 0 $baseline 0;
.profile-sidebar {
background: transparent;

20
lms/static/sass/multicourse/_home.scss
View File

@@ -1,7 +1,7 @@
@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 {

1
lms/static/sass/search/_search.scss
View File

@@ -123,7 +123,6 @@
}
.courseware-search-bar {
box-shadow: 0 1px 0 $white inset, 0 -1px 0 $shadow-l1 inset;
}

2
lms/static/sass/shared/_course_object.scss
View File

@@ -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;

4
lms/static/sass/shared/_header.scss
View File

@@ -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 {

7
lms/static/sass/views/_homepage.scss
View File

@@ -1,11 +1,11 @@
// 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 {

4
lms/templates/course.html
View File

@@ -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>

38
lms/templates/courseware/courses.html
View File

@@ -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:

4
lms/templates/discovery/result_item.underscore
View File

@@ -1,12 +1,12 @@
<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>

2
lms/templates/discovery/search_facets_list.underscore
View File

@@ -1,4 +1,4 @@
<h2>
<h2 class="header-search-facets">
<%= gettext('Refine your search') %>
</h2>
<section class="search-facets-lists">

2
lms/templates/discovery/search_facets_section.underscore
View File

@@ -1,4 +1,4 @@
<h3>
<h3 class="header-facet">
<%= displayName %>
</h3>
<ul data-facet="<%= name %>" class="facet-list collapse">

10
lms/templates/navigation.html
View File

@@ -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>