Merge pull request #16506 from edx/hrein/responsive-experience/cleanups

Styling changes for responsive behavior on LMS.

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

@@ -313,12 +313,20 @@ $seq-nav-height: 50px;
   &:hover,
   &:active,
   &.active {
-    border-bottom: 3px solid $seq-nav-link-color;
-    // keeps icon/text centered on hover, necessary due to border-box setting
     padding-top: 2px;
+    background-color: theme-color("primary");
 
     .icon {
-      color: $seq-nav-icon-color;
+      color: theme-color("inverse");
+    }
+
+    @include media-breakpoint-up(sm) {
+      border-bottom: 3px solid $seq-nav-link-color;
+      background-color: theme-color("inverse");
+
+      .icon {
+        color: $seq-nav-icon-color;
+      }
     }
   }
 }

common/lib/xmodule/xmodule/js/fixtures/sequence.html

@@ -5,6 +5,10 @@
         <span class="icon fa fa-chevron-prev" aria-hidden="true"></span>
         <span>Previous</span>
       </button>
+      <button class="sequence-nav-button button-next">
+        <span>Next</span>
+        <span class="icon fa fa-chevron-next" aria-hidden="true"></span>
+      </button>
       <nav class="sequence-list-wrapper" aria-label="Unit">
         <ol id="sequence-list" role="tablist">
           <li>
@@ -23,10 +27,6 @@
           </li>
         </ol>
       </nav>
-      <button class="sequence-nav-button button-next">
-        <span>Next</span>
-        <span class="icon fa fa-chevron-next" aria-hidden="true"></span>
-      </button>
     </div>
 
     <div class="sr-is-focusable" tabindex="-1"></div>

lms/djangoapps/discussion/templates/discussion/discussion_board_fragment.html

@@ -33,7 +33,7 @@ from openedx.core.djangolib.markup import HTML
         <div class="page-header-secondary">
             ## Add Post button
             % if has_permission(user, 'create_thread', course.id):
-            <div class="form-actions">
+            <div class="forum-actions">
                 <button class="btn btn-outline-primary btn-small new-post-btn">${_("Add a Post")}</button>
             </div>
             % endif

lms/static/sass/_variables.scss

 // LMS-specific variables
 
-$text-width-readability-max: 900px;
+$text-width-readability-max: 1080px;
 
 // LMS-only colors
 $audit-mode-color: rgb(74, 74, 74) !default;

lms/static/sass/course/courseware/_courseware.scss

@@ -41,6 +41,7 @@ html.video-fullscreen {
     border-radius: ($baseline/4);
     background-color: $light-gray1;
     color: $staff-color;
+    text-transform: uppercase; 
 
     &:hover {
       background-color: $staff-color;
@@ -134,12 +135,11 @@ html.video-fullscreen {
       overflow-wrap: break-word;
       word-wrap: break-word;
       word-break: break-word;
-    }
+      margin: 0 auto;
 
-    // Make text-focused blocks have a maximum width for readability.
-    .xmodule_HtmlModule,
-    .xmodule_CapaModule {
-      max-width: $text-width-readability-max;
+      &.xblock-student_view-vertical {
+        max-width: $text-width-readability-max;
+      }
     }
 
     h1 {

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

@@ -293,7 +293,7 @@
 
       .btn-link {
         display: inline-block;
-        padding: ($baseline/2) $baseline;
+        padding: ($baseline/2);
         border: 0;
         box-shadow: none;
         text-shadow: none;

lms/static/sass/discussion/elements/_navigation.scss

@@ -177,6 +177,8 @@
 .forum-nav-thread-list {
   padding-left: 0 !important; // should *not* be RTLed, see below for explanation
   min-height: 60px;  // @TODO: Remove this when we have a real empty state for the discussion thread list
+  max-height: 800px;
+  border-bottom: 1px solid theme-color("light");
   margin: 0;
   overflow-y: auto;
   list-style: none;

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

 .forum-search {
   display: flex;
-  width: 100%;
   margin-top: $baseline;
 
   .search-input {

lms/static/sass/elements/_banners.scss

@@ -89,6 +89,7 @@ $full-width-banner-margin: 20px;
       .btn-link {
         color: $state-info-text-link;
         font-weight: bold;
+        border-color: transparent;
       }
     }
 

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

@@ -199,6 +199,7 @@
 
     .btn-link {
       color: palette(grayscale, base);
+      border-color: transparent;
     }
   }
 }
@@ -275,8 +276,14 @@
       }
     }
 
-    .section-tools .course-tool:not(:first-child) {
-      margin-top: ($baseline / 5);
+    .section-tools .course-tool {
+      .course-tool-link:visited {
+        color: theme-color("primary");
+      }
+
+      &:not(:first-child) {
+        margin-top: ($baseline / 5);
+      }
     }
   }
 
@@ -328,6 +335,8 @@
         margin: 0 0 ($baseline / 2) 0;
 
         .subsection {
+          @include margin-left(10px);
+
           list-style-type: none;
           border: 1px solid transparent;
           border-radius: 3px;

lms/templates/seq_module.html

@@ -13,11 +13,11 @@
     </div>
   % endif
   <div class="sequence-nav">
-    <button class="sequence-nav-button button-previous" aria-hidden="true">
+    <button class="sequence-nav-button button-previous">
       <span class="icon fa fa-chevron-prev" aria-hidden="true"></span>
       <span class="sequence-nav-button-label">${_('Previous')}</span>
     </button>
-    <button class="sequence-nav-button button-next" aria-hidden="true">
+    <button class="sequence-nav-button button-next">
       <span class="sequence-nav-button-label">${_('Next')}</span>
       <span class="icon fa fa-chevron-next" aria-hidden="true"></span>
     </button>

openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html

@@ -65,7 +65,7 @@
                     <ol class="block-tree" role="tree">
                         <li aria-expanded="true" class="outline-item focusable section" id="block-v1:W3Cx+HTML5.0x+1T2017+type@chapter+block@451e0388724c4f1fafba1b218ce16582" role="treeitem" tabindex="0">
                             <div class="section-name">
-                                <h3>Testing</h3>
+                                <h3 class="section-title">Testing</h3>
                             </div>
                             <ol class="outline-item focusable" role="group" tabindex="0">
                                 <li class="subsection " role="treeitem" tabindex="-1" aria-expanded="true">

openedx/features/course_experience/templates/course_experience/course-outline-fragment.html

@@ -24,7 +24,7 @@ from openedx.core.djangolib.markup import HTML, Text
                     tabindex="0"
                 >
                     <div class="section-name">
-                        <h3>${ section['display_name'] }</h3>
+                        <h3 class="section-title">${ section['display_name'] }</h3>
                     </div>
                     <ol class="outline-item focusable" role="group" tabindex="0">
                         % for subsection in section.get('children', []):