Skip to content

E
edx-platform
Commit 2f398559 by Martyn James
Options

Merge pull request #7845 from edx/mjevtic/SOL-776 

(SOL-776)(SOL-740)(SOL-532) Prerequisites for course discovery feature
parents f51dbc5b 8107073c
Showing with 123 additions and 45 deletions
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
......@@ -2318,3 +2321,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
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
lms/static/sass/multicourse/_home.scss
$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;
}
}
}
}
......
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
......
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
......
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>
......
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>
......
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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment