From b9ed758246dc44872d61b2a9c89e319253c33a26 Mon Sep 17 00:00:00 2001 From: Marco Morales Date: Wed, 20 May 2015 18:27:18 -0400 Subject: [PATCH 1/4] Initial syles cleanup and changes for course discovery on openedx --- cms/envs/common.py | 2 +- common/djangoapps/student/views.py | 2 +- .../courseware/features/homepage.feature | 4 +- lms/envs/common.py | 6 +- lms/static/sass/_build-lms.scss | 2 +- lms/static/sass/multicourse/_courses.scss | 351 +++++++++++------- lms/static/sass/multicourse/_home.scss | 18 +- lms/static/sass/search/_search.scss | 1 - lms/static/sass/shared/_course_object.scss | 2 +- lms/static/sass/shared/_header.scss | 2 +- lms/static/sass/views/_homepage.scss | 5 +- lms/templates/courseware/courses.html | 18 +- .../discovery/search_facets_list.underscore | 2 +- .../search_facets_section.underscore | 2 +- lms/templates/navigation.html | 10 +- 15 files changed, 243 insertions(+), 184 deletions(-) diff --git a/cms/envs/common.py b/cms/envs/common.py index 1c93ff78ea..ccfba2da7c 100644 --- a/cms/envs/common.py +++ b/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, diff --git a/common/djangoapps/student/views.py b/common/djangoapps/student/views.py index 1420aa5432..c1b98a3a40 100644 --- a/common/djangoapps/student/views.py +++ b/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 ) + "

" + - _("If you don't have an {platform_name} account yet, click Register Now at the top of the page.").format( + _("If you don't have an {platform_name} account yet, click Register at the top of the page.").format( platform_name=settings.PLATFORM_NAME ), content_type="text/plain", diff --git a/lms/djangoapps/courseware/features/homepage.feature b/lms/djangoapps/courseware/features/homepage.feature index 2cf3173713..9457d6e7b8 100644 --- a/lms/djangoapps/courseware/features/homepage.feature +++ b/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 diff --git a/lms/envs/common.py b/lms/envs/common.py index 63cb891399..bb37df8f85 100644 --- a/lms/envs/common.py +++ b/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, diff --git a/lms/static/sass/_build-lms.scss b/lms/static/sass/_build-lms.scss index d42005f107..8e2bb34ce2 100644 --- a/lms/static/sass/_build-lms.scss +++ b/lms/static/sass/_build-lms.scss @@ -70,7 +70,7 @@ @import 'discussion/utilities/shame'; // search -@import 'search/_search'; +@import 'search/search'; // news @import 'news'; diff --git a/lms/static/sass/multicourse/_courses.scss b/lms/static/sass/multicourse/_courses.scss index d3f98320c9..d6d83c9cd1 100644 --- a/lms/static/sass/multicourse/_courses.scss +++ b/lms/static/sass/multicourse/_courses.scss @@ -1,12 +1,30 @@ +// 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); - .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; + @include media($bp-tiny) { + @include span-columns(4); + } + + @include media($bp-small) { + @include span-columns(3); + } + + @include media($bp-medium) { + @include span-columns(4); + } + + @include media($bp-large) { + @include span-columns(4); + } + + @include media($bp-huge) { + @include span-columns(3); + } + + &.phone-menu { + border: medium none; + padding: 0; + overflow: visible; + } + + &:before { + @include right(0); + position: absolute; + top: (-$baseline*0.15); + opacity: 0; background-color: $white; - max-height: ($baseline*100); + padding: ($baseline*2) ($baseline*0.75) 0 ($baseline*0.75); + width: ($baseline*2.5); + height: ($baseline/4); + content: ""; + } - @include media($bp-tiny) { - @include span-columns(4); - } + .header-search-facets, section { + padding: ($baseline/2); + margin: 0; + color: $facet-text-color; + text-transform: none; + } + + .header-search-facets { + @extend %t-title6; + } - @include media($bp-small) { - @include span-columns(3); - } + section { + @extend %t-title6; + margin: 0 ($baseline/2); + } - @include media($bp-medium) { - @include span-columns(4); - } + .header-facet { + @extend %t-title6; + margin: 0 ($baseline/2) ($baseline/2) ($baseline/2); + color: $facet-text-color; + font-family: $sans-serif; + } - @include media($bp-large) { - @include span-columns(4); - } + section { + margin: 0; + padding: ($baseline/2) 0; + } - @include media($bp-huge) { - @include span-columns(3); - } + 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; - &.phone-menu { - border: medium none; - padding: 0; - overflow: visible; - } - - &: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: ""; - } - - h2, - section { - @extend %t-icon5; - @extend %t-strong; - margin: 0 ($baseline/2); - border: medium none; - padding: ($baseline/2); + //STATE: hover, visited + &:hover, + &:visited { color: $facet-text-color; - font-family: $sans-serif; - text-transform: none; + 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); } - 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; - } - - .facet-option { - @include float(left); - @include box-sizing(border-box); + li { + @include clearfix(); @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; - - //STATE: hover, visited - &:hover, - &:visited { - color: $facet-text-color; - text-decoration: none; - } - } - - ul { - margin: 0; + @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; + //STATE: hover + &:hover { + background: $facet-background-color; + color: $white; + text-decoration: none; - .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; + .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); + + } +} diff --git a/lms/static/sass/multicourse/_home.scss b/lms/static/sass/multicourse/_home.scss index cae7e48cb8..9dec0e7eb8 100644 --- a/lms/static/sass/multicourse/_home.scss +++ b/lms/static/sass/multicourse/_home.scss @@ -1,7 +1,7 @@ @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 { diff --git a/lms/static/sass/search/_search.scss b/lms/static/sass/search/_search.scss index dd757ae95f..d72c7cff48 100644 --- a/lms/static/sass/search/_search.scss +++ b/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; } diff --git a/lms/static/sass/shared/_course_object.scss b/lms/static/sass/shared/_course_object.scss index ade6464c51..16fb132a2b 100644 --- a/lms/static/sass/shared/_course_object.scss +++ b/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; diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index 0d3b06d7bd..2d200efb2a 100644 --- a/lms/static/sass/shared/_header.scss +++ b/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; diff --git a/lms/static/sass/views/_homepage.scss b/lms/static/sass/views/_homepage.scss index 7cba577023..46efb5517a 100644 --- a/lms/static/sass/views/_homepage.scss +++ b/lms/static/sass/views/_homepage.scss @@ -1,11 +1,11 @@ // 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 { diff --git a/lms/templates/courseware/courses.html b/lms/templates/courseware/courses.html index ce124bb536..7c474d6f37 100644 --- a/lms/templates/courseware/courses.html +++ b/lms/templates/courseware/courses.html @@ -56,29 +56,17 @@ %>
- -
-
-
- -

${course_index_overlay_text}

-
-
-
-
% if course_discovery_enabled: -