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 239 additions and 180 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,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>
......
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