diff --git a/lms/static/sass/features/_course-search.scss b/lms/static/sass/features/_course-search.scss
index d9cbc8b74b8c55ac8ac7f67ed5cfc0a66791da2a..0697247336b2f907182d30ca9f84c871cd849729 100644
--- a/lms/static/sass/features/_course-search.scss
+++ b/lms/static/sass/features/_course-search.scss
@@ -2,6 +2,9 @@
.search-results {
flex-grow: 1;
+ max-width: 680px;
+ margin-left: auto;
+ margin-right: auto;
.search-result-list {
list-style: none;
@@ -13,8 +16,9 @@
.search-results-title {
display: inline-block;
color: black;
- font-size: 1.5rem;
+ font-size: 0.875rem;
line-height: 1.5;
+ font-weight: 600;
}
.search-count {
@@ -27,21 +31,23 @@
.search-results-item {
position: relative;
border-top: 1px solid $border-color;
- padding: $baseline ($baseline/2);
+ border-left: 1px solid $border-color;
+ border-right: 1px solid $border-color;
+ padding: $baseline;
list-style-type: none;
cursor: pointer;
+ display: flex;
+ flex-direction: row;
+
&:last-child {
border-bottom: 1px solid $border-color;
}
-
- &:hover {
- background: theme-color("lightest");
- }
}
.result-excerpt {
- display: inline-block;
+ display: block;
+ font-size: 0.875rem;
}
.result-location {
@@ -52,18 +58,14 @@
}
.result-link {
- @include float(right);
- @include padding-left($baseline/4);
-
line-height: 1.6em;
+ display: block;
}
.result-type {
- @include right($baseline/2);
-
- position: absolute;
color: theme-color("dark");
- font-size: 14px;
+ font-size: 1rem;
+ margin-right: $baseline;
bottom: $baseline;
}
diff --git a/openedx/features/course_search/static/course_search/js/spec/course_search_spec.js b/openedx/features/course_search/static/course_search/js/spec/course_search_spec.js
index edcf323421da00fd375705be605fe6cd97b3f00c..9aa6a58dd59f510a394e4186dc8c6c284052cb26 100644
--- a/openedx/features/course_search/static/course_search/js/spec/course_search_spec.js
+++ b/openedx/features/course_search/static/course_search/js/spec/course_search_spec.js
@@ -252,18 +252,18 @@ define([
expect(this.item.$el).toHaveAttr('role', 'region');
expect(this.item.$el).toHaveAttr('aria-label', 'search result');
expect(this.item.$el).toContainElement('a[href="' + this.model.get('url') + '"]');
- expect(this.item.$el.find('.result-type')).toContainHtml(this.model.get('content_type'));
+ expect(this.item.$el.find('.result-type i')).toHaveClass('fa-' + this.item.unitIcon());
expect(this.item.$el.find('.result-excerpt')).toContainHtml(this.model.get('excerpt'));
- expect(this.item.$el.find('.result-location')).toContainHtml('section â–¸ subsection â–¸ unit');
+ expect(this.item.$el.find('.result-link')).toContainHtml('section / subsection / unit');
});
it('rendersSequentialItem', function() {
expect(this.seqItem.$el).toHaveAttr('role', 'region');
expect(this.seqItem.$el).toHaveAttr('aria-label', 'search result');
expect(this.seqItem.$el).toContainElement('a[href="' + this.seqModel.get('url') + '"]');
- expect(this.seqItem.$el.find('.result-type')).toBeEmpty();
+ expect(this.seqItem.$el.find('.result-type i')).toHaveClass('fa-' + this.seqItem.unitIcon());
expect(this.seqItem.$el.find('.result-excerpt')).toBeEmpty();
- expect(this.seqItem.$el.find('.result-location')).toContainHtml('section â–¸ subsection');
+ expect(this.seqItem.$el.find('.result-link')).toContainHtml('section / subsection');
});
it('logsSearchItemViewEvent', function() {
@@ -389,13 +389,16 @@ define([
this.resultsView.render();
expect(this.resultsView.$el.find('ol')[0]).toExist();
expect(this.resultsView.$el.find('li').length).toEqual(1);
- expect(this.resultsView.$el).toContainHtml('Search Results');
+ expect(this.resultsView.$el).toContainHtml(
+ this.collection.totalCount +
+ ' result found for "' +
+ this.collection.searchTerm + '"'
+ );
expect(this.resultsView.$el).toContainHtml('this is a short excerpt');
this.collection.set(searchResults);
this.collection.totalCount = 2;
this.resultsView.renderNext();
- expect(this.resultsView.$el.find('.search-count')).toContainHtml('2');
expect(this.resultsView.$el.find('li').length).toEqual(2);
}
@@ -446,6 +449,7 @@ define([
});
this.collection = new MockCollection();
+ this.collection.searchTerm = 'demo';
this.resultsView = new SearchResultsView({collection: this.collection});
}
diff --git a/openedx/features/course_search/static/course_search/js/views/search_item_view.js b/openedx/features/course_search/static/course_search/js/views/search_item_view.js
index cfd050a5a83ab8180231f05e67ea16e346e114fe..6a2ad60733d61b19115cc1541c6571bab6178168 100644
--- a/openedx/features/course_search/static/course_search/js/views/search_item_view.js
+++ b/openedx/features/course_search/static/course_search/js/views/search_item_view.js
@@ -26,6 +26,25 @@
this.template = options.template;
},
+ unitIcon: function() {
+ var icon = null;
+ switch (this.model.attributes.content_type) {
+ case 'Video':
+ icon = 'film';
+ break;
+ case 'CAPA':
+ icon = 'edit';
+ break;
+ case 'Sequence':
+ icon = 'compass';
+ break;
+ default:
+ icon = 'book';
+ break;
+ }
+ return icon;
+ },
+
render: function() {
var data = _.clone(this.model.attributes);
@@ -35,6 +54,7 @@
data.excerpt = '';
data.content_type = '';
}
+ data.unit_icon = this.unitIcon();
data.excerptHtml = HtmlUtils.HTML(data.excerpt);
delete data.excerpt;
HtmlUtils.setHtml(this.$el, HtmlUtils.template(this.template)(data));
diff --git a/openedx/features/course_search/static/course_search/js/views/search_results_view.js b/openedx/features/course_search/static/course_search/js/views/search_results_view.js
index 990d3f8635a88cd20b39e9172cad0af5823312a0..ecce90d18174bfcbd009bd1bfa1b8f400a73f404 100644
--- a/openedx/features/course_search/static/course_search/js/views/search_results_view.js
+++ b/openedx/features/course_search/static/course_search/js/views/search_results_view.js
@@ -32,7 +32,8 @@
totalCount: this.collection.totalCount,
totalCountMsg: this.totalCountMsg(),
pageSize: this.collection.pageSize,
- hasMoreResults: this.collection.hasNextPage()
+ hasMoreResults: this.collection.hasNextPage(),
+ searchTerm: this.collection.searchTerm
}));
this.renderItems();
this.$el.find(this.spinner).hide();
@@ -64,9 +65,14 @@
},
totalCountMsg: function() {
- var fmt = ngettext('{total_results} result', '{total_results} results', this.collection.totalCount);
+ var fmt = ngettext(
+ '{total_results} result found for "{search_term}"',
+ '{total_results} results found for "{search_term}"',
+ this.collection.totalCount
+ );
return StringUtils.interpolate(fmt, {
- total_results: this.collection.totalCount
+ total_results: this.collection.totalCount,
+ search_term: this.collection.searchTerm
});
},
diff --git a/openedx/features/course_search/static/course_search/templates/course_search_item.underscore b/openedx/features/course_search/static/course_search/templates/course_search_item.underscore
index db74c00fed5bbd2b414b01bbcd3bd6c8901140e6..99f14cd218dc87e8e3dfeaaa776a3323bfe9d23c 100644
--- a/openedx/features/course_search/static/course_search/templates/course_search_item.underscore
+++ b/openedx/features/course_search/static/course_search/templates/course_search_item.underscore
@@ -1,4 +1,7 @@
-<div class="result-excerpt"><%= HtmlUtils.ensureHtml(excerptHtml) %></div>
-<a class="result-link" href="<%- url %>"><%- gettext("View") %> <span class="icon fa fa-arrow-right" aria-hidden="true"></span></a>
-<span class="result-location"><%- location.join(' â–¸ ') %></span>
-<span class="result-type"><%- content_type %></span>
+<div class="result-type">
+ <i class="fa fa-<%- unit_icon %>"></i>
+</div>
+<div class="result-info">
+ <a class="result-link" href="<%- url %>"><%- location.join(' / ') %></a>
+ <div class="result-excerpt"><%= HtmlUtils.ensureHtml(excerptHtml) %></div>
+</div>
diff --git a/openedx/features/course_search/static/course_search/templates/course_search_results.underscore b/openedx/features/course_search/static/course_search/templates/course_search_results.underscore
index f12b136ab0bbaabb55d44d7c1120219a1ecfd84d..78040fc9b1cf4fcb25c8857665bde16ec3a35bd6 100644
--- a/openedx/features/course_search/static/course_search/templates/course_search_results.underscore
+++ b/openedx/features/course_search/static/course_search/templates/course_search_results.underscore
@@ -1,6 +1,5 @@
<div class="search-info">
- <h2 class="search-results-title"><%- gettext("Search Results") %></h2>
- <div class="search-count"><%- totalCountMsg %></div>
+ <h2 class="search-results-title"><%- totalCountMsg %></h2>
</div>
<% if (totalCount > 0 ) { %>