Skip to content

E
edx-platform
Commit b9ed7582 by Marco Morales Committed by Davorin Sego
Options

Initial syles cleanup and changes for course discovery on openedx

parent 36e31e10
Showing with 142 additions and 83 deletions
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,9 +330,11 @@ $facet-background-color: #007db8;
}
}
}
.search-facets{
// +Facets - Sidebar - Search
// ====================
.find-courses .search-facets {
@include fill-parent();
@include omega();
@include box-sizing(border-box);
......@@ -349,21 +385,24 @@ $facet-background-color: #007db8;
content: "";
}
h2,
section {
@extend %t-icon5;
@extend %t-strong;
margin: 0 ($baseline/2);
border: medium none;
.header-search-facets, section {
padding: ($baseline/2);
margin: 0;
color: $facet-text-color;
font-family: $sans-serif;
text-transform: none;
}
h3 {
@extend %t-icon6;
@extend %t-strong;
.header-search-facets {
@extend %t-title6;
}
section {
@extend %t-title6;
margin: 0 ($baseline/2);
}
.header-facet {
@extend %t-title6;
margin: 0 ($baseline/2) ($baseline/2) ($baseline/2);
color: $facet-text-color;
font-family: $sans-serif;
......@@ -374,15 +413,16 @@ $facet-background-color: #007db8;
padding: ($baseline/2) 0;
}
.facet-option {
a {
@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;
padding: 0 ($baseline*0.6);
width: 100%;
overflow: hidden;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
color: $facet-text-color;
......@@ -395,11 +435,18 @@ $facet-background-color: #007db8;
}
}
ul {
margin: 0;
padding: 0;
.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;
list-style: outside none none;
text-overflow: ellipsis;
white-space: nowrap;
color: $facet-text-color;
&.collapse {
max-height: ($baseline*14);
......@@ -431,12 +478,17 @@ $facet-background-color: #007db8;
text-decoration: none;
.count,
a {
color: $white;
.count,
.facet-option {
color: $white;
}
}
}
}
}
.search-facets-lists section {
border-top: 1px solid $courseware-button-border-color;
......@@ -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>
......
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