From 2972e9110c7293c67361328590fa482530f9b92a Mon Sep 17 00:00:00 2001 From: Davorin Sego Date: Thu, 28 May 2015 18:02:28 +0200 Subject: [PATCH] search input element styling improvements, test clean up --- cms/envs/common.py | 2 +- common/djangoapps/student/views.py | 6 +- lms/envs/common.py | 6 +- lms/static/js/discovery/app.js | 1 + lms/static/js/discovery/form.js | 9 + lms/static/js/fixtures/discovery.html | 32 +- .../js/spec/discovery/discovery_spec.js | 2 +- lms/static/sass/base/_base.scss | 1 - lms/static/sass/base/_variables.scss | 13 + lms/static/sass/multicourse/_courses.scss | 366 +++++++++--------- lms/static/sass/multicourse/_dashboard.scss | 2 +- lms/static/sass/multicourse/_home.scss | 2 +- lms/static/sass/shared/_header.scss | 4 +- lms/static/sass/views/_homepage.scss | 2 +- lms/templates/course.html | 4 +- lms/templates/courseware/courses.html | 20 +- .../discovery/result_item.underscore | 4 +- 17 files changed, 248 insertions(+), 228 deletions(-) diff --git a/cms/envs/common.py b/cms/envs/common.py index ccfba2da7c..1c93ff78ea 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': True, + 'ENABLE_COURSEWARE_INDEX': False, # Enable content libraries search functionality 'ENABLE_LIBRARY_INDEX': False, diff --git a/common/djangoapps/student/views.py b/common/djangoapps/student/views.py index c1b98a3a40..e0fad367aa 100644 --- a/common/djangoapps/student/views.py +++ b/common/djangoapps/student/views.py @@ -972,9 +972,9 @@ 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 at the top of the page.").format( - platform_name=settings.PLATFORM_NAME - ), + _("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", status=403 ) diff --git a/lms/envs/common.py b/lms/envs/common.py index bb37df8f85..63cb891399 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': True, + 'ENABLE_COURSEWARE_SEARCH': False, # Dashboard search feature - 'ENABLE_DASHBOARD_SEARCH': True, + 'ENABLE_DASHBOARD_SEARCH': False, # log all information from cybersource callbacks 'LOG_POSTPAY_CALLBACKS': True, @@ -389,7 +389,7 @@ FEATURES = { }, # Course discovery feature - 'ENABLE_COURSE_DISCOVERY': True, + 'ENABLE_COURSE_DISCOVERY': False, # Software secure fake page feature flag 'ENABLE_SOFTWARE_SECURE_FAKE': False, diff --git a/lms/static/js/discovery/app.js b/lms/static/js/discovery/app.js index 584c24169f..7e9a89ac59 100644 --- a/lms/static/js/discovery/app.js +++ b/lms/static/js/discovery/app.js @@ -37,6 +37,7 @@ define(['backbone', 'course_discovery_meanings'], function(Backbone, meanings) { dispatcher.listenTo(collection, 'search', function () { if (collection.length > 0) { + form.showFoundMessage(collection.totalCount); results.render(); } else { diff --git a/lms/static/js/discovery/form.js b/lms/static/js/discovery/form.js index 5764da2af9..38e0134495 100644 --- a/lms/static/js/discovery/form.js +++ b/lms/static/js/discovery/form.js @@ -47,6 +47,15 @@ define(['jquery', 'backbone'], function ($, Backbone) { this.$loadingIndicator.addClass('hidden'); }, + showFoundMessage: function (count) { + var msg = ngettext( + 'Viewing %s course', + 'Viewing %s courses', + count + ); + this.$message.html(interpolate(msg, [count])); + }, + showNotFoundMessage: function (term) { var msg = interpolate( gettext('We couldn\'t find any results for "%s".'), diff --git a/lms/static/js/fixtures/discovery.html b/lms/static/js/fixtures/discovery.html index 72c676a1aa..499a1999d1 100644 --- a/lms/static/js/fixtures/discovery.html +++ b/lms/static/js/fixtures/discovery.html @@ -1,26 +1,28 @@
-
-
+
+
+ -
-
- + +
-
-
-
+
+
    +
    + + -
    -
      - -
      diff --git a/lms/static/js/spec/discovery/discovery_spec.js b/lms/static/js/spec/discovery/discovery_spec.js index ac3da0aec6..be06997d4c 100644 --- a/lms/static/js/spec/discovery/discovery_spec.js +++ b/lms/static/js/spec/discovery/discovery_spec.js @@ -238,7 +238,7 @@ define([ var data = this.item.model.attributes; this.item.render(); expect(this.item.$el).toContainHtml(data.content.display_name); - expect(this.item.$el).toContain('a[href="/courses/' + data.course + '/info"]'); + expect(this.item.$el).toContain('a[href="/courses/' + data.course + '/about"]'); expect(this.item.$el).toContain('img[src="' + data.image_url + '"]'); expect(this.item.$el.find('.course-name')).toContainHtml(data.org); expect(this.item.$el.find('.course-name')).toContainHtml(data.content.number); diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss index e702149cce..da16de3c6b 100644 --- a/lms/static/sass/base/_base.scss +++ b/lms/static/sass/base/_base.scss @@ -121,7 +121,6 @@ a:focus { width: flex-grid(12); margin: 0 auto; background: $content-wrapper-bg; - padding-bottom: ($baseline*2); @media print { padding-bottom: 0; diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index a057789f27..3470985df5 100644 --- a/lms/static/sass/base/_variables.scss +++ b/lms/static/sass/base/_variables.scss @@ -82,6 +82,7 @@ $gray-d2: shade($gray,40%); // #4c4c4c $gray-d3: shade($gray,60%); // #323232 $gray-d4: shade($gray,80%); // #191919 + $pink: rgb(182,37,103); // #b72567; $pink-l1: tint($pink,20%); $pink-l2: tint($pink,40%); @@ -133,16 +134,23 @@ $green-u1: desaturate($green,15%); $green-u2: desaturate($green,30%); $green-u3: desaturate($green,45%); +// ==================== + // COLORS: social platforms $twitter-blue: #55ACEE; $facebook-blue: #3B5998; $linkedin-blue: #0077B5; +// ==================== + // TODO: both blue and yellow variables differ from CMS rgb value, need to confirm change to CMS variable is ok in current platform uses before switching. $blue: rgb(0, 120, 176); $yellow: rgb(255, 252, 221); +// ==================== + // COLORS: old variables +// DEPRECATED: use colors in lists above $error-red: rgb(253, 87, 87); $danger-red: rgb(212, 64, 64); $light-gray: rgb(221, 221, 221); @@ -152,7 +160,10 @@ $sidebar-color: rgb(246, 246, 246); $outer-border-color: rgb(170, 170, 170); $light-gray: rgb(221,221,221); // #dddddd +// ==================== + // used by descriptor css +// DEPRECATED: use colors in lists above $lightGrey: rgb(237,241,245); // #edf1f5 $darkGrey: rgb(136,145,161); // #8891a1 $lightGrey1: $gray-l3; @@ -160,6 +171,8 @@ $blue-d1: shade($blue,20%); $blue-d2: shade($blue,40%); $blue-d4: shade($blue,80%); +// ==================== + // edx.org marketing site variables $m-gray: rgb(138,140,143); // #8A8C8F $m-gray-l1: rgb(151,153,155); // #97999B diff --git a/lms/static/sass/multicourse/_courses.scss b/lms/static/sass/multicourse/_courses.scss index d6d83c9cd1..2aa386bd8f 100644 --- a/lms/static/sass/multicourse/_courses.scss +++ b/lms/static/sass/multicourse/_courses.scss @@ -1,39 +1,38 @@ -// lms - views - course discovery +// lms - views - course discovery // ==================== -// Table of Contents +// Table of Contents // * +Imports - Search // * +Variables - Search // * +Layout - Courses Container // * +Header - Course Search -// * +Search Input -// * +Filters - Search -// * +Facets - Sidebar - Search +// * +Search Input +// * +Filters and Facets- 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 { .discovery-button:not(:disabled) { @extend %t-action2; + @include text-align(left); outline: 0 none; box-shadow:none; border: 0; background: none; padding: 0 ($baseline*0.6); - text-align: left; text-decoration: none; text-shadow: none; text-transform: none; @@ -45,7 +44,7 @@ $facet-background-color: #007db8; } .courses-container { - padding: ($baseline*3) ($baseline/2) 0 ($baseline/2); + @include padding(($baseline*2), ($baseline/2), 0, ($baseline/2)); .courses { @include rtl() { $layout-direction: "RTL"; } @@ -95,7 +94,8 @@ $facet-background-color: #007db8; @include span-columns(12); @include media($bp-medium) { - @include span-columns(8); + @include span-columns(4); // 4 of 8 + @include omega(2n); } @include media($bp-large) { @@ -128,11 +128,11 @@ $facet-background-color: #007db8; } // +Hero - Home Header -// ==================== +// ==================== .find-courses, .university-profile { header.search { - background: $course-profile-bg; + background: $gray-l5; background-size: cover; background-image: $homepage-bg-image; background-position: center top !important; @@ -169,20 +169,20 @@ $facet-background-color: #007db8; } .logo { - display: inline-block; @include border-right(1px solid $light-gray); - height: 80px; @include margin-right(30px); @include padding-right(30px); + display: inline-block; + height: 80px; position: relative; vertical-align: middle; &::after { + @include right(0px); content: ""; display: block; height: 80px; position: absolute; - right: 0px; top: 0px; } @@ -212,36 +212,69 @@ $facet-background-color: #007db8; } } -// +Search Input -// ==================== +// +Search Input +// ==================== .find-courses { .wrapper-search-context { - @include clearfix(); + @include outer-container; + @include rtl() { $layout-direction: "RTL"; } .search-status-label { - @extend %t-title4; - @include line-height(50); - display: inline-block; - width: flex-grid(9); + @extend %t-title3; + @include span-columns(9); + min-height: $course-search-input-height; + + @include media($bp-tiny) { + @include fill-parent(); + @include font-size(20); + } + + @include media($bp-small) { + @include span-columns(4); + @include font-size(20); + } + + @include media($bp-medium) { + @include span-columns(4); + } + + @include media($bp-large) { + @include span-columns(8); + } } .wrapper-search-input { - display: inline-block; - width: flex-grid(3); - vertical-align: top; - margin-left: 24px; + @include span-columns(3); + @extend %ui-depth0; + position: relative; + + @include media($bp-tiny) { + @include fill-parent(); + } + + @include media($bp-small) { + @include span-columns(4); + } + + @include media($bp-medium) { + @include span-columns(4); + } + + @include media($bp-large) { + @include span-columns(4); + } } } - + .discovery-input { @extend %ui-depth1; @extend %t-copy-sub1; @extend %t-demi-strong; - @include border-radius(0); - @include border-top-left-radius(3px); - @include border-bottom-left-radius(3px); + @include border-radius(3px); + @include padding-right(55px); + width: 100%; border: 2px solid $gray-l3; height: $course-search-input-height; color: $black; @@ -251,7 +284,7 @@ $facet-background-color: #007db8; &:focus { @extend %no-outline; box-shadow: none; - border-color: $m-blue-d1; + border-color: $m-blue-d6; } } @@ -260,11 +293,13 @@ $facet-background-color: #007db8; @extend %t-icon3; @extend %t-strong; @include margin-left(-2px); - position: relative; - border: 2px solid $m-blue-d1; + @include right(0); + position: absolute; + top: 0; + border: 2px solid $m-blue-d6; border-radius: ($baseline*0.1); box-shadow: none; - background: $m-blue-d5; + background: $blue; padding: 0 ($baseline*0.7); height: $course-search-input-height; color: $white; @@ -272,13 +307,20 @@ $facet-background-color: #007db8; //STATE: hover, focus &:hover, &:focus { - background: $m-blue-l1; + background: $m-blue-d5; } } + + .loading-spinner { + @include transition(all $tmg-f1 ease-out 0s); + background: $blue; + position: absolute; + top: ($baseline*0.7); // same as padding rule for .discovery-submit + } } -// +Filters - Search -// ==================== +// +Filters and Facets - Search +// ==================== .find-courses { .filters { @@ -322,7 +364,7 @@ $facet-background-color: #007db8; margin: ($baseline/2); width: auto; text-align: center; - color: $m-blue-d1; + color: $m-blue-d5; } .flt-right { @@ -330,172 +372,126 @@ $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); - } - - @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; + .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; - padding: ($baseline*2) ($baseline*0.75) 0 ($baseline*0.75); - width: ($baseline*2.5); - height: ($baseline/4); - content: ""; - } + max-height: ($baseline*100); - .header-search-facets, section { - padding: ($baseline/2); - margin: 0; - color: $facet-text-color; - text-transform: none; - } - - .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; - } - - 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; - - //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); + @include media($bp-tiny) { + @include fill-parent(); } - li { - @include clearfix(); - @include line-height(18.92); - @extend %t-icon6; - position: relative; - clear: both; - border-top: 1px solid $white; + @include media($bp-small) { + @include span-columns(4); + } + + @include media($bp-medium) { + @include span-columns(8); + } + + @include media($bp-large) { + @include span-columns(4); + } + + @include media($bp-huge) { + @include span-columns(3); + } + + &.phone-menu { + border: medium none; padding: 0; - height: ($baseline*1.5); - overflow: hidden; + 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: ""; + } + + .header-search-facets, .header-facet { + @extend %t-title6; + @extend %t-strong; + padding: ($baseline/2); + margin: 0; + color: $facet-text-color; + text-transform: none; + } + + .header-facet { + margin: 0 ($baseline/2); + padding: ($baseline/2) 0; + } + + .search-facets-lists section { + border-top: 1px solid $gray-l4; + } + + .facet-list { + @extend %ui-no-list; + @include clearfix(); + padding-bottom: ($baseline/2); + + &.collapse { + max-height: ($baseline*14); + } + } + + .facet-option { + @include float(left); + @include transition(all $tmg-f2 ease-out 0s); + @include clearfix(); + @extend %t-action3; + @extend %text-truncated; + padding: ($baseline/4) ($baseline/2); + border-radius: 0px; + opacity: 1; + width: 100%; + color: $facet-text-color; + + li { + @include clearfix(); + position: relative; + clear: both; + padding: 0; + height: ($baseline*1.5); + } .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 { + //STATE: hover, focus + &:hover, &:focus { background: $facet-background-color; color: $white; text-decoration: none; - .count, - a { + .count { color: $white; - - .count, - .facet-option { - color: $white; - } } } } - } - .search-facets-lists section { - border-top: 1px solid $courseware-button-border-color; - } - - .toggle { - @include clearfix(); + .toggle { + @include clearfix(); button { @extend %t-icon6; @@ -507,9 +503,9 @@ $facet-background-color: #007db8; } // +All Other Styles -// ==================== +// ==================== .find-courses, .university-profile { - background: $course-profile-bg; + background: $gray-l5; padding-bottom: ($baseline*3); diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index 5d4e3ca26c..913c8e1c54 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/lms/static/sass/multicourse/_dashboard.scss @@ -13,7 +13,7 @@ // ==================== .dashboard { @include clearfix(); - padding: ($baseline*2) 0 0 0; + padding: ($baseline*2) 0 $baseline 0; .profile-sidebar { background: transparent; diff --git a/lms/static/sass/multicourse/_home.scss b/lms/static/sass/multicourse/_home.scss index 9dec0e7eb8..d6b576ba0c 100644 --- a/lms/static/sass/multicourse/_home.scss +++ b/lms/static/sass/multicourse/_home.scss @@ -20,7 +20,6 @@ $course-search-input-height: ($button-size); background-image: $homepage-bg-image; box-shadow: 0 1px 0 0 $course-header-bg, inset 0 -1px 5px 0 $shadow-l1; overflow: hidden; - margin-top: $header_image_margin; padding: 0; width: flex-grid(12); @@ -110,6 +109,7 @@ $course-search-input-height: ($button-size); height: $course-search-input-height; color: $black; font-style: normal; + font-weight: normal; // STATE: focus &:focus { diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index 2d200efb2a..01da9111ce 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: 4px solid $courseware-border-bottom-color; + border-bottom: 1px solid $gray-l1; box-shadow: 0 1px 5px 0 $shadow-l1; background: $header-bg; position: relative; @@ -286,7 +286,7 @@ header.global { a { display:block; padding: ($baseline/4); - color: $lighter-base-font-color; + color: $link-color; font-weight: 600; &:hover, &:focus, &:active { diff --git a/lms/static/sass/views/_homepage.scss b/lms/static/sass/views/_homepage.scss index 46efb5517a..bbaa766fb3 100644 --- a/lms/static/sass/views/_homepage.scss +++ b/lms/static/sass/views/_homepage.scss @@ -16,7 +16,7 @@ $learn-more-horizontal-position: calc(50% - 100px); // calculate the left positi @extend %ui-no-list; .courses-listing-item { - margin: ($baseline*0.75) 0 ($baseline*1.5) 0; + margin: 0 0 ($baseline*1.5) 0; max-height: $course-card-height; } } diff --git a/lms/templates/course.html b/lms/templates/course.html index 939bccf25e..f52be12a90 100644 --- a/lms/templates/course.html +++ b/lms/templates/course.html @@ -13,14 +13,14 @@ from courseware.courses import course_image_url, get_course_about_section - +