Skip to content

E
edx-platform
Commit 889e9880 by Harry Rein
Options

Responsive dashboard and learner profile.

parent 1b63bd9c
Showing with 906 additions and 1084 deletions
common/djangoapps/terrain/steps.py
...@@ -53,12 +53,12 @@ def i_visit_the_homepage(step): ...@@ -53,12 +53,12 @@ def i_visit_the_homepage(step):
@step(u'I (?:visit|access|open) the dashboard$') @step(u'I (?:visit|access|open) the dashboard$')
def i_visit_the_dashboard(step): def i_visit_the_dashboard(step):
world.visit('/dashboard') world.visit('/dashboard')
assert world.is_css_present('.container.dashboard') assert world.is_css_present('.dashboard')
@step('I should be on the dashboard page$') @step('I should be on the dashboard page$')
def i_should_be_on_the_dashboard(step): 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 assert 'Dashboard' in world.browser.title
...@@ -166,7 +166,7 @@ def i_am_logged_in(step): ...@@ -166,7 +166,7 @@ def i_am_logged_in(step):
world.create_user('robot', 'test') world.create_user('robot', 'test')
world.log_in(username='robot', password='test') world.log_in(username='robot', password='test')
world.browser.visit(lettuce.django.django_url('/')) world.browser.visit(lettuce.django.django_url('/'))
dash_css = '.container.dashboard' dash_css = '.dashboard'
assert world.is_css_present(dash_css) assert world.is_css_present(dash_css)
......
lms/djangoapps/courseware/features/registration.py
...@@ -11,7 +11,7 @@ def i_register_for_the_course(_step, course): ...@@ -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()) url = django_url('courses/%s/about' % world.scenario_dict['COURSE'].id.to_deprecated_string())
world.browser.visit(url) world.browser.visit(url)
world.css_click('.intro a.register') 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$') @step('I register to audit the course$')
...@@ -27,7 +27,7 @@ def i_register_to_audit_the_course(_step): ...@@ -27,7 +27,7 @@ def i_register_to_audit_the_course(_step):
ignored_exceptions=AttributeError ignored_exceptions=AttributeError
) )
time.sleep(1) 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') @step(u'I should see an empty dashboard message')
......
lms/static/sass/_header.scss
...@@ -20,14 +20,14 @@ ...@@ -20,14 +20,14 @@
a { a {
@include float(left); @include float(left);
@include margin($baseline/2, 0, 0, $baseline); @include margin($baseline*0.75, 0, 0, $baseline*2);
display: block; display: block;
.logo { .logo {
@include float(left); @include float(left);
width: $header-logo-width; height: $header-logo-height;
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
...@@ -90,7 +90,7 @@ ...@@ -90,7 +90,7 @@
a { a {
color: theme-color("secondary"); 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; font-weight: $font-weight-normal;
display: inline-block; display: inline-block;
margin-bottom: -1*$baseline/2; margin-bottom: -1*$baseline/2;
...@@ -112,8 +112,7 @@ ...@@ -112,8 +112,7 @@
.secondary { .secondary {
@include float(right); @include float(right);
@include margin($baseline*0.75, $baseline*2, 0, 0);
margin: $baseline*0.6 $baseline 0 0;
// All navigation items // All navigation items
.nav-item { .nav-item {
...@@ -230,7 +229,7 @@ ...@@ -230,7 +229,7 @@
.hamburger-menu { .hamburger-menu {
@include left(22px); @include left(22px);
position: absolute; position: absolute;
top: $baseline; top: $baseline*1.25;
width: 30px; width: 30px;
height: 20px; height: 20px;
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
......
lms/static/sass/features/_course-search.scss
...@@ -23,8 +23,6 @@ ...@@ -23,8 +23,6 @@
} }
.search-results-item { .search-results-item {
@include padding-right(140px);
position: relative; position: relative;
border-top: 1px solid $border-color; border-top: 1px solid $border-color;
padding: $baseline ($baseline/2); padding: $baseline ($baseline/2);
...@@ -52,10 +50,9 @@ ...@@ -52,10 +50,9 @@
} }
.result-link { .result-link {
@include right($baseline/2); @include float(right);
@include padding-left($baseline/4);
position: absolute;
top: $baseline;
line-height: 1.6em; line-height: 1.6em;
} }
......
lms/static/sass/features/_learner-profile.scss
...@@ -273,6 +273,11 @@ ...@@ -273,6 +273,11 @@
border: none; border: none;
box-shadow: none; box-shadow: none;
padding: 0; 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 { .u-field-title {
......
lms/static/sass/multicourse/_dashboard.scss
// lms - views - user/student dashboard // lms - views - user/student dashboard
// ==================== // ====================
// Table of Contents // +Dashboard
// * +Dashboard - Sidebar
// * +Dashboard - Course Listing
// * +Dashboard - Course Item
// * +Misc - Uncategorized
// * +Dashboard - Banner
// +Dashboard - Sidebar
// ==================== // ====================
.dashboard { .dashboard {
@include clearfix(); @include clearfix();
padding: ($baseline*2) 0 $baseline 0; display: flex;
flex-direction: row;
width: 100%;
.wrapper-find-courses { // Contains main course card listings
@include float(right); .main-container {
@include margin-left(flex-gutter()); @include padding($baseline*2, $baseline, $baseline, $baseline*2);
width: flex-grid(3); flex-grow: 8;
order: 1;
.course-advertise { .my-courses {
@include clearfix(); &:focus {
outline: none;
box-sizing: border-box;
padding: $baseline;
border: 1px solid $border-color-l3;
.advertise-message {
@include font-size(12);
color: $gray-d4;
margin-bottom: $baseline;
} }
.ad-link { .wrapper-header-courses {
@include text-align(center); margin-bottom: $baseline/2;
.btn-neutral { .header-courses {
padding-bottom: 12px; @extend %t-title5;
padding-top: 12px;
}
a { @include padding-right($baseline/2);
@include font-size(16); }
@include line-height(17); }
padding: $baseline * 0.5; // UI: course list
border: 1px solid $blue; .listing-courses {
color: $blue; @extend %ui-no-list;
text-decoration: none;
display: block;
&:hover, .course-item {
&:focus, margin-bottom: $baseline;
&:active { padding-bottom: $baseline;
color: $white;
background-color: $blue;
}
span { .course-container {
@include margin-left($baseline*0.25); border: 1px solid theme-color("light");
border-radius: 3px;
} }
.icon { &:last-of-type {
@include margin-right($baseline*0.25); 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 { // UI: individual course item
@include clearfix(); .course {
@include box-sizing(box);
> ul { @include transition(all 0.15s linear 0s);
@include box-sizing(border-box);
@include clearfix(); @include clearfix();
margin: 0; @extend %ui-depth2;
padding: 0;
width: flex-grid(12);
li { .details {
@include clearfix(); @include clearfix();
border-bottom: 1px dotted $border-color-2; .wrapper-course-image {
list-style: none; @include float(left);
margin-bottom: ($baseline*0.75); @include margin-right(flex-gutter());
padding-bottom: 17px;
&:hover, &:focus { width: flex-grid(3);
.title .icon { max-height: 150px;
opacity: 1; overflow: hidden;
}
}
span { .cover {
display: block; @include box-sizing(border-box);
margin-bottom: ($baseline/4); @include transition(all 0.15s linear 0s);
} @include float(left);
span.title { position: relative;
@extend %t-title6;
@extend %t-strong;
a { .course-image {
text-transform: none; width: 100%;
}
} }
}
span.copy { // "enrolled as" status
@extend %t-copy-sub1; .sts-enrollment {
} @include float(left);
span.data { width: 100%;
color: $base-font-color; position: relative;
font-weight: 600; bottom: 15px;
white-space: nowrap; display: inline-block;
text-overflow: ellipsis; text-align: center;
overflow: hidden;
.third-party-auth { .label {
color: inherit; @extend %text-sr;
font-weight: inherit; }
}
} .deco-graphic {
} position: absolute;
top: -5px;
li.order-history { @include right(0);
span a { }
font-size: 13px;
line-height: 20px;
}
}
.heads-up { .sts-enrollment-value {
.title { @extend %ui-depth1;
display: inline; @extend %copy-badge;
} @extend %t-demi-strong;
.copy { font-size: 0.6em;
@extend %t-copy-sub2; 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 { .wrapper-course-details {
@extend %t-copy-sub2; display: block;
margin-bottom: 7px; @include float(left);
border-bottom: 0;
padding: 0;
.icon { width: flex-grid(9);
display: inline-block; padding: 0;
vertical-align: top; margin: $baseline/2 0;
margin: ($baseline/10) ($baseline/4) 0 0;
}
&.is-open .icon { .course-title {
color: $action-primary-bg; a, span {
} @extend %t-title3;
@extend %t-light;
&.is-pending .icon { display: inline-block;
color: $warning-color; margin-bottom: ($baseline/2);
} text-decoration: none;
&.is-approved .icon { // Responsive behavior
color: $success-color; @include media-breakpoint-down(sm) {
} @extend %t-title4;
}
}
}
&.is-denied .icon { .course-info {
color: $alert-color; display: block;
}
.label { @include float(left);
@extend %text-sr;
}
.course-name { padding: 0;
@include line-height(12); margin-top: ($baseline/2);
display: inline-block; [class*="info-"] {
vertical-align: top; color: $gray-d1;
width: 80%;
color: inherit;
}
}
}
// status @extend %t-title7;
.status {
@include clearfix();
box-sizing: border-box; display: inline-block;
padding: $baseline; }
border: 1px solid $border-color-l3;
.list--nav { .info-date-block {
margin: ($baseline/2) 0 0 0; @extend %t-title7;
padding: 0;
}
.nav__item { color: $gray; // WCAG 2.0 AA compliant
@extend %t-weight4; 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 { // Responsive behavior
@include font-size(24); @include media-breakpoint-down(sm) {
width: 100%;
}
}
color: $lighter-base-font-color; .course-actions {
margin-bottom: $baseline;
text-shadow: 0 1px rgba(255,255,255, 0.6);
}
a { // UI: course item actions
background-color: $blue; .action {
border: 1px solid $blue; @include box-sizing(border-box);
box-shadow: 0 1px 8px 0 $shadow-l1; @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; &:hover, &:focus {
font-family: $sans-serif; color: $gray-d3;
display: inline-block; border: 1px solid $gray-l4;
letter-spacing: 1px; }
margin-top: ($baseline/4);
margin-left: ($baseline/4);
padding: 15px 20px;
&:hover, &:focus { // STATE: is-disabled
background: $blue-l2; &.is-disabled {
text-decoration: none; color: $gray-l4;
} }
}
}
// +Dashboard - Course Listing // TYPE: facebook share
// ==================== &.action-facebook {
.dashboard { color: $facebook-blue;
.my-courses { }
@include float(left);
margin: 0; // TYPE: twitter share
margin-bottom: $baseline * 2; &.action-twitter {
width: flex-grid(9); color: $twitter-blue;
}
}
// UI: general actions dropdown layout
.wrapper-action-more {
display: inline-block;
position: relative;
.wrapper-header-courses { @include float(right);
border-bottom: 4px solid $border-color-l4;
margin-bottom: $baseline;
.header-courses { .action-more {
@extend %t-title5; @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 .actions-dropdown {
.listing-courses { @extend %ui-no-list;
@extend %ui-no-list; @extend %ui-depth1;
.course-item { display: none;
margin-bottom: $baseline; position: absolute;
padding-bottom: $baseline; top: ($baseline*2);
.course-container { @include right(19px);
border: 2px solid $border-color-l4;
border-radius: 3px;
}
&:last-child { pointer-events: none;
margin-bottom: 0; min-width: ($baseline*7);
border-bottom: none;
padding-bottom: 0;
}
}
}
}
}
// +Dashboard - Course &.is-visible {
// ==================== display: block;
.dashboard .my-courses { pointer-events: auto;
&:focus { }
outline: none;
}
// UI: individual course item .actions-dropdown-list {
.course { @extend %ui-no-list;
@include box-sizing(box);
@include transition(all 0.15s linear 0s); @include box-sizing(border-box);
@include clearfix();
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 { &::before {
@include clearfix(); border-color: $transparent;
border-bottom-color: $gray-l3;
border-width: 7px;
}
}
.wrapper-course-image { .actions-item {
@include float(left); @extend %t-title7;
@include margin-right(flex-gutter());
width: flex-grid(3); display: block;
margin: 0;
.cover { &.is-hidden {
@include box-sizing(border-box); display: none;
@include transition(all 0.15s linear 0s); }
@include float(left);
overflow: hidden; .action {
position: relative; @include margin-right(0);
max-height: 120px;
border-radius: ($baseline/5);
border: 1px solid $dashboard-course-cover-border;
border-bottom: 4px solid $dashboard-course-cover-border;
.course-image { &:hover, &:focus {
width: 100%; border: 1px solid transparent;
}
}
}
}
}
} }
}
// "enrolled as" status
.sts-enrollment {
@include float(left);
width: 100%; .course-status {
position: relative; background: $yellow;
bottom: 15px; border: 1px solid $border-color-2;
display: inline-block; box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
text-align: center; margin-top: 17px;
.label { @include margin-right(flex-gutter());
@extend %text-sr;
}
.deco-graphic { padding: ($baseline/4);
position: absolute; width: flex-grid(8);
top: -5px;
@include right(0); @include float(left);
} @include box-sizing(border-box);
.sts-enrollment-value { p {
@extend %ui-depth1; color: $lighter-base-font-color;
@extend %copy-badge; font-style: italic;
@extend %t-demi-strong; letter-spacing: 1px;
text-align: center;
font-size: 0.6em; }
line-height: 1.5em;
border-radius: 0;
padding: 1px ($baseline/4);
color: white;
} }
}
}
.wrapper-course-details { .course-status-completed {
display: block; background: $gray-l3;
color: $very-light-text;
@include float(left); p {
color: $gray-d4;
width: flex-grid(9); span {
padding: 0; font-weight: bold;
} }
}
.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 { .enter-course {
@extend %t-title7; @extend %btn-pl-white-base;
color: $gray; // WCAG 2.0 AA compliant @include float(right);
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 &.archived {
&.action-facebook { @extend %btn-pl-default-base;
color: $facebook-blue; }
} }
// TYPE: twitter share // Responsive behavior
&.action-twitter { @include media-breakpoint-down(md) {
color: $twitter-blue; @include padding-left($baseline/2);
} }
} }
// UI: general actions dropdown layout // ====================
.wrapper-action-more {
display: inline-block;
position: relative;
@include float(right);
.action-more { // UI: messages
@include font-size(14); .wrapper-messages-primary {
@include clearfix();
box-shadow: none; .messages-list {
background: $white; margin: 0;
background-image: none; padding: 0;
color: $gray; background-color: theme-color("lightest");
line-height: 16px;
text-shadow: none;
} }
.actions-dropdown { .message {
@extend %ui-no-list;
@extend %ui-depth1; @extend %ui-depth1;
border-radius: 3px;
display: none; display: none;
position: absolute; padding: ($baseline/2) $baseline;
top: ($baseline*2); border-top: 1px solid $gray-l4;
color: $base-font-color; // Overrides the normal white color in this one case
@include right(19px);
pointer-events: none; // STATE: shown
min-width: ($baseline*7); &.is-shown {
@include clearfix();
&.is-visible {
display: block; display: block;
pointer-events: auto;
} }
.actions-dropdown-list { a {
@extend %ui-no-list; font-family: $font-family-sans-serif;
}
@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); strong {
} font-weight: 700;
&::before { a {
border-color: $transparent; font-weight: 700;
border-bottom-color: $gray-l3;
border-width: 7px;
} }
} }
.actions-item { .actions {
@extend %t-title7; @include clearfix();
display: block; list-style: none;
margin: 0; margin: 0;
padding: 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); .message-title,
width: flex-grid(8); .message-copy .title {
@extend %t-title6;
@include float(left); @extend %t-weight4;
@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 { line-height: 1em;
font-weight: bold; margin-bottom: ($baseline/4);
} }
}
}
.enter-course { .message-copy,
@extend %btn-pl-white-base; .message-copy .copy {
@extend %t-copy-sub1;
@include float(right); margin: 2px 0 0 0;
}
&.archived { // CASE: expandable
@extend %btn-pl-default-base; &.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 // STATE: hover
.wrapper-messages-primary { &:hover {
@include clearfix(); cursor: pointer;
.messages-list { .message-title .value, .message-copy, .ui-toggle-expansion {
margin: 0; color: $link-color;
padding: 0; }
} }
}
.message { .wrapper-extended {
@extend %ui-depth1; @include transition(opacity $tmg-f2 ease-in-out 0);
border-radius: 3px; display: none;
display: none; opacity: 0;
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 // STATE: is expanded
&.is-shown { &.is-expanded {
@include clearfix(); .ui-toggle-expansion {
@include rtl {
@include transform(rotate(-90deg));
}
display: block; @include ltr {
} @include transform(rotate(90deg));
}
a { @include transform-origin(50% 50%);
font-family: $sans-serif; }
}
strong { .wrapper-extended {
font-weight: 700; display: block;
opacity: 1;
}
}
a { // TYPE: upsell
font-weight: 700; &.message-upsell {
} .wrapper-tip {
} @include clearfix();
.actions { .message-title {
@include clearfix(); @include float(left);
}
list-style: none; .ui-toggle-expansion {
margin: 0; @include transition(all $tmg-f2 ease-in-out 0s);
padding: 0; @include font-size(18);
}
.message-title, display: inline-block;
.message-copy .title { vertical-align: middle;
@extend %t-title6;
@extend %t-weight4;
line-height: 1em; @include margin-right($baseline/4);
margin-bottom: ($baseline/4); }
}
.message-copy, .message-copy {
.message-copy .copy { @include float(right);
@extend %t-copy-sub1; }
}
margin: 2px 0 0 0; .wrapper-extended {
} padding: ($baseline/4) 0;
// CASE: expandable .message-copy {
&.is-expandable { display: inline-block;
.wrapper-tip {
.message-title, .message-copy {
margin-bottom: 0;
display: inline-block;
}
.message-title .value, .message-copy { .message-copy-bold {
@include transition(color $tmg-f2 ease-in-out 0s); font-weight: 600;
} }
}
}
// STATE: hover .action-upgrade-container {
&:hover { @include float(right);
cursor: pointer;
.message-title .value, .message-copy, .ui-toggle-expansion { display: inline-block;
color: $link-color; margin-top: ($baseline/2);
} }
}
}
.wrapper-extended { .action-upgrade {
@include transition(opacity $tmg-f2 ease-in-out 0); @extend %btn-primary-green;
display: none; @include clearfix();
opacity: 0;
}
}
// STATE: is expanded position: relative;
&.is-expanded {
.ui-toggle-expansion {
@include rtl {
@include transform(rotate(-90deg));
}
@include ltr { @include left($baseline/2);
@include transform(rotate(90deg)); @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: inline;
display: block;
opacity: 1;
}
}
// TYPE: upsell @include margin-right($baseline*0.4);
&.message-upsell {
.wrapper-tip {
@include clearfix();
.message-title { margin-top: ($baseline/4);
@include float(left); 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 { .deco-graphic {
@include transition(all $tmg-f2 ease-in-out 0s); position: absolute;
@include font-size(18); top: -($baseline/4);
display: inline-block; @include left(-($baseline*0.75));
vertical-align: middle;
@include margin-right($baseline/4); width: ($baseline*2);
} }
.message-copy { span {
@include float(right); color: $white; // nasty but needed override for poor <span> styling
} }
}
.wrapper-extended { .copy, .copy-sub {
padding: ($baseline/4) 0; display: inline-block;
vertical-align: middle;
}
.message-copy { .copy {
width: flex-grid(9, 12); @extend %t-action3;
display: inline-block; @extend %t-weight4;
.message-copy-bold { @include margin-right($baseline);
font-weight: 600; }
.copy-sub {
@extend %t-action4;
opacity: 0.875;
}
} }
} }
}
.action-upgrade-container {
@include float(right);
display: inline-block; // TYPE: status
margin-top: ($baseline/2); &.message-status {
} border-color: $gray-l4;
.action-upgrade { .wrapper-message-primary {
@extend %btn-primary-green; @include clearfix();
}
@include clearfix(); .message-copy {
@extend %t-copy-sub1;
position: relative; margin: 0;
}
@include left($baseline/2); .credit-action {
@include padding(($baseline * 0.4), 0, ($baseline * 0.4), ($baseline * 0.75)); .credit-btn {
@extend %btn-pl-yellow-base;
.action-upgrade-icon { @include float(right);
@include float(left); @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); .btn {
background: url('#{$static-path}/images/icon-sm-verified.png') no-repeat; display: inline-block;
background-position: -($baseline*0.3); }
background-color: white;
width: ($baseline*0.8);
height: ($baseline*0.7);
}
.deco-graphic { .btn {
position: absolute; @include box-sizing(border-box);
top: -($baseline/4); @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 { &:hover, &:focus {
color: $white; // nasty but needed override for poor <span> styling @include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%));
}
.copy, .copy-sub { background: #eee;
display: inline-block; }
vertical-align: middle; }
} }
.copy { .btn {
@extend %t-action3; @include float(left);
@extend %t-weight4;
@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 { .exam-registration-number {
@extend %t-action4; font-family: $font-family-sans-serif;
font-size: 18px;
opacity: 0.875; a {
} font-family: $font-family-sans-serif;
} }
} }
// TYPE: status &.exam-register {
&.message-status { .message-copy {
border-color: $gray-l4; margin-top: ($baseline/4);
width: 55%;
}
}
.wrapper-message-primary { &.exam-schedule {
@include clearfix(); .exam-button {
} margin-top: ($baseline/4);
}
}
.message-copy { .exam-button {
@extend %t-copy-sub1; @include button(simple, $pink);
@include float(right);
margin: 0; margin-top: 0;
} }
.credit-action { .contact-button {
.credit-btn { @include button(simple, $pink);
@extend %btn-pl-yellow-base; }
@include float(right); .button {
@include margin-right(5px); display: inline-block;
margin-top: ($baseline/2);
padding: 9px 18px 10px;
font-size: 13px;
font-weight: bold;
letter-spacing: 0;
background-image: none ; &:hover, &:focus {
text-shadow: none; text-decoration: none;
box-shadow: none; }
text-transform: none; }
}
}
.actions {
.action {
@include float(left);
@include margin(0, 15px, 0, 0);
.btn { &.course-status-certrendering {
display: inline-block; .btn {
margin-top: 2px;
}
} }
.btn { &.course-status-certavailable {
@include box-sizing(border-box); .message-copy {
@include float(left); width: flex-grid(6, 12);
position: relative;
border-radius: 3px; @include float(left);
font: normal 0.8rem/1.2rem $sans-serif; }
letter-spacing: 1px;
padding: 6px 12px;
text-align: center;
&.disabled { .actions-primary {
cursor: default !important; @include float(right);
&:hover, &:focus { .action {
@include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%)); @include margin(0, 0, ($baseline/2), ($baseline*.75));
background: #eee; float: none;
} text-align: center;
}
}
.btn { &:last-child {
@include float(left); margin-bottom: 0;
}
font: normal 0.8rem/1.2rem $sans-serif; .btn {
letter-spacing: 1px; float: none;
padding: 6px 12px; }
text-align: center; }
}
}
}
.exam-registration-number { .action-certificate .btn {
font-family: $sans-serif; @extend %btn-inherited-primary;
font-size: 18px;
a { @include box-sizing(border-box);
font-family: $sans-serif;
}
}
&.exam-register { float: none;
.message-copy { border-radius: 3px;
margin-top: ($baseline/4); display: block;
width: 55%;
}
}
&.exam-schedule { @include padding(7px, ($baseline*.75), 7px, ($baseline*.75));
.exam-button {
margin-top: ($baseline/4);
}
}
.exam-button { text-align: center;
@include button(simple, $pink);
@include float(right);
margin-top: 0; a:link, a:visited {
} color: #fff;
}
}
.contact-button { .action-share .btn {
@include button(simple, $pink); display: inline;
} letter-spacing: 0;
}
}
}
.button { .actions-secondary {
display: inline-block; margin-top: ($baseline/2);
margin-top: ($baseline/2); border-top: 1px solid $gray-l4;
padding: 9px 18px 10px; padding-top: ($baseline/2);
font-size: 13px;
font-weight: bold;
letter-spacing: 0;
&:hover, &:focus { .action-share {
text-decoration: none; @include float(right);
}
}
margin: 0;
}
}
&.course-status-certrendering { .certificate-explanation {
.btn { @extend %t-copy-sub1;
margin-top: 2px;
}
}
&.course-status-certavailable { margin-top: ($baseline/2);
.message-copy { border-top: 1px solid $gray-l4;
width: flex-grid(6, 12); padding-top: ($baseline/2);
position: relative; }
@include float(left); .verification-reminder {
} width: flex-grid(8, 12);
.actions-primary { @include float(left);
@include float(right);
.action { position: relative;
@include margin(0, 0, ($baseline/2), ($baseline*.75)); }
float: none; .verification-cta {
text-align: center; width: flex-grid(4, 12);
&:last-child { @include float(left);
margin-bottom: 0;
} position: relative;
.btn { .btn {
float: none; @extend %btn-pl-green-base;
@include float(right);
} }
} }
}
.action-certificate .btn { &.message-related-programs {
@extend %btn-inherited-primary; background: none;
border: none;
margin-top: ($baseline/4);
padding-bottom: 0;
@include box-sizing(border-box); .related-programs-preface {
@include float(left);
float: none; font-weight: bold;
border-radius: 3px; }
display: block;
@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 { display: inline;
color: #fff; 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 { // Remove separator from last list item.
display: inline; li:last-child {
letter-spacing: 0; border: 0;
} }
} }
}
.actions-secondary {
margin-top: ($baseline/2);
border-top: 1px solid $gray-l4;
padding-top: ($baseline/2);
.action-share { // TYPE: pre-requisites
@include float(right); .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); @include media-breakpoint-down(md) {
border-top: 1px solid $gray-l4; @include padding($baseline/2, $baseline, $baseline/2, $baseline/2);
padding-top: ($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 { // course enrollment status message
width: flex-grid(4, 12); .sts-enrollment {
.label {
@include float(left); @extend %text-sr;
}
position: relative;
.btn {
@extend %btn-pl-green-base;
@include float(right); // status message
.sts-enrollment-value {
background: $professional-color-lvl3;
} }
} }
} }
&.message-related-programs { // CASE: "enrolled as" status - verified
background: none; &.verified {
border: none;
margin-top: ($baseline/4);
padding-bottom: 0;
.related-programs-preface {
@include float(left);
font-weight: bold; // changes to cover
.wrapper-course-image .cover {
border-color: $verified-color-lvl1;
padding: ($baseline/10);
} }
ul { // course enrollment status message
display: inline; .sts-enrollment {
padding: 0; .label {
margin: 0; @extend %text-sr;
} }
li { .deco-graphic {
@include float(left); @extend %ui-depth3;
display: inline; width: 40px;
padding: 0 0.5em; position: absolute;
border-right: 1px solid; top: -5px;
.category-icon { @include right(0);
@include float(left); }
@include margin-right($baseline/4);
margin-top: ($baseline/10); // status message
background-color: transparent; .sts-enrollment-value {
background-size: 100%; background: $verified-color-lvl1;
width: ($baseline*0.7);
height: ($baseline*0.7);
} }
} }
}
// 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. // status message
li:last-child { .sts-enrollment-value {
border: 0; background: $honorcode-color-lvl1;
} }
} }
// TYPE: pre-requisites // CASE: "enrolled as" status - auditing
.prerequisites { &.audit {
@include clearfix;
// changes to cover
.wrapper-course-image .cover {
border-color: $audit-color-lvl2;
padding: ($baseline/10);
}
.tip { // status message
font-family: $sans-serif; .sts-enrollment-value {
font-size: 1em; background: $audit-color-lvl1;
color: $lighter-base-font-color;
margin-top: ($baseline/2);
} }
} }
} }
} }
// ==================== // Responsive behavior
@include media-breakpoint-down(md) {
padding: $baseline;
}
}
// CASE: "enrolled as" status - professional ed // Secondary functionality
&.professional { .side-container {
@include padding($baseline*2, $baseline*2, $baseline, $baseline);
// changes to cover max-width: $baseline*20;
.wrapper-course-image .cover { flex-grow: 1;
border-color: $professional-color-lvl3; order: 2;
padding: ($baseline/10);
}
// course enrollment status message .wrapper-find-courses {
.sts-enrollment { .course-advertise {
.label { @include clearfix();
@extend %text-sr;
} box-sizing: border-box;
padding: $baseline;
border: 1px solid $border-color-l3;
// status message .advertise-message {
.sts-enrollment-value { @include font-size(12);
background: $professional-color-lvl3;
color: $gray-d4;
margin-bottom: $baseline;
} }
}
}
// CASE: "enrolled as" status - verified .ad-link {
&.verified { @include text-align(center);
// changes to cover .btn-neutral {
.wrapper-course-image .cover { padding-bottom: 12px;
border-color: $verified-color-lvl1; padding-top: 12px;
padding: ($baseline/10); }
}
// course enrollment status message a {
.sts-enrollment { @include font-size(16);
.label { @include line-height(17);
@extend %text-sr;
}
.deco-graphic { padding: $baseline * 0.5;
@extend %ui-depth3; border: 1px solid theme-color('primary');
color: theme-color('primary');
text-decoration: none;
display: block;
width: 40px; &:hover,
position: absolute; &:focus,
top: -5px; &:active {
color: $white;
background-color: theme-color('primary');
}
@include right(0); span {
} @include margin-left($baseline*0.25);
}
// status message .icon {
.sts-enrollment-value { @include margin-right($baseline*0.25);
background: $verified-color-lvl1; }
}
} }
} }
} }
// CASE: "enrolled as" status - honor code // Responsive behavior
&.honor { @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 // CASE: empty dashboard
.wrapper-course-image .cover { .empty-dashboard-message {
border-color: $honorcode-color-lvl2; border: 3px solid $gray-l4;
padding: ($baseline/10); background: $gray-l6;
} padding: ($baseline*2) 0;
text-align: center;
// status message p {
.sts-enrollment-value { @include font-size(24);
background: $honorcode-color-lvl1;
} color: $lighter-base-font-color;
} margin-bottom: $baseline;
text-shadow: 0 1px rgba(255,255,255, 0.6);
}
// CASE: "enrolled as" status - auditing a {
&.audit { background-color: theme-color('primary');
border: 1px solid theme-color('primary');
box-shadow: 0 1px 8px 0 $shadow-l1;
// changes to cover @include box-sizing(border-box);
.wrapper-course-image .cover {
border-color: $audit-color-lvl2;
padding: ($baseline/10);
}
// status message color: $white;
.sts-enrollment-value { font-family: $font-family-sans-serif;
background: $audit-color-lvl1; 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 { ...@@ -1417,7 +1277,7 @@ p.course-block {
@include float(left); @include float(left);
display: block; display: block;
font: normal 15px/1.6rem $sans-serif; font: normal 15px/1.6rem $font-family-sans-serif;
letter-spacing: 0; letter-spacing: 0;
padding: 6px 32px 7px; padding: 6px 32px 7px;
text-align: center; text-align: center;
...@@ -1431,7 +1291,7 @@ p.course-block { ...@@ -1431,7 +1291,7 @@ p.course-block {
&.archived { &.archived {
@include button(simple, $button-archive-color); @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; padding: 6px 32px 7px;
&:hover, &:focus { &:hover, &:focus {
...@@ -1464,7 +1324,7 @@ a.fade-cover { ...@@ -1464,7 +1324,7 @@ a.fade-cover {
.msg { .msg {
@include clearfix(); @include clearfix();
font-family: $sans-serif; font-family: $font-family-sans-serif;
padding-bottom: $baseline; padding-bottom: $baseline;
border-bottom: thin solid $gray; border-bottom: thin solid $gray;
......
lms/static/sass/search/_search.scss
...@@ -81,8 +81,6 @@ ...@@ -81,8 +81,6 @@
} }
.search-results-item { .search-results-item {
@include padding-right(140px);
position: relative; position: relative;
border-bottom: 1px solid $gray-l4; border-bottom: 1px solid $gray-l4;
padding: $baseline ($baseline/2); padding: $baseline ($baseline/2);
...@@ -119,12 +117,10 @@ ...@@ -119,12 +117,10 @@
} }
.result-link { .result-link {
@include right($baseline/2); @include float(right);
@include padding-left($baseline/4);
position: absolute;
top: $baseline;
line-height: 1.6em; line-height: 1.6em;
text-transform: uppercase;
} }
.search-results-ellipsis { .search-results-ellipsis {
...@@ -155,12 +151,8 @@ ...@@ -155,12 +151,8 @@
.dashboard-search-bar { .dashboard-search-bar {
@include float(right); margin: 0 0 $baseline;
@include margin-left(flex-gutter()); display: block;
margin-bottom: $baseline;
padding: 0;
width: flex-grid(3);
label { label {
@extend %t-regular; @extend %t-regular;
...@@ -181,12 +173,8 @@ ...@@ -181,12 +173,8 @@
} }
.dashboard-search-results { .dashboard-search-results {
@include float(left); margin: 0 0 $baseline;
margin: 0;
padding: 0; padding: 0;
width: flex-grid(9);
min-height: 300px;
.search-info { .search-info {
padding-bottom: lh(1.75); padding-bottom: lh(1.75);
......
lms/templates/dashboard.html
...@@ -102,115 +102,116 @@ from openedx.core.djangolib.markup import HTML, Text ...@@ -102,115 +102,116 @@ from openedx.core.djangolib.markup import HTML, Text
</div> </div>
<main id="main" aria-label="Content" tabindex="-1"> <main id="main" aria-label="Content" tabindex="-1">
<div class="container dashboard" id="dashboard-main"> <div class="dashboard" id="dashboard-main">
<div class="my-courses" id="my-courses">
<%include file="learner_dashboard/_dashboard_navigation_courses.html"/>
% if len(course_enrollments) > 0: <div class="main-container">
<ul class="listing-courses"> <div class="my-courses" id="my-courses">
<% <%include file="learner_dashboard/_dashboard_navigation_courses.html"/>
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
</ul> % if len(course_enrollments) > 0:
% else: <ul class="listing-courses">
<div class="empty-dashboard-message"> <%
<p>${_("You are not enrolled in any courses yet.")}</p> 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'): </ul>
<a href="${marketing_link('COURSES')}"> % else:
${_("Explore courses")} <div class="empty-dashboard-message">
</a> <p>${_("You are not enrolled in any courses yet.")}</p>
%endif
</div>
% endif
% if staff_access and len(errored_courses) > 0: % if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
<div id="course-errors"> <a href="${marketing_link('COURSES')}">
<h2>${_("Course-loading errors")}</h2> ${_("Explore courses")}
</a>
% for course_dir, errors in errored_courses.items(): %endif
<h3>${course_dir}</h3>
<ul>
% for (msg, err) in errors:
<li>${msg}
<ul><li><pre>${err}</pre></li></ul>
</li>
% endfor
</ul>
% endfor
</div> </div>
% endif % endif
</div>
%if sidebar_account_activation_message: % if staff_access and len(errored_courses) > 0:
<div class="sidebar-notification"> <div id="course-errors">
${sidebar_account_activation_message | n, decode.utf8} <h2>${_("Course-loading errors")}</h2>
</div>
%endif
% if settings.FEATURES.get('ENABLE_DASHBOARD_SEARCH'): % for course_dir, errors in errored_courses.items():
<div id="dashboard-search-bar" class="search-bar dashboard-search-bar" role="search" aria-label="Dashboard"> <h3>${course_dir}</h3>
<form class="search-form"> <ul>
<label for="dashboard-search-input">${_('Search Your Courses')}</label> % for (msg, err) in errors:
<div class="search-field-wrapper"> <li>${msg}
<input id="dashboard-search-input" type="text" class="search-field"/> <ul><li><pre>${err}</pre></li></ul>
<button type="submit" class="search-button" title="${_('Search')}"> </li>
<span class="icon fa fa-search" aria-hidden="true"></span> % endfor
</button> </ul>
<button type="button" class="cancel-button" title="${_('Clear search')}"> % endfor
<span class="icon fa fa-remove" aria-hidden="true"></span>
</button>
</div> </div>
</form> % endif
</div> </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'): % if settings.FEATURES.get('ENABLE_DASHBOARD_SEARCH'):
<div id="dashboard-search-results" class="search-results dashboard-search-results"></div> <div id="dashboard-search-bar" class="search-bar dashboard-search-bar" role="search" aria-label="Dashboard">
% endif <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: % if display_sidebar_on_dashboard:
<div class="profile-sidebar" id="profile-sidebar" role="region" aria-label="Account Status Info"> <div class="profile-sidebar" id="profile-sidebar" role="region" aria-label="Account Status Info">
<header class="profile"> <header class="profile">
<h2 class="account-status-title sr">${_("Account Status Info")}: </h2> <h2 class="account-status-title sr">${_("Account Status Info")}: </h2>
</header> </header>
<div class="user-info"> <div class="user-info">
<ul> <ul>
% if len(order_history_list): % if len(order_history_list):
<li class="order-history"> <li class="order-history">
<span class="title">${_("Order History")}</span> <span class="title">${_("Order History")}</span>
% for order_history_item in order_history_list: % 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> <span><a href="${order_history_item['receipt_url']}" target="_blank" class="edit-name">${order_history_item['order_date']}</a></span>
% endfor % endfor
</li> </li>
% endif % 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>
</div> % endif
% endif </div>
</div> </div>
</main> </main>
......
openedx/features/course_search/static/course_search/js/spec/course_search_spec.js
...@@ -351,23 +351,18 @@ define([ ...@@ -351,23 +351,18 @@ define([
describe('SearchResultsView', function() { describe('SearchResultsView', function() {
function showsLoadingMessage() { function showsLoadingMessage() {
this.resultsView.showLoadingMessage(); this.resultsView.showLoadingMessage();
expect(this.resultsView.$contentElement).toBeHidden();
expect(this.resultsView.$el).toBeVisible(); expect(this.resultsView.$el).toBeVisible();
expect(this.resultsView.$el).not.toBeEmpty(); expect(this.resultsView.$el).not.toBeEmpty();
} }
function showsErrorMessage() { function showsErrorMessage() {
this.resultsView.showErrorMessage(); this.resultsView.showErrorMessage();
expect(this.resultsView.$contentElement).toBeHidden();
expect(this.resultsView.$el).toBeVisible(); expect(this.resultsView.$el).toBeVisible();
expect(this.resultsView.$el).not.toBeEmpty(); expect(this.resultsView.$el).not.toBeEmpty();
} }
function returnsToContent() { function returnsToContent() {
this.resultsView.clear(); this.resultsView.clear();
expect(this.resultsView.$contentElement).toHaveCss({
display: this.contentElementDisplayValue
});
expect(this.resultsView.$el).toBeHidden(); expect(this.resultsView.$el).toBeHidden();
expect(this.resultsView.$el).toBeEmpty(); expect(this.resultsView.$el).toBeEmpty();
} }
...@@ -484,16 +479,6 @@ define([ ...@@ -484,16 +479,6 @@ define([
it('shows a link to load more results', showsMoreResultsLink); it('shows a link to load more results', showsMoreResultsLink);
it('triggers an event for next page', triggersNextPageEvent); it('triggers an event for next page', triggersNextPageEvent);
it('shows a spinner when loading more results', showsLoadMoreSpinner); 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([ ...@@ -502,9 +487,6 @@ define([
function showsLoadingMessage() { function showsLoadingMessage() {
$('.search-field').val('search string'); $('.search-field').val('search string');
$('.search-button').trigger('click'); $('.search-button').trigger('click');
if (this.$contentElement) {
expect(this.$contentElement).toBeHidden();
}
expect(this.$searchResults).toBeVisible(); expect(this.$searchResults).toBeVisible();
expect(this.$searchResults).not.toBeEmpty(); expect(this.$searchResults).not.toBeEmpty();
} }
...@@ -556,13 +538,11 @@ define([ ...@@ -556,13 +538,11 @@ define([
$('.cancel-button').trigger('click'); $('.cancel-button').trigger('click');
AjaxHelpers.skipResetRequest(requests); AjaxHelpers.skipResetRequest(requests);
// there should be no results // there should be no results
expect(this.$contentElement).toHaveCss({display: this.contentElementDisplayValue});
expect(this.$searchResults).toBeHidden(); expect(this.$searchResults).toBeHidden();
} }
function clearsResults() { function clearsResults() {
$('.cancel-button').trigger('click'); $('.cancel-button').trigger('click');
expect(this.$contentElement).toHaveCss({display: this.contentElementDisplayValue});
expect(this.$searchResults).toBeHidden(); expect(this.$searchResults).toBeHidden();
} }
...@@ -636,7 +616,6 @@ define([ ...@@ -636,7 +616,6 @@ define([
DashboardSearchFactory(); DashboardSearchFactory();
spyOn(Backbone.history, 'navigate'); spyOn(Backbone.history, 'navigate');
this.$contentElement = $('#my-courses');
this.contentElementDisplayValue = 'block'; this.contentElementDisplayValue = 'block';
this.$searchResults = $('.search-results'); this.$searchResults = $('.search-results');
}); });
...@@ -670,9 +649,7 @@ define([ ...@@ -670,9 +649,7 @@ define([
} }
}] }]
}); });
expect($('.search-back-to-courses')).toExist(); $('.search-form .cancel-button').trigger('click');
$('.search-back-to-courses').trigger('click');
expect(this.$contentElement).toBeVisible();
expect(this.$searchResults).toBeHidden(); expect(this.$searchResults).toBeHidden();
expect(this.$searchResults).toBeEmpty(); expect(this.$searchResults).toBeEmpty();
}); });
......
openedx/features/course_search/static/course_search/js/views/dashboard_search_results_view.js
...@@ -12,12 +12,10 @@ ...@@ -12,12 +12,10 @@
) { ) {
return SearchResultsView.extend({ return SearchResultsView.extend({
el: '.search-results', el: '.search-results',
contentElement: '#my-courses, #profile-sidebar',
resultsTemplate: dashboardSearchResultsTemplate, resultsTemplate: dashboardSearchResultsTemplate,
itemTemplate: dashboardSearchItemTemplate, itemTemplate: dashboardSearchItemTemplate,
events: { events: {
'click .search-load-next': 'loadNext', 'click .search-load-next': 'loadNext',
'click .search-back-to-courses': 'backToCourses'
}, },
backToCourses: function() { backToCourses: function() {
......
openedx/features/course_search/static/course_search/templates/dashboard_search_results.underscore
<header class="search-info"> <header class="search-info">
<a class="search-back-to-courses" href="#"><%- gettext("Back to Dashboard") %></a>
<h2><%- gettext("Search Results") %></h2> <h2><%- gettext("Search Results") %></h2>
<div class="search-count"><%- totalCountMsg %></div> <div class="search-count"><%- totalCountMsg %></div>
</header> </header>
......
themes/edx.org/lms/templates/dashboard.html
...@@ -102,8 +102,8 @@ from openedx.core.djangoapps.theming import helpers as theming_helpers ...@@ -102,8 +102,8 @@ from openedx.core.djangoapps.theming import helpers as theming_helpers
</div> </div>
<section class="container dashboard" id="dashboard-main"> <section class="dashboard" id="dashboard-main">
<main id="main" aria-label="Content" tabindex="-1"> <main class="main-container" id="main" aria-label="Content" tabindex="-1">
<section class="my-courses" id="my-courses"> <section class="my-courses" id="my-courses">
<header class="wrapper-header-courses"> <header class="wrapper-header-courses">
<h2 class="header-courses">${_("My Courses")}</h2> <h2 class="header-courses">${_("My Courses")}</h2>
...@@ -159,7 +159,7 @@ from openedx.core.djangoapps.theming import helpers as theming_helpers ...@@ -159,7 +159,7 @@ from openedx.core.djangoapps.theming import helpers as theming_helpers
% endif % endif
</section> </section>
</main> </main>
<div class="side-container">
%if sidebar_account_activation_message: %if sidebar_account_activation_message:
<div class="sidebar-notification"> <div class="sidebar-notification">
${sidebar_account_activation_message | n, decode.utf8} ${sidebar_account_activation_message | n, decode.utf8}
...@@ -181,9 +181,6 @@ from openedx.core.djangoapps.theming import helpers as theming_helpers ...@@ -181,9 +181,6 @@ from openedx.core.djangoapps.theming import helpers as theming_helpers
</div> </div>
</form> </form>
</div> </div>
% endif
% if settings.FEATURES.get('ENABLE_DASHBOARD_SEARCH'):
<section id="dashboard-search-results" class="search-results dashboard-search-results"></section> <section id="dashboard-search-results" class="search-results dashboard-search-results"></section>
% endif % endif
...@@ -226,6 +223,7 @@ from openedx.core.djangoapps.theming import helpers as theming_helpers ...@@ -226,6 +223,7 @@ from openedx.core.djangoapps.theming import helpers as theming_helpers
</section> </section>
</section> </section>
% endif % endif
</div>
</section> </section>
<section id="email-settings-modal" class="modal" aria-hidden="true"> <section id="email-settings-modal" class="modal" aria-hidden="true">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment