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) {
+      @include media-breakpoint-down(md) {
-        margin-left: calc(50% - 30px);
+        @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 {
+      .course-name {
-        font-weight: $font-weight-bold;
+        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/multicourse/_dashboard.scss

@@ -136,7 +136,7 @@
             .course-title {
               a, span {
                 @extend %t-title3;
-                @extend %t-light;
+                @extend %t-regular;
 
                 display: inline-block;
                 margin-bottom: ($baseline/2);
@@ -155,7 +155,7 @@
               @include float(left);
 
               padding: 0;
-              margin-top: ($baseline/2);
+              margin-top: $baseline;
 
               [class*="info-"] {
                 color: $gray-d1;
@@ -176,7 +176,7 @@
             .wrapper-course-actions {
               @include margin-right($baseline);
 
-              margin-top: $baseline/2;
+              margin-top: $baseline;
             }
 
 
@@ -378,498 +378,6 @@
 
         // ====================
 
-        // UI: messages
-        .wrapper-messages-primary {
-          @include clearfix();
-
-          .messages-list {
-            margin: 0;
-            padding: 0;
-            background-color: theme-color("lightest");
-          }
-
-          .message {
-            @extend %ui-depth1;
-
-            border-radius: 3px;
-            display: none;
-            padding: ($baseline/2) $baseline;
-            border-top: 1px solid $gray-l4;
-            color: $base-font-color; // Overrides the normal white color in this one case
-
-            // STATE: shown
-            &.is-shown {
-              @include clearfix();
-
-              display: block;
-            }
-
-            a {
-              font-family: $font-family-sans-serif;
-            }
-
-            strong {
-              font-weight: 700;
-
-              a {
-                font-weight: 700;
-              }
-            }
-
-            .actions {
-              @include clearfix();
-
-              list-style: none;
-              margin: 0;
-              padding: 0;
-            }
-
-            .message-title,
-            .message-copy .title {
-              @extend %t-title6;
-              @extend %t-weight4;
-
-              line-height: 1em;
-              margin-bottom: ($baseline/4);
-            }
-
-            .message-copy,
-            .message-copy .copy {
-              @extend %t-copy-sub1;
-
-              margin: 2px 0 0 0;
-            }
-
-            // CASE: expandable
-            &.is-expandable {
-              .wrapper-tip {
-                .message-title, .message-copy {
-                  margin-bottom: 0;
-                  display: inline-block;
-                }
-
-                .message-title .value, .message-copy {
-                  @include transition(color $tmg-f2 ease-in-out 0s);
-                }
-
-                // STATE: hover
-                &:hover {
-                  cursor: pointer;
-
-                  .message-title .value, .message-copy, .ui-toggle-expansion {
-                    color: $link-color;
-                  }
-                }
-              }
-
-              .wrapper-extended {
-                @include transition(opacity $tmg-f2 ease-in-out 0);
-
-                display: none;
-                opacity: 0;
-              }
-            }
-
-            // STATE: is expanded
-            &.is-expanded {
-              .ui-toggle-expansion {
-                @include rtl {
-                  @include transform(rotate(-90deg));
-                }
-
-                @include ltr {
-                  @include transform(rotate(90deg));
-                }
-
-                @include transform-origin(50% 50%);
-              }
-
-              .wrapper-extended {
-                display: block;
-                opacity: 1;
-              }
-            }
-
-            // TYPE: upsell
-            &.message-upsell {
-              .wrapper-tip {
-                @include clearfix();
-
-                .message-title {
-                  @include float(left);
-                }
-
-                .ui-toggle-expansion {
-                  @include transition(all $tmg-f2 ease-in-out 0s);
-                  @include font-size(18);
-
-                  display: inline-block;
-                  vertical-align: middle;
-
-                  @include margin-right($baseline/4);
-                }
-
-                .message-copy {
-                  @include float(right);
-                }
-              }
-
-              .wrapper-extended {
-                padding: ($baseline/4) 0;
-
-                .message-copy {
-                  display: inline-block;
-
-                  .message-copy-bold {
-                    font-weight: 600;
-                  }
-                }
-              }
-
-              .action-upgrade-container {
-                @include float(right);
-
-                display: inline-block;
-                margin-top: ($baseline/2);
-              }
-
-              .action-upgrade {
-                @extend %btn-primary-green;
-
-                @include clearfix();
-
-                position: relative;
-
-                @include left($baseline/2);
-                @include padding(($baseline * 0.4), 0, ($baseline * 0.4), ($baseline * 0.75));
-
-                .action-upgrade-icon {
-                  @include float(left);
-
-                  display: inline;
-
-                  @include margin-right($baseline*0.4);
-
-                  margin-top: ($baseline/4);
-                  background: url('#{$static-path}/images/icon-sm-verified.png') no-repeat;
-                  background-position: -($baseline*0.3);
-                  background-color: white;
-                  width: ($baseline*0.8);
-                  height: ($baseline*0.7);
-                }
-
-                .deco-graphic {
-                  position: absolute;
-                  top: -($baseline/4);
-
-                  @include left(-($baseline*0.75));
-
-                  width: ($baseline*2);
-                }
-
-                span {
-                  color: $white; // nasty but needed override for poor <span> styling
-                }
-
-                .copy, .copy-sub {
-                  display: inline-block;
-                  vertical-align: middle;
-                }
-
-                .copy {
-                  @extend %t-action3;
-                  @extend %t-weight4;
-
-                  @include margin-right($baseline);
-                }
-
-                .copy-sub {
-                  @extend %t-action4;
-
-                  opacity: 0.875;
-                }
-              }
-            }
-
-            // TYPE: status
-            &.message-status {
-              border-color: $gray-l4;
-
-              .wrapper-message-primary {
-                @include clearfix();
-              }
-
-              .message-copy {
-                @extend %t-copy-sub1;
-
-                margin: 0;
-              }
-
-              .credit-action {
-                .credit-btn {
-                  @extend %btn-pl-yellow-base;
-
-                  @include float(right);
-                  @include margin-right(5px);
-
-                  background-image: none ;
-                  text-shadow: none;
-                  box-shadow: none;
-                  text-transform: none;
-                }
-              }
-
-              .actions {
-                .action {
-                  @include float(left);
-                  @include margin(0, 15px, 0, 0);
-
-                  .btn {
-                    display: inline-block;
-                  }
-
-                  .btn {
-                    @include box-sizing(border-box);
-                    @include float(left);
-
-                    border-radius: 3px;
-                    font: normal 0.8rem/1.2rem $font-family-sans-serif;
-                    letter-spacing: 1px;
-                    padding: 6px 12px;
-                    text-align: center;
-
-                    &.disabled {
-                      cursor: default !important;
-
-                      &:hover, &:focus {
-                        @include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%));
-
-                        background: #eee;
-                      }
-                    }
-                  }
-
-                  .btn {
-                    @include float(left);
-
-                    font: normal 0.8rem/1.2rem $font-family-sans-serif;
-                    letter-spacing: 1px;
-                    padding: 6px 12px;
-                    text-align: center;
-                  }
-                }
-              }
-
-              .exam-registration-number {
-                font-family: $font-family-sans-serif;
-                font-size: 18px;
-
-                a {
-                  font-family: $font-family-sans-serif;
-                }
-              }
-
-              &.exam-register {
-                .message-copy {
-                  margin-top: ($baseline/4);
-                  width: 55%;
-                }
-              }
-
-              &.exam-schedule {
-                .exam-button {
-                  margin-top: ($baseline/4);
-                }
-              }
-
-              .exam-button {
-                @include button(simple, $pink);
-                @include float(right);
-
-                margin-top: 0;
-              }
-
-              .contact-button {
-                @include button(simple, $pink);
-              }
-
-              .button {
-                display: inline-block;
-                margin-top: ($baseline/2);
-                padding: 9px 18px 10px;
-                font-size: 13px;
-                font-weight: bold;
-                letter-spacing: 0;
-
-                &:hover, &:focus {
-                  text-decoration: none;
-                }
-              }
-
-
-              &.course-status-certrendering {
-                .btn {
-                  margin-top: 2px;
-                }
-              }
-
-              &.course-status-certavailable {
-                .message-copy {
-                  width: flex-grid(6, 12);
-                  position: relative;
-
-                  @include float(left);
-                }
-
-                .actions-primary {
-                  @include float(right);
-
-                  .action {
-                    @include margin(0, 0, ($baseline/2), ($baseline*.75));
-
-                    float: none;
-                    text-align: center;
-
-                    &:last-child {
-                      margin-bottom: 0;
-                    }
-
-                    .btn {
-                      float: none;
-                    }
-                  }
-
-                  .action-certificate .btn {
-                    @extend %btn-inherited-primary;
-
-                    @include box-sizing(border-box);
-
-                    float: none;
-                    border-radius: 3px;
-                    display: block;
-
-                    @include padding(7px, ($baseline*.75), 7px, ($baseline*.75));
-
-                    text-align: center;
-
-                    a:link, a:visited {
-                      color: #fff;
-                    }
-                  }
-
-                  .action-share .btn {
-                    display: inline;
-                    letter-spacing: 0;
-                  }
-                }
-              }
-
-              .actions-secondary {
-                margin-top: ($baseline/2);
-                border-top: 1px solid $gray-l4;
-                padding-top: ($baseline/2);
-
-                .action-share {
-                  @include float(right);
-
-                  margin: 0;
-                }
-              }
-
-              .certificate-explanation {
-                @extend %t-copy-sub1;
-
-                margin-top: ($baseline/2);
-                border-top: 1px solid $gray-l4;
-                padding-top: ($baseline/2);
-              }
-
-              .verification-reminder {
-                width: flex-grid(8, 12);
-
-                @include float(left);
-
-                position: relative;
-              }
-
-              .verification-cta {
-                width: flex-grid(4, 12);
-
-                @include float(left);
-
-                position: relative;
-
-                .btn {
-                  @extend %btn-pl-green-base;
-
-                  @include float(right);
-                }
-              }
-            }
-
-            &.message-related-programs {
-              background: none;
-              border: none;
-              margin-top: ($baseline/4);
-              padding-bottom: 0;
-
-              .related-programs-preface {
-                @include float(left);
-
-                font-weight: bold;
-              }
-
-              ul {
-                display: inline;
-                padding: 0;
-                margin: 0;
-              }
-
-              li {
-                @include float(left);
-
-                display: inline;
-                padding: 0 0.5em;
-                border-right: 1px solid;
-
-                .category-icon {
-                  @include float(left);
-                  @include margin-right($baseline/4);
-
-                  margin-top: ($baseline/10);
-                  background-color: transparent;
-                  background-size: 100%;
-                  width: ($baseline*0.7);
-                  height: ($baseline*0.7);
-                }
-              }
-
-              // Remove separator from last list item.
-              li:last-child {
-                border: 0;
-              }
-            }
-
-            // TYPE: pre-requisites
-            .prerequisites {
-              @include clearfix;
-
-              .tip {
-                font-family: $font-family-sans-serif;
-                font-size: 1em;
-                color: $lighter-base-font-color;
-                margin-top: ($baseline/2);
-              }
-            }
-
-            @include media-breakpoint-down(md) {
-              @include padding($baseline/2, $baseline, $baseline/2, $baseline/2);
-            }
-          }
-        }
-
-        // ====================
-
         // CASE: "enrolled as" status - professional ed
         &.professional {
 
@@ -967,6 +475,9 @@
     @include padding($baseline*2, $baseline*2, $baseline, $baseline);
 
     max-width: $baseline*20;
+    min-width: $baseline*20;
+    min-height: $baseline/2;
+
     flex-grow: 1;
     order: 2;
 
@@ -1022,12 +533,25 @@
       }
     }
 
+    .profile-sidebar {
+      ul {
+        padding: 0;
+        border: 1px solid theme-color("light");
+      }
+    }
+
     // Responsive behavior
     @include media-breakpoint-down(md) {
       margin: 0 $baseline $baseline*2;
       padding: 0;
       max-width: 100%;
     }
+
+    // Responsive behavior
+    @include media-breakpoint-down(xl) {
+      max-width: $baseline*15;
+      min-width: $baseline*15;
+    }
   }
 
   // Responsive behavior
@@ -1036,6 +560,497 @@
   }
 }
 
+// ====================
+// UI: messages
+.wrapper-messages-primary {
+  @include clearfix();
+
+  .messages-list {
+    margin: 0;
+    padding: 0;
+    background-color: theme-color("lightest");
+  }
+
+  .message {
+    @extend %ui-depth1;
+
+    border-radius: 3px;
+    display: none;
+    padding: ($baseline/2) $baseline;
+    border-top: 1px solid $gray-l4;
+    color: $base-font-color; // Overrides the normal white color in this one case
+
+    // STATE: shown
+    &.is-shown {
+      @include clearfix();
+
+      display: block;
+    }
+
+    a {
+      font-family: $font-family-sans-serif;
+    }
+
+    strong {
+      font-weight: 700;
+
+      a {
+        font-weight: 700;
+      }
+    }
+
+    .actions {
+      @include clearfix();
+
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .message-title,
+    .message-copy .title {
+      @extend %t-title6;
+      @extend %t-weight4;
+
+      line-height: 1em;
+      margin-bottom: ($baseline/4);
+    }
+
+    .message-copy,
+    .message-copy .copy {
+      @extend %t-copy-sub1;
+
+      margin: 2px 0 0 0;
+    }
+
+    // CASE: expandable
+    &.is-expandable {
+      .wrapper-tip {
+        .message-title, .message-copy {
+          margin-bottom: 0;
+          display: inline-block;
+        }
+
+        .message-title .value, .message-copy {
+          @include transition(color $tmg-f2 ease-in-out 0s);
+        }
+
+        // STATE: hover
+        &:hover {
+          cursor: pointer;
+
+          .message-title .value, .message-copy, .ui-toggle-expansion {
+            color: $link-color;
+          }
+        }
+      }
+
+      .wrapper-extended {
+        @include transition(opacity $tmg-f2 ease-in-out 0);
+
+        display: none;
+        opacity: 0;
+      }
+    }
+
+    // STATE: is expanded
+    &.is-expanded {
+      .ui-toggle-expansion {
+        @include rtl {
+          @include transform(rotate(-90deg));
+        }
+
+        @include ltr {
+          @include transform(rotate(90deg));
+        }
+
+        @include transform-origin(50% 50%);
+      }
+
+      .wrapper-extended {
+        display: block;
+        opacity: 1;
+      }
+    }
+
+    // TYPE: upsell
+    &.message-upsell {
+      .wrapper-tip {
+        @include clearfix();
+
+        .message-title {
+          @include float(left);
+        }
+
+        .ui-toggle-expansion {
+          @include transition(all $tmg-f2 ease-in-out 0s);
+          @include font-size(18);
+
+          display: inline-block;
+          vertical-align: middle;
+
+          @include margin-right($baseline/4);
+        }
+
+        .message-copy {
+          @include float(right);
+        }
+      }
+
+      .wrapper-extended {
+        padding: ($baseline/4) 0;
+
+        .message-copy {
+          display: inline-block;
+
+          .message-copy-bold {
+            font-weight: 600;
+          }
+        }
+      }
+
+      .action-upgrade-container {
+        @include float(right);
+
+        display: inline-block;
+        margin-top: ($baseline/2);
+      }
+
+      .action-upgrade {
+        @extend %btn-primary-green;
+
+        @include clearfix();
+
+        position: relative;
+
+        @include left($baseline/2);
+        @include padding(($baseline * 0.4), 0, ($baseline * 0.4), ($baseline * 0.75));
+
+        .action-upgrade-icon {
+          @include float(left);
+
+          display: inline;
+
+          @include margin-right($baseline*0.4);
+
+          margin-top: ($baseline/4);
+          background: url('#{$static-path}/images/icon-sm-verified.png') no-repeat;
+          background-position: -($baseline*0.3);
+          background-color: white;
+          width: ($baseline*0.8);
+          height: ($baseline*0.7);
+        }
+
+        .deco-graphic {
+          position: absolute;
+          top: -($baseline/4);
+
+          @include left(-($baseline*0.75));
+
+          width: ($baseline*2);
+        }
+
+        span {
+          color: $white; // nasty but needed override for poor <span> styling
+        }
+
+        .copy, .copy-sub {
+          display: inline-block;
+          vertical-align: middle;
+        }
+
+        .copy {
+          @extend %t-action3;
+          @extend %t-weight4;
+
+          @include margin-right($baseline);
+        }
+
+        .copy-sub {
+          @extend %t-action4;
+
+          opacity: 0.875;
+        }
+      }
+    }
+
+    // TYPE: status
+    &.message-status {
+      border-color: $gray-l4;
+
+      .wrapper-message-primary {
+        @include clearfix();
+      }
+
+      .message-copy {
+        @extend %t-copy-sub1;
+
+        margin: 0;
+      }
+
+      .credit-action {
+        .credit-btn {
+          @extend %btn-pl-yellow-base;
+
+          @include float(right);
+          @include margin-right(5px);
+
+          background-image: none ;
+          text-shadow: none;
+          box-shadow: none;
+          text-transform: none;
+        }
+      }
+
+      .actions {
+        .action {
+          @include float(left);
+          @include margin(0, 15px, 0, 0);
+
+          .btn {
+            display: inline-block;
+          }
+
+          .btn {
+            @include box-sizing(border-box);
+            @include float(left);
+
+            border-radius: 3px;
+            font: normal 0.8rem/1.2rem $font-family-sans-serif;
+            letter-spacing: 1px;
+            padding: 6px 12px;
+            text-align: center;
+
+            &.disabled {
+              cursor: default !important;
+
+              &:hover, &:focus {
+                @include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%));
+
+                background: #eee;
+              }
+            }
+          }
+
+          .btn {
+            @include float(left);
+
+            font: normal 0.8rem/1.2rem $font-family-sans-serif;
+            letter-spacing: 1px;
+            padding: 6px 12px;
+            text-align: center;
+          }
+        }
+      }
+
+      .exam-registration-number {
+        font-family: $font-family-sans-serif;
+        font-size: 18px;
+
+        a {
+          font-family: $font-family-sans-serif;
+        }
+      }
+
+      &.exam-register {
+        .message-copy {
+          margin-top: ($baseline/4);
+          width: 55%;
+        }
+      }
+
+      &.exam-schedule {
+        .exam-button {
+          margin-top: ($baseline/4);
+        }
+      }
+
+      .exam-button {
+        @include button(simple, $pink);
+        @include float(right);
+
+        margin-top: 0;
+      }
+
+      .contact-button {
+        @include button(simple, $pink);
+      }
+
+      .button {
+        display: inline-block;
+        margin-top: ($baseline/2);
+        padding: 9px 18px 10px;
+        font-size: 13px;
+        font-weight: bold;
+        letter-spacing: 0;
+
+        &:hover, &:focus {
+          text-decoration: none;
+        }
+      }
+
+
+      &.course-status-certrendering {
+        .btn {
+          margin-top: 2px;
+        }
+      }
+
+      &.course-status-certavailable {
+        .message-copy {
+          width: flex-grid(6, 12);
+          position: relative;
+
+          @include float(left);
+        }
+
+        .actions-primary {
+          @include float(right);
+
+          .action {
+            @include margin(0, 0, ($baseline/2), ($baseline*.75));
+
+            float: none;
+            text-align: center;
+
+            &:last-child {
+              margin-bottom: 0;
+            }
+
+            .btn {
+              float: none;
+            }
+          }
+
+          .action-certificate .btn {
+            @extend %btn-inherited-primary;
+
+            @include box-sizing(border-box);
+
+            float: none;
+            border-radius: 3px;
+            display: block;
+
+            @include padding(7px, ($baseline*.75), 7px, ($baseline*.75));
+
+            text-align: center;
+
+            a:link, a:visited {
+              color: #fff;
+            }
+          }
+
+          .action-share .btn {
+            display: inline;
+            letter-spacing: 0;
+          }
+        }
+      }
+
+      .actions-secondary {
+        margin-top: ($baseline/2);
+        border-top: 1px solid $gray-l4;
+        padding-top: ($baseline/2);
+
+        .action-share {
+          @include float(right);
+
+          margin: 0;
+        }
+      }
+
+      .certificate-explanation {
+        @extend %t-copy-sub1;
+
+        margin-top: ($baseline/2);
+        border-top: 1px solid $gray-l4;
+        padding-top: ($baseline/2);
+      }
+
+      .verification-reminder {
+        width: flex-grid(8, 12);
+
+        @include float(left);
+
+        position: relative;
+      }
+
+      .verification-cta {
+        width: flex-grid(4, 12);
+
+        @include float(left);
+
+        position: relative;
+
+        .btn {
+          @extend %btn-pl-green-base;
+
+          @include float(right);
+        }
+      }
+    }
+
+    &.message-related-programs {
+      background: none;
+      margin-top: ($baseline/4);
+      margin-bottom: $baseline/2;
+      padding: 0;
+
+      .related-programs-preface {
+        @include float(left);
+
+        font-weight: bold;
+      }
+
+      ul {
+        display: inline;
+        padding: 0;
+        margin: 0;
+      }
+
+      li {
+        @include float(left);
+
+        display: inline;
+        padding: 0 0.5em;
+        border-right: 1px solid;
+
+        .category-icon {
+          @include float(left);
+          @include margin-right($baseline/4);
+
+          margin-top: ($baseline/10);
+          background-color: transparent;
+          background-size: 100%;
+          width: ($baseline*0.7);
+          height: ($baseline*0.7);
+        }
+      }
+
+      // Remove separator from last list item.
+      li:last-child {
+        border: 0;
+      }
+    }
+
+    // TYPE: pre-requisites
+    .prerequisites {
+      @include clearfix;
+
+      .tip {
+        font-family: $font-family-sans-serif;
+        font-size: 1em;
+        color: $lighter-base-font-color;
+        margin-top: ($baseline/2);
+      }
+    }
+
+    @include media-breakpoint-down(md) {
+      @include padding($baseline/2, $baseline, $baseline/2, $baseline/2);
+    }
+  }
+}
+
 // CASE: empty dashboard
 .empty-dashboard-message {
   border: 3px solid $gray-l4;
@@ -1093,6 +1108,9 @@
 
 // status - verification
 .status-verification {
+  list-style: none;
+  padding: $baseline/2;
+
   .status-title {
     margin: 0 0 ($baseline/4) 0;
   }
@@ -1124,6 +1142,7 @@
     @extend %t-copy-sub2;
 
     position: relative;
+    padding-top: $baseline/2;
 
     p {
       @extend %t-copy-sub2;

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">