(SOL-776)(SOL-740)(SOL-532) Added setting flags for COURSE DISCOVERY feature; Exposed course search input as well as the course result page; Added flag for limiting the number of course cards on the homepage;
This commit is contained in:
marjev
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 {
|
||||
@extend .animation-home-header-pop-up;
|
||||
margin: 0 auto;
|
||||
padding: 240px ($baseline/2) 0;
|
||||
position: relative;
|
||||
max-width: 1200px;
|
||||
min-width: 760px;
|
||||
@include clearfix();
|
||||
@extend .animation-home-header-pop-up;
|
||||
position: relative;
|
||||
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);
|
||||
display: inline-block;
|
||||
left: 0px;
|
||||
opacity: 1.0;
|
||||
padding: 20px 30px;
|
||||
top: 0px;
|
||||
@include transition(all 0.2s linear 0s);
|
||||
text-align: left;
|
||||
@include text-align(left);
|
||||
display: inline-block;
|
||||
top: 0;
|
||||
opacity: 1.0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user