Merge pull request #16232 from edx/andya/bootstrap-support-modal

Make the support modal responsive

lms/static/sass/base/_base.scss

@@ -215,77 +215,6 @@ mark {
   }
 }
 
-.help-tab {
-  @include transform(rotate(-90deg));
-  @include transform-origin(0 0);
-
-  @extend %ui-depth2;
-  @extend %ui-print-excluded;
-
-  position: fixed;
-  top: 250px;
-  left: 0;
-
-  a:link,
-  a:visited {
-    border: 1px solid $gray-l3;
-    border-top-style: none;
-    border-radius: 0 0 ($baseline/2) ($baseline/2);
-    background: transparentize($white, 0.25);
-    color: transparentize($base-font-color, 0.25);
-    font-weight: bold;
-    text-decoration: none;
-    padding: 6px 22px 11px;
-    display: inline-block;
-
-    &:hover,
-    &:focus {
-      color: $white;
-      background: $link-color;
-    }
-  }
-}
-
-.help-buttons {
-  padding: ($baseline/2) ($baseline*2.5);
-  text-align: center;
-
-  button {
-    @extend %btn-secondary-blue-outline;
-
-    margin: .5rem 0;
-    font-weight: initial;
-    text-shadow: none;
-    letter-spacing: initial !important;
-    text-transform: normal !important;
-    vertical-align: initial;
-        
-    &:hover,
-    &:focus {
-      background: $link-color !important;
-      color: $white;
-      box-shadow: none !important;
-      text-shadow: none !important;
-    }
-  }
-}
-
-#feedback_form {
-  input, textarea {
-    font: normal 1em/1.4em $sans-serif;
-  }
-
-  textarea[name="details"] {
-    height: 150px;
-  }
-}
-
-#feedback_success_wrapper {
-  p {
-    padding: 0 $baseline $baseline $baseline;
-  }
-}
-
 // ====================
 
 // UI - disabled state

lms/static/sass/bootstrap/_legacy.scss

@@ -13,6 +13,13 @@
   font-size: ($sizeValue/10) + rem;
 }
 
+// Adds a simple extension that indicates that this element should not print
+%ui-print-excluded {
+  @media print {
+    display: none;
+  }
+}
+
 // Support .sr as a synonym for .sr-only
 .sr {
   @extend .sr-only;

lms/static/sass/bootstrap/lms-main.scss

@@ -20,6 +20,8 @@
 @import 'layouts';
 @import 'components';
 @import 'course/layout/courseware_preview';
+@import 'shared/modal';
+@import 'shared/help-tab';
 
 // Features
 @import 'features/bookmarks';

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

+#help-modal {
+  overflow: visible;
+  background: transparent;
+  box-shadow: none;
+
+  @media (max-width: $grid-breakpoints-md) {
+    width: 90% !important;
+    margin-left: -47% !important;
+  }
+
+  @media (min-width: $grid-breakpoints-md) {
+    width: 700px !important;
+    margin-left: -350px !important;
+  }
+
+}
+
 .help-tab {
   @include transform(rotate(-90deg));
   @include transform-origin(0 0);
@@ -29,7 +46,9 @@
 }
 
 .help-buttons {
-  padding: ($baseline/2) ($baseline*2.5);
+  .btn {
+    flex-grow: 1;
+  }
 
   a:link,
   a:visited {

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

+// Open edX: Help tab
+// ==================
+
+#help-modal {
+  overflow: visible;
+  background: transparent;
+  box-shadow: none;
+
+  @include media-breakpoint-down(md) {
+    width: 90% !important;
+    margin-left: -47% !important;
+  }
+
+  @include media-breakpoint-up(md) {
+    width: 700px !important;
+    margin-left: -350px !important;
+  }
+}
+
+.help-tab {
+  @extend %ui-depth2;
+  @extend %ui-print-excluded;
+
+  transform: rotate(-90deg);
+  transform-origin: top left;
+  position: fixed;
+  top: 250px;
+  left: 0;
+
+  a:link,
+  a:visited {
+    border: 1px solid $gray-300;
+    border-top-style: none;
+    border-radius: 0 0 ($baseline/2) ($baseline/2);
+    background: transparentize($white, 0.25);
+    color: transparentize($body-color, 0.25);
+    font-weight: bold;
+    text-decoration: none;
+    padding: 6px 22px 11px;
+    display: inline-block;
+
+    &:hover,
+    &:focus {
+      color: $white;
+      background: $link-color;
+    }
+  }
+}
+
+.help-buttons {
+  display: flex;
+  text-align: center;
+  justify-content: normal;
+  flex-grow: 1;
+
+  .btn:not(:first-child) {
+    @include margin-left($baseline/2);
+  }
+
+  @include media-breakpoint-down(md) {
+    flex-direction: column;
+
+    .btn {
+      width: 100%;
+      margin: $baseline/4 0 0 0 !important;
+    }
+  }
+}
+
+#feedback_form {
+  input, textarea {
+    font: normal 1em/1.4em $font-family-sans-serif;
+  }
+
+  textarea[name="details"] {
+    height: 150px;
+  }
+}
+
+#feedback_success_wrapper {
+  p {
+    padding: 0 $baseline $baseline $baseline;
+  }
+}
+
 .feedback-form-select {
   background: $white;
   margin-bottom: $baseline;

lms/static/sass/shared/_modal.scss

 #lean_overlay {
-  background: transparent;
-
-  @include background-image(radial-gradient(circle at 50% 30%, $shadow-d1, $shadow-d2));
-
+  background-image: radial-gradient(circle at 50% 30%, $shadow-d1, $shadow-d2);
   display: none;
-  height:100%;
+  height: 100%;
   left: 0;
   position: fixed;
   top: 0;
-  width:100%;
+  width: 100%;
   z-index: 100;
 }
 
@@ -22,8 +19,8 @@
   width: grid-width(5);
   border-radius: 3px;
   box-shadow: 0 0 5px 0 $shadow-d1;
-  background: $gray-d2;
-  color: $base-font-color;
+  background: theme-color("dark");
+  color: $body-color;
 
   &.video-modal {
     left: 50%;
@@ -56,7 +53,7 @@
   .inner-wrapper {
     @extend %ui-depth1;
 
-    background: $modal-bg-color;
+    background: $modal-content-bg;
     border-radius: 0;
     border: 1px solid rgba(0, 0, 0, 0.9);
     box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
@@ -67,7 +64,7 @@
     position: relative;
 
     p {
-      font-size: .9em;
+      font-size: 0.9em;
       line-height: 1.4;
     }
 
@@ -80,8 +77,6 @@
       position: relative;
 
       &::before {
-        @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%));
-
         content: "";
         display: block;
         height: 400px;
@@ -115,13 +110,13 @@
       h2 {
         position: relative;
         text-align: center;
-        text-shadow: 0 1px rgba(255,255,255, 0.4);
+        text-shadow: 0 1px rgba(255, 255, 255, 0.4);
         z-index: 2;
       }
     }
 
     .modal-form-error {
-      background: tint($red,90%);
+      background: theme-color("danger");
       border: 1px solid rgb(143, 14, 14);
       color: rgb(143, 14, 14);
       display: none;
@@ -138,7 +133,8 @@
       padding: 12px;
     }
 
-    .activation-message, .message {
+    .activation-message,
+    .message {
       padding: 0 ($baseline*2) ($baseline/2);
 
       p {
@@ -162,7 +158,7 @@
       }
 
       label {
-        color: $text-color;
+        color: $body-color;
 
         &.field-error {
           display: block;
@@ -190,7 +186,7 @@
       input[type="email"],
       input[type="text"],
       input[type="password"] {
-        background: rgb(255,255,255);
+        background: theme-color("inverse");
         display: block;
         height: 45px;
         margin-bottom: $baseline;
@@ -200,16 +196,17 @@
       label.remember-me,
       label.terms-of-service,
       label.honor-code {
-        background: rgb(233,233,233);
-        border: 1px solid rgb(200,200,200);
+        background: rgb(233, 233, 233);
+        border: 1px solid rgb(200, 200, 200);
         border-radius: 3px;
-        box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
+        box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
         display: block;
         margin-bottom: $baseline;
         padding: 8px ($baseline/2);
 
-        &:hover, &:focus {
-          background: rgb(230,230,230);
+        &:hover,
+        &:focus {
+          background: rgb(230, 230, 230);
         }
 
         &.field-error {
@@ -217,12 +214,13 @@
         }
 
         a {
-          font-family: $serif;
           font-style: italic;
         }
       }
 
-      .citizenship, .gender, .date-of-birth {
+      .citizenship,
+      .gender,
+      .date-of-birth {
         margin-bottom: $baseline;
         float: left;
         width: flex-grid(4);
@@ -232,15 +230,14 @@
         }
 
         select {
+          box-sizing: border-box;
           width: 100%;
-
-          @include box-sizing(border-box);
-
           display: block;
         }
       }
 
-      .citizenship, .gender {
+      .citizenship,
+      .gender {
         margin-right: flex-gutter();
       }
 
@@ -262,24 +259,23 @@
       z-index: 2;
 
       p {
-        color: $lighter-base-font-color;
+        color: theme-color("secondary");
         font-style: italic;
         text-align: center;
 
         span {
-          color: $lighter-base-font-color;
-          font-family: $serif;
+          color: theme-color("secondary");
           font-style: italic;
         }
 
         a {
-          color: $lighter-base-font-color;
-          font-family: $serif;
+          color: theme-color("secondary");
           font-style: italic;
           text-decoration: underline;
 
-          &:hover, &:focus {
-            color: $base-font-color;
+          &:hover,
+          &:focus {
+            color: $body-color;
           }
         }
 
@@ -298,21 +294,24 @@
       right: 2px;
       top: 0;
       z-index: 100;
-      color: $lighter-base-font-color;
-      font: normal 1.2rem/1.2rem $sans-serif;
+      color: theme-color("secondary");
+      font: normal 1.2rem/1.2rem $font-family-sans-serif;
       text-align: center;
       text-shadow: 0 1px rgba(255,255,255, 0.8);
 
       @include transition(all 0.15s ease-out 0s);
 
-      &:hover, &:focus {
-        color: $base-font-color;
+      &:hover,
+      &:focus {
+        color: $body-color;
         text-decoration: none;
       }
     }
   }
 
-  #help_wrapper, #feedback_form_wrapper, .discussion-alert-wrapper {
+  #help_wrapper,
+  #feedback_form_wrapper,
+  .discussion-alert-wrapper {
     padding: 0 ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
 
     header {
@@ -322,11 +321,9 @@
     }
 
     .note {
-      @include font-size(12);
-      @include line-height(12);
-
+      font-size: $font-size-sm;
       margin-top: ($baseline/2);
-      color: $lighter-base-font-color;
+      color: theme-color("secondary");
     }
   }
 
@@ -338,10 +335,8 @@
   .tip {
     font-size: 12px;
     display: block;
-    color: $dark-gray;
+    color: theme-color("dark");
   }
-
-
 }
 
 .leanModal_box {
@@ -372,7 +367,7 @@
     .list-actions-item {
       @extend %t-copy-sub1;
 
-      color: $base-font-color;
+      color: $body-color;
       text-align: center;
     }
 

lms/templates/help_modal.html

@@ -21,7 +21,7 @@ from xmodule.tabs import CourseTabList
 <div id="help-modal" class="modal" aria-hidden="true" role="dialog" aria-modal="true" tabindex="-1" aria-labelledby="support-platform-name">
   <div class="inner-wrapper">
     ## TODO: find a way to refactor this
-    <button class="close-modal" tabindex="0">
+    <button class="btn-link close-modal" tabindex="0">
       <span class="icon fa fa-remove" aria-hidden="true"></span>
       <span class="sr">
         ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
@@ -74,9 +74,9 @@ from xmodule.tabs import CourseTabList
         <hr>
 
         <div class="help-buttons">
-            <button type="button" class="" id="feedback_link_problem">${_('Report a problem')}</button><br />
-            <button type="button" class="" id="feedback_link_suggestion">${_('Make a suggestion')}</button><br />
-            <button type="button" class="" id="feedback_link_question">${_('Ask a question')}</button>
+            <button type="button" class="btn btn-outline-primary" id="feedback_link_problem">${_('Report a problem')}</button>
+            <button type="button" class="btn btn-outline-primary" id="feedback_link_suggestion">${_('Make a suggestion')}</button>
+            <button type="button" class="btn btn-outline-primary" id="feedback_link_question">${_('Ask a question')}</button>
         </div>
 
         <p class="note">${_('Please note: The {platform_name} support team is English speaking. While we will do our best to address your inquiry in any language, our responses will be in English.').format(