Merge pull request #16444 from edx/responsive-header-cleanup

Cleaning up mobile web.

common/lib/xmodule/xmodule/css/sequence/display.scss

@@ -4,7 +4,7 @@ $seq-nav-link-color: $link-color !default;
 $seq-nav-icon-color: rgb(10, 10, 10) !default;
 $seq-nav-icon-color-muted: rgb(90, 90, 90) !default;
 $seq-nav-tooltip-color: rgb(51, 51, 51) !default;
-$seq-nav-height: 44px;
+$seq-nav-height: 50px;
 
 // repeated extends - needed since LMS styling was referenced
 .block-link {
@@ -162,7 +162,7 @@ $seq-nav-height: 44px;
 
           @extend %ui-depth2;
 
-          margin-top: ($baseline/5);
+          margin-top: 12px;
           background: $seq-nav-tooltip-color;
           color: $white;
           font-family: $font-family-sans-serif;
@@ -223,7 +223,7 @@ $seq-nav-height: 44px;
   font-weight: normal;
   padding: 0;
   white-space: nowrap;
-  overflow-x: scroll;
+  overflow-x: hidden;
 
   @include media-breakpoint-up(md) {
     min-width: 120px;

common/static/sass/edx-pattern-library-shims/_breadcrumbs.scss

@@ -12,13 +12,23 @@
 
     display: inline-block;
 
-    @include media-breakpoint-down(md) {
-      max-width: 60px;
+    @include media-breakpoint-down(lg) {
+      max-width: 240px;
+    }
+
+    @include media-breakpoint-down(sm) {
+      max-width: 140px;
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
     }
 
+    @include media-breakpoint-down(xs) {
+      &:not(:first-child) {
+        max-width: 60px;
+      }
+    }
+
     &.nav-item-course {
       max-width: none;
     }
@@ -36,7 +46,7 @@
   .fa-angle-right {
     @include margin-left($baseline/4);
 
-    @include media-breakpoint-down(md) {
+    @include media-breakpoint-down(sm) {
       position: relative;
       top: -5px;
     }

lms/static/sass/bootstrap/_layouts.scss

@@ -65,7 +65,7 @@
   }
 
   .form-actions {
-    @include media-breakpoint-down(xs) {
+    @include media-breakpoint-down(sm) {
       margin-top: $baseline/2;
     }
   }
@@ -90,6 +90,14 @@
       }
     }
   }
+
+  @include media-breakpoint-down(sm) {
+    padding: $baseline;
+
+    .page-header-search {
+      width: 100%;
+    }
+  }
 }
 
 .page-content-container {
@@ -102,6 +110,7 @@
 .page-content {
   padding: $baseline*2;
 
+  // Adjust styles for desktop sized screens
   @include media-breakpoint-up(md) {
     display: flex;
 
@@ -115,4 +124,17 @@
       margin-left: $baseline*2;
     }
   }
+
+  // Override styles for tablet sized screens
+  @include media-breakpoint-only(md) {
+    .page-content-secondary {
+      min-width: 250px;
+      max-width: 250px;
+    }
+  }
+
+  // Adjust styles for phone sized screens
+  @include media-breakpoint-down(sm) {
+    padding: $baseline;
+  }
 }

lms/static/sass/course/instructor/_instructor_2.scss

@@ -284,7 +284,6 @@
   .instructor-nav {
     @extend %ui-no-list;
 
-    border-top: 1px solid $gray-l3;
     border-bottom: 1px solid $gray-l3;
 
     .nav-item {
@@ -301,11 +300,11 @@
 
         &:hover,
         &:focus {
-          background: $gray-l5 !important;
+          border-bottom: 3px solid theme-color("primary");
         }
 
         &.active-section {
-          background: $gray-l5;
+          border-bottom: 3px solid theme-color("primary");
           color: $black;
         }
       }

lms/static/sass/course/layout/_courseware_preview.scss

@@ -3,7 +3,7 @@
 
   margin: 0 auto;
   padding: ($baseline*0.75);
-  background-color: $lms-preview-menu-color;
+  background-color: theme-color("primary");
   box-sizing: border-box;
 
   @media print {
@@ -31,6 +31,7 @@
         display: inline-block;
         margin-bottom: 0;
         vertical-align: middle;
+        color: theme-color("inverse");
       }
 
       .action-preview-select {

lms/static/sass/course/modules/_calculator.scss

@@ -4,7 +4,7 @@
 .calc-main {
   @extend %ui-print-excluded;
 
-  bottom: -126px;
+  bottom: -129px;
   left: 0;
   position: fixed;
 

lms/static/sass/discussion/views/_search.scss

 .forum-search {
-  @include margin-left($baseline);
-
   display: flex;
+  width: 100%;
+  margin-top: $baseline;
 
   .search-input {
     width: input-width(short);
@@ -10,4 +10,10 @@
   .search-button {
     margin-left: 0;
   }
+
+  @include media-breakpoint-up(sm) {
+    @include margin-left($baseline);
+
+    margin-top: 0;
+  }
 }

lms/static/sass/elements/_navigation.scss

@@ -120,7 +120,7 @@
   // +case - calculator spacing (needed for overriding calculator positioning)
   // --------------------
   &.has-utility-calculator {
-    @include right($baseline*2.50);
+    @include right($baseline*2.75);
   }
 }
 

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

@@ -279,6 +279,13 @@
       margin-top: ($baseline / 5);
     }
   }
+
+  @include media-breakpoint-down(sm) {
+    @include padding-left(0);
+
+    border-top: 1px solid theme-color("light");
+    padding-top: $baseline;
+  }
 }
 
 // Course outline
@@ -480,6 +487,7 @@
       top: $baseline * (-1/2);
       right: $baseline / 2;
       cursor: pointer;
+      background-color: theme-color("primary");
     }
   }
 

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

@@ -110,6 +110,8 @@
   .window-wrap,
   .content-wrapper {
     background-color: $body-bg;
+    padding: 0;
+    margin-top: 0;
   }
 
   .page-banner {
@@ -119,6 +121,7 @@
     .user-messages {
       max-width: map-get($container-max-widths, xl);
       margin: auto;
+      padding: $baseline/2;
     }
   }
 
@@ -265,7 +268,7 @@
       margin: 0 auto;
       border-bottom: 1px solid $gray-l3;
       background-color: $gray-l4;
-      padding: ($baseline*0.75) 0;
+      padding: ($baseline*0.75) 5%;
 
       .u-field-account_privacy {
         @extend .container;
@@ -273,6 +276,7 @@
         border: none;
         box-shadow: none;
         padding: 0;
+        margin: 0;
 
         @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
           max-width: calc(100% - 40px);
@@ -311,11 +315,11 @@
 
   .wrapper-profile-sections {
     @extend .container;
-
-    @include padding($baseline*1.5, 0, $baseline*1.5, 0);
+    @include padding($baseline*1.5, 5%, $baseline*1.5, 5%);
 
     display: flex;
     min-width: 0;
+    max-width: 100%;
 
     @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
       @include margin-left(0);
@@ -327,11 +331,7 @@
   .profile-header {
     max-width: map-get($container-max-widths, xl);
     margin: auto;
-    padding: $baseline 0 0;
-
-    @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
-      @include padding(0, $baseline*2, $baseline, $baseline*0.75);
-    }
+    padding: $baseline 5% 0;
 
     .header {
       @extend %t-title4;
@@ -347,8 +347,7 @@
 
   .wrapper-profile-section-container-one {
     @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
-      width: 90%;
-      padding: 0 5%;
+      width: 100%;
     }
 
     .wrapper-profile-section-one {
@@ -481,7 +480,7 @@
     @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
       width: 90%;
       margin-top: $baseline;
-      padding: 0 5%;
+      padding: 0;
     }
 
     .u-field-textarea {

lms/static/sass/multicourse/_dashboard.scss

@@ -150,12 +150,10 @@
             }
 
             .course-info {
-              display: block;
-
               @include float(left);
 
+              display: block;
               padding: 0;
-              margin-top: $baseline;
 
               [class*="info-"] {
                 color: $gray-d1;
@@ -183,6 +181,21 @@
             // Responsive behavior
             @include media-breakpoint-down(sm) {
               width: 100%;
+              display: flex;
+              flex-direction: column;
+
+              .course-info,
+              .wrapper-course-actions {
+                flex-grow: 1;
+
+                .action {
+                  @include margin-right(0);
+                }
+
+                .wrapper-action-more {
+                  padding-top: 3px;
+                }
+              }
             }
           }
 
@@ -786,6 +799,7 @@
     // TYPE: status
     &.message-status {
       border-color: $gray-l4;
+      margin-bottom: 0;
 
       .wrapper-message-primary {
         @include clearfix();
@@ -1001,9 +1015,8 @@
 
     &.message-related-programs {
       background: none;
-      margin-top: ($baseline/4);
-      margin-bottom: $baseline/2;
-      padding: 0;
+      padding: $baseline/2;
+      margin-bottom: 0;
 
       .related-programs-preface {
         @include float(left);

lms/static/sass/shared-v2/_components.scss

@@ -149,7 +149,7 @@
 
   margin: 0 auto;
   padding: ($baseline*0.75) ($baseline*2);
-  background-color: $lms-preview-menu-color;
+  background-color: theme-color("primary");
 
   @media print {
     display: none;
@@ -176,6 +176,7 @@
         display: inline-block;
         margin-bottom: 0;
         vertical-align: middle;
+        color: theme-color("inverse");
       }
 
       .action-preview-select {

lms/static/sass/shared-v2/_help-tab.scss

@@ -20,7 +20,7 @@
   @include transform-origin(0 0);
 
   z-index: z-index(front);
-  top: 250px;
+  bottom: $baseline;
   left: 0;
   position: fixed;
 

lms/static/sass/shared/_help-tab.scss

@@ -24,7 +24,7 @@
   transform: rotate(-90deg);
   transform-origin: top left;
   position: fixed;
-  top: 250px;
+  bottom: $baseline;
   left: 0;
 
   a:link,

lms/static/sass/views/_program-list.scss

 .program-list-wrapper {
-  padding: $baseline;
+
+  @include media-breakpoint-up(sm) {
+    padding: $baseline;
+  }
 }
 
 .program-cards-container {
   @include grid-container();
   @include span(12);
 
-  @media (min-width: $bp-screen-md) {
+  @include media-breakpoint-up(sm) {
     @include span(9);
   }
 }
@@ -17,7 +20,7 @@
 
   margin-bottom: $baseline;
 
-  @media (min-width: $bp-screen-md) {
+  @include media-breakpoint-up(sm) {
     @include span(3);
   }
 

lms/templates/header/user_dropdown.html

@@ -32,7 +32,7 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_
         <span class="fa fa-caret-down" aria-hidden="true"></span>
     </div>
     <div class="dropdown-user-menu hidden" aria-label=${_("More Options")} role="menu" id="user-menu" tabindex="-1">
-        <div class="dropdown-item dropdown-nav-item"><a href="${reverse('dashboard')}" role="menuitem">${_("Dashboard")}</a></div>
+        <div class="mobile-nav-item dropdown-item dropdown-nav-item"><a href="${reverse('dashboard')}" role="menuitem">${_("Dashboard")}</a></div>
         <div class="mobile-nav-item dropdown-item dropdown-nav-item"><a href="${reverse('account_settings')}" role="menuitem">${_("Account")}</a></div>
         <div class="mobile-nav-item dropdown-item dropdown-nav-item"><a href="${reverse('logout')}" role="menuitem">${_("Sign Out")}</a></div>
     </div>

lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html

@@ -109,12 +109,6 @@ from openedx.core.djangolib.markup import HTML
             %endif
           </div>
 
-          %if analytics_dashboard_message:
-            <div class="wrapper-msg urgency-low is-shown">
-                <p>${analytics_dashboard_message}</p>
-            </div>
-          %endif
-
         ## links which are tied to idash-sections below.
         ## the links are activated and handled in instructor_dashboard.coffee
         ## when the javascript loads, it clicks on the first section

lms/templates/wiki/base.html

@@ -35,6 +35,8 @@
     }
   </script>
 
+  {% comment %} The wiki page does not use the main.html template {% endcomment %}
+  <script type="text/javascript" src="{% static 'js/header/header.js' %}"></script>
 
   {% addtoblock 'js' %}
     {% comment %} These scripts load at the bottom of the body {% endcomment %}