Initial syles cleanup and changes for course discovery on openedx

cms/envs/common.py

@@ -150,7 +150,7 @@ FEATURES = {
     'LICENSING': False,
 
     # Enable the courseware search functionality
-    'ENABLE_COURSEWARE_INDEX': False,
+    'ENABLE_COURSEWARE_INDEX': True,
 
     # Enable content libraries search functionality
     'ENABLE_LIBRARY_INDEX': False,

common/djangoapps/student/views.py

@@ -972,7 +972,7 @@ def login_user(request, error=""):  # pylint: disable-msg=too-many-statements,un
                       platform_name=settings.PLATFORM_NAME, provider_name=requested_provider.name
                 )
                 + "<br/><br/>" +
-                _("If you don't have an {platform_name} account yet, click <strong>Register Now</strong> at the top of the page.").format(
+                _("If you don't have an {platform_name} account yet, click <strong>Register</strong> at the top of the page.").format(
                     platform_name=settings.PLATFORM_NAME
                 ),
                 content_type="text/plain",

lms/djangoapps/courseware/features/homepage.feature

@@ -8,9 +8,9 @@ Feature: LMS.Homepage for web users
     Given I visit the homepage
     Then I should see a link called "Sign in"
 
-  Scenario: User can see the "Register Now" button
+  Scenario: User can see the "Register" button
     Given I visit the homepage
-    Then I should see a link called "Register Now"
+    Then I should see a link called "Register"
 
   Scenario Outline: User can see main parts of the page
     Given I visit the homepage

lms/envs/common.py

@@ -359,10 +359,10 @@ FEATURES = {
     'MODE_CREATION_FOR_TESTING': False,
 
     # Courseware search feature
-    'ENABLE_COURSEWARE_SEARCH': False,
+    'ENABLE_COURSEWARE_SEARCH': True,
 
     # Dashboard search feature
-    'ENABLE_DASHBOARD_SEARCH': False,
+    'ENABLE_DASHBOARD_SEARCH': True,
 
     # log all information from cybersource callbacks
     'LOG_POSTPAY_CALLBACKS': True,
@@ -389,7 +389,7 @@ FEATURES = {
     },
 
     # Course discovery feature
-    'ENABLE_COURSE_DISCOVERY': False,
+    'ENABLE_COURSE_DISCOVERY': True,
 
     # Software secure fake page feature flag
     'ENABLE_SOFTWARE_SECURE_FAKE': False,

lms/static/sass/_build-lms.scss

@@ -70,7 +70,7 @@
 @import 'discussion/utilities/shame';
 
 // search
-@import 'search/_search';
+@import 'search/search';
 
 // news
 @import 'news';

lms/static/sass/multicourse/_home.scss

 @import '../base/grid-settings';
 @import 'neat/neat'; // lib - Neat
 
-$title-left-margin: grid-width(2) + $gw-gutter;
+$title-left-margin: grid-width(3);
 $button-size: ($baseline*2.75);
 $course-search-input-height: ($button-size);
 
@@ -15,12 +15,10 @@ $course-search-input-height: ($button-size);
 
   > header {
     @include linear-gradient($homepage__header--gradient__color--alpha, $homepage__header--gradient__color--bravo);
+    @include clearfix();
     background-size: cover;
     background-image: $homepage-bg-image;
-    border-bottom: 1px solid $border-color-3;
     box-shadow: 0 1px 0 0 $course-header-bg, inset 0 -1px 5px 0 $shadow-l1;
-    @include clearfix();
-    height: 460px;
     overflow: hidden;
     margin-top: $header_image_margin;
     padding: 0;
@@ -30,8 +28,8 @@ $course-search-input-height: ($button-size);
       @include clearfix();
       @extend .animation-home-header-pop-up;
       position: relative;
-      margin: 0 auto ($baseline);
-      padding: ($baseline*5) ($baseline/2);
+      margin: 0 auto;
+      padding: ($baseline*3);
       max-width: ($baseline*60);
     }
 
@@ -41,8 +39,7 @@ $course-search-input-height: ($button-size);
       @include box-sizing(border-box);
       @include transition(all 0.2s linear 0s);
       position: relative;
-      border: 1px solid $border-color-3;
-      box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.5);
+      box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.5);
       background: $white;
       padding: ($baseline) ($baseline*1.5);
       min-height: ($baseline*6);
@@ -105,15 +102,14 @@ $course-search-input-height: ($button-size);
           @include padding-right($button-size);
           @include padding-left($baseline*0.5);
           @extend %ui-depth1;
-          @extend %t-icon4;
-          @extend %t-demi-strong;
+          @extend %t-title5;
           border: 2px solid $gray-l3;
           border-radius: 3px;
           box-shadow: none;
           width: 100%;
           height: $course-search-input-height;
           color: $black;
-          font-style: $sans-serif;
+          font-style: normal;
 
           // STATE: focus
           &:focus {

lms/static/sass/search/_search.scss

@@ -123,7 +123,6 @@
 
 }
 
-
 .courseware-search-bar {
   box-shadow: 0 1px 0 $white inset, 0 -1px 0 $shadow-l1 inset;
 }

lms/static/sass/shared/_course_object.scss

@@ -226,7 +226,7 @@
       &:hover, &:focus {
         background: $course-profile-bg;
         border-color: $border-color-1;
-        box-shadow: 0 1px 16px 0 rgba($shadow-color, 0.4);
+        box-shadow: 0 1px 4px 0 rgba($shadow-color, 0.4);
 
         .info {
           top: -150px;

lms/static/sass/shared/_header.scss

@@ -3,7 +3,7 @@
 
 header.global {
   @extend %ui-depth1;
-  border-bottom: 1px solid $m-gray;
+  border-bottom: 4px solid $courseware-border-bottom-color;
   box-shadow: 0 1px 5px 0 $shadow-l1;
   background: $header-bg;
   position: relative;

lms/static/sass/views/_homepage.scss

 // lms - views - homepage view
 // ====================
+// TO-DO: combine this with _home.scss as a cleanup story
 
 $learn-more-horizontal-position: calc(50% - 100px); // calculate the left position for "LEARN MORE" content
 
 .courses-container {
   @include outer-container;
-  padding: ($baseline*0.9) ($baseline/2) 0 ($baseline/2);
 
   .courses {
     @include row();
@@ -75,11 +75,12 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi
 
         .course-organization, .course-code, .course-date {
           @extend %t-icon6;
-          color: $black;
+          color: $gray-d2;
         }
 
         .course-organization, .course-code, .course-title {
           display: block;
+          text-transform: none;
         }
 
         .course-organization {

lms/templates/courseware/courses.html

@@ -56,29 +56,17 @@
 %>
 
 <section class="find-courses">
-
-  <header class="search">
-    <div class="inner-wrapper main-search">
-      <hgroup>
-        <div class="logo">
-          <img src="${logo_file}" alt="${logo_alt_text}" />
-        </div>
-        <h2>${course_index_overlay_text}</h2>
-      </hgroup>
-    </div>
-  </header>
-
   <section class="courses-container">
 
     % if course_discovery_enabled:
-    <div id="discovery-form" role="search" aria-label="course">
-      <form>
+    <div id="discovery-form" role="search" aria-label="course" class="wrapper-search-context">
+      <form class="wrapper-search-input">
         <input class="discovery-input" placeholder="${_('Search for a course')}" type="text"/><!-- removes spacing
         --><button type="submit" class="button postfix discovery-submit" aria-label="${_('Search')}">
           <i class="icon fa fa-search" aria-hidden="true"></i>
         </button>
       </form>
-      <div id="discovery-message"></div>
+      <div id="discovery-message" class="search-status-label"></div>
       <div aria-live="polite" aria-relevant="all">
         <div id="loading-indicator" class="hidden">
           <i class="icon fa fa-spinner fa-spin"></i> ${_('Loading')}

lms/templates/discovery/search_facets_list.underscore

-<h2>
+<h2 class="header-search-facets">
     <%= gettext('Refine your search') %>
 </h2>
 <section class="search-facets-lists">

lms/templates/discovery/search_facets_section.underscore

-<h3>
+<h3 class="header-facet">
     <%= displayName %>
 </h3>
 <ul data-facet="<%= name %>" class="facet-list collapse">

lms/templates/navigation.html

@@ -124,15 +124,21 @@ site_status_msg = get_site_status_msg(course_id)
         % endif
       </%block>
       % if not settings.FEATURES['DISABLE_LOGIN_BUTTON']:
+          % if settings.FEATURES.get('ENABLE_COURSE_DISCOVERY'):
+          <li class="nav-global-05">
+            <a class="cta cta-discovery" href="/courses">${_("Find Courses")}</a>
+          </li>
+          %endif
           % if course and settings.FEATURES.get('RESTRICT_ENROLL_BY_REG_METHOD') and course.enrollment_domain:
           <li class="nav-global-04">
-            <a class="cta cta-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register Now")}</a>
+            <a class="cta cta-register" href="${reverse('course-specific-register', args=[course.id.to_deprecated_string()])}">${_("Register")}</a>
           </li>
           % else:
           <li class="nav-global-04">
-            <a class="cta cta-register" href="/register${login_query()}">${_("Register Now")}</a>
+            <a class="cta cta-register" href="/register${login_query()}">${_("Register")}</a>
           </li>
           % endif
+
       % endif
     </ol>