Merge pull request #16357 from edx/HarryRein/responsive-header-dashboard-fixes

Styling fixes for the dashboard and course header.

lms/djangoapps/courseware/testutils.py

@@ -33,7 +33,7 @@ class RenderXBlockTestMixin(object):
         '<ol class="tabs course-tabs"',
         '<footer id="footer-openedx"',
         '<div class="window-wrap"',
-        '<div class="preview-menu container"',
+        '<div class="preview-menu"',
         '<div class="container"',
     ]
 

lms/static/sass/_header.scss

@@ -30,28 +30,36 @@
         height: $header-logo-height;
       }
 
-      @include media-breakpoint-down(sm) {
-        margin-left: calc(50% - 30px);
+      @include media-breakpoint-down(md) {
+        @include margin-left(50%);
+
         height: $header-logo-height;
         width: auto;
+
+        .logo {
+          @include margin-left(-50%);
+        }
       }
     }
 
     .course-header {
       @include float(left);
-      @include margin($baseline*1.25, 0, 0, $baseline);
+      @include margin($baseline*0.8, 0, 0, $baseline);
 
-      font-size: $font-size-lg;
+      font-size: $font-size-sm;
       color: theme-color("dark");
       line-height: 1em;
       display: none;
 
-      .provider {
-        font-weight: $font-weight-bold;
+      .course-name {
+        display: block;
+        font-size: $font-size-base;
+        margin-top: 7px;
+        font-weight: 600;
       }
 
       // Hide the course header for smaller screen sizes
-      @include media-breakpoint-up(md) {
+      @include media-breakpoint-up(lg) {
         display: block;
       }
     }
@@ -64,7 +72,7 @@
     by the desktop styling
   */
   // Desktop styling
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(lg) {
     .nav-links {
       .nav-item {
         margin: 0 $baseline;
@@ -90,11 +98,11 @@
 
           a {
             color: theme-color("secondary");
-            padding: $baseline*0.35 $baseline*1.25 $baseline;
+            padding: $baseline*0.35 $baseline*1.25 19px;
             font-weight: $font-weight-normal;
             display: inline-block;
             margin-bottom: -1*$baseline/2;
-            border-bottom: 2px solid transparent;
+            border-bottom: 3px solid transparent;
             cursor: pointer;
 
             &.active,
@@ -121,9 +129,14 @@
           padding: $baseline/2 0 0;
           margin: 0 $baseline/2;
 
+          &.nav-item-dropdown {
+            padding: 0;
+            margin: 0;
+          }
+
           a {
             color: theme-color("dark");
-            font-weight: $font-weight-bold;
+            font-weight: $font-weight-normal;
           }
         }
 
@@ -173,6 +186,7 @@
 
         // Dropdown behavior
         .toggle-user-dropdown {
+          padding: $baseline/2;
           text-decoration: none;
           cursor: pointer;
         }
@@ -224,7 +238,7 @@
   }
 
   // Responsive styling for mobile
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     // Display the menu icon and allow for transition to an X on click
     .hamburger-menu {
       @include left(22px);
@@ -308,11 +322,11 @@
 .mobile-menu {
   border-bottom: 1px solid theme-color('primary');
 
-  @include media-breakpoint-up(md) {
+  @include media-breakpoint-up(lg) {
     display: none !important;
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     display: none;
 
     // Override standard styling for the mobile menu links
@@ -353,7 +367,7 @@
 
 // Hide elements in menu bar when they exist in mobile
 .hidden-mobile {
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(md) {
     &:not(.mobile-nav-link) {
       display: none;
     }

lms/static/sass/bootstrap/_layouts.scss

@@ -5,7 +5,7 @@
   padding-bottom: $baseline*2;
 
   .course-tabs {
-    padding: 0;
+    padding: 0 $baseline*2;
     font-size: $font-size-sm;
 
     .nav-item {
@@ -42,7 +42,7 @@
   display: flex;
   flex-wrap: wrap;
   border-bottom: 1px solid $border-color;
-  padding: 20px;
+  padding: $baseline $baseline*2;
 
   .page-header-search {
     @include margin-right($baseline);
@@ -62,6 +62,10 @@
 
   .page-header-main {
     flex-grow: 1;  // This column should consume all the available space
+
+    .page-title {
+      margin-top: $baseline*0.4;
+    }
   }
 
   .page-header-secondary {
@@ -84,7 +88,7 @@
 }
 
 .page-content {
-  padding: $baseline;
+  padding: $baseline*2;
 
   @include media-breakpoint-up(md) {
     display: flex;

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

@@ -148,7 +148,7 @@
   @include box-sizing(border-box);
 
   margin: 0 auto;
-  padding: ($baseline*0.75);
+  padding: ($baseline*0.75) ($baseline*2);
   background-color: $lms-preview-menu-color;
 
   @media print {

lms/templates/header/user_dropdown.html

@@ -27,7 +27,7 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_
         <span class="username">${username}</span>
     </a>
 </div>
-<div class="nav-item hidden-mobile" tabindex="-1">
+<div class="nav-item hidden-mobile nav-item-dropdown" tabindex="-1">
     <div class="user-dropdown" aria-expanded="false" aria-haspopup="true" aria-controls="user-menu">
         <span class="sr">user menu</span>
         <span class="fa fa-caret-down toggle-user-dropdown" aria-hidden="true" tabindex="0"></span>

lms/templates/main.html

@@ -159,7 +159,7 @@ from pipeline_mako import render_require_js_path_overrides
     
     <div class="marketing-hero"><%block name="marketing_hero"></%block></div>
 
-    <div class="content-wrapper ${"container-fluid" if uses_bootstrap else "" } main-container" id="content">
+    <div class="content-wrapper main-container" id="content">
       ${self.body()}
       <%block name="bodyextra"/>
     </div>

lms/templates/preview_menu.html

@@ -27,7 +27,7 @@ show_preview_menu = course and staff_access and supports_preview_menu
     student_selected = selected(not staff_selected and not specific_student_selected and not masquerade_group_id)
     %>
     <nav class="wrapper-preview-menu" aria-label="${_('Course View')}">
-        <div class="preview-menu container">
+        <div class="preview-menu">
             <ol class="preview-actions">
                 <li class="action-preview">
                     <form action="#" class="action-preview-form" method="post">