Merge PR #24749 open-craft/shimulch/styling-update-to-existing-course-content-search-page

* Commits:
  Styling Update to Existing Course Content Search Page

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

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

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

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
                 });
             },
 

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>

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 ) { %>