From 889e9880f516ac1cf04aedb95a9161fb061d4695 Mon Sep 17 00:00:00 2001 From: Harry Rein Date: Mon, 23 Oct 2017 16:02:56 -0400 Subject: [PATCH] Responsive dashboard and learner profile. --- common/djangoapps/terrain/steps.py | 6 +- .../courseware/features/registration.py | 4 +- lms/static/sass/_header.scss | 11 +- lms/static/sass/features/_course-search.scss | 7 +- .../sass/features/_learner-profile.scss | 5 + lms/static/sass/multicourse/_dashboard.scss | 2142 ++++++++--------- lms/static/sass/search/_search.scss | 22 +- lms/templates/dashboard.html | 207 +- .../js/spec/course_search_spec.js | 25 +- .../js/views/dashboard_search_results_view.js | 2 - .../dashboard_search_results.underscore | 1 - themes/edx.org/lms/templates/dashboard.html | 10 +- 12 files changed, 1132 insertions(+), 1310 deletions(-) diff --git a/common/djangoapps/terrain/steps.py b/common/djangoapps/terrain/steps.py index 9c91474ff0..7016a6b752 100644 --- a/common/djangoapps/terrain/steps.py +++ b/common/djangoapps/terrain/steps.py @@ -53,12 +53,12 @@ def i_visit_the_homepage(step): @step(u'I (?:visit|access|open) the dashboard$') def i_visit_the_dashboard(step): world.visit('/dashboard') - assert world.is_css_present('.container.dashboard') + assert world.is_css_present('.dashboard') @step('I should be on the dashboard page$') def i_should_be_on_the_dashboard(step): - assert world.is_css_present('.container.dashboard') + assert world.is_css_present('.dashboard') assert 'Dashboard' in world.browser.title @@ -166,7 +166,7 @@ def i_am_logged_in(step): world.create_user('robot', 'test') world.log_in(username='robot', password='test') world.browser.visit(lettuce.django.django_url('/')) - dash_css = '.container.dashboard' + dash_css = '.dashboard' assert world.is_css_present(dash_css) diff --git a/lms/djangoapps/courseware/features/registration.py b/lms/djangoapps/courseware/features/registration.py index b83ed5dd6f..d1baaaf305 100644 --- a/lms/djangoapps/courseware/features/registration.py +++ b/lms/djangoapps/courseware/features/registration.py @@ -11,7 +11,7 @@ def i_register_for_the_course(_step, course): url = django_url('courses/%s/about' % world.scenario_dict['COURSE'].id.to_deprecated_string()) world.browser.visit(url) world.css_click('.intro a.register') - assert world.is_css_present('.container.dashboard') + assert world.is_css_present('.dashboard') @step('I register to audit the course$') @@ -27,7 +27,7 @@ def i_register_to_audit_the_course(_step): ignored_exceptions=AttributeError ) time.sleep(1) - assert world.is_css_present('.container.dashboard') + assert world.is_css_present('.dashboard') @step(u'I should see an empty dashboard message') diff --git a/lms/static/sass/_header.scss b/lms/static/sass/_header.scss index 81f5faf489..68bfd50fee 100644 --- a/lms/static/sass/_header.scss +++ b/lms/static/sass/_header.scss @@ -20,14 +20,14 @@ a { @include float(left); - @include margin($baseline/2, 0, 0, $baseline); + @include margin($baseline*0.75, 0, 0, $baseline*2); display: block; .logo { @include float(left); - width: $header-logo-width; + height: $header-logo-height; } @include media-breakpoint-down(sm) { @@ -90,7 +90,7 @@ a { color: theme-color("secondary"); - padding: $baseline*0.35 $baseline*1.25 $baseline*0.75; + padding: $baseline*0.35 $baseline*1.25 $baseline; font-weight: $font-weight-normal; display: inline-block; margin-bottom: -1*$baseline/2; @@ -112,8 +112,7 @@ .secondary { @include float(right); - - margin: $baseline*0.6 $baseline 0 0; + @include margin($baseline*0.75, $baseline*2, 0, 0); // All navigation items .nav-item { @@ -230,7 +229,7 @@ .hamburger-menu { @include left(22px); position: absolute; - top: $baseline; + top: $baseline*1.25; width: 30px; height: 20px; -webkit-transform: rotate(0deg); diff --git a/lms/static/sass/features/_course-search.scss b/lms/static/sass/features/_course-search.scss index 3a6629052e..f09987201b 100644 --- a/lms/static/sass/features/_course-search.scss +++ b/lms/static/sass/features/_course-search.scss @@ -23,8 +23,6 @@ } .search-results-item { - @include padding-right(140px); - position: relative; border-top: 1px solid $border-color; padding: $baseline ($baseline/2); @@ -52,10 +50,9 @@ } .result-link { - @include right($baseline/2); + @include float(right); + @include padding-left($baseline/4); - position: absolute; - top: $baseline; line-height: 1.6em; } diff --git a/lms/static/sass/features/_learner-profile.scss b/lms/static/sass/features/_learner-profile.scss index 95659a93da..62a1fdeebf 100644 --- a/lms/static/sass/features/_learner-profile.scss +++ b/lms/static/sass/features/_learner-profile.scss @@ -273,6 +273,11 @@ border: none; box-shadow: none; padding: 0; + + @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap + max-width: calc(100% - 40px); + min-width: auto; + } } .u-field-title { diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index 213115da65..67c58d23b7 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/lms/static/sass/multicourse/_dashboard.scss @@ -1,235 +1,1038 @@ // lms - views - user/student dashboard // ==================== -// Table of Contents -// * +Dashboard - Sidebar -// * +Dashboard - Course Listing -// * +Dashboard - Course Item -// * +Misc - Uncategorized -// * +Dashboard - Banner - - -// +Dashboard - Sidebar +// +Dashboard // ==================== .dashboard { @include clearfix(); - padding: ($baseline*2) 0 $baseline 0; + display: flex; + flex-direction: row; + width: 100%; - .wrapper-find-courses { - @include float(right); - @include margin-left(flex-gutter()); + // Contains main course card listings + .main-container { + @include padding($baseline*2, $baseline, $baseline, $baseline*2); - width: flex-grid(3); + flex-grow: 8; + order: 1; - .course-advertise { - @include clearfix(); - - box-sizing: border-box; - padding: $baseline; - border: 1px solid $border-color-l3; - - .advertise-message { - @include font-size(12); - - color: $gray-d4; - margin-bottom: $baseline; + .my-courses { + &:focus { + outline: none; } - .ad-link { - @include text-align(center); + .wrapper-header-courses { + margin-bottom: $baseline/2; - .btn-neutral { - padding-bottom: 12px; - padding-top: 12px; + .header-courses { + @extend %t-title5; + + @include padding-right($baseline/2); + } + } + + // UI: course list + .listing-courses { + @extend %ui-no-list; + + .course-item { + margin-bottom: $baseline; + padding-bottom: $baseline; + + .course-container { + border: 1px solid theme-color("light"); + border-radius: 3px; + } + + &:last-of-type { + margin-bottom: 0; + border-bottom: none; + padding-bottom: 0; + } + } + } + + // UI: individual course item + .course { + @include box-sizing(box); + @include transition(all 0.15s linear 0s); + @include clearfix(); + + @extend %ui-depth2; + + .details { + @include clearfix(); + + .wrapper-course-image { + @include float(left); + @include margin-right(flex-gutter()); + + width: flex-grid(3); + max-height: 150px; + overflow: hidden; + + .cover { + @include box-sizing(border-box); + @include transition(all 0.15s linear 0s); + @include float(left); + + position: relative; + + .course-image { + width: 100%; + } + } + + // "enrolled as" status + .sts-enrollment { + @include float(left); + + width: 100%; + position: relative; + bottom: 15px; + display: inline-block; + text-align: center; + + .label { + @extend %text-sr; + } + + .deco-graphic { + position: absolute; + top: -5px; + + @include right(0); + } + + .sts-enrollment-value { + @extend %ui-depth1; + @extend %copy-badge; + @extend %t-demi-strong; + + font-size: 0.6em; + line-height: 1.5em; + border-radius: 0; + padding: 1px ($baseline/4); + color: white; + } + } + + // Responsive behavior + @include media-breakpoint-down(sm) { + display: none; + } + } + + .wrapper-course-details { + display: block; + + @include float(left); + + width: flex-grid(9); + padding: 0; + margin: $baseline/2 0; + + .course-title { + a, span { + @extend %t-title3; + @extend %t-light; + + display: inline-block; + margin-bottom: ($baseline/2); + text-decoration: none; + + // Responsive behavior + @include media-breakpoint-down(sm) { + @extend %t-title4; + } + } + } + + .course-info { + display: block; + + @include float(left); + + padding: 0; + margin-top: ($baseline/2); + + [class*="info-"] { + color: $gray-d1; + + @extend %t-title7; + + display: inline-block; + } + + .info-date-block { + @extend %t-title7; + + color: $gray; // WCAG 2.0 AA compliant + display: block; + } + } + + .wrapper-course-actions { + @include margin-right($baseline); + + margin-top: $baseline/2; + } + + + // Responsive behavior + @include media-breakpoint-down(sm) { + width: 100%; + } + } + + .course-actions { + + // UI: course item actions + .action { + @include box-sizing(border-box); + @include margin-right($baseline/2); + @include float(right); + + min-width: ($baseline*2); + color: $gray-d3; + border-radius: 3px; + padding: 12px; + border: 1px solid $white; + text-align: center; + + &:hover, &:focus { + color: $gray-d3; + border: 1px solid $gray-l4; + } + + // STATE: is-disabled + &.is-disabled { + color: $gray-l4; + } + + // TYPE: facebook share + &.action-facebook { + color: $facebook-blue; + } + + // TYPE: twitter share + &.action-twitter { + color: $twitter-blue; + } + } + + // UI: general actions dropdown layout + .wrapper-action-more { + display: inline-block; + position: relative; + + @include float(right); + + .action-more { + @include font-size(14); + + box-shadow: none; + background: $white; + background-image: none; + color: $gray; + line-height: 16px; + text-shadow: none; + } + + .actions-dropdown { + @extend %ui-no-list; + @extend %ui-depth1; + + display: none; + position: absolute; + top: ($baseline*2); + + @include right(19px); + + pointer-events: none; + min-width: ($baseline*7); + + &.is-visible { + display: block; + pointer-events: auto; + } + + .actions-dropdown-list { + @extend %ui-no-list; + + @include box-sizing(border-box); + + display: table; + box-shadow: 0 1px 1px $shadow-l1; + position: relative; + width: 100%; + border-radius: 3px; + margin: ($baseline/4) 0 0 0; + border: 1px solid $gray-l3; + padding: ($baseline/4) ($baseline/2); + background: $white; + + // ui triangle/nub + &::after, + &::before { + bottom: 100%; + + @include right(6px); + + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + &::after { + border-color: $transparent; + border-bottom-color: $white; + border-width: 6px; + + @include margin-right(1px); + } + + &::before { + border-color: $transparent; + border-bottom-color: $gray-l3; + border-width: 7px; + } + } + + .actions-item { + @extend %t-title7; + + display: block; + margin: 0; + + &.is-hidden { + display: none; + } + + .action { + @include margin-right(0); + + &:hover, &:focus { + border: 1px solid transparent; + } + } + } + } + } + } + + .course-status { + background: $yellow; + border: 1px solid $border-color-2; + box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6); + margin-top: 17px; + + @include margin-right(flex-gutter()); + + padding: ($baseline/4); + width: flex-grid(8); + + @include float(left); + @include box-sizing(border-box); + + p { + color: $lighter-base-font-color; + font-style: italic; + letter-spacing: 1px; + text-align: center; + } + } + + .course-status-completed { + background: $gray-l3; + color: $very-light-text; + + p { + color: $gray-d4; + + span { + font-weight: bold; + } + } + } + + .enter-course { + @extend %btn-pl-white-base; + + @include float(right); + + &.archived { + @extend %btn-pl-default-base; + } + } + + // Responsive behavior + @include media-breakpoint-down(md) { + @include padding-left($baseline/2); + } } - a { - @include font-size(16); - @include line-height(17); + // ==================== - padding: $baseline * 0.5; - border: 1px solid $blue; - color: $blue; - text-decoration: none; - display: block; + // UI: messages + .wrapper-messages-primary { + @include clearfix(); - &:hover, - &:focus, - &:active { - color: $white; - background-color: $blue; + .messages-list { + margin: 0; + padding: 0; + background-color: theme-color("lightest"); } - span { - @include margin-left($baseline*0.25); + .message { + @extend %ui-depth1; + + border-radius: 3px; + display: none; + padding: ($baseline/2) $baseline; + border-top: 1px solid $gray-l4; + color: $base-font-color; // Overrides the normal white color in this one case + + // STATE: shown + &.is-shown { + @include clearfix(); + + display: block; + } + + a { + font-family: $font-family-sans-serif; + } + + strong { + font-weight: 700; + + a { + font-weight: 700; + } + } + + .actions { + @include clearfix(); + + list-style: none; + margin: 0; + padding: 0; + } + + .message-title, + .message-copy .title { + @extend %t-title6; + @extend %t-weight4; + + line-height: 1em; + margin-bottom: ($baseline/4); + } + + .message-copy, + .message-copy .copy { + @extend %t-copy-sub1; + + margin: 2px 0 0 0; + } + + // CASE: expandable + &.is-expandable { + .wrapper-tip { + .message-title, .message-copy { + margin-bottom: 0; + display: inline-block; + } + + .message-title .value, .message-copy { + @include transition(color $tmg-f2 ease-in-out 0s); + } + + // STATE: hover + &:hover { + cursor: pointer; + + .message-title .value, .message-copy, .ui-toggle-expansion { + color: $link-color; + } + } + } + + .wrapper-extended { + @include transition(opacity $tmg-f2 ease-in-out 0); + + display: none; + opacity: 0; + } + } + + // STATE: is expanded + &.is-expanded { + .ui-toggle-expansion { + @include rtl { + @include transform(rotate(-90deg)); + } + + @include ltr { + @include transform(rotate(90deg)); + } + + @include transform-origin(50% 50%); + } + + .wrapper-extended { + display: block; + opacity: 1; + } + } + + // TYPE: upsell + &.message-upsell { + .wrapper-tip { + @include clearfix(); + + .message-title { + @include float(left); + } + + .ui-toggle-expansion { + @include transition(all $tmg-f2 ease-in-out 0s); + @include font-size(18); + + display: inline-block; + vertical-align: middle; + + @include margin-right($baseline/4); + } + + .message-copy { + @include float(right); + } + } + + .wrapper-extended { + padding: ($baseline/4) 0; + + .message-copy { + display: inline-block; + + .message-copy-bold { + font-weight: 600; + } + } + } + + .action-upgrade-container { + @include float(right); + + display: inline-block; + margin-top: ($baseline/2); + } + + .action-upgrade { + @extend %btn-primary-green; + + @include clearfix(); + + position: relative; + + @include left($baseline/2); + @include padding(($baseline * 0.4), 0, ($baseline * 0.4), ($baseline * 0.75)); + + .action-upgrade-icon { + @include float(left); + + display: inline; + + @include margin-right($baseline*0.4); + + margin-top: ($baseline/4); + background: url('#{$static-path}/images/icon-sm-verified.png') no-repeat; + background-position: -($baseline*0.3); + background-color: white; + width: ($baseline*0.8); + height: ($baseline*0.7); + } + + .deco-graphic { + position: absolute; + top: -($baseline/4); + + @include left(-($baseline*0.75)); + + width: ($baseline*2); + } + + span { + color: $white; // nasty but needed override for poor styling + } + + .copy, .copy-sub { + display: inline-block; + vertical-align: middle; + } + + .copy { + @extend %t-action3; + @extend %t-weight4; + + @include margin-right($baseline); + } + + .copy-sub { + @extend %t-action4; + + opacity: 0.875; + } + } + } + + // TYPE: status + &.message-status { + border-color: $gray-l4; + + .wrapper-message-primary { + @include clearfix(); + } + + .message-copy { + @extend %t-copy-sub1; + + margin: 0; + } + + .credit-action { + .credit-btn { + @extend %btn-pl-yellow-base; + + @include float(right); + @include margin-right(5px); + + background-image: none ; + text-shadow: none; + box-shadow: none; + text-transform: none; + } + } + + .actions { + .action { + @include float(left); + @include margin(0, 15px, 0, 0); + + .btn { + display: inline-block; + } + + .btn { + @include box-sizing(border-box); + @include float(left); + + border-radius: 3px; + font: normal 0.8rem/1.2rem $font-family-sans-serif; + letter-spacing: 1px; + padding: 6px 12px; + text-align: center; + + &.disabled { + cursor: default !important; + + &:hover, &:focus { + @include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%)); + + background: #eee; + } + } + } + + .btn { + @include float(left); + + font: normal 0.8rem/1.2rem $font-family-sans-serif; + letter-spacing: 1px; + padding: 6px 12px; + text-align: center; + } + } + } + + .exam-registration-number { + font-family: $font-family-sans-serif; + font-size: 18px; + + a { + font-family: $font-family-sans-serif; + } + } + + &.exam-register { + .message-copy { + margin-top: ($baseline/4); + width: 55%; + } + } + + &.exam-schedule { + .exam-button { + margin-top: ($baseline/4); + } + } + + .exam-button { + @include button(simple, $pink); + @include float(right); + + margin-top: 0; + } + + .contact-button { + @include button(simple, $pink); + } + + .button { + display: inline-block; + margin-top: ($baseline/2); + padding: 9px 18px 10px; + font-size: 13px; + font-weight: bold; + letter-spacing: 0; + + &:hover, &:focus { + text-decoration: none; + } + } + + + &.course-status-certrendering { + .btn { + margin-top: 2px; + } + } + + &.course-status-certavailable { + .message-copy { + width: flex-grid(6, 12); + position: relative; + + @include float(left); + } + + .actions-primary { + @include float(right); + + .action { + @include margin(0, 0, ($baseline/2), ($baseline*.75)); + + float: none; + text-align: center; + + &:last-child { + margin-bottom: 0; + } + + .btn { + float: none; + } + } + + .action-certificate .btn { + @extend %btn-inherited-primary; + + @include box-sizing(border-box); + + float: none; + border-radius: 3px; + display: block; + + @include padding(7px, ($baseline*.75), 7px, ($baseline*.75)); + + text-align: center; + + a:link, a:visited { + color: #fff; + } + } + + .action-share .btn { + display: inline; + letter-spacing: 0; + } + } + } + + .actions-secondary { + margin-top: ($baseline/2); + border-top: 1px solid $gray-l4; + padding-top: ($baseline/2); + + .action-share { + @include float(right); + + margin: 0; + } + } + + .certificate-explanation { + @extend %t-copy-sub1; + + margin-top: ($baseline/2); + border-top: 1px solid $gray-l4; + padding-top: ($baseline/2); + } + + .verification-reminder { + width: flex-grid(8, 12); + + @include float(left); + + position: relative; + } + + .verification-cta { + width: flex-grid(4, 12); + + @include float(left); + + position: relative; + + .btn { + @extend %btn-pl-green-base; + + @include float(right); + } + } + } + + &.message-related-programs { + background: none; + border: none; + margin-top: ($baseline/4); + padding-bottom: 0; + + .related-programs-preface { + @include float(left); + + font-weight: bold; + } + + ul { + display: inline; + padding: 0; + margin: 0; + } + + li { + @include float(left); + + display: inline; + padding: 0 0.5em; + border-right: 1px solid; + + .category-icon { + @include float(left); + @include margin-right($baseline/4); + + margin-top: ($baseline/10); + background-color: transparent; + background-size: 100%; + width: ($baseline*0.7); + height: ($baseline*0.7); + } + } + + // Remove separator from last list item. + li:last-child { + border: 0; + } + } + + // TYPE: pre-requisites + .prerequisites { + @include clearfix; + + .tip { + font-family: $font-family-sans-serif; + font-size: 1em; + color: $lighter-base-font-color; + margin-top: ($baseline/2); + } + } + + @include media-breakpoint-down(md) { + @include padding($baseline/2, $baseline, $baseline/2, $baseline/2); + } + } + } + + // ==================== + + // CASE: "enrolled as" status - professional ed + &.professional { + + // changes to cover + .wrapper-course-image .cover { + border-color: $professional-color-lvl3; + padding: ($baseline/10); } - .icon { - @include margin-right($baseline*0.25); + // course enrollment status message + .sts-enrollment { + .label { + @extend %text-sr; + } + + // status message + .sts-enrollment-value { + background: $professional-color-lvl3; + } + } + } + + // CASE: "enrolled as" status - verified + &.verified { + + // changes to cover + .wrapper-course-image .cover { + border-color: $verified-color-lvl1; + padding: ($baseline/10); + } + + // course enrollment status message + .sts-enrollment { + .label { + @extend %text-sr; + } + + .deco-graphic { + @extend %ui-depth3; + + width: 40px; + position: absolute; + top: -5px; + + @include right(0); + } + + // status message + .sts-enrollment-value { + background: $verified-color-lvl1; + } + } + } + + // CASE: "enrolled as" status - honor code + &.honor { + + // changes to cover + .wrapper-course-image .cover { + border-color: $honorcode-color-lvl2; + padding: ($baseline/10); + } + + // status message + .sts-enrollment-value { + background: $honorcode-color-lvl1; + } + } + + // CASE: "enrolled as" status - auditing + &.audit { + + // changes to cover + .wrapper-course-image .cover { + border-color: $audit-color-lvl2; + padding: ($baseline/10); + } + + // status message + .sts-enrollment-value { + background: $audit-color-lvl1; } } } } + + // Responsive behavior + @include media-breakpoint-down(md) { + padding: $baseline; + } } - .profile-sidebar { - background: transparent; + // Secondary functionality + .side-container { + @include padding($baseline*2, $baseline*2, $baseline, $baseline); - @include float(right); - @include margin-left(flex-gutter()); + max-width: $baseline*20; + flex-grow: 1; + order: 2; - width: flex-grid(3); - margin-top: ($baseline*2); - - .user-info { - @include clearfix(); - - > ul { - @include box-sizing(border-box); - @include clearfix(); - - margin: 0; - padding: 0; - width: flex-grid(12); - - li { - @include clearfix(); - - border-bottom: 1px dotted $border-color-2; - list-style: none; - margin-bottom: ($baseline*0.75); - padding-bottom: 17px; - - &:hover, &:focus { - .title .icon { - opacity: 1; - } - } - - span { - display: block; - margin-bottom: ($baseline/4); - } - - span.title { - @extend %t-title6; - @extend %t-strong; - - a { - text-transform: none; - } - } - - span.copy { - @extend %t-copy-sub1; - } - - span.data { - color: $base-font-color; - font-weight: 600; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - - .third-party-auth { - color: inherit; - font-weight: inherit; - } - - } - } - - li.order-history { - span a { - font-size: 13px; - line-height: 20px; - } - } - - .heads-up { - .title { - display: inline; - } - - .copy { - @extend %t-copy-sub2; - - display: inline; - } - } - } - - .reverify-status-list { - padding: 0 0 0 ($baseline/2); - margin: ($baseline/4) 0; - - .status-item { - @extend %t-copy-sub2; - - margin-bottom: 7px; - border-bottom: 0; - padding: 0; - - .icon { - display: inline-block; - vertical-align: top; - margin: ($baseline/10) ($baseline/4) 0 0; - } - - &.is-open .icon { - color: $action-primary-bg; - } - - &.is-pending .icon { - color: $warning-color; - } - - &.is-approved .icon { - color: $success-color; - } - - &.is-denied .icon { - color: $alert-color; - } - - .label { - @extend %text-sr; - } - - .course-name { - @include line-height(12); - - display: inline-block; - vertical-align: top; - width: 80%; - color: inherit; - } - } - } - - // status - .status { + .wrapper-find-courses { + .course-advertise { @include clearfix(); box-sizing: border-box; padding: $baseline; border: 1px solid $border-color-l3; - .list--nav { - margin: ($baseline/2) 0 0 0; - padding: 0; + .advertise-message { + @include font-size(12); + + color: $gray-d4; + margin-bottom: $baseline; } - .nav__item { - @extend %t-weight4; + .ad-link { + @include text-align(center); - @include font-size(13); + .btn-neutral { + padding-bottom: 12px; + padding-top: 12px; + } - margin-left: 26px; + a { + @include font-size(16); + @include line-height(17); + + padding: $baseline * 0.5; + border: 1px solid theme-color('primary'); + color: theme-color('primary'); + text-decoration: none; + display: block; + + &:hover, + &:focus, + &:active { + color: $white; + background-color: theme-color('primary'); + } + + span { + @include margin-left($baseline*0.25); + } + + .icon { + @include margin-right($baseline*0.25); + } + } } } } + + // Responsive behavior + @include media-breakpoint-down(md) { + margin: 0 $baseline $baseline*2; + padding: 0; + max-width: 100%; + } + } + + // Responsive behavior + @include media-breakpoint-down(md) { + flex-direction: column; } } @@ -249,970 +1052,27 @@ } a { - background-color: $blue; - border: 1px solid $blue; + background-color: theme-color('primary'); + border: 1px solid theme-color('primary'); box-shadow: 0 1px 8px 0 $shadow-l1; @include box-sizing(border-box); color: $white; - font-family: $sans-serif; + font-family: $font-family-sans-serif; display: inline-block; letter-spacing: 1px; margin-top: ($baseline/4); margin-left: ($baseline/4); - padding: 15px 20px; + padding: $baseline*0.75 $baseline; &:hover, &:focus { - background: $blue-l2; + background: theme-color('primary')-l2; text-decoration: none; } } } -// +Dashboard - Course Listing -// ==================== -.dashboard { - .my-courses { - @include float(left); - - margin: 0; - margin-bottom: $baseline * 2; - width: flex-grid(9); - - - .wrapper-header-courses { - border-bottom: 4px solid $border-color-l4; - margin-bottom: $baseline; - - .header-courses { - @extend %t-title5; - - @include padding-right($baseline/2); - } - } - - // UI: course list - .listing-courses { - @extend %ui-no-list; - - .course-item { - margin-bottom: $baseline; - padding-bottom: $baseline; - - .course-container { - border: 2px solid $border-color-l4; - border-radius: 3px; - } - - &:last-child { - margin-bottom: 0; - border-bottom: none; - padding-bottom: 0; - } - } - } - } -} - -// +Dashboard - Course -// ==================== -.dashboard .my-courses { - &:focus { - outline: none; - } - - // UI: individual course item - .course { - @include box-sizing(box); - @include transition(all 0.15s linear 0s); - @include clearfix(); - - @extend %ui-depth2; - - margin: ($baseline/2); - - .details { - @include clearfix(); - - .wrapper-course-image { - @include float(left); - @include margin-right(flex-gutter()); - - width: flex-grid(3); - - .cover { - @include box-sizing(border-box); - @include transition(all 0.15s linear 0s); - @include float(left); - - overflow: hidden; - position: relative; - max-height: 120px; - border-radius: ($baseline/5); - border: 1px solid $dashboard-course-cover-border; - border-bottom: 4px solid $dashboard-course-cover-border; - - .course-image { - width: 100%; - } - } - - // "enrolled as" status - .sts-enrollment { - @include float(left); - - width: 100%; - position: relative; - bottom: 15px; - display: inline-block; - text-align: center; - - .label { - @extend %text-sr; - } - - .deco-graphic { - position: absolute; - top: -5px; - - @include right(0); - } - - .sts-enrollment-value { - @extend %ui-depth1; - @extend %copy-badge; - @extend %t-demi-strong; - - font-size: 0.6em; - line-height: 1.5em; - border-radius: 0; - padding: 1px ($baseline/4); - color: white; - } - } - } - - .wrapper-course-details { - display: block; - - @include float(left); - - width: flex-grid(9); - padding: 0; - } - - .course-title { - a, span { - @extend %t-title3; - @extend %t-light; - - display: inline-block; - margin-bottom: ($baseline/2); - - &:hover, &:focus { - text-decoration: none; - } - } - } - - .course-info { - display: block; - - @include float(left); - - width: flex-grid(4); - padding: 0; - margin-top: ($baseline/2); - - [class*="info-"] { - color: $gray-d1; - - @extend %t-title6; - - display: inline-block; - } - - .info-date-block { - @extend %t-title7; - - color: $gray; // WCAG 2.0 AA compliant - display: block; - } - } - - .wrapper-course-actions { - display: block; - - @include float(right); - - width: flex-grid(8); - padding: 0; - margin-top: ($baseline/2); - } - - .course-actions { - - // UI: course item actions - .action { - @include box-sizing(border-box); - @include margin-right($baseline/2); - @include float(right); - - min-width: ($baseline*2); - color: $gray-d3; - border-radius: 3px; - padding: 12px; - border: 1px solid $white; - text-align: center; - - &:hover, &:focus { - color: $gray-d3; - border: 1px solid $gray-l4; - } - - // STATE: is-disabled - &.is-disabled { - color: $gray-l4; - } - - // TYPE: facebook share - &.action-facebook { - color: $facebook-blue; - } - - // TYPE: twitter share - &.action-twitter { - color: $twitter-blue; - } - } - - // UI: general actions dropdown layout - .wrapper-action-more { - display: inline-block; - position: relative; - - @include float(right); - - .action-more { - @include font-size(14); - - box-shadow: none; - background: $white; - background-image: none; - color: $gray; - line-height: 16px; - text-shadow: none; - } - - .actions-dropdown { - @extend %ui-no-list; - @extend %ui-depth1; - - display: none; - position: absolute; - top: ($baseline*2); - - @include right(19px); - - pointer-events: none; - min-width: ($baseline*7); - - &.is-visible { - display: block; - pointer-events: auto; - } - - .actions-dropdown-list { - @extend %ui-no-list; - - @include box-sizing(border-box); - - display: table; - box-shadow: 0 1px 1px $shadow-l1; - position: relative; - width: 100%; - border-radius: 3px; - margin: ($baseline/4) 0 0 0; - border: 1px solid $gray-l3; - padding: ($baseline/4) ($baseline/2); - background: $white; - - // ui triangle/nub - &::after, - &::before { - bottom: 100%; - - @include right(6px); - - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; - } - - &::after { - border-color: $transparent; - border-bottom-color: $white; - border-width: 6px; - - @include margin-right(1px); - } - - &::before { - border-color: $transparent; - border-bottom-color: $gray-l3; - border-width: 7px; - } - } - - .actions-item { - @extend %t-title7; - - display: block; - margin: 0; - - &.is-hidden { - display: none; - } - - .action { - @include margin-right(0); - - &:hover, &:focus { - border: 1px solid transparent; - } - } - } - } - } - } - - .course-status { - background: $yellow; - border: 1px solid $border-color-2; - box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6); - margin-top: 17px; - - @include margin-right(flex-gutter()); - - padding: ($baseline/4); - width: flex-grid(8); - - @include float(left); - @include box-sizing(border-box); - - p { - color: $lighter-base-font-color; - font-style: italic; - letter-spacing: 1px; - text-align: center; - } - } - - .course-status-completed { - background: $gray-l3; - color: $very-light-text; - - p { - color: $gray-d4; - - span { - font-weight: bold; - } - } - } - - .enter-course { - @extend %btn-pl-white-base; - - @include float(right); - - &.archived { - @extend %btn-pl-default-base; - } - } - } - - // ==================== - - // UI: messages - .wrapper-messages-primary { - @include clearfix(); - - .messages-list { - margin: 0; - padding: 0; - } - - .message { - @extend %ui-depth1; - - border-radius: 3px; - display: none; - margin: $baseline 0 ($baseline/2) 0; - padding: ($baseline/2) $baseline; - border-top: 1px solid $gray-l4; - color: $base-font-color; // Overrides the normal white color in this one case - - // STATE: shown - &.is-shown { - @include clearfix(); - - display: block; - } - - a { - font-family: $sans-serif; - } - - strong { - font-weight: 700; - - a { - font-weight: 700; - } - } - - .actions { - @include clearfix(); - - list-style: none; - margin: 0; - padding: 0; - } - - .message-title, - .message-copy .title { - @extend %t-title6; - @extend %t-weight4; - - line-height: 1em; - margin-bottom: ($baseline/4); - } - - .message-copy, - .message-copy .copy { - @extend %t-copy-sub1; - - margin: 2px 0 0 0; - } - - // CASE: expandable - &.is-expandable { - .wrapper-tip { - .message-title, .message-copy { - margin-bottom: 0; - display: inline-block; - } - - .message-title .value, .message-copy { - @include transition(color $tmg-f2 ease-in-out 0s); - } - - // STATE: hover - &:hover { - cursor: pointer; - - .message-title .value, .message-copy, .ui-toggle-expansion { - color: $link-color; - } - } - } - - .wrapper-extended { - @include transition(opacity $tmg-f2 ease-in-out 0); - - display: none; - opacity: 0; - } - } - - // STATE: is expanded - &.is-expanded { - .ui-toggle-expansion { - @include rtl { - @include transform(rotate(-90deg)); - } - - @include ltr { - @include transform(rotate(90deg)); - } - - @include transform-origin(50% 50%); - } - - .wrapper-extended { - display: block; - opacity: 1; - } - } - - // TYPE: upsell - &.message-upsell { - .wrapper-tip { - @include clearfix(); - - .message-title { - @include float(left); - } - - .ui-toggle-expansion { - @include transition(all $tmg-f2 ease-in-out 0s); - @include font-size(18); - - display: inline-block; - vertical-align: middle; - - @include margin-right($baseline/4); - } - - .message-copy { - @include float(right); - } - } - - .wrapper-extended { - padding: ($baseline/4) 0; - - .message-copy { - width: flex-grid(9, 12); - display: inline-block; - - .message-copy-bold { - font-weight: 600; - } - } - } - - .action-upgrade-container { - @include float(right); - - display: inline-block; - margin-top: ($baseline/2); - } - - .action-upgrade { - @extend %btn-primary-green; - - @include clearfix(); - - position: relative; - - @include left($baseline/2); - @include padding(($baseline * 0.4), 0, ($baseline * 0.4), ($baseline * 0.75)); - - .action-upgrade-icon { - @include float(left); - - display: inline; - - @include margin-right($baseline*0.4); - - margin-top: ($baseline/4); - background: url('#{$static-path}/images/icon-sm-verified.png') no-repeat; - background-position: -($baseline*0.3); - background-color: white; - width: ($baseline*0.8); - height: ($baseline*0.7); - } - - .deco-graphic { - position: absolute; - top: -($baseline/4); - - @include left(-($baseline*0.75)); - - width: ($baseline*2); - } - - span { - color: $white; // nasty but needed override for poor styling - } - - .copy, .copy-sub { - display: inline-block; - vertical-align: middle; - } - - .copy { - @extend %t-action3; - @extend %t-weight4; - - @include margin-right($baseline); - } - - .copy-sub { - @extend %t-action4; - - opacity: 0.875; - } - } - } - - // TYPE: status - &.message-status { - border-color: $gray-l4; - - .wrapper-message-primary { - @include clearfix(); - } - - .message-copy { - @extend %t-copy-sub1; - - margin: 0; - } - - .credit-action { - .credit-btn { - @extend %btn-pl-yellow-base; - - @include float(right); - @include margin-right(5px); - - background-image: none ; - text-shadow: none; - box-shadow: none; - text-transform: none; - } - } - - .actions { - .action { - @include float(left); - @include margin(0, 15px, 0, 0); - - .btn { - display: inline-block; - } - - .btn { - @include box-sizing(border-box); - @include float(left); - - border-radius: 3px; - font: normal 0.8rem/1.2rem $sans-serif; - letter-spacing: 1px; - padding: 6px 12px; - text-align: center; - - &.disabled { - cursor: default !important; - - &:hover, &:focus { - @include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%)); - - background: #eee; - } - } - } - - .btn { - @include float(left); - - font: normal 0.8rem/1.2rem $sans-serif; - letter-spacing: 1px; - padding: 6px 12px; - text-align: center; - } - } - } - - .exam-registration-number { - font-family: $sans-serif; - font-size: 18px; - - a { - font-family: $sans-serif; - } - } - - &.exam-register { - .message-copy { - margin-top: ($baseline/4); - width: 55%; - } - } - - &.exam-schedule { - .exam-button { - margin-top: ($baseline/4); - } - } - - .exam-button { - @include button(simple, $pink); - @include float(right); - - margin-top: 0; - } - - .contact-button { - @include button(simple, $pink); - } - - .button { - display: inline-block; - margin-top: ($baseline/2); - padding: 9px 18px 10px; - font-size: 13px; - font-weight: bold; - letter-spacing: 0; - - &:hover, &:focus { - text-decoration: none; - } - } - - - &.course-status-certrendering { - .btn { - margin-top: 2px; - } - } - - &.course-status-certavailable { - .message-copy { - width: flex-grid(6, 12); - position: relative; - - @include float(left); - } - - .actions-primary { - @include float(right); - - .action { - @include margin(0, 0, ($baseline/2), ($baseline*.75)); - - float: none; - text-align: center; - - &:last-child { - margin-bottom: 0; - } - - .btn { - float: none; - } - } - - .action-certificate .btn { - @extend %btn-inherited-primary; - - @include box-sizing(border-box); - - float: none; - border-radius: 3px; - display: block; - - @include padding(7px, ($baseline*.75), 7px, ($baseline*.75)); - - text-align: center; - - a:link, a:visited { - color: #fff; - } - } - - .action-share .btn { - display: inline; - letter-spacing: 0; - } - } - } - - .actions-secondary { - margin-top: ($baseline/2); - border-top: 1px solid $gray-l4; - padding-top: ($baseline/2); - - .action-share { - @include float(right); - - margin: 0; - } - } - - .certificate-explanation { - @extend %t-copy-sub1; - - margin-top: ($baseline/2); - border-top: 1px solid $gray-l4; - padding-top: ($baseline/2); - } - - .verification-reminder { - width: flex-grid(8, 12); - - @include float(left); - - position: relative; - } - - .verification-cta { - width: flex-grid(4, 12); - - @include float(left); - - position: relative; - - .btn { - @extend %btn-pl-green-base; - - @include float(right); - } - } - } - - &.message-related-programs { - background: none; - border: none; - margin-top: ($baseline/4); - padding-bottom: 0; - - .related-programs-preface { - @include float(left); - - font-weight: bold; - } - - ul { - display: inline; - padding: 0; - margin: 0; - } - - li { - @include float(left); - - display: inline; - padding: 0 0.5em; - border-right: 1px solid; - - .category-icon { - @include float(left); - @include margin-right($baseline/4); - - margin-top: ($baseline/10); - background-color: transparent; - background-size: 100%; - width: ($baseline*0.7); - height: ($baseline*0.7); - } - } - - // Remove separator from last list item. - li:last-child { - border: 0; - } - } - - // TYPE: pre-requisites - .prerequisites { - @include clearfix; - - .tip { - font-family: $sans-serif; - font-size: 1em; - color: $lighter-base-font-color; - margin-top: ($baseline/2); - } - } - } - } - - // ==================== - - // CASE: "enrolled as" status - professional ed - &.professional { - - // changes to cover - .wrapper-course-image .cover { - border-color: $professional-color-lvl3; - padding: ($baseline/10); - } - - // course enrollment status message - .sts-enrollment { - .label { - @extend %text-sr; - } - - // status message - .sts-enrollment-value { - background: $professional-color-lvl3; - } - } - } - - // CASE: "enrolled as" status - verified - &.verified { - - // changes to cover - .wrapper-course-image .cover { - border-color: $verified-color-lvl1; - padding: ($baseline/10); - } - - // course enrollment status message - .sts-enrollment { - .label { - @extend %text-sr; - } - - .deco-graphic { - @extend %ui-depth3; - - width: 40px; - position: absolute; - top: -5px; - - @include right(0); - } - - // status message - .sts-enrollment-value { - background: $verified-color-lvl1; - } - } - } - - // CASE: "enrolled as" status - honor code - &.honor { - - // changes to cover - .wrapper-course-image .cover { - border-color: $honorcode-color-lvl2; - padding: ($baseline/10); - } - - // status message - .sts-enrollment-value { - background: $honorcode-color-lvl1; - } - } - - // CASE: "enrolled as" status - auditing - &.audit { - - // changes to cover - .wrapper-course-image .cover { - border-color: $audit-color-lvl2; - padding: ($baseline/10); - } - - // status message - .sts-enrollment-value { - background: $audit-color-lvl1; - } - } - } -} - // +Misc - Uncategorized // ==================== // status - language @@ -1417,7 +1277,7 @@ p.course-block { @include float(left); display: block; - font: normal 15px/1.6rem $sans-serif; + font: normal 15px/1.6rem $font-family-sans-serif; letter-spacing: 0; padding: 6px 32px 7px; text-align: center; @@ -1431,7 +1291,7 @@ p.course-block { &.archived { @include button(simple, $button-archive-color); - font: normal 15px/1.6rem $sans-serif; + font: normal 15px/1.6rem $font-family-sans-serif; padding: 6px 32px 7px; &:hover, &:focus { @@ -1464,7 +1324,7 @@ a.fade-cover { .msg { @include clearfix(); - font-family: $sans-serif; + font-family: $font-family-sans-serif; padding-bottom: $baseline; border-bottom: thin solid $gray; diff --git a/lms/static/sass/search/_search.scss b/lms/static/sass/search/_search.scss index 1af315ae20..f2c0a2329f 100644 --- a/lms/static/sass/search/_search.scss +++ b/lms/static/sass/search/_search.scss @@ -81,8 +81,6 @@ } .search-results-item { - @include padding-right(140px); - position: relative; border-bottom: 1px solid $gray-l4; padding: $baseline ($baseline/2); @@ -119,12 +117,10 @@ } .result-link { - @include right($baseline/2); + @include float(right); + @include padding-left($baseline/4); - position: absolute; - top: $baseline; line-height: 1.6em; - text-transform: uppercase; } .search-results-ellipsis { @@ -155,12 +151,8 @@ .dashboard-search-bar { - @include float(right); - @include margin-left(flex-gutter()); - - margin-bottom: $baseline; - padding: 0; - width: flex-grid(3); + margin: 0 0 $baseline; + display: block; label { @extend %t-regular; @@ -181,12 +173,8 @@ } .dashboard-search-results { - @include float(left); - - margin: 0; + margin: 0 0 $baseline; padding: 0; - width: flex-grid(9); - min-height: 300px; .search-info { padding-bottom: lh(1.75); diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html index 13765bdd02..8d25b23b79 100644 --- a/lms/templates/dashboard.html +++ b/lms/templates/dashboard.html @@ -102,115 +102,116 @@ from openedx.core.djangolib.markup import HTML, Text
-
-
- <%include file="learner_dashboard/_dashboard_navigation_courses.html"/> +
- % if len(course_enrollments) > 0: -
    - <% - share_settings = configuration_helpers.get_value( - 'SOCIAL_SHARING_SETTINGS', - getattr(settings, 'SOCIAL_SHARING_SETTINGS', {}) - ) - %> - % for dashboard_index, enrollment in enumerate(course_enrollments): - <% show_courseware_link = (enrollment.course_id in show_courseware_links_for) %> - <% cert_status = cert_statuses.get(enrollment.course_id) %> - <% can_unenroll = (not cert_status) or cert_status.get('can_unenroll') %> - <% credit_status = credit_statuses.get(enrollment.course_id) %> - <% show_email_settings = (enrollment.course_id in show_email_settings_for) %> - <% course_mode_info = all_course_modes.get(enrollment.course_id) %> - <% is_paid_course = (enrollment.course_id in enrolled_courses_either_paid) %> - <% is_course_blocked = (enrollment.course_id in block_courses) %> - <% course_verification_status = verification_status_by_course.get(enrollment.course_id, {}) %> - <% course_requirements = courses_requirements_not_met.get(enrollment.course_id) %> - <% related_programs = inverted_programs.get(unicode(enrollment.course_id)) %> - <%include file='dashboard/_dashboard_course_listing.html' args='course_overview=enrollment.course_overview, enrollment=enrollment, show_courseware_link=show_courseware_link, cert_status=cert_status, can_unenroll=can_unenroll, credit_status=credit_status, show_email_settings=show_email_settings, course_mode_info=course_mode_info, is_paid_course=is_paid_course, is_course_blocked=is_course_blocked, verification_status=course_verification_status, course_requirements=course_requirements, dashboard_index=dashboard_index, share_settings=share_settings, user=user, related_programs=related_programs, display_course_modes_on_dashboard=display_course_modes_on_dashboard' /> - % endfor +
    +
    + <%include file="learner_dashboard/_dashboard_navigation_courses.html"/> -
- % else: -
-

${_("You are not enrolled in any courses yet.")}

- - % if settings.FEATURES.get('COURSES_ARE_BROWSABLE'): - - ${_("Explore courses")} - - - %endif -
- % endif - - % if staff_access and len(errored_courses) > 0: -
-

${_("Course-loading errors")}

- - % for course_dir, errors in errored_courses.items(): -

${course_dir}

-
    - % for (msg, err) in errors: -
  • ${msg} - 
    • ${err}
    -
    • - % endfor -
- % endfor -
- % endif -
- - %if sidebar_account_activation_message: -
- ${sidebar_account_activation_message | n, decode.utf8} -
- %endif - - % if settings.FEATURES.get('ENABLE_DASHBOARD_SEARCH'): - - % endif - - % if settings.FEATURES.get('ENABLE_DASHBOARD_SEARCH'): -
- % endif - - % if display_sidebar_on_dashboard: -
-
- -
- - % endif +
+
+ %if sidebar_account_activation_message: +
+ ${sidebar_account_activation_message | n, decode.utf8} +
+ %endif + + % if settings.FEATURES.get('ENABLE_DASHBOARD_SEARCH'): + +
+ % endif + + % if display_sidebar_on_dashboard: +
+
+ +
+ +
+ % endif +
diff --git a/openedx/features/course_search/static/course_search/js/spec/course_search_spec.js b/openedx/features/course_search/static/course_search/js/spec/course_search_spec.js index c51b00a8b4..edcf323421 100644 --- a/openedx/features/course_search/static/course_search/js/spec/course_search_spec.js +++ b/openedx/features/course_search/static/course_search/js/spec/course_search_spec.js @@ -351,23 +351,18 @@ define([ describe('SearchResultsView', function() { function showsLoadingMessage() { this.resultsView.showLoadingMessage(); - expect(this.resultsView.$contentElement).toBeHidden(); expect(this.resultsView.$el).toBeVisible(); expect(this.resultsView.$el).not.toBeEmpty(); } function showsErrorMessage() { this.resultsView.showErrorMessage(); - expect(this.resultsView.$contentElement).toBeHidden(); expect(this.resultsView.$el).toBeVisible(); expect(this.resultsView.$el).not.toBeEmpty(); } function returnsToContent() { this.resultsView.clear(); - expect(this.resultsView.$contentElement).toHaveCss({ - display: this.contentElementDisplayValue - }); expect(this.resultsView.$el).toBeHidden(); expect(this.resultsView.$el).toBeEmpty(); } @@ -484,16 +479,6 @@ define([ it('shows a link to load more results', showsMoreResultsLink); it('triggers an event for next page', triggersNextPageEvent); it('shows a spinner when loading more results', showsLoadMoreSpinner); - it('returns back to courses', function() { - var onReset = jasmine.createSpy('onReset'); - this.resultsView.on('reset', onReset); - this.resultsView.render(); - expect(this.resultsView.$el.find('a.search-back-to-courses')).toExist(); - this.resultsView.$el.find('.search-back-to-courses').click(); - expect(onReset).toHaveBeenCalled(); - expect(this.resultsView.$contentElement).toBeVisible(); - expect(this.resultsView.$el).toBeHidden(); - }); }); }); @@ -502,9 +487,6 @@ define([ function showsLoadingMessage() { $('.search-field').val('search string'); $('.search-button').trigger('click'); - if (this.$contentElement) { - expect(this.$contentElement).toBeHidden(); - } expect(this.$searchResults).toBeVisible(); expect(this.$searchResults).not.toBeEmpty(); } @@ -556,13 +538,11 @@ define([ $('.cancel-button').trigger('click'); AjaxHelpers.skipResetRequest(requests); // there should be no results - expect(this.$contentElement).toHaveCss({display: this.contentElementDisplayValue}); expect(this.$searchResults).toBeHidden(); } function clearsResults() { $('.cancel-button').trigger('click'); - expect(this.$contentElement).toHaveCss({display: this.contentElementDisplayValue}); expect(this.$searchResults).toBeHidden(); } @@ -636,7 +616,6 @@ define([ DashboardSearchFactory(); spyOn(Backbone.history, 'navigate'); - this.$contentElement = $('#my-courses'); this.contentElementDisplayValue = 'block'; this.$searchResults = $('.search-results'); }); @@ -670,9 +649,7 @@ define([ } }] }); - expect($('.search-back-to-courses')).toExist(); - $('.search-back-to-courses').trigger('click'); - expect(this.$contentElement).toBeVisible(); + $('.search-form .cancel-button').trigger('click'); expect(this.$searchResults).toBeHidden(); expect(this.$searchResults).toBeEmpty(); }); diff --git a/openedx/features/course_search/static/course_search/js/views/dashboard_search_results_view.js b/openedx/features/course_search/static/course_search/js/views/dashboard_search_results_view.js index 50d7a37130..5d78c27515 100644 --- a/openedx/features/course_search/static/course_search/js/views/dashboard_search_results_view.js +++ b/openedx/features/course_search/static/course_search/js/views/dashboard_search_results_view.js @@ -12,12 +12,10 @@ ) { return SearchResultsView.extend({ el: '.search-results', - contentElement: '#my-courses, #profile-sidebar', resultsTemplate: dashboardSearchResultsTemplate, itemTemplate: dashboardSearchItemTemplate, events: { 'click .search-load-next': 'loadNext', - 'click .search-back-to-courses': 'backToCourses' }, backToCourses: function() { diff --git a/openedx/features/course_search/static/course_search/templates/dashboard_search_results.underscore b/openedx/features/course_search/static/course_search/templates/dashboard_search_results.underscore index 3e34a6df9e..8a7b941633 100644 --- a/openedx/features/course_search/static/course_search/templates/dashboard_search_results.underscore +++ b/openedx/features/course_search/static/course_search/templates/dashboard_search_results.underscore @@ -1,5 +1,4 @@
- <%- gettext("Back to Dashboard") %>

<%- gettext("Search Results") %>

<%- totalCountMsg %>
diff --git a/themes/edx.org/lms/templates/dashboard.html b/themes/edx.org/lms/templates/dashboard.html index 5c8d3881a1..4b1df0c287 100644 --- a/themes/edx.org/lms/templates/dashboard.html +++ b/themes/edx.org/lms/templates/dashboard.html @@ -102,8 +102,8 @@ from openedx.core.djangoapps.theming import helpers as theming_helpers -
-
+
+

${_("My Courses")}

@@ -159,7 +159,7 @@ from openedx.core.djangoapps.theming import helpers as theming_helpers % endif
- +
%if sidebar_account_activation_message:
${sidebar_account_activation_message | n, decode.utf8} @@ -181,9 +181,6 @@ from openedx.core.djangoapps.theming import helpers as theming_helpers
- % endif - - % if settings.FEATURES.get('ENABLE_DASHBOARD_SEARCH'):
% endif @@ -226,6 +223,7 @@ from openedx.core.djangoapps.theming import helpers as theming_helpers
% endif +