From 889e9880f516ac1cf04aedb95a9161fb061d4695 Mon Sep 17 00:00:00 2001
From: Harry Rein <hrein@edx.org>
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 | 1710 ++++++++---------
lms/static/sass/search/_search.scss | 22 +-
lms/templates/dashboard.html | 187 +-
.../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, 906 insertions(+), 1084 deletions(-)
diff --git a/common/djangoapps/terrain/steps.py b/common/djangoapps/terrain/steps.py
index 9c91474ff06..7016a6b752a 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 b83ed5dd6f0..d1baaaf3056 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 81f5faf489b..68bfd50fee3 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 3a6629052e4..f09987201bf 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 95659a93daa..62a1fdeebf7 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 213115da65a..67c58d23b78 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/lms/static/sass/multicourse/_dashboard.scss
@@ -1,1214 +1,1074 @@
// 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;
- a {
- @include font-size(16);
- @include line-height(17);
+ @include padding-right($baseline/2);
+ }
+ }
- padding: $baseline * 0.5;
- border: 1px solid $blue;
- color: $blue;
- text-decoration: none;
- display: block;
+ // UI: course list
+ .listing-courses {
+ @extend %ui-no-list;
- &:hover,
- &:focus,
- &:active {
- color: $white;
- background-color: $blue;
- }
+ .course-item {
+ margin-bottom: $baseline;
+ padding-bottom: $baseline;
- span {
- @include margin-left($baseline*0.25);
+ .course-container {
+ border: 1px solid theme-color("light");
+ border-radius: 3px;
}
- .icon {
- @include margin-right($baseline*0.25);
+ &:last-of-type {
+ margin-bottom: 0;
+ border-bottom: none;
+ padding-bottom: 0;
}
}
}
- }
- }
-
- .profile-sidebar {
- background: transparent;
-
- @include float(right);
- @include margin-left(flex-gutter());
-
- width: flex-grid(3);
- margin-top: ($baseline*2);
- .user-info {
- @include clearfix();
-
- > ul {
- @include box-sizing(border-box);
+ // UI: individual course item
+ .course {
+ @include box-sizing(box);
+ @include transition(all 0.15s linear 0s);
@include clearfix();
- margin: 0;
- padding: 0;
- width: flex-grid(12);
+ @extend %ui-depth2;
- li {
+ .details {
@include clearfix();
- border-bottom: 1px dotted $border-color-2;
- list-style: none;
- margin-bottom: ($baseline*0.75);
- padding-bottom: 17px;
+ .wrapper-course-image {
+ @include float(left);
+ @include margin-right(flex-gutter());
- &:hover, &:focus {
- .title .icon {
- opacity: 1;
- }
- }
+ width: flex-grid(3);
+ max-height: 150px;
+ overflow: hidden;
- span {
- display: block;
- margin-bottom: ($baseline/4);
- }
+ .cover {
+ @include box-sizing(border-box);
+ @include transition(all 0.15s linear 0s);
+ @include float(left);
- span.title {
- @extend %t-title6;
- @extend %t-strong;
+ position: relative;
- a {
- text-transform: none;
+ .course-image {
+ width: 100%;
+ }
}
- }
- span.copy {
- @extend %t-copy-sub1;
- }
+ // "enrolled as" status
+ .sts-enrollment {
+ @include float(left);
- span.data {
- color: $base-font-color;
- font-weight: 600;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
+ width: 100%;
+ position: relative;
+ bottom: 15px;
+ display: inline-block;
+ text-align: center;
- .third-party-auth {
- color: inherit;
- font-weight: inherit;
- }
+ .label {
+ @extend %text-sr;
+ }
- }
- }
+ .deco-graphic {
+ position: absolute;
+ top: -5px;
- li.order-history {
- span a {
- font-size: 13px;
- line-height: 20px;
- }
- }
+ @include right(0);
+ }
- .heads-up {
- .title {
- display: inline;
- }
+ .sts-enrollment-value {
+ @extend %ui-depth1;
+ @extend %copy-badge;
+ @extend %t-demi-strong;
- .copy {
- @extend %t-copy-sub2;
+ font-size: 0.6em;
+ line-height: 1.5em;
+ border-radius: 0;
+ padding: 1px ($baseline/4);
+ color: white;
+ }
+ }
- display: inline;
+ // Responsive behavior
+ @include media-breakpoint-down(sm) {
+ display: none;
+ }
}
- }
- }
-
- .reverify-status-list {
- padding: 0 0 0 ($baseline/2);
- margin: ($baseline/4) 0;
- .status-item {
- @extend %t-copy-sub2;
+ .wrapper-course-details {
+ display: block;
- margin-bottom: 7px;
- border-bottom: 0;
- padding: 0;
+ @include float(left);
- .icon {
- display: inline-block;
- vertical-align: top;
- margin: ($baseline/10) ($baseline/4) 0 0;
- }
+ width: flex-grid(9);
+ padding: 0;
+ margin: $baseline/2 0;
- &.is-open .icon {
- color: $action-primary-bg;
- }
+ .course-title {
+ a, span {
+ @extend %t-title3;
+ @extend %t-light;
- &.is-pending .icon {
- color: $warning-color;
- }
+ display: inline-block;
+ margin-bottom: ($baseline/2);
+ text-decoration: none;
- &.is-approved .icon {
- color: $success-color;
- }
+ // Responsive behavior
+ @include media-breakpoint-down(sm) {
+ @extend %t-title4;
+ }
+ }
+ }
- &.is-denied .icon {
- color: $alert-color;
- }
+ .course-info {
+ display: block;
- .label {
- @extend %text-sr;
- }
+ @include float(left);
- .course-name {
- @include line-height(12);
+ padding: 0;
+ margin-top: ($baseline/2);
- display: inline-block;
- vertical-align: top;
- width: 80%;
- color: inherit;
- }
- }
- }
+ [class*="info-"] {
+ color: $gray-d1;
- // status
- .status {
- @include clearfix();
+ @extend %t-title7;
- box-sizing: border-box;
- padding: $baseline;
- border: 1px solid $border-color-l3;
+ display: inline-block;
+ }
- .list--nav {
- margin: ($baseline/2) 0 0 0;
- padding: 0;
- }
+ .info-date-block {
+ @extend %t-title7;
- .nav__item {
- @extend %t-weight4;
+ color: $gray; // WCAG 2.0 AA compliant
+ display: block;
+ }
+ }
- @include font-size(13);
+ .wrapper-course-actions {
+ @include margin-right($baseline);
- margin-left: 26px;
- }
- }
- }
- }
-}
+ margin-top: $baseline/2;
+ }
-// CASE: empty dashboard
-.empty-dashboard-message {
- border: 3px solid $gray-l4;
- background: $gray-l6;
- padding: ($baseline*2) 0;
- text-align: center;
- p {
- @include font-size(24);
+ // Responsive behavior
+ @include media-breakpoint-down(sm) {
+ width: 100%;
+ }
+ }
- color: $lighter-base-font-color;
- margin-bottom: $baseline;
- text-shadow: 0 1px rgba(255,255,255, 0.6);
- }
+ .course-actions {
- a {
- background-color: $blue;
- border: 1px solid $blue;
- box-shadow: 0 1px 8px 0 $shadow-l1;
+ // UI: course item actions
+ .action {
+ @include box-sizing(border-box);
+ @include margin-right($baseline/2);
+ @include float(right);
- @include box-sizing(border-box);
+ min-width: ($baseline*2);
+ color: $gray-d3;
+ border-radius: 3px;
+ padding: 12px;
+ border: 1px solid $white;
+ text-align: center;
- color: $white;
- font-family: $sans-serif;
- display: inline-block;
- letter-spacing: 1px;
- margin-top: ($baseline/4);
- margin-left: ($baseline/4);
- padding: 15px 20px;
+ &:hover, &:focus {
+ color: $gray-d3;
+ border: 1px solid $gray-l4;
+ }
- &:hover, &:focus {
- background: $blue-l2;
- text-decoration: none;
- }
- }
-}
+ // STATE: is-disabled
+ &.is-disabled {
+ color: $gray-l4;
+ }
-// +Dashboard - Course Listing
-// ====================
-.dashboard {
- .my-courses {
- @include float(left);
+ // TYPE: facebook share
+ &.action-facebook {
+ color: $facebook-blue;
+ }
- margin: 0;
- margin-bottom: $baseline * 2;
- width: flex-grid(9);
+ // TYPE: twitter share
+ &.action-twitter {
+ color: $twitter-blue;
+ }
+ }
+ // UI: general actions dropdown layout
+ .wrapper-action-more {
+ display: inline-block;
+ position: relative;
- .wrapper-header-courses {
- border-bottom: 4px solid $border-color-l4;
- margin-bottom: $baseline;
+ @include float(right);
- .header-courses {
- @extend %t-title5;
+ .action-more {
+ @include font-size(14);
- @include padding-right($baseline/2);
- }
- }
+ box-shadow: none;
+ background: $white;
+ background-image: none;
+ color: $gray;
+ line-height: 16px;
+ text-shadow: none;
+ }
- // UI: course list
- .listing-courses {
- @extend %ui-no-list;
+ .actions-dropdown {
+ @extend %ui-no-list;
+ @extend %ui-depth1;
- .course-item {
- margin-bottom: $baseline;
- padding-bottom: $baseline;
+ display: none;
+ position: absolute;
+ top: ($baseline*2);
- .course-container {
- border: 2px solid $border-color-l4;
- border-radius: 3px;
- }
+ @include right(19px);
- &:last-child {
- margin-bottom: 0;
- border-bottom: none;
- padding-bottom: 0;
- }
- }
- }
- }
-}
+ pointer-events: none;
+ min-width: ($baseline*7);
-// +Dashboard - Course
-// ====================
-.dashboard .my-courses {
- &:focus {
- outline: none;
- }
+ &.is-visible {
+ display: block;
+ pointer-events: auto;
+ }
- // UI: individual course item
- .course {
- @include box-sizing(box);
- @include transition(all 0.15s linear 0s);
- @include clearfix();
+ .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;
+ }
- @extend %ui-depth2;
+ &::after {
+ border-color: $transparent;
+ border-bottom-color: $white;
+ border-width: 6px;
- margin: ($baseline/2);
+ @include margin-right(1px);
+ }
- .details {
- @include clearfix();
+ &::before {
+ border-color: $transparent;
+ border-bottom-color: $gray-l3;
+ border-width: 7px;
+ }
+ }
- .wrapper-course-image {
- @include float(left);
- @include margin-right(flex-gutter());
+ .actions-item {
+ @extend %t-title7;
- width: flex-grid(3);
+ display: block;
+ margin: 0;
- .cover {
- @include box-sizing(border-box);
- @include transition(all 0.15s linear 0s);
- @include float(left);
+ &.is-hidden {
+ display: none;
+ }
- 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;
+ .action {
+ @include margin-right(0);
- .course-image {
- width: 100%;
+ &:hover, &:focus {
+ border: 1px solid transparent;
+ }
+ }
+ }
+ }
+ }
}
- }
-
- // "enrolled as" status
- .sts-enrollment {
- @include float(left);
- width: 100%;
- position: relative;
- bottom: 15px;
- display: inline-block;
- text-align: center;
+ .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;
- .label {
- @extend %text-sr;
- }
+ @include margin-right(flex-gutter());
- .deco-graphic {
- position: absolute;
- top: -5px;
+ padding: ($baseline/4);
+ width: flex-grid(8);
- @include right(0);
- }
+ @include float(left);
+ @include box-sizing(border-box);
- .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;
+ p {
+ color: $lighter-base-font-color;
+ font-style: italic;
+ letter-spacing: 1px;
+ text-align: center;
+ }
}
- }
- }
- .wrapper-course-details {
- display: block;
+ .course-status-completed {
+ background: $gray-l3;
+ color: $very-light-text;
- @include float(left);
+ p {
+ color: $gray-d4;
- 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;
+ span {
+ font-weight: bold;
+ }
+ }
}
- }
- }
-
- .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;
+ .enter-course {
+ @extend %btn-pl-white-base;
- 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;
- }
+ @include float(right);
- // TYPE: facebook share
- &.action-facebook {
- color: $facebook-blue;
+ &.archived {
+ @extend %btn-pl-default-base;
+ }
}
- // TYPE: twitter share
- &.action-twitter {
- color: $twitter-blue;
+ // Responsive behavior
+ @include media-breakpoint-down(md) {
+ @include padding-left($baseline/2);
}
}
- // UI: general actions dropdown layout
- .wrapper-action-more {
- display: inline-block;
- position: relative;
-
- @include float(right);
+ // ====================
- .action-more {
- @include font-size(14);
+ // UI: messages
+ .wrapper-messages-primary {
+ @include clearfix();
- box-shadow: none;
- background: $white;
- background-image: none;
- color: $gray;
- line-height: 16px;
- text-shadow: none;
+ .messages-list {
+ margin: 0;
+ padding: 0;
+ background-color: theme-color("lightest");
}
- .actions-dropdown {
- @extend %ui-no-list;
+ .message {
@extend %ui-depth1;
+ border-radius: 3px;
display: none;
- position: absolute;
- top: ($baseline*2);
-
- @include right(19px);
+ padding: ($baseline/2) $baseline;
+ border-top: 1px solid $gray-l4;
+ color: $base-font-color; // Overrides the normal white color in this one case
- pointer-events: none;
- min-width: ($baseline*7);
+ // STATE: shown
+ &.is-shown {
+ @include clearfix();
- &.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;
+ a {
+ font-family: $font-family-sans-serif;
+ }
- @include margin-right(1px);
- }
+ strong {
+ font-weight: 700;
- &::before {
- border-color: $transparent;
- border-bottom-color: $gray-l3;
- border-width: 7px;
+ a {
+ font-weight: 700;
}
}
- .actions-item {
- @extend %t-title7;
+ .actions {
+ @include clearfix();
- display: block;
+ list-style: none;
margin: 0;
-
- &.is-hidden {
- display: none;
- }
-
- .action {
- @include margin-right(0);
-
- &:hover, &:focus {
- border: 1px solid transparent;
- }
- }
+ padding: 0;
}
- }
- }
- }
-
- .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;
+ .message-title,
+ .message-copy .title {
+ @extend %t-title6;
+ @extend %t-weight4;
- span {
- font-weight: bold;
- }
- }
- }
+ line-height: 1em;
+ margin-bottom: ($baseline/4);
+ }
- .enter-course {
- @extend %btn-pl-white-base;
+ .message-copy,
+ .message-copy .copy {
+ @extend %t-copy-sub1;
- @include float(right);
+ margin: 2px 0 0 0;
+ }
- &.archived {
- @extend %btn-pl-default-base;
- }
- }
- }
+ // 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);
+ }
- // UI: messages
- .wrapper-messages-primary {
- @include clearfix();
+ // STATE: hover
+ &:hover {
+ cursor: pointer;
- .messages-list {
- margin: 0;
- padding: 0;
- }
+ .message-title .value, .message-copy, .ui-toggle-expansion {
+ color: $link-color;
+ }
+ }
+ }
- .message {
- @extend %ui-depth1;
+ .wrapper-extended {
+ @include transition(opacity $tmg-f2 ease-in-out 0);
- 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
+ display: none;
+ opacity: 0;
+ }
+ }
- // STATE: shown
- &.is-shown {
- @include clearfix();
+ // STATE: is expanded
+ &.is-expanded {
+ .ui-toggle-expansion {
+ @include rtl {
+ @include transform(rotate(-90deg));
+ }
- display: block;
- }
+ @include ltr {
+ @include transform(rotate(90deg));
+ }
- a {
- font-family: $sans-serif;
- }
+ @include transform-origin(50% 50%);
+ }
- strong {
- font-weight: 700;
+ .wrapper-extended {
+ display: block;
+ opacity: 1;
+ }
+ }
- a {
- font-weight: 700;
- }
- }
+ // TYPE: upsell
+ &.message-upsell {
+ .wrapper-tip {
+ @include clearfix();
- .actions {
- @include clearfix();
+ .message-title {
+ @include float(left);
+ }
- list-style: none;
- margin: 0;
- padding: 0;
- }
+ .ui-toggle-expansion {
+ @include transition(all $tmg-f2 ease-in-out 0s);
+ @include font-size(18);
- .message-title,
- .message-copy .title {
- @extend %t-title6;
- @extend %t-weight4;
+ display: inline-block;
+ vertical-align: middle;
- line-height: 1em;
- margin-bottom: ($baseline/4);
- }
+ @include margin-right($baseline/4);
+ }
- .message-copy,
- .message-copy .copy {
- @extend %t-copy-sub1;
+ .message-copy {
+ @include float(right);
+ }
+ }
- margin: 2px 0 0 0;
- }
+ .wrapper-extended {
+ padding: ($baseline/4) 0;
- // CASE: expandable
- &.is-expandable {
- .wrapper-tip {
- .message-title, .message-copy {
- margin-bottom: 0;
- display: inline-block;
- }
+ .message-copy {
+ display: inline-block;
- .message-title .value, .message-copy {
- @include transition(color $tmg-f2 ease-in-out 0s);
- }
+ .message-copy-bold {
+ font-weight: 600;
+ }
+ }
+ }
- // STATE: hover
- &:hover {
- cursor: pointer;
+ .action-upgrade-container {
+ @include float(right);
- .message-title .value, .message-copy, .ui-toggle-expansion {
- color: $link-color;
+ display: inline-block;
+ margin-top: ($baseline/2);
}
- }
- }
- .wrapper-extended {
- @include transition(opacity $tmg-f2 ease-in-out 0);
+ .action-upgrade {
+ @extend %btn-primary-green;
- display: none;
- opacity: 0;
- }
- }
+ @include clearfix();
- // STATE: is expanded
- &.is-expanded {
- .ui-toggle-expansion {
- @include rtl {
- @include transform(rotate(-90deg));
- }
+ position: relative;
- @include ltr {
- @include transform(rotate(90deg));
- }
+ @include left($baseline/2);
+ @include padding(($baseline * 0.4), 0, ($baseline * 0.4), ($baseline * 0.75));
- @include transform-origin(50% 50%);
- }
+ .action-upgrade-icon {
+ @include float(left);
- .wrapper-extended {
- display: block;
- opacity: 1;
- }
- }
+ display: inline;
- // TYPE: upsell
- &.message-upsell {
- .wrapper-tip {
- @include clearfix();
+ @include margin-right($baseline*0.4);
- .message-title {
- @include float(left);
- }
+ 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);
+ }
- .ui-toggle-expansion {
- @include transition(all $tmg-f2 ease-in-out 0s);
- @include font-size(18);
+ .deco-graphic {
+ position: absolute;
+ top: -($baseline/4);
- display: inline-block;
- vertical-align: middle;
+ @include left(-($baseline*0.75));
- @include margin-right($baseline/4);
- }
+ width: ($baseline*2);
+ }
- .message-copy {
- @include float(right);
- }
- }
+ span {
+ color: $white; // nasty but needed override for poor <span> styling
+ }
- .wrapper-extended {
- padding: ($baseline/4) 0;
+ .copy, .copy-sub {
+ display: inline-block;
+ vertical-align: middle;
+ }
- .message-copy {
- width: flex-grid(9, 12);
- display: inline-block;
+ .copy {
+ @extend %t-action3;
+ @extend %t-weight4;
- .message-copy-bold {
- font-weight: 600;
+ @include margin-right($baseline);
+ }
+
+ .copy-sub {
+ @extend %t-action4;
+
+ opacity: 0.875;
+ }
}
}
- }
-
- .action-upgrade-container {
- @include float(right);
- display: inline-block;
- margin-top: ($baseline/2);
- }
+ // TYPE: status
+ &.message-status {
+ border-color: $gray-l4;
- .action-upgrade {
- @extend %btn-primary-green;
+ .wrapper-message-primary {
+ @include clearfix();
+ }
- @include clearfix();
+ .message-copy {
+ @extend %t-copy-sub1;
- position: relative;
+ margin: 0;
+ }
- @include left($baseline/2);
- @include padding(($baseline * 0.4), 0, ($baseline * 0.4), ($baseline * 0.75));
+ .credit-action {
+ .credit-btn {
+ @extend %btn-pl-yellow-base;
- .action-upgrade-icon {
- @include float(left);
+ @include float(right);
+ @include margin-right(5px);
- display: inline;
+ background-image: none ;
+ text-shadow: none;
+ box-shadow: none;
+ text-transform: none;
+ }
+ }
- @include margin-right($baseline*0.4);
+ .actions {
+ .action {
+ @include float(left);
+ @include margin(0, 15px, 0, 0);
- 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);
- }
+ .btn {
+ display: inline-block;
+ }
- .deco-graphic {
- position: absolute;
- top: -($baseline/4);
+ .btn {
+ @include box-sizing(border-box);
+ @include float(left);
- @include left(-($baseline*0.75));
+ border-radius: 3px;
+ font: normal 0.8rem/1.2rem $font-family-sans-serif;
+ letter-spacing: 1px;
+ padding: 6px 12px;
+ text-align: center;
- width: ($baseline*2);
- }
+ &.disabled {
+ cursor: default !important;
- span {
- color: $white; // nasty but needed override for poor <span> styling
- }
+ &:hover, &:focus {
+ @include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%));
- .copy, .copy-sub {
- display: inline-block;
- vertical-align: middle;
- }
+ background: #eee;
+ }
+ }
+ }
- .copy {
- @extend %t-action3;
- @extend %t-weight4;
+ .btn {
+ @include float(left);
- @include margin-right($baseline);
- }
+ font: normal 0.8rem/1.2rem $font-family-sans-serif;
+ letter-spacing: 1px;
+ padding: 6px 12px;
+ text-align: center;
+ }
+ }
+ }
- .copy-sub {
- @extend %t-action4;
+ .exam-registration-number {
+ font-family: $font-family-sans-serif;
+ font-size: 18px;
- opacity: 0.875;
- }
- }
- }
+ a {
+ font-family: $font-family-sans-serif;
+ }
+ }
- // TYPE: status
- &.message-status {
- border-color: $gray-l4;
+ &.exam-register {
+ .message-copy {
+ margin-top: ($baseline/4);
+ width: 55%;
+ }
+ }
- .wrapper-message-primary {
- @include clearfix();
- }
+ &.exam-schedule {
+ .exam-button {
+ margin-top: ($baseline/4);
+ }
+ }
- .message-copy {
- @extend %t-copy-sub1;
+ .exam-button {
+ @include button(simple, $pink);
+ @include float(right);
- margin: 0;
- }
+ margin-top: 0;
+ }
- .credit-action {
- .credit-btn {
- @extend %btn-pl-yellow-base;
+ .contact-button {
+ @include button(simple, $pink);
+ }
- @include float(right);
- @include margin-right(5px);
+ .button {
+ display: inline-block;
+ margin-top: ($baseline/2);
+ padding: 9px 18px 10px;
+ font-size: 13px;
+ font-weight: bold;
+ letter-spacing: 0;
- background-image: none ;
- text-shadow: none;
- box-shadow: none;
- text-transform: none;
- }
- }
+ &:hover, &:focus {
+ text-decoration: none;
+ }
+ }
- .actions {
- .action {
- @include float(left);
- @include margin(0, 15px, 0, 0);
- .btn {
- display: inline-block;
+ &.course-status-certrendering {
+ .btn {
+ margin-top: 2px;
+ }
}
- .btn {
- @include box-sizing(border-box);
- @include float(left);
+ &.course-status-certavailable {
+ .message-copy {
+ width: flex-grid(6, 12);
+ position: relative;
- border-radius: 3px;
- font: normal 0.8rem/1.2rem $sans-serif;
- letter-spacing: 1px;
- padding: 6px 12px;
- text-align: center;
+ @include float(left);
+ }
- &.disabled {
- cursor: default !important;
+ .actions-primary {
+ @include float(right);
- &:hover, &:focus {
- @include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%));
+ .action {
+ @include margin(0, 0, ($baseline/2), ($baseline*.75));
- background: #eee;
- }
- }
- }
+ float: none;
+ text-align: center;
- .btn {
- @include float(left);
+ &:last-child {
+ margin-bottom: 0;
+ }
- font: normal 0.8rem/1.2rem $sans-serif;
- letter-spacing: 1px;
- padding: 6px 12px;
- text-align: center;
- }
- }
- }
+ .btn {
+ float: none;
+ }
+ }
- .exam-registration-number {
- font-family: $sans-serif;
- font-size: 18px;
+ .action-certificate .btn {
+ @extend %btn-inherited-primary;
- a {
- font-family: $sans-serif;
- }
- }
+ @include box-sizing(border-box);
- &.exam-register {
- .message-copy {
- margin-top: ($baseline/4);
- width: 55%;
- }
- }
+ float: none;
+ border-radius: 3px;
+ display: block;
- &.exam-schedule {
- .exam-button {
- margin-top: ($baseline/4);
- }
- }
+ @include padding(7px, ($baseline*.75), 7px, ($baseline*.75));
- .exam-button {
- @include button(simple, $pink);
- @include float(right);
+ text-align: center;
- margin-top: 0;
- }
+ a:link, a:visited {
+ color: #fff;
+ }
+ }
- .contact-button {
- @include button(simple, $pink);
- }
+ .action-share .btn {
+ display: inline;
+ letter-spacing: 0;
+ }
+ }
+ }
- .button {
- display: inline-block;
- margin-top: ($baseline/2);
- padding: 9px 18px 10px;
- font-size: 13px;
- font-weight: bold;
- letter-spacing: 0;
+ .actions-secondary {
+ margin-top: ($baseline/2);
+ border-top: 1px solid $gray-l4;
+ padding-top: ($baseline/2);
- &:hover, &:focus {
- text-decoration: none;
- }
- }
+ .action-share {
+ @include float(right);
+ margin: 0;
+ }
+ }
- &.course-status-certrendering {
- .btn {
- margin-top: 2px;
- }
- }
+ .certificate-explanation {
+ @extend %t-copy-sub1;
- &.course-status-certavailable {
- .message-copy {
- width: flex-grid(6, 12);
- position: relative;
+ margin-top: ($baseline/2);
+ border-top: 1px solid $gray-l4;
+ padding-top: ($baseline/2);
+ }
- @include float(left);
- }
+ .verification-reminder {
+ width: flex-grid(8, 12);
- .actions-primary {
- @include float(right);
+ @include float(left);
- .action {
- @include margin(0, 0, ($baseline/2), ($baseline*.75));
+ position: relative;
+ }
- float: none;
- text-align: center;
+ .verification-cta {
+ width: flex-grid(4, 12);
- &:last-child {
- margin-bottom: 0;
- }
+ @include float(left);
+
+ position: relative;
.btn {
- float: none;
+ @extend %btn-pl-green-base;
+
+ @include float(right);
}
}
+ }
- .action-certificate .btn {
- @extend %btn-inherited-primary;
+ &.message-related-programs {
+ background: none;
+ border: none;
+ margin-top: ($baseline/4);
+ padding-bottom: 0;
- @include box-sizing(border-box);
+ .related-programs-preface {
+ @include float(left);
- float: none;
- border-radius: 3px;
- display: block;
+ font-weight: bold;
+ }
- @include padding(7px, ($baseline*.75), 7px, ($baseline*.75));
+ ul {
+ display: inline;
+ padding: 0;
+ margin: 0;
+ }
- text-align: center;
+ li {
+ @include float(left);
- a:link, a:visited {
- color: #fff;
+ 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);
}
}
- .action-share .btn {
- display: inline;
- letter-spacing: 0;
+ // Remove separator from last list item.
+ li:last-child {
+ border: 0;
}
}
- }
-
- .actions-secondary {
- margin-top: ($baseline/2);
- border-top: 1px solid $gray-l4;
- padding-top: ($baseline/2);
- .action-share {
- @include float(right);
+ // TYPE: pre-requisites
+ .prerequisites {
+ @include clearfix;
- margin: 0;
+ .tip {
+ font-family: $font-family-sans-serif;
+ font-size: 1em;
+ color: $lighter-base-font-color;
+ margin-top: ($baseline/2);
+ }
}
- }
-
- .certificate-explanation {
- @extend %t-copy-sub1;
- margin-top: ($baseline/2);
- border-top: 1px solid $gray-l4;
- padding-top: ($baseline/2);
+ @include media-breakpoint-down(md) {
+ @include padding($baseline/2, $baseline, $baseline/2, $baseline/2);
+ }
}
+ }
- .verification-reminder {
- width: flex-grid(8, 12);
+ // ====================
- @include float(left);
+ // CASE: "enrolled as" status - professional ed
+ &.professional {
- position: relative;
+ // changes to cover
+ .wrapper-course-image .cover {
+ border-color: $professional-color-lvl3;
+ padding: ($baseline/10);
}
- .verification-cta {
- width: flex-grid(4, 12);
-
- @include float(left);
-
- position: relative;
-
- .btn {
- @extend %btn-pl-green-base;
+ // course enrollment status message
+ .sts-enrollment {
+ .label {
+ @extend %text-sr;
+ }
- @include float(right);
+ // status message
+ .sts-enrollment-value {
+ background: $professional-color-lvl3;
}
}
}
- &.message-related-programs {
- background: none;
- border: none;
- margin-top: ($baseline/4);
- padding-bottom: 0;
-
- .related-programs-preface {
- @include float(left);
+ // CASE: "enrolled as" status - verified
+ &.verified {
- font-weight: bold;
+ // changes to cover
+ .wrapper-course-image .cover {
+ border-color: $verified-color-lvl1;
+ padding: ($baseline/10);
}
- ul {
- display: inline;
- padding: 0;
- margin: 0;
- }
+ // course enrollment status message
+ .sts-enrollment {
+ .label {
+ @extend %text-sr;
+ }
- li {
- @include float(left);
+ .deco-graphic {
+ @extend %ui-depth3;
- display: inline;
- padding: 0 0.5em;
- border-right: 1px solid;
+ width: 40px;
+ position: absolute;
+ top: -5px;
- .category-icon {
- @include float(left);
- @include margin-right($baseline/4);
+ @include right(0);
+ }
- margin-top: ($baseline/10);
- background-color: transparent;
- background-size: 100%;
- width: ($baseline*0.7);
- height: ($baseline*0.7);
+ // 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);
+ }
- // Remove separator from last list item.
- li:last-child {
- border: 0;
+ // status message
+ .sts-enrollment-value {
+ background: $honorcode-color-lvl1;
}
}
- // TYPE: pre-requisites
- .prerequisites {
- @include clearfix;
+ // CASE: "enrolled as" status - auditing
+ &.audit {
+
+ // changes to cover
+ .wrapper-course-image .cover {
+ border-color: $audit-color-lvl2;
+ padding: ($baseline/10);
+ }
- .tip {
- font-family: $sans-serif;
- font-size: 1em;
- color: $lighter-base-font-color;
- margin-top: ($baseline/2);
+ // status message
+ .sts-enrollment-value {
+ background: $audit-color-lvl1;
}
}
}
}
- // ====================
+ // Responsive behavior
+ @include media-breakpoint-down(md) {
+ padding: $baseline;
+ }
+ }
- // CASE: "enrolled as" status - professional ed
- &.professional {
+ // Secondary functionality
+ .side-container {
+ @include padding($baseline*2, $baseline*2, $baseline, $baseline);
- // changes to cover
- .wrapper-course-image .cover {
- border-color: $professional-color-lvl3;
- padding: ($baseline/10);
- }
+ max-width: $baseline*20;
+ flex-grow: 1;
+ order: 2;
- // course enrollment status message
- .sts-enrollment {
- .label {
- @extend %text-sr;
- }
+ .wrapper-find-courses {
+ .course-advertise {
+ @include clearfix();
+
+ box-sizing: border-box;
+ padding: $baseline;
+ border: 1px solid $border-color-l3;
- // status message
- .sts-enrollment-value {
- background: $professional-color-lvl3;
+ .advertise-message {
+ @include font-size(12);
+
+ color: $gray-d4;
+ margin-bottom: $baseline;
}
- }
- }
- // CASE: "enrolled as" status - verified
- &.verified {
+ .ad-link {
+ @include text-align(center);
- // changes to cover
- .wrapper-course-image .cover {
- border-color: $verified-color-lvl1;
- padding: ($baseline/10);
- }
+ .btn-neutral {
+ padding-bottom: 12px;
+ padding-top: 12px;
+ }
- // course enrollment status message
- .sts-enrollment {
- .label {
- @extend %text-sr;
- }
+ a {
+ @include font-size(16);
+ @include line-height(17);
- .deco-graphic {
- @extend %ui-depth3;
+ padding: $baseline * 0.5;
+ border: 1px solid theme-color('primary');
+ color: theme-color('primary');
+ text-decoration: none;
+ display: block;
- width: 40px;
- position: absolute;
- top: -5px;
+ &:hover,
+ &:focus,
+ &:active {
+ color: $white;
+ background-color: theme-color('primary');
+ }
- @include right(0);
- }
+ span {
+ @include margin-left($baseline*0.25);
+ }
- // status message
- .sts-enrollment-value {
- background: $verified-color-lvl1;
+ .icon {
+ @include margin-right($baseline*0.25);
+ }
+ }
}
}
}
- // CASE: "enrolled as" status - honor code
- &.honor {
+ // 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;
+ }
+}
- // changes to cover
- .wrapper-course-image .cover {
- border-color: $honorcode-color-lvl2;
- padding: ($baseline/10);
- }
+// CASE: empty dashboard
+.empty-dashboard-message {
+ border: 3px solid $gray-l4;
+ background: $gray-l6;
+ padding: ($baseline*2) 0;
+ text-align: center;
- // status message
- .sts-enrollment-value {
- background: $honorcode-color-lvl1;
- }
- }
+ p {
+ @include font-size(24);
+
+ color: $lighter-base-font-color;
+ margin-bottom: $baseline;
+ text-shadow: 0 1px rgba(255,255,255, 0.6);
+ }
- // CASE: "enrolled as" status - auditing
- &.audit {
+ a {
+ background-color: theme-color('primary');
+ border: 1px solid theme-color('primary');
+ box-shadow: 0 1px 8px 0 $shadow-l1;
- // changes to cover
- .wrapper-course-image .cover {
- border-color: $audit-color-lvl2;
- padding: ($baseline/10);
- }
+ @include box-sizing(border-box);
- // status message
- .sts-enrollment-value {
- background: $audit-color-lvl1;
- }
+ color: $white;
+ font-family: $font-family-sans-serif;
+ display: inline-block;
+ letter-spacing: 1px;
+ margin-top: ($baseline/4);
+ margin-left: ($baseline/4);
+ padding: $baseline*0.75 $baseline;
+
+ &:hover, &:focus {
+ background: theme-color('primary')-l2;
+ text-decoration: none;
}
}
}
@@ -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 1af315ae20f..f2c0a2329f5 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 13765bdd021..8d25b23b793 100644
--- a/lms/templates/dashboard.html
+++ b/lms/templates/dashboard.html
@@ -102,115 +102,116 @@ from openedx.core.djangolib.markup import HTML, Text
</div>
<main id="main" aria-label="Content" tabindex="-1">
- <div class="container dashboard" id="dashboard-main">
- <div class="my-courses" id="my-courses">
- <%include file="learner_dashboard/_dashboard_navigation_courses.html"/>
+ <div class="dashboard" id="dashboard-main">
- % if len(course_enrollments) > 0:
- <ul class="listing-courses">
- <%
- 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
+ <div class="main-container">
+ <div class="my-courses" id="my-courses">
+ <%include file="learner_dashboard/_dashboard_navigation_courses.html"/>
- </ul>
- % else:
- <div class="empty-dashboard-message">
- <p>${_("You are not enrolled in any courses yet.")}</p>
+ % if len(course_enrollments) > 0:
+ <ul class="listing-courses">
+ <%
+ 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
- % if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
- <a href="${marketing_link('COURSES')}">
- ${_("Explore courses")}
- </a>
-
- %endif
- </div>
- % endif
+ </ul>
+ % else:
+ <div class="empty-dashboard-message">
+ <p>${_("You are not enrolled in any courses yet.")}</p>
- % if staff_access and len(errored_courses) > 0:
- <div id="course-errors">
- <h2>${_("Course-loading errors")}</h2>
+ % if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
+ <a href="${marketing_link('COURSES')}">
+ ${_("Explore courses")}
+ </a>
- % for course_dir, errors in errored_courses.items():
- <h3>${course_dir}</h3>
- <ul>
- % for (msg, err) in errors:
- <li>${msg}
- <ul><li><pre>${err}</pre></li></ul>
- </li>
- % endfor
- </ul>
- % endfor
+ %endif
</div>
- % endif
- </div>
+ % endif
- %if sidebar_account_activation_message:
- <div class="sidebar-notification">
- ${sidebar_account_activation_message | n, decode.utf8}
- </div>
- %endif
+ % if staff_access and len(errored_courses) > 0:
+ <div id="course-errors">
+ <h2>${_("Course-loading errors")}</h2>
- % if settings.FEATURES.get('ENABLE_DASHBOARD_SEARCH'):
- <div id="dashboard-search-bar" class="search-bar dashboard-search-bar" role="search" aria-label="Dashboard">
- <form class="search-form">
- <label for="dashboard-search-input">${_('Search Your Courses')}</label>
- <div class="search-field-wrapper">
- <input id="dashboard-search-input" type="text" class="search-field"/>
- <button type="submit" class="search-button" title="${_('Search')}">
- <span class="icon fa fa-search" aria-hidden="true"></span>
- </button>
- <button type="button" class="cancel-button" title="${_('Clear search')}">
- <span class="icon fa fa-remove" aria-hidden="true"></span>
- </button>
+ % for course_dir, errors in errored_courses.items():
+ <h3>${course_dir}</h3>
+ <ul>
+ % for (msg, err) in errors:
+ <li>${msg}
+ <ul><li><pre>${err}</pre></li></ul>
+ </li>
+ % endfor
+ </ul>
+ % endfor
</div>
- </form>
+ % endif
</div>
- % endif
+ </div>
+ <div class="side-container">
+ %if sidebar_account_activation_message:
+ <div class="sidebar-notification">
+ ${sidebar_account_activation_message | n, decode.utf8}
+ </div>
+ %endif
- % if settings.FEATURES.get('ENABLE_DASHBOARD_SEARCH'):
- <div id="dashboard-search-results" class="search-results dashboard-search-results"></div>
- % endif
+ % if settings.FEATURES.get('ENABLE_DASHBOARD_SEARCH'):
+ <div id="dashboard-search-bar" class="search-bar dashboard-search-bar" role="search" aria-label="Dashboard">
+ <form class="search-form">
+ <label for="dashboard-search-input">${_('Search Your Courses')}</label>
+ <div class="search-field-wrapper">
+ <input id="dashboard-search-input" type="text" class="search-field"/>
+ <button type="submit" class="search-button" title="${_('Search')}">
+ <span class="icon fa fa-search" aria-hidden="true"></span>
+ </button>
+ <button type="button" class="cancel-button" title="${_('Clear search')}">
+ <span class="icon fa fa-remove" aria-hidden="true"></span>
+ </button>
+ </div>
+ </form>
+ </div>
+ <div id="dashboard-search-results" class="search-results dashboard-search-results"></div>
+ % endif
- % if display_sidebar_on_dashboard:
- <div class="profile-sidebar" id="profile-sidebar" role="region" aria-label="Account Status Info">
- <header class="profile">
- <h2 class="account-status-title sr">${_("Account Status Info")}: </h2>
- </header>
- <div class="user-info">
- <ul>
+ % if display_sidebar_on_dashboard:
+ <div class="profile-sidebar" id="profile-sidebar" role="region" aria-label="Account Status Info">
+ <header class="profile">
+ <h2 class="account-status-title sr">${_("Account Status Info")}: </h2>
+ </header>
+ <div class="user-info">
+ <ul>
- % if len(order_history_list):
- <li class="order-history">
- <span class="title">${_("Order History")}</span>
- % for order_history_item in order_history_list:
- <span><a href="${order_history_item['receipt_url']}" target="_blank" class="edit-name">${order_history_item['order_date']}</a></span>
- % endfor
- </li>
- % endif
+ % if len(order_history_list):
+ <li class="order-history">
+ <span class="title">${_("Order History")}</span>
+ % for order_history_item in order_history_list:
+ <span><a href="${order_history_item['receipt_url']}" target="_blank" class="edit-name">${order_history_item['order_date']}</a></span>
+ % endfor
+ </li>
+ % endif
- <%include file="${static.get_template_path('dashboard/_dashboard_status_verification.html')}" />
+ <%include file="${static.get_template_path('dashboard/_dashboard_status_verification.html')}" />
- </ul>
+ </ul>
+ </div>
</div>
- </div>
- % endif
+ % endif
+ </div>
</div>
</main>
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 c51b00a8b45..edcf323421d 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 50d7a37130f..5d78c275152 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 3e34a6df9ea..8a7b9416330 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 @@
<header class="search-info">
- <a class="search-back-to-courses" href="#"><%- gettext("Back to Dashboard") %></a>
<h2><%- gettext("Search Results") %></h2>
<div class="search-count"><%- totalCountMsg %></div>
</header>
diff --git a/themes/edx.org/lms/templates/dashboard.html b/themes/edx.org/lms/templates/dashboard.html
index 5c8d3881a10..4b1df0c2875 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
</div>
-<section class="container dashboard" id="dashboard-main">
-<main id="main" aria-label="Content" tabindex="-1">
+<section class="dashboard" id="dashboard-main">
+<main class="main-container" id="main" aria-label="Content" tabindex="-1">
<section class="my-courses" id="my-courses">
<header class="wrapper-header-courses">
<h2 class="header-courses">${_("My Courses")}</h2>
@@ -159,7 +159,7 @@ from openedx.core.djangoapps.theming import helpers as theming_helpers
% endif
</section>
</main>
-
+<div class="side-container">
%if sidebar_account_activation_message:
<div class="sidebar-notification">
${sidebar_account_activation_message | n, decode.utf8}
@@ -181,9 +181,6 @@ from openedx.core.djangoapps.theming import helpers as theming_helpers
</div>
</form>
</div>
- % endif
-
- % if settings.FEATURES.get('ENABLE_DASHBOARD_SEARCH'):
<section id="dashboard-search-results" class="search-results dashboard-search-results"></section>
% endif
@@ -226,6 +223,7 @@ from openedx.core.djangoapps.theming import helpers as theming_helpers
</section>
</section>
% endif
+</div>
</section>
<section id="email-settings-modal" class="modal" aria-hidden="true">
--
GitLab