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/_courses.scss

+// lms - views - course discovery 
+// ====================
+
+// Table of Contents 
+// * +Imports - Search
+// * +Variables - Search
+// * +Layout - Courses Container
+// * +Header - Course Search
+// * +Search Input 
+// * +Filters - Search
+// * +Facets - Sidebar - Search
+// * +All Other Styles
+
+
+// +Imports - Search
+// ==================== 
 @import '../base/grid-settings';
 @import 'neat/neat'; // lib - Neat
 
+// +Variables - Search
+// ==================== 
 $facet-text-color: #3d3e3f;
 $facet-background-color: #007db8;
 
+// +Layout - Courses Container
+// ==================== 
 .find-courses, .university-profile {
-  background: $course-profile-bg;
-  padding-bottom: ($baseline*3);
 
   .discovery-button:not(:disabled) {
     @extend %t-action2;
@@ -27,17 +45,7 @@ $facet-background-color: #007db8;
   }
 
   .courses-container {
-
-    #discovery-form {
-      * {
-        display:inline;
-      }
-
-      #discovery-message,
-      #loading-indicator {
-        @include line-height(37.84);
-      }
-    }
+    padding: ($baseline*3) ($baseline/2) 0 ($baseline/2);
 
     .courses {
       @include rtl() { $layout-direction: "RTL"; }
@@ -117,6 +125,11 @@ $facet-background-color: #007db8;
       }
     }
   }
+}
+
+// +Hero - Home Header
+// ==================== 
+.find-courses, .university-profile {
 
   header.search {
     background: $course-profile-bg;
@@ -197,18 +210,34 @@ $facet-background-color: #007db8;
       }
     }
   }
+}
 
-  section.message {
-    border-top: 1px solid $border-color-2;
+// +Search Input 
+// ==================== 
+.find-courses {
+
+  .wrapper-search-context {
     @include clearfix();
-    margin-top: $baseline;
-    padding-top: ($baseline*3);
-    @include columns(2 20px);
-  }
 
+    .search-status-label {
+      @extend %t-title4;
+      @include line-height(50);
+      display: inline-block;
+      width: flex-grid(9);
+
+    }
+
+    .wrapper-search-input {
+      display: inline-block;
+      width: flex-grid(3);
+      vertical-align: top;
+      margin-left: 24px;
+    }
+  }
+  
   .discovery-input {
     @extend %ui-depth1;
-    @extend %t-icon4;
+    @extend %t-copy-sub1;
     @extend %t-demi-strong;
     @include border-radius(0);
     @include border-top-left-radius(3px);
@@ -246,12 +275,17 @@ $facet-background-color: #007db8;
       background: $m-blue-l1;
     }
   }
+}
+
+// +Filters - Search
+// ==================== 
+.find-courses {
 
   .filters {
     @include clearfix();
     margin-top: ($baseline/2);
-    border-top: 1px solid $courseware-button-border-color;
-    border-bottom: 1px solid $courseware-button-border-color;
+    border-top: 2px solid $courseware-button-border-color;
+    border-bottom: 2px solid $courseware-button-border-color;
     width: 100%;
     height: auto;
     max-height: ($baseline*10);
@@ -285,7 +319,7 @@ $facet-background-color: #007db8;
       @include line-height(29.73);
       @extend %t-icon5;
       @extend %t-strong;
-      margin: ($baseline/2) 0;
+      margin: ($baseline/2);
       width: auto;
       text-align: center;
       color: $m-blue-d1;
@@ -296,139 +330,156 @@ $facet-background-color: #007db8;
     }
   }
 
+}
 
+// +Facets - Sidebar - Search
+// ==================== 
+.find-courses .search-facets {
+  @include fill-parent();
+  @include omega();
+  @include box-sizing(border-box);
+  @extend %ui-depth1;
+  position: relative;
+  margin: ($baseline*2) 0 ($baseline*3.5) 0;
+  box-shadow: 1px 2px 5px $black-t0;
+  border-top: 1px solid $black;
+  border-bottom: 2px solid $black;
+  background-color: $white;
+  max-height: ($baseline*100);
+
+  @include media($bp-tiny) {
+    @include span-columns(4);
+  }
 
-  .search-facets{
-    @include fill-parent();
-    @include omega();
-    @include box-sizing(border-box);
-    @extend %ui-depth1;
-    position: relative;
-    margin: ($baseline*2) 0 ($baseline*3.5) 0;
-    box-shadow: 1px 2px 5px $black-t0;
-    border-top: 1px solid $black;
-    border-bottom: 2px solid $black;
-    background-color: $white;
-    max-height: ($baseline*100);
+  @include media($bp-small) {
+    @include span-columns(3);
+  }
 
-    @include media($bp-tiny) {
-      @include span-columns(4);
-    }
+  @include media($bp-medium) {
+    @include span-columns(4);
+  }
 
-    @include media($bp-small) {
-      @include span-columns(3);
-    }
+  @include media($bp-large) {
+    @include span-columns(4);
+  }
 
-    @include media($bp-medium) {
-      @include span-columns(4);
-    }
+  @include media($bp-huge) {
+    @include span-columns(3);
+  }
 
-    @include media($bp-large) {
-      @include span-columns(4);
-    }
+  &.phone-menu {
+    border: medium none;
+    padding: 0;
+    overflow: visible;
+  }
 
-    @include media($bp-huge) {
-      @include span-columns(3);
-    }
+  &:before {
+    @include right(0);
+    position: absolute;
+    top: (-$baseline*0.15);
+    opacity: 0;
+    background-color: $white;
+    padding: ($baseline*2) ($baseline*0.75) 0 ($baseline*0.75);
+    width: ($baseline*2.5);
+    height: ($baseline/4);
+    content: "";
+  }
 
-    &.phone-menu {
-      border: medium none;
-      padding: 0;
-      overflow: visible;
-    }
+  .header-search-facets, section {
+    padding: ($baseline/2);
+    margin: 0;
+    color: $facet-text-color;
+    text-transform: none;
+  }
+  
+  .header-search-facets {
+    @extend %t-title6;
+  }
 
-    &:before {
-      @include right(0);
-      position: absolute;
-      top: (-$baseline*0.15);
-      opacity: 0;
-      background-color: $white;
-      padding: ($baseline*2) ($baseline*0.75) 0 ($baseline*0.75);
-      width: ($baseline*2.5);
-      height: ($baseline/4);
-      content: "";
-    }
+  section {
+    @extend %t-title6;
+    margin: 0 ($baseline/2);
+  }
 
-    h2,
-    section {
-      @extend %t-icon5;
-      @extend %t-strong;
-      margin: 0 ($baseline/2);
-      border: medium none;
-      padding: ($baseline/2);
-      color: $facet-text-color;
-      font-family: $sans-serif;
-      text-transform: none;
-    }
+  .header-facet {
+    @extend %t-title6;
+    margin: 0 ($baseline/2) ($baseline/2) ($baseline/2);
+    color: $facet-text-color;
+    font-family: $sans-serif;
+  }
 
-    h3 {
-      @extend %t-icon6;
-      @extend %t-strong;
-      margin: 0 ($baseline/2) ($baseline/2) ($baseline/2);
-      color: $facet-text-color;
-      font-family: $sans-serif;
-    }
+  section {
+    margin: 0;
+    padding: ($baseline/2) 0;
+  }
 
-    section {
-      margin: 0;
-      padding: ($baseline/2) 0;
-    }
+  a {
+    @include float(left);
+    @include box-sizing(border-box);
+    @include line-height(18.92);
+    @include transition(all $tmg-f2 ease-out 0s);
+    opacity: 1;
+    padding: 0 ($baseline*0.6);
+    width: 100%;
+    overflow: hidden;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: $facet-text-color;
 
-    .facet-option {
-      @include float(left);
-      @include box-sizing(border-box);
-      @include line-height(18.92);
-      @include transition(all $tmg-f2 ease-out 0s);
-      @extend %t-action3;
-      opacity: 1;
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+    //STATE: hover, visited
+    &:hover,
+    &:visited {
       color: $facet-text-color;
+      text-decoration: none;
+    }
+  }
 
-      //STATE: hover, visited
-      &:hover,
-      &:visited {
-        color: $facet-text-color;
-        text-decoration: none;
-      }
+  .facet-option {
+    @include float(left);
+    @include box-sizing(border-box);
+    @include line-height(18.92);
+    @include transition(all $tmg-f2 ease-out 0s);
+    @extend %t-action3;
+    opacity: 1;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: $facet-text-color;
+
+    &.collapse {
+      max-height: ($baseline*14);
     }
 
-    ul {
-      margin: 0;
+    li {
+      @include clearfix();
+      @include line-height(18.92);
+      @extend %t-icon6;
+      position: relative;
+      clear: both;
+      border-top: 1px solid $white;
       padding: 0;
+      height: ($baseline*1.5);
       overflow: hidden;
-      list-style: outside none none;
 
-      &.collapse {
-        max-height: ($baseline*14);
+      .count {
+        @include right($baseline*0.6);
+        @include box-sizing(border-box);
+        @include transition(all 0.2s ease-out);
+        @include line-height(18.92);
+        position: absolute;
       }
 
-      li {
-        @include clearfix();
-        @include line-height(18.92);
-        @extend %t-icon6;
-        position: relative;
-        clear: both;
-        border-top: 1px solid $white;
-        padding: 0;
-        height: ($baseline*1.5);
-        overflow: hidden;
-
-        .count {
-          @include right($baseline*0.6);
-          @include box-sizing(border-box);
-          @include transition(all 0.2s ease-out);
-          @include line-height(18.92);
-          position: absolute;
-        }
+      //STATE: hover
+      &:hover {
+        background: $facet-background-color;
+        color: $white;
+        text-decoration: none;
 
-        //STATE: hover
-        &:hover {
-          background: $facet-background-color;
+        .count,
+        a {
           color: $white;
-          text-decoration: none;
 
           .count,
           .facet-option {
@@ -437,13 +488,14 @@ $facet-background-color: #007db8;
         }
       }
     }
+  }
 
-    .search-facets-lists section {
-      border-top: 1px solid $courseware-button-border-color;
-    }
+  .search-facets-lists section {
+    border-top: 1px solid $courseware-button-border-color;
+  }
 
-    .toggle {
-      @include clearfix();
+  .toggle {
+    @include clearfix();
 
       button {
         @extend %t-icon6;
@@ -453,3 +505,20 @@ $facet-background-color: #007db8;
     }
   }
 }
+
+// +All Other Styles
+// ==================== 
+.find-courses, .university-profile {
+  background: $course-profile-bg;
+  padding-bottom: ($baseline*3);
+
+
+  section.message {
+    @include columns(2 20px);
+    @include clearfix();
+    border-top: 1px solid $border-color-2;
+    margin-top: $baseline;
+    padding-top: ($baseline*3);
+
+  }
+}

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>