Merge pull request #16337 from edx/HarryRein/home-page-styling-fixes

Course home page styling with bootstrap.

common/test/acceptance/pages/lms/course_home.py

@@ -69,7 +69,7 @@ class CourseHomePage(CoursePage):
         Search within a class for a particular term.
         """
         self.q(css='.search-form > .search-input').fill(search_term)
-        self.q(css='.search-form > .search-button').click()
+        self.q(css='.search-form .search-button').click()
         return CourseSearchResultsPage(self.browser, self.course_id)
 
 

lms/static/sass/_header.scss

@@ -39,7 +39,7 @@
 
     .course-header {
       @include float(left);
-      @include margin($baseline, 0, 0, $baseline);
+      @include margin($baseline*1.25, 0, 0, $baseline);
 
       font-size: $font-size-lg;
       color: theme-color("dark");
@@ -319,6 +319,7 @@
     .mobile-nav-link {
       position: static;
       transform: none;
+      padding: 0;
 
       a {
         font-size: $font-size-base;

lms/static/sass/bootstrap/_layouts.scss

@@ -45,21 +45,28 @@
   padding: 20px;
 
   .page-header-search {
-    @include media-breakpoint-up(md) {
-      margin-right: $baseline;
-    }
+    @include margin-right($baseline);
+
+    flex-grow: 1;
 
     .search-form {
       display: flex;
     }
   }
 
+  .form-actions {
+    @include media-breakpoint-down(xs) {
+      margin-top: $baseline/2;
+    }
+  }
+
   .page-header-main {
     flex-grow: 1;  // This column should consume all the available space
   }
 
   .page-header-secondary {
     display: flex;
+    flex-wrap: wrap;
 
     @include media-breakpoint-up(md) {
       margin-left: $baseline;

lms/static/sass/bootstrap/_legacy.scss

@@ -64,7 +64,7 @@ $lms-inactive-color: theme-color("disabled") !default;
 $success-color: theme-color("success") !default;
 $success-color-hover: theme-color("success") !default;
 $lms-hero-color: #005e90 !default;
-$lms-purchase-color: theme-color("success") !default;
+$lms-purchase-color: rgba(0, 155, 0, 1) !default;
 $border-color-2: $gray-400 !default;
 $link-hover: #065683 !default; // wcag2a compliant
 

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

@@ -3,7 +3,7 @@
 
   margin: 0 auto 0;
   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/features/_course-experience.scss

@@ -117,7 +117,7 @@
 
       .goal-option {
         text-decoration: none;
-        font-size: font-size(x-small);
+        font-size: $font-size-base;
         padding: $baseline/2;
         margin: $baseline/4 $baseline/4 0;
         flex-grow: 1;
@@ -213,12 +213,12 @@
     @include float(left);
 
     border: 1px solid $lms-border-color;
-    padding: $baseline*0.75 $baseline*0.75 $baseline*0.25;
+    padding: $baseline*0.75 $baseline*0.75 $baseline*0.5;
     border-radius: 5px;
     position: relative;
     width: 100%;
     cursor: pointer;
-    margin-bottom: $baseline/2;
+    margin-bottom: $baseline;
 
     &.hidden {
       display: none;
@@ -245,8 +245,8 @@
 
     .current-goal-container {
       .title {
+        @include margin($baseline/5, $baseline*0.4, 0, 0);
         @include float(left);
-        @include margin-right($baseline/4);
       }
 
       .title-label {
@@ -324,6 +324,7 @@
           list-style-type: none;
           border: 1px solid transparent;
           border-radius: 3px;
+          margin-bottom: $baseline/4;
 
           a.outline-item {
             display: flex;
@@ -369,6 +370,10 @@
           &:hover {
             border: 1px solid $lms-active-color;
           }
+
+          &:last-child {
+            margin-bottom: 0;
+          }
         }
 
         &:last-child {

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

 // Styles for course search results
 
 .search-results {
+  flex-grow: 1;
+
   .search-result-list {
     list-style: none;
     margin: 0;

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

@@ -24,29 +24,15 @@
     box-shadow: none;
     -webkit-transition: background-color 0.5s;
     transition: background-color 0.5s;
+    cursor: pointer;
 
-    &.active {
+    &.active,
+    &:hover {
       color: theme-color("success");
       background-color: theme-color("inverse");
       border-color: theme-color("success");
       background-image: none;
       box-shadow: none;
-
-      &:hover {
-        color: theme-color("inverse");
-        background-color: $success-color-hover;
-        border-color: $success-color-hover;
-        background-image: none;
-        box-shadow: none;
-      }
-    }
-
-    &:hover {
-      color: theme-color("inverse");
-      background-color: $success-color-hover;
-      border-color: $success-color-hover;
-      background-image: none;
-      box-shadow: none;
     }
   }
 
@@ -113,6 +99,7 @@
         right: $baseline;
         background-color: theme-color("success");
         border-color: theme-color("success");
+        color: theme-color("inverse");
         background-image: none;
         box-shadow: none;
 

lms/static/sass/features/_course-upgrade-message.scss

@@ -25,8 +25,9 @@
   // Message copy
   .vc-title {
     font-size: 1.25rem;
-    font-weight: 700;
+    font-weight: $font-weight-light;
     margin-bottom: 1rem;
+    width: calc(100% - 70px);
   }
 
   .vc-selling-points {
@@ -55,11 +56,32 @@
     }
   }
 
+  // Upgrade button
+  .btn-upgrade {
+    color: theme-color("inverse");
+    background-color: $lms-purchase-color;
+    font-size: $font-size-base;
+    -webkit-transition: $btn-transition;
+    transition: $btn-transition;
+
+    &:hover {
+      background-color: theme-color("success");
+    }
+  }
+
   // Show/hide button
   .vc-toggle {
-    @include float(right);
+    @include right($baseline/2);
 
+    top: $baseline/2;
+    position: absolute;
     color: theme-color("inverse");
+
+    &:hover {
+      cursor: pointer;
+      text-decoration: none;
+      color: theme-color("light");
+    }
   }
 
   // Cert image
@@ -80,30 +102,47 @@
 
 // Collapsed upgrade message
 .vc-message.polite {
+  @include padding($baseline/2, 0, $baseline/2, $baseline);
   padding-top: $baseline/2;
   padding-bottom: $baseline/2;
   min-height: 46px;
   display: flex;
-  flex-flow: row wrap;
   align-items: center;
 
   .vc-title {
-    margin: 0;
-
     @include margin-right(auto);
+
+    margin: 0;
+    flex-grow: 1;
   }
 
   .vc-cta {
-    @include margin-right(1rem);
+    flex-grow: 1;
   }
 
   .vc-toggle {
+    @include right(0);
+
+    margin: 0 $baseline/2;
     order: 99;
+    position: relative;
+    white-space: nowrap;
+    width: $baseline*6;
+    top: 0;
   }
 
   .vc-fade:not(.vc-polite-only) {
     display: none;
   }
+
+  @include media-breakpoint-down(sm) {
+    flex-flow: row wrap;
+
+    .vc-title {
+      width: auto;
+      margin-bottom: $baseline/2;
+    }
+  }
 }
 
 @media (max-width: $grid-breakpoints-sm) {

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

@@ -28,7 +28,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
         <div class="page-header-secondary">
             % if settings.FEATURES.get('ENABLE_COURSEWARE_SEARCH'):
                 <div class="page-header-search">
-                    <form class="search-form" role="search" action="${reverse('openedx.course_search.course_search_results', args=[course_key])}">
+                    <form class="search-form input-group" role="search" action="${reverse('openedx.course_search.course_search_results', args=[course_key])}">
                         <label class="field-label sr-only" for="search" id="search-hint">${_('Search the course')}</label>
                         <input
                                 class="field-input input-text search-input form-control"
@@ -37,7 +37,9 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
                                 id="search"
                                 placeholder="${_('Search the course')}"
                         />
+                        <span class="input-group-btn">
                             <button class="btn btn-outline-primary search-button" type="submit">${_('Search')}</button>
+                        </span>
                     </form>
                 </div>
             % endif
@@ -81,7 +83,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
                         </ul>
 
                         <div class="vc-cta vc-fade vc-polite-only">
-                            <a class="btn-upgrade"
+                            <a class="btn btn-upgrade"
                                href="${ upgrade_url }"
                                data-creative="hero_matthew_smith"
                                data-position="hero">${_("Upgrade ({price})").format(price=upgrade_price)}</a>

openedx/features/course_experience/tests/views/test_course_home.py

@@ -517,7 +517,7 @@ class CourseHomeFragmentViewTests(ModuleStoreTestCase):
         response = self.client.get(self.url)
         self.assertIn('vc-message', response.content)
         url = EcommerceService().get_checkout_page_url(self.verified_mode.sku)
-        self.assertIn('<a class="btn-upgrade"', response.content)
+        self.assertIn('<a class="btn btn-upgrade"', response.content)
         self.assertIn(url, response.content)
         self.assertIn('Upgrade (${price})</a>'.format(price=self.verified_mode.min_price), response.content)
 

openedx/features/course_experience/views/course_home_messages.py

@@ -172,7 +172,7 @@ def _register_course_goal_message(request, course):
             '{initial_tag}{goal_text}{closing_tag}'
         ).format(
             initial_tag=HTML(
-                '<button tabindex="0" aria-label="{aria_label_choice}" class="goal-option btn" '
+                '<button tabindex="0" aria-label="{aria_label_choice}" class="goal-option btn-outline-primary" '
                 'data-choice="{goal_key}">'
             ).format(
                 goal_key=goal_key,

openedx/features/course_search/templates/course_search/course-search-fragment.html

@@ -19,7 +19,7 @@ from openedx.features.course_experience import course_home_page_title
 %>
 
 <%block name="content">
-<div class="course-view pzge-content-container" id="course-container">
+<div class="course-view page-content-container" id="course-container">
     <header class="page-header has-secondary">
         <div class="page-header-main">
             <nav aria-label="${_('Search Results')}" class="sr-is-focusable" tabindex="-1">