Merge pull request #11035 from edx/usman/bookmarks-layout-issues

Layout fixes required due to styling changes.

common/test/acceptance/tests/lms/test_bookmarks.py

@@ -213,7 +213,7 @@ class BookmarksTest(BookmarksTestMixin):
         """
         self.bookmarks_page.click_bookmarks_button()
         self.assertTrue(self.bookmarks_page.results_present())
-        self.assertEqual(self.bookmarks_page.results_header_text(), 'MY BOOKMARKS')
+        self.assertEqual(self.bookmarks_page.results_header_text(), 'My Bookmarks')
 
     def _verify_breadcrumbs(self, num_units, modified_name=None):
         """
@@ -285,7 +285,7 @@ class BookmarksTest(BookmarksTestMixin):
         self._test_setup()
         self.assertTrue(self.bookmarks_page.bookmarks_button_visible())
         self.bookmarks_page.click_bookmarks_button()
-        self.assertEqual(self.bookmarks_page.results_header_text(), 'MY BOOKMARKS')
+        self.assertEqual(self.bookmarks_page.results_header_text(), 'My Bookmarks')
         self.assertEqual(self.bookmarks_page.empty_header_text(), 'You have not bookmarked any courseware pages yet.')
 
         empty_list_text = ("Use bookmarks to help you easily return to courseware pages. To bookmark a page, "

lms/static/js/bookmarks/views/bookmarks_list.js

@@ -13,6 +13,7 @@
 
             el: '.courseware-results',
             coursewareContentEl: '#course-content',
+            coursewareResultsWrapperEl: '.courseware-results-wrapper',
 
             errorIcon: '<i class="fa fa-fw fa-exclamation-triangle message-error" aria-hidden="true"></i>',
             loadingIcon: '<i class="fa fa-fw fa-spinner fa-pulse message-in-progress" aria-hidden="true"></i>',
@@ -97,8 +98,9 @@
             },
 
             hideBookmarks: function () {
-              this.$el.hide();
-              $(this.coursewareContentEl).show();
+                this.$el.hide();
+                $(this.coursewareResultsWrapperEl).hide();
+                $(this.coursewareContentEl).css('display', 'table-cell');
             },
 
             showBookmarksContainer: function () {
@@ -106,6 +108,7 @@
                 // Empty el if it's not empty to get the clean state.
                 this.$el.html('');
                 this.$el.show();
+                $(this.coursewareResultsWrapperEl).css('display', 'table-cell');
             },
 
             showLoadingMessage: function () {

lms/static/js/search/base/views/search_results_view.js

@@ -37,8 +37,7 @@ define([
             }));
             this.renderItems();
             this.$el.find(this.spinner).hide();
-            this.$contentElement.hide();
-            this.$el.show();
+            this.showResults();
             return this;
         },
 
@@ -71,17 +70,20 @@ define([
             this.$contentElement.show();
         },
 
-        showLoadingMessage: function () {
-            this.doCleanup();
-            this.$el.html(this.loadingTemplate());
+        showResults: function() {
             this.$el.show();
             this.$contentElement.hide();
         },
 
+        showLoadingMessage: function () {
+            this.doCleanup();
+            this.$el.html(this.loadingTemplate());
+            this.showResults();
+        },
+
         showErrorMessage: function () {
             this.$el.html(this.errorTemplate());
-            this.$el.show();
-            this.$contentElement.hide();
+            this.showResults();
         },
 
         doCleanup: function () {

lms/static/js/search/course/views/search_results_view.js

@@ -10,13 +10,25 @@ define([
 
         el: '.courseware-results',
         contentElement: '#course-content',
+        coursewareResultsWrapperElement: '.courseware-results-wrapper',
         resultsTemplateId: '#course_search_results-tpl',
         loadingTemplateId: '#search_loading-tpl',
         errorTemplateId: '#search_error-tpl',
         events: {
             'click .search-load-next': 'loadNext',
         },
-        SearchItemView: CourseSearchItemView
+        SearchItemView: CourseSearchItemView,
+
+        clear: function () {
+            SearchResultsView.prototype.clear.call(this);
+            $(this.coursewareResultsWrapperElement).hide();
+            this.$contentElement.css('display', 'table-cell');
+        },
+
+        showResults: function () {
+            SearchResultsView.prototype.showResults.call(this);
+            $(this.coursewareResultsWrapperElement).css('display', 'table-cell');
+        }
 
     });
 

lms/static/js/spec/search/search_spec.js

@@ -414,7 +414,7 @@ define([
 
             function returnsToContent () {
                 this.resultsView.clear();
-                expect(this.resultsView.$contentElement).toBeVisible();
+                expect(this.resultsView.$contentElement).toHaveCss({'display': this.contentElementDisplayValue});
                 expect(this.resultsView.$el).toBeHidden();
                 expect(this.resultsView.$el).toBeEmpty();
             }
@@ -518,6 +518,7 @@ define([
             describe('CourseSearchResultsView', function () {
                 beforeEach(function() {
                     beforeEachHelper.call(this, CourseSearchResultsView);
+                    this.contentElementDisplayValue = 'table-cell';
                 });
                 it('shows loading message', showsLoadingMessage);
                 it('shows error message', showsErrorMessage);
@@ -532,6 +533,7 @@ define([
             describe('DashSearchResultsView', function () {
                 beforeEach(function() {
                     beforeEachHelper.call(this, DashSearchResultsView);
+                    this.contentElementDisplayValue = 'block';
                 });
                 it('shows loading message', showsLoadingMessage);
                 it('shows error message', showsErrorMessage);
@@ -613,13 +615,13 @@ define([
                 $('.cancel-button').trigger('click');
                 AjaxHelpers.skipResetRequest(requests);
                 // there should be no results
-                expect(this.$contentElement).toBeVisible();
+                expect(this.$contentElement).toHaveCss({'display': this.contentElementDisplayValue});
                 expect(this.$searchResults).toBeHidden();
             }
 
             function clearsResults () {
                 $('.cancel-button').trigger('click');
-                expect(this.$contentElement).toBeVisible();
+                expect(this.$contentElement).toHaveCss({'display': this.contentElementDisplayValue});
                 expect(this.$searchResults).toBeHidden();
             }
 
@@ -682,6 +684,7 @@ define([
                     CourseSearchFactory(courseId);
                     spyOn(Backbone.history, 'navigate');
                     this.$contentElement = $('#course-content');
+                    this.contentElementDisplayValue = 'table-cell';
                     this.$searchResults = $('.courseware-results');
                 });
 
@@ -709,6 +712,7 @@ define([
 
                     spyOn(Backbone.history, 'navigate');
                     this.$contentElement = $('#my-courses');
+                    this.contentElementDisplayValue = 'block';
                     this.$searchResults = $('#dashboard-search-results');
                 });
 

lms/static/sass/course/courseware/_courseware.scss

@@ -100,6 +100,10 @@ html.video-fullscreen {
 .course-wrapper {
   position: relative;
 
+  .courseware-results-wrapper {
+    display: none;
+  }
+
   .course-content,
   .courseware-results-wrapper {
     @extend .content;