Merge pull request #16306 from edx/HarryRein/responsive-dashboard

Harry rein/responsive dashboard

common/djangoapps/terrain/steps.py

@@ -53,12 +53,12 @@ def i_visit_the_homepage(step):
 @step(u'I (?:visit|access|open) the dashboard$')
 def i_visit_the_dashboard(step):
     world.visit('/dashboard')
-    assert world.is_css_present('.container.dashboard')
+    assert world.is_css_present('.dashboard')
 
 
 @step('I should be on the dashboard page$')
 def i_should_be_on_the_dashboard(step):
-    assert world.is_css_present('.container.dashboard')
+    assert world.is_css_present('.dashboard')
     assert 'Dashboard' in world.browser.title
 
 
@@ -166,7 +166,7 @@ def i_am_logged_in(step):
     world.create_user('robot', 'test')
     world.log_in(username='robot', password='test')
     world.browser.visit(lettuce.django.django_url('/'))
-    dash_css = '.container.dashboard'
+    dash_css = '.dashboard'
     assert world.is_css_present(dash_css)
 
 

lms/djangoapps/courseware/features/registration.py

@@ -11,7 +11,7 @@ def i_register_for_the_course(_step, course):
     url = django_url('courses/%s/about' % world.scenario_dict['COURSE'].id.to_deprecated_string())
     world.browser.visit(url)
     world.css_click('.intro a.register')
-    assert world.is_css_present('.container.dashboard')
+    assert world.is_css_present('.dashboard')
 
 
 @step('I register to audit the course$')
@@ -27,7 +27,7 @@ def i_register_to_audit_the_course(_step):
         ignored_exceptions=AttributeError
     )
     time.sleep(1)
-    assert world.is_css_present('.container.dashboard')
+    assert world.is_css_present('.dashboard')
 
 
 @step(u'I should see an empty dashboard message')

lms/static/sass/_header.scss

@@ -20,14 +20,14 @@
 
     a {
       @include float(left);
-      @include margin($baseline/2, 0, 0, $baseline);
+      @include margin($baseline*0.75, 0, 0, $baseline*2);
 
       display: block;
 
       .logo {
         @include float(left);
 
-        width: $header-logo-width;
+        height: $header-logo-height;
       }
 
       @include media-breakpoint-down(sm) {
@@ -90,7 +90,7 @@
 
           a {
             color: theme-color("secondary");
-            padding: $baseline*0.35 $baseline*1.25 $baseline*0.75;
+            padding: $baseline*0.35 $baseline*1.25 $baseline;
             font-weight: $font-weight-normal;
             display: inline-block;
             margin-bottom: -1*$baseline/2;
@@ -112,8 +112,7 @@
 
       .secondary {
         @include float(right);
-
-        margin: $baseline*0.6 $baseline 0 0;
+        @include margin($baseline*0.75, $baseline*2, 0, 0);
 
         // All navigation items
         .nav-item {
@@ -230,7 +229,7 @@
     .hamburger-menu {
       @include left(22px);
       position: absolute;
-      top: $baseline;
+      top: $baseline*1.25;
       width: 30px;
       height: 20px;
       -webkit-transform: rotate(0deg);

lms/static/sass/features/_course-search.scss

@@ -23,8 +23,6 @@
   }
 
   .search-results-item {
-    @include padding-right(140px);
-
     position: relative;
     border-top: 1px solid $border-color;
     padding: $baseline ($baseline/2);
@@ -52,10 +50,9 @@
   }
 
   .result-link {
-    @include right($baseline/2);
+    @include float(right);
+    @include padding-left($baseline/4);
 
-    position: absolute;
-    top: $baseline;
     line-height: 1.6em;
   }
 

lms/static/sass/features/_learner-profile.scss

@@ -273,6 +273,11 @@
         border: none;
         box-shadow: none;
         padding: 0;
+
+        @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
+          max-width: calc(100% - 40px);
+          min-width: auto;
+        }
       }
 
       .u-field-title {

lms/static/sass/search/_search.scss

@@ -81,8 +81,6 @@
   }
 
   .search-results-item {
-    @include padding-right(140px);
-
     position: relative;
     border-bottom: 1px solid $gray-l4;
     padding: $baseline ($baseline/2);
@@ -119,12 +117,10 @@
     }
 
     .result-link {
-      @include right($baseline/2);
+      @include float(right);
+      @include padding-left($baseline/4);
 
-      position: absolute;
-      top: $baseline;
       line-height: 1.6em;
-      text-transform: uppercase;
     }
 
     .search-results-ellipsis {
@@ -155,12 +151,8 @@
 
 
 .dashboard-search-bar  {
-  @include float(right);
-  @include margin-left(flex-gutter());
-
-  margin-bottom: $baseline;
-  padding: 0;
-  width: flex-grid(3);
+  margin: 0 0 $baseline;
+  display: block;
 
   label {
     @extend %t-regular;
@@ -181,12 +173,8 @@
 }
 
 .dashboard-search-results {
-  @include float(left);
-
-  margin: 0;
+  margin: 0 0 $baseline;
   padding: 0;
-  width: flex-grid(9);
-  min-height: 300px;
 
   .search-info {
     padding-bottom: lh(1.75);

lms/templates/dashboard.html

@@ -102,7 +102,9 @@ from openedx.core.djangolib.markup import HTML, Text
 </div>
 
 <main id="main" aria-label="Content" tabindex="-1">
-    <div class="container dashboard" id="dashboard-main">
+    <div class="dashboard" id="dashboard-main">
+
+      <div class="main-container">
         <div class="my-courses" id="my-courses">
           <%include file="learner_dashboard/_dashboard_navigation_courses.html"/>
 
@@ -160,7 +162,8 @@ from openedx.core.djangolib.markup import HTML, Text
             </div>
           % endif
         </div>
-
+      </div>
+      <div class="side-container">
         %if sidebar_account_activation_message:
           <div class="sidebar-notification">
             ${sidebar_account_activation_message | n, decode.utf8}
@@ -182,9 +185,6 @@ from openedx.core.djangolib.markup import HTML, Text
               </div>
             </form>
           </div>
-      % endif
-
-      % if settings.FEATURES.get('ENABLE_DASHBOARD_SEARCH'):
           <div id="dashboard-search-results" class="search-results dashboard-search-results"></div>
         % endif
 
@@ -212,6 +212,7 @@ from openedx.core.djangolib.markup import HTML, Text
           </div>
         % endif
       </div>
+    </div>
 </main>
 
 <div id="email-settings-modal" class="modal" aria-hidden="true">

openedx/features/course_search/static/course_search/js/spec/course_search_spec.js

@@ -351,23 +351,18 @@ define([
         describe('SearchResultsView', function() {
             function showsLoadingMessage() {
                 this.resultsView.showLoadingMessage();
-                expect(this.resultsView.$contentElement).toBeHidden();
                 expect(this.resultsView.$el).toBeVisible();
                 expect(this.resultsView.$el).not.toBeEmpty();
             }
 
             function showsErrorMessage() {
                 this.resultsView.showErrorMessage();
-                expect(this.resultsView.$contentElement).toBeHidden();
                 expect(this.resultsView.$el).toBeVisible();
                 expect(this.resultsView.$el).not.toBeEmpty();
             }
 
             function returnsToContent() {
                 this.resultsView.clear();
-                expect(this.resultsView.$contentElement).toHaveCss({
-                    display: this.contentElementDisplayValue
-                });
                 expect(this.resultsView.$el).toBeHidden();
                 expect(this.resultsView.$el).toBeEmpty();
             }
@@ -484,16 +479,6 @@ define([
                 it('shows a link to load more results', showsMoreResultsLink);
                 it('triggers an event for next page', triggersNextPageEvent);
                 it('shows a spinner when loading more results', showsLoadMoreSpinner);
-                it('returns back to courses', function() {
-                    var onReset = jasmine.createSpy('onReset');
-                    this.resultsView.on('reset', onReset);
-                    this.resultsView.render();
-                    expect(this.resultsView.$el.find('a.search-back-to-courses')).toExist();
-                    this.resultsView.$el.find('.search-back-to-courses').click();
-                    expect(onReset).toHaveBeenCalled();
-                    expect(this.resultsView.$contentElement).toBeVisible();
-                    expect(this.resultsView.$el).toBeHidden();
-                });
             });
         });
 
@@ -502,9 +487,6 @@ define([
             function showsLoadingMessage() {
                 $('.search-field').val('search string');
                 $('.search-button').trigger('click');
-                if (this.$contentElement) {
-                    expect(this.$contentElement).toBeHidden();
-                }
                 expect(this.$searchResults).toBeVisible();
                 expect(this.$searchResults).not.toBeEmpty();
             }
@@ -556,13 +538,11 @@ define([
                 $('.cancel-button').trigger('click');
                 AjaxHelpers.skipResetRequest(requests);
                 // there should be no results
-                expect(this.$contentElement).toHaveCss({display: this.contentElementDisplayValue});
                 expect(this.$searchResults).toBeHidden();
             }
 
             function clearsResults() {
                 $('.cancel-button').trigger('click');
-                expect(this.$contentElement).toHaveCss({display: this.contentElementDisplayValue});
                 expect(this.$searchResults).toBeHidden();
             }
 
@@ -636,7 +616,6 @@ define([
                     DashboardSearchFactory();
 
                     spyOn(Backbone.history, 'navigate');
-                    this.$contentElement = $('#my-courses');
                     this.contentElementDisplayValue = 'block';
                     this.$searchResults = $('.search-results');
                 });
@@ -670,9 +649,7 @@ define([
                             }
                         }]
                     });
-                    expect($('.search-back-to-courses')).toExist();
-                    $('.search-back-to-courses').trigger('click');
-                    expect(this.$contentElement).toBeVisible();
+                    $('.search-form .cancel-button').trigger('click');
                     expect(this.$searchResults).toBeHidden();
                     expect(this.$searchResults).toBeEmpty();
                 });

openedx/features/course_search/static/course_search/js/views/dashboard_search_results_view.js

@@ -12,12 +12,10 @@
     ) {
         return SearchResultsView.extend({
             el: '.search-results',
-            contentElement: '#my-courses, #profile-sidebar',
             resultsTemplate: dashboardSearchResultsTemplate,
             itemTemplate: dashboardSearchItemTemplate,
             events: {
                 'click .search-load-next': 'loadNext',
-                'click .search-back-to-courses': 'backToCourses'
             },
 
             backToCourses: function() {

openedx/features/course_search/static/course_search/templates/dashboard_search_results.underscore

 <header class="search-info">
-    <a class="search-back-to-courses" href="#"><%- gettext("Back to Dashboard") %></a>
     <h2><%- gettext("Search Results") %></h2>
     <div class="search-count"><%- totalCountMsg %></div>
 </header>

themes/edx.org/lms/templates/dashboard.html

@@ -102,8 +102,8 @@ from openedx.core.djangoapps.theming import helpers as theming_helpers
 
 </div>
 
-<section class="container dashboard" id="dashboard-main">
-<main id="main" aria-label="Content" tabindex="-1">
+<section class="dashboard" id="dashboard-main">
+<main class="main-container" id="main" aria-label="Content" tabindex="-1">
   <section class="my-courses" id="my-courses">
     <header class="wrapper-header-courses">
       <h2 class="header-courses">${_("My Courses")}</h2>
@@ -159,7 +159,7 @@ from openedx.core.djangoapps.theming import helpers as theming_helpers
     % endif
   </section>
 </main>
-
+<div class="side-container">
   %if sidebar_account_activation_message:
     <div class="sidebar-notification">
       ${sidebar_account_activation_message | n, decode.utf8}
@@ -181,9 +181,6 @@ from openedx.core.djangoapps.theming import helpers as theming_helpers
         </div>
       </form>
     </div>
-  % endif
-
-  % if settings.FEATURES.get('ENABLE_DASHBOARD_SEARCH'):
     <section id="dashboard-search-results" class="search-results dashboard-search-results"></section>
   % endif
 
@@ -226,6 +223,7 @@ from openedx.core.djangoapps.theming import helpers as theming_helpers
       </section>
     </section>
   % endif
+</div>
 </section>
 
 <section id="email-settings-modal" class="modal" aria-hidden="true">