diff --git a/lms/envs/common.py b/lms/envs/common.py
index 7964ce7feba4cc815e35b5ed3963006f91637034..1b70bb9d986e215366298d01adcbc7832abc061a 100644
--- a/lms/envs/common.py
+++ b/lms/envs/common.py
@@ -380,6 +380,9 @@ FEATURES = {
'TWITTER_SHARING': False,
'TWITTER_SHARING_TEXT': None
},
+
+ # Course discovery feature
+ 'ENABLE_COURSE_DISCOVERY': False,
}
# Ignore static asset files on import which match this pattern
@@ -2298,3 +2301,7 @@ PROFILE_IMAGE_MIN_BYTES = 100
# This is to check the domain in case of preview.
PREVIEW_DOMAIN = 'preview'
+
+# Sets the maximum number of courses listed on the homepage
+# If set to None, all courses will be listed on the homepage
+HOMEPAGE_COURSE_MAX = None
diff --git a/lms/envs/devstack.py b/lms/envs/devstack.py
index 8d229d05dd3c717083150243e759fa8e4d6eb791..4d799e49d1c1a0f5723b4ddbe4a4b04b73c203af 100644
--- a/lms/envs/devstack.py
+++ b/lms/envs/devstack.py
@@ -141,3 +141,8 @@ except ImportError:
MODULESTORE = convert_module_store_setting_if_needed(MODULESTORE)
SECRET_KEY = '85920908f28904ed733fe576320db18cabd7b6cd'
+
+########################## Course Discovery #######################
+FEATURES['ENABLE_COURSE_DISCOVERY'] = True
+FEATURES['COURSES_ARE_BROWSEABLE'] = True
+HOMEPAGE_COURSE_MAX = 9
diff --git a/lms/static/sass/multicourse/_home.scss b/lms/static/sass/multicourse/_home.scss
index 788ccadb2dd451869a76f69dbb16c2da0496c11c..2a452d45d06fe61d892bbf90f5bb9dc448efcce3 100644
--- a/lms/static/sass/multicourse/_home.scss
+++ b/lms/static/sass/multicourse/_home.scss
@@ -1,3 +1,7 @@
+$title-left-margin: grid-width(2) + $gw-gutter;
+$button-size: ($baseline*2.75);
+$course-search-input-height: ($button-size);
+
.home {
padding: 0;
@@ -20,29 +24,29 @@
width: flex-grid(12);
.outer-wrapper {
+ @include clearfix();
@extend .animation-home-header-pop-up;
- margin: 0 auto;
- padding: 240px ($baseline/2) 0;
position: relative;
- max-width: 1200px;
- min-width: 760px;
- @include clearfix();
+ margin: 0 auto ($baseline);
+ padding: ($baseline*5) ($baseline/2);
+ min-width: ($baseline*38);
+ max-width: ($baseline*60);
}
.title {
- background: $white;
- background: $course-header-bg;
- border: 1px solid $border-color-3;
- box-shadow: 0 4px 25px 0 rgba(0,0,0, 0.5);
+ @include margin-left($title-left-margin);
+ @include float(left);
@include box-sizing(border-box);
- min-height: 120px;
- margin-left: grid-width(2) + $gw-gutter;
- width: flex-grid(6);
- float: left;
- position: relative;
@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);
+ background: $white;
+ padding: ($baseline) ($baseline*1.5);
+ min-height: ($baseline*6);
vertical-align: top;
+ // STATE: hover and focus
&:hover, &:focus {
.actions {
display: none;
@@ -50,26 +54,73 @@
}
> hgroup {
+ @include left(0);
@include box-sizing(border-box);
+ @include transition(all 0.2s linear 0s);
+ @include text-align(left);
display: inline-block;
- left: 0px;
+ top: 0;
opacity: 1.0;
- padding: 20px 30px;
- top: 0px;
- @include transition(all 0.2s linear 0s);
- text-align: left;
+ padding-bottom: ($baseline);
h1 {
- margin-bottom: 0px;
- text-align: left;
+ @include text-align(left);
+ margin-bottom: 0;
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-transform: none;
}
h2 {
- font-style: italic;
- margin-bottom: 0px;
+ margin-bottom: 0;
text-transform: lowercase;
+ font-style: italic;
+ }
+ }
+
+ .course-search {
+ padding: ($baseline) 0;
+
+ .search-input {
+ @include float(left);
+ @include padding-right($button-size);
+ @include padding-left($baseline*0.5);
+ @extend %ui-depth1;
+ @extend %t-icon4;
+ @extend %t-demi-strong;
+ border: 2px solid $gray-l3;
+ border-radius: 3px;
+ box-shadow: none;
+ width: 100%;
+ height: $course-search-input-height;
+ color: $black;
+ font-style: $sans-serif;
+
+ // STATE: focus
+ &:focus {
+ @extend %no-outline;
+ border-color: $m-blue-d1;
+ }
+ }
+
+ .search-button {
+ @include right($baseline*1.5);
+ @include border-radius(1px, 3px, 3px, 1px);
+ @extend %ui-depth2;
+ @extend %t-icon3;
+ @extend %t-strong;
+ position: absolute;
+ border: 2px solid $m-blue-d1;
+ box-shadow: none;
+ background: $m-blue-d5;
+ padding: 0 ($baseline*0.7);
+ height: $course-search-input-height;
+ color: $white;
+ text-shadow: none;
+
+ // STATE: hover and focus
+ &:hover, &:focus {
+ background: $m-blue-l1;
+ }
}
}
}
diff --git a/lms/static/sass/views/_homepage.scss b/lms/static/sass/views/_homepage.scss
index fef6b17f4c33cd7d16d92ec11cff8490d1e04a73..f8f6583a69c7c45e4caf80be5e7108c2a0efb855 100644
--- a/lms/static/sass/views/_homepage.scss
+++ b/lms/static/sass/views/_homepage.scss
@@ -18,9 +18,10 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi
@extend %ui-no-list;
.courses-listing-item {
+ @include rtl() { $layout-direction: "RTL"; }
@include fill-parent();
- max-height: $course-card-height;
margin: ($baseline*0.75) 0 ($baseline*1.5) 0;
+ max-height: $course-card-height;
@include media($bp-medium) {
@include span-columns(4); // 4 of 8
diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html
index 8a311a5655a74c4201f729eb096eeac52622cd32..1bcb91b9d48f11acfd19f072ea9fde0660e988c1 100644
--- a/lms/templates/dashboard.html
+++ b/lms/templates/dashboard.html
@@ -104,13 +104,12 @@
</ul>
% else:
<section class="empty-dashboard-message">
+ <p>${_("Looks like you haven't enrolled in any courses yet.")}</p>
+
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
- <p>${_("Looks like you haven't enrolled in any courses yet.")}</p>
<a href="${marketing_link('COURSES')}">
${_("Find courses now!")}
</a>
- % else:
- <p>${_("Looks like you haven't enrolled in any courses yet.")}</p>
%endif
</section>
% endif
diff --git a/lms/templates/index.html b/lms/templates/index.html
index 2e0053c56945592207c2fbc98c244832b623d235..7a4a1ea71900f84c7578236097049fd84a7c6531 100644
--- a/lms/templates/index.html
+++ b/lms/templates/index.html
@@ -36,6 +36,16 @@
% endif
% endif
</hgroup>
+ % if settings.FEATURES.get('ENABLE_COURSE_DISCOVERY'):
+ <div class="course-search">
+ <form method="get" action="/courses">
+ <input class="search-input" name="search_query" type="text" placeholder="${_("Search for a course")}"></input>
+ <button class="search-button" type="submit">
+ <i class="icon fa fa-search" aria-hidden="true"></i>
+ </button>
+ </form>
+ </div>
+ % endif
</div>
@@ -54,17 +64,20 @@
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
<section class="courses">
<ul class="courses-listing">
- ## cap for showing 9 or less courses
- %for course in courses[:9]:
+ ## limiting the course number by using HOMEPAGE_COURSE_MAX as the maximum number of courses
+ %for course in courses[:settings.HOMEPAGE_COURSE_MAX]:
<li class="courses-listing-item">
<%include file="course.html" args="course=course" />
</li>
%endfor
</ul>
</section>
- <div class="courses-more">
- <a class="courses-more-cta" href="${marketing_link('COURSES')}" > ${_("View all Courses")} </a>
- </div>
+ ## in case there are courses that are not shown on the homepage, a 'View all Courses' link should appear
+ % if settings.HOMEPAGE_COURSE_MAX and len(courses) > settings.HOMEPAGE_COURSE_MAX:
+ <div class="courses-more">
+ <a class="courses-more-cta" href="${marketing_link('COURSES')}" > ${_("View all Courses")} </a>
+ </div>
+ % endif
% endif
</section>
diff --git a/lms/templates/navigation-edx.html b/lms/templates/navigation-edx.html
index 75815e31ce21a97e3bb5c2d7c1e09a0bbed426c0..bc3f8e525c0355033af84739b4b80c47db03879d 100644
--- a/lms/templates/navigation-edx.html
+++ b/lms/templates/navigation-edx.html
@@ -56,15 +56,15 @@ site_status_msg = get_site_status_msg(course_id)
<nav aria-label="Main" class="nav-main">
<ul class="left nav-global authenticated">
<%block name="navigation_global_links_authenticated">
- <li class="nav-global-01">
- <a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
- </li>
- <li class="nav-global-02">
- <a href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
- </li>
- <li class="nav-global-03">
- <a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
- </li>
+ <li class="nav-global-01">
+ <a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
+ </li>
+ <li class="nav-global-02">
+ <a href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
+ </li>
+ <li class="nav-global-03">
+ <a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
+ </li>
</%block>
</ul>
</nav>
diff --git a/lms/templates/navigation.html b/lms/templates/navigation.html
index 8528d6b72364c9155fdd5b127ed9165c724131d6..b0c1dd5fa300fcc85a31695b3b0b898ffaf3f57d 100644
--- a/lms/templates/navigation.html
+++ b/lms/templates/navigation.html
@@ -48,7 +48,7 @@ site_status_msg = get_site_status_msg(course_id)
</h1>
% if course:
- <h2><span class="provider">${course.display_org_with_default | h}:</span>
+ <h2><span class="provider">${course.display_org_with_default | h}:</span>
${course.display_number_with_default | h}
<%
display_name = course.display_name_with_default
@@ -113,9 +113,11 @@ site_status_msg = get_site_status_msg(course_id)
<li class="nav-global-01">
<a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
</li>
- <li class="nav-global-02">
- <a href="${marketing_link('COURSES')}">${_("Courses")}</a>
- </li>
+ % if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
+ <li class="nav-global-02">
+ <a href="${marketing_link('COURSES')}">${_("Courses")}</a>
+ </li>
+ % endif
<li class="nav-global-03">
<a href="${marketing_link('SCHOOLS')}">${_("Schools")}</a>
</li>