Responsive dashboard and learner profile.
This commit is contained in:
Harry Rein
@@ -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)
|
||||
|
||||
|
||||
|
||||
@@ -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')
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -1,235 +1,1038 @@
|
||||
// lms - views - user/student dashboard
|
||||
// ====================
|
||||
|
||||
// Table of Contents
|
||||
// * +Dashboard - Sidebar
|
||||
// * +Dashboard - Course Listing
|
||||
// * +Dashboard - Course Item
|
||||
// * +Misc - Uncategorized
|
||||
// * +Dashboard - Banner
|
||||
|
||||
|
||||
// +Dashboard - Sidebar
|
||||
// +Dashboard
|
||||
// ====================
|
||||
.dashboard {
|
||||
@include clearfix();
|
||||
|
||||
padding: ($baseline*2) 0 $baseline 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
|
||||
.wrapper-find-courses {
|
||||
@include float(right);
|
||||
@include margin-left(flex-gutter());
|
||||
// Contains main course card listings
|
||||
.main-container {
|
||||
@include padding($baseline*2, $baseline, $baseline, $baseline*2);
|
||||
|
||||
width: flex-grid(3);
|
||||
flex-grow: 8;
|
||||
order: 1;
|
||||
|
||||
.course-advertise {
|
||||
@include clearfix();
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: $baseline;
|
||||
border: 1px solid $border-color-l3;
|
||||
|
||||
.advertise-message {
|
||||
@include font-size(12);
|
||||
|
||||
color: $gray-d4;
|
||||
margin-bottom: $baseline;
|
||||
.my-courses {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.ad-link {
|
||||
@include text-align(center);
|
||||
.wrapper-header-courses {
|
||||
margin-bottom: $baseline/2;
|
||||
|
||||
.btn-neutral {
|
||||
padding-bottom: 12px;
|
||||
padding-top: 12px;
|
||||
.header-courses {
|
||||
@extend %t-title5;
|
||||
|
||||
@include padding-right($baseline/2);
|
||||
}
|
||||
}
|
||||
|
||||
// UI: course list
|
||||
.listing-courses {
|
||||
@extend %ui-no-list;
|
||||
|
||||
.course-item {
|
||||
margin-bottom: $baseline;
|
||||
padding-bottom: $baseline;
|
||||
|
||||
.course-container {
|
||||
border: 1px solid theme-color("light");
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// UI: individual course item
|
||||
.course {
|
||||
@include box-sizing(box);
|
||||
@include transition(all 0.15s linear 0s);
|
||||
@include clearfix();
|
||||
|
||||
@extend %ui-depth2;
|
||||
|
||||
.details {
|
||||
@include clearfix();
|
||||
|
||||
.wrapper-course-image {
|
||||
@include float(left);
|
||||
@include margin-right(flex-gutter());
|
||||
|
||||
width: flex-grid(3);
|
||||
max-height: 150px;
|
||||
overflow: hidden;
|
||||
|
||||
.cover {
|
||||
@include box-sizing(border-box);
|
||||
@include transition(all 0.15s linear 0s);
|
||||
@include float(left);
|
||||
|
||||
position: relative;
|
||||
|
||||
.course-image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// "enrolled as" status
|
||||
.sts-enrollment {
|
||||
@include float(left);
|
||||
|
||||
width: 100%;
|
||||
position: relative;
|
||||
bottom: 15px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
||||
.label {
|
||||
@extend %text-sr;
|
||||
}
|
||||
|
||||
.deco-graphic {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
|
||||
@include right(0);
|
||||
}
|
||||
|
||||
.sts-enrollment-value {
|
||||
@extend %ui-depth1;
|
||||
@extend %copy-badge;
|
||||
@extend %t-demi-strong;
|
||||
|
||||
font-size: 0.6em;
|
||||
line-height: 1.5em;
|
||||
border-radius: 0;
|
||||
padding: 1px ($baseline/4);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive behavior
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-course-details {
|
||||
display: block;
|
||||
|
||||
@include float(left);
|
||||
|
||||
width: flex-grid(9);
|
||||
padding: 0;
|
||||
margin: $baseline/2 0;
|
||||
|
||||
.course-title {
|
||||
a, span {
|
||||
@extend %t-title3;
|
||||
@extend %t-light;
|
||||
|
||||
display: inline-block;
|
||||
margin-bottom: ($baseline/2);
|
||||
text-decoration: none;
|
||||
|
||||
// Responsive behavior
|
||||
@include media-breakpoint-down(sm) {
|
||||
@extend %t-title4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.course-info {
|
||||
display: block;
|
||||
|
||||
@include float(left);
|
||||
|
||||
padding: 0;
|
||||
margin-top: ($baseline/2);
|
||||
|
||||
[class*="info-"] {
|
||||
color: $gray-d1;
|
||||
|
||||
@extend %t-title7;
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.info-date-block {
|
||||
@extend %t-title7;
|
||||
|
||||
color: $gray; // WCAG 2.0 AA compliant
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-course-actions {
|
||||
@include margin-right($baseline);
|
||||
|
||||
margin-top: $baseline/2;
|
||||
}
|
||||
|
||||
|
||||
// Responsive behavior
|
||||
@include media-breakpoint-down(sm) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.course-actions {
|
||||
|
||||
// UI: course item actions
|
||||
.action {
|
||||
@include box-sizing(border-box);
|
||||
@include margin-right($baseline/2);
|
||||
@include float(right);
|
||||
|
||||
min-width: ($baseline*2);
|
||||
color: $gray-d3;
|
||||
border-radius: 3px;
|
||||
padding: 12px;
|
||||
border: 1px solid $white;
|
||||
text-align: center;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: $gray-d3;
|
||||
border: 1px solid $gray-l4;
|
||||
}
|
||||
|
||||
// STATE: is-disabled
|
||||
&.is-disabled {
|
||||
color: $gray-l4;
|
||||
}
|
||||
|
||||
// TYPE: facebook share
|
||||
&.action-facebook {
|
||||
color: $facebook-blue;
|
||||
}
|
||||
|
||||
// TYPE: twitter share
|
||||
&.action-twitter {
|
||||
color: $twitter-blue;
|
||||
}
|
||||
}
|
||||
|
||||
// UI: general actions dropdown layout
|
||||
.wrapper-action-more {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
@include float(right);
|
||||
|
||||
.action-more {
|
||||
@include font-size(14);
|
||||
|
||||
box-shadow: none;
|
||||
background: $white;
|
||||
background-image: none;
|
||||
color: $gray;
|
||||
line-height: 16px;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.actions-dropdown {
|
||||
@extend %ui-no-list;
|
||||
@extend %ui-depth1;
|
||||
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: ($baseline*2);
|
||||
|
||||
@include right(19px);
|
||||
|
||||
pointer-events: none;
|
||||
min-width: ($baseline*7);
|
||||
|
||||
&.is-visible {
|
||||
display: block;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.actions-dropdown-list {
|
||||
@extend %ui-no-list;
|
||||
|
||||
@include box-sizing(border-box);
|
||||
|
||||
display: table;
|
||||
box-shadow: 0 1px 1px $shadow-l1;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
margin: ($baseline/4) 0 0 0;
|
||||
border: 1px solid $gray-l3;
|
||||
padding: ($baseline/4) ($baseline/2);
|
||||
background: $white;
|
||||
|
||||
// ui triangle/nub
|
||||
&::after,
|
||||
&::before {
|
||||
bottom: 100%;
|
||||
|
||||
@include right(6px);
|
||||
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-color: $transparent;
|
||||
border-bottom-color: $white;
|
||||
border-width: 6px;
|
||||
|
||||
@include margin-right(1px);
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-color: $transparent;
|
||||
border-bottom-color: $gray-l3;
|
||||
border-width: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.actions-item {
|
||||
@extend %t-title7;
|
||||
|
||||
display: block;
|
||||
margin: 0;
|
||||
|
||||
&.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.action {
|
||||
@include margin-right(0);
|
||||
|
||||
&:hover, &:focus {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.course-status {
|
||||
background: $yellow;
|
||||
border: 1px solid $border-color-2;
|
||||
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
|
||||
margin-top: 17px;
|
||||
|
||||
@include margin-right(flex-gutter());
|
||||
|
||||
padding: ($baseline/4);
|
||||
width: flex-grid(8);
|
||||
|
||||
@include float(left);
|
||||
@include box-sizing(border-box);
|
||||
|
||||
p {
|
||||
color: $lighter-base-font-color;
|
||||
font-style: italic;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.course-status-completed {
|
||||
background: $gray-l3;
|
||||
color: $very-light-text;
|
||||
|
||||
p {
|
||||
color: $gray-d4;
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.enter-course {
|
||||
@extend %btn-pl-white-base;
|
||||
|
||||
@include float(right);
|
||||
|
||||
&.archived {
|
||||
@extend %btn-pl-default-base;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive behavior
|
||||
@include media-breakpoint-down(md) {
|
||||
@include padding-left($baseline/2);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@include font-size(16);
|
||||
@include line-height(17);
|
||||
// ====================
|
||||
|
||||
padding: $baseline * 0.5;
|
||||
border: 1px solid $blue;
|
||||
color: $blue;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
// UI: messages
|
||||
.wrapper-messages-primary {
|
||||
@include clearfix();
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $white;
|
||||
background-color: $blue;
|
||||
.messages-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: theme-color("lightest");
|
||||
}
|
||||
|
||||
span {
|
||||
@include margin-left($baseline*0.25);
|
||||
.message {
|
||||
@extend %ui-depth1;
|
||||
|
||||
border-radius: 3px;
|
||||
display: none;
|
||||
padding: ($baseline/2) $baseline;
|
||||
border-top: 1px solid $gray-l4;
|
||||
color: $base-font-color; // Overrides the normal white color in this one case
|
||||
|
||||
// STATE: shown
|
||||
&.is-shown {
|
||||
@include clearfix();
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: $font-family-sans-serif;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
|
||||
a {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
@include clearfix();
|
||||
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.message-title,
|
||||
.message-copy .title {
|
||||
@extend %t-title6;
|
||||
@extend %t-weight4;
|
||||
|
||||
line-height: 1em;
|
||||
margin-bottom: ($baseline/4);
|
||||
}
|
||||
|
||||
.message-copy,
|
||||
.message-copy .copy {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
margin: 2px 0 0 0;
|
||||
}
|
||||
|
||||
// CASE: expandable
|
||||
&.is-expandable {
|
||||
.wrapper-tip {
|
||||
.message-title, .message-copy {
|
||||
margin-bottom: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.message-title .value, .message-copy {
|
||||
@include transition(color $tmg-f2 ease-in-out 0s);
|
||||
}
|
||||
|
||||
// STATE: hover
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
.message-title .value, .message-copy, .ui-toggle-expansion {
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-extended {
|
||||
@include transition(opacity $tmg-f2 ease-in-out 0);
|
||||
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// STATE: is expanded
|
||||
&.is-expanded {
|
||||
.ui-toggle-expansion {
|
||||
@include rtl {
|
||||
@include transform(rotate(-90deg));
|
||||
}
|
||||
|
||||
@include ltr {
|
||||
@include transform(rotate(90deg));
|
||||
}
|
||||
|
||||
@include transform-origin(50% 50%);
|
||||
}
|
||||
|
||||
.wrapper-extended {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// TYPE: upsell
|
||||
&.message-upsell {
|
||||
.wrapper-tip {
|
||||
@include clearfix();
|
||||
|
||||
.message-title {
|
||||
@include float(left);
|
||||
}
|
||||
|
||||
.ui-toggle-expansion {
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
@include font-size(18);
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
@include margin-right($baseline/4);
|
||||
}
|
||||
|
||||
.message-copy {
|
||||
@include float(right);
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-extended {
|
||||
padding: ($baseline/4) 0;
|
||||
|
||||
.message-copy {
|
||||
display: inline-block;
|
||||
|
||||
.message-copy-bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-upgrade-container {
|
||||
@include float(right);
|
||||
|
||||
display: inline-block;
|
||||
margin-top: ($baseline/2);
|
||||
}
|
||||
|
||||
.action-upgrade {
|
||||
@extend %btn-primary-green;
|
||||
|
||||
@include clearfix();
|
||||
|
||||
position: relative;
|
||||
|
||||
@include left($baseline/2);
|
||||
@include padding(($baseline * 0.4), 0, ($baseline * 0.4), ($baseline * 0.75));
|
||||
|
||||
.action-upgrade-icon {
|
||||
@include float(left);
|
||||
|
||||
display: inline;
|
||||
|
||||
@include margin-right($baseline*0.4);
|
||||
|
||||
margin-top: ($baseline/4);
|
||||
background: url('#{$static-path}/images/icon-sm-verified.png') no-repeat;
|
||||
background-position: -($baseline*0.3);
|
||||
background-color: white;
|
||||
width: ($baseline*0.8);
|
||||
height: ($baseline*0.7);
|
||||
}
|
||||
|
||||
.deco-graphic {
|
||||
position: absolute;
|
||||
top: -($baseline/4);
|
||||
|
||||
@include left(-($baseline*0.75));
|
||||
|
||||
width: ($baseline*2);
|
||||
}
|
||||
|
||||
span {
|
||||
color: $white; // nasty but needed override for poor <span> styling
|
||||
}
|
||||
|
||||
.copy, .copy-sub {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.copy {
|
||||
@extend %t-action3;
|
||||
@extend %t-weight4;
|
||||
|
||||
@include margin-right($baseline);
|
||||
}
|
||||
|
||||
.copy-sub {
|
||||
@extend %t-action4;
|
||||
|
||||
opacity: 0.875;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TYPE: status
|
||||
&.message-status {
|
||||
border-color: $gray-l4;
|
||||
|
||||
.wrapper-message-primary {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.message-copy {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.credit-action {
|
||||
.credit-btn {
|
||||
@extend %btn-pl-yellow-base;
|
||||
|
||||
@include float(right);
|
||||
@include margin-right(5px);
|
||||
|
||||
background-image: none ;
|
||||
text-shadow: none;
|
||||
box-shadow: none;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
.action {
|
||||
@include float(left);
|
||||
@include margin(0, 15px, 0, 0);
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@include box-sizing(border-box);
|
||||
@include float(left);
|
||||
|
||||
border-radius: 3px;
|
||||
font: normal 0.8rem/1.2rem $font-family-sans-serif;
|
||||
letter-spacing: 1px;
|
||||
padding: 6px 12px;
|
||||
text-align: center;
|
||||
|
||||
&.disabled {
|
||||
cursor: default !important;
|
||||
|
||||
&:hover, &:focus {
|
||||
@include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%));
|
||||
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
@include float(left);
|
||||
|
||||
font: normal 0.8rem/1.2rem $font-family-sans-serif;
|
||||
letter-spacing: 1px;
|
||||
padding: 6px 12px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.exam-registration-number {
|
||||
font-family: $font-family-sans-serif;
|
||||
font-size: 18px;
|
||||
|
||||
a {
|
||||
font-family: $font-family-sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
&.exam-register {
|
||||
.message-copy {
|
||||
margin-top: ($baseline/4);
|
||||
width: 55%;
|
||||
}
|
||||
}
|
||||
|
||||
&.exam-schedule {
|
||||
.exam-button {
|
||||
margin-top: ($baseline/4);
|
||||
}
|
||||
}
|
||||
|
||||
.exam-button {
|
||||
@include button(simple, $pink);
|
||||
@include float(right);
|
||||
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.contact-button {
|
||||
@include button(simple, $pink);
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
margin-top: ($baseline/2);
|
||||
padding: 9px 18px 10px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0;
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.course-status-certrendering {
|
||||
.btn {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.course-status-certavailable {
|
||||
.message-copy {
|
||||
width: flex-grid(6, 12);
|
||||
position: relative;
|
||||
|
||||
@include float(left);
|
||||
}
|
||||
|
||||
.actions-primary {
|
||||
@include float(right);
|
||||
|
||||
.action {
|
||||
@include margin(0, 0, ($baseline/2), ($baseline*.75));
|
||||
|
||||
float: none;
|
||||
text-align: center;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.action-certificate .btn {
|
||||
@extend %btn-inherited-primary;
|
||||
|
||||
@include box-sizing(border-box);
|
||||
|
||||
float: none;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
|
||||
@include padding(7px, ($baseline*.75), 7px, ($baseline*.75));
|
||||
|
||||
text-align: center;
|
||||
|
||||
a:link, a:visited {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.action-share .btn {
|
||||
display: inline;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions-secondary {
|
||||
margin-top: ($baseline/2);
|
||||
border-top: 1px solid $gray-l4;
|
||||
padding-top: ($baseline/2);
|
||||
|
||||
.action-share {
|
||||
@include float(right);
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.certificate-explanation {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
margin-top: ($baseline/2);
|
||||
border-top: 1px solid $gray-l4;
|
||||
padding-top: ($baseline/2);
|
||||
}
|
||||
|
||||
.verification-reminder {
|
||||
width: flex-grid(8, 12);
|
||||
|
||||
@include float(left);
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.verification-cta {
|
||||
width: flex-grid(4, 12);
|
||||
|
||||
@include float(left);
|
||||
|
||||
position: relative;
|
||||
|
||||
.btn {
|
||||
@extend %btn-pl-green-base;
|
||||
|
||||
@include float(right);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.message-related-programs {
|
||||
background: none;
|
||||
border: none;
|
||||
margin-top: ($baseline/4);
|
||||
padding-bottom: 0;
|
||||
|
||||
.related-programs-preface {
|
||||
@include float(left);
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
@include float(left);
|
||||
|
||||
display: inline;
|
||||
padding: 0 0.5em;
|
||||
border-right: 1px solid;
|
||||
|
||||
.category-icon {
|
||||
@include float(left);
|
||||
@include margin-right($baseline/4);
|
||||
|
||||
margin-top: ($baseline/10);
|
||||
background-color: transparent;
|
||||
background-size: 100%;
|
||||
width: ($baseline*0.7);
|
||||
height: ($baseline*0.7);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove separator from last list item.
|
||||
li:last-child {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// TYPE: pre-requisites
|
||||
.prerequisites {
|
||||
@include clearfix;
|
||||
|
||||
.tip {
|
||||
font-family: $font-family-sans-serif;
|
||||
font-size: 1em;
|
||||
color: $lighter-base-font-color;
|
||||
margin-top: ($baseline/2);
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
@include padding($baseline/2, $baseline, $baseline/2, $baseline/2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// CASE: "enrolled as" status - professional ed
|
||||
&.professional {
|
||||
|
||||
// changes to cover
|
||||
.wrapper-course-image .cover {
|
||||
border-color: $professional-color-lvl3;
|
||||
padding: ($baseline/10);
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include margin-right($baseline*0.25);
|
||||
// course enrollment status message
|
||||
.sts-enrollment {
|
||||
.label {
|
||||
@extend %text-sr;
|
||||
}
|
||||
|
||||
// status message
|
||||
.sts-enrollment-value {
|
||||
background: $professional-color-lvl3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: "enrolled as" status - verified
|
||||
&.verified {
|
||||
|
||||
// changes to cover
|
||||
.wrapper-course-image .cover {
|
||||
border-color: $verified-color-lvl1;
|
||||
padding: ($baseline/10);
|
||||
}
|
||||
|
||||
// course enrollment status message
|
||||
.sts-enrollment {
|
||||
.label {
|
||||
@extend %text-sr;
|
||||
}
|
||||
|
||||
.deco-graphic {
|
||||
@extend %ui-depth3;
|
||||
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
|
||||
@include right(0);
|
||||
}
|
||||
|
||||
// status message
|
||||
.sts-enrollment-value {
|
||||
background: $verified-color-lvl1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: "enrolled as" status - honor code
|
||||
&.honor {
|
||||
|
||||
// changes to cover
|
||||
.wrapper-course-image .cover {
|
||||
border-color: $honorcode-color-lvl2;
|
||||
padding: ($baseline/10);
|
||||
}
|
||||
|
||||
// status message
|
||||
.sts-enrollment-value {
|
||||
background: $honorcode-color-lvl1;
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: "enrolled as" status - auditing
|
||||
&.audit {
|
||||
|
||||
// changes to cover
|
||||
.wrapper-course-image .cover {
|
||||
border-color: $audit-color-lvl2;
|
||||
padding: ($baseline/10);
|
||||
}
|
||||
|
||||
// status message
|
||||
.sts-enrollment-value {
|
||||
background: $audit-color-lvl1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive behavior
|
||||
@include media-breakpoint-down(md) {
|
||||
padding: $baseline;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-sidebar {
|
||||
background: transparent;
|
||||
// Secondary functionality
|
||||
.side-container {
|
||||
@include padding($baseline*2, $baseline*2, $baseline, $baseline);
|
||||
|
||||
@include float(right);
|
||||
@include margin-left(flex-gutter());
|
||||
max-width: $baseline*20;
|
||||
flex-grow: 1;
|
||||
order: 2;
|
||||
|
||||
width: flex-grid(3);
|
||||
margin-top: ($baseline*2);
|
||||
|
||||
.user-info {
|
||||
@include clearfix();
|
||||
|
||||
> ul {
|
||||
@include box-sizing(border-box);
|
||||
@include clearfix();
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: flex-grid(12);
|
||||
|
||||
li {
|
||||
@include clearfix();
|
||||
|
||||
border-bottom: 1px dotted $border-color-2;
|
||||
list-style: none;
|
||||
margin-bottom: ($baseline*0.75);
|
||||
padding-bottom: 17px;
|
||||
|
||||
&:hover, &:focus {
|
||||
.title .icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-bottom: ($baseline/4);
|
||||
}
|
||||
|
||||
span.title {
|
||||
@extend %t-title6;
|
||||
@extend %t-strong;
|
||||
|
||||
a {
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
span.copy {
|
||||
@extend %t-copy-sub1;
|
||||
}
|
||||
|
||||
span.data {
|
||||
color: $base-font-color;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
.third-party-auth {
|
||||
color: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
li.order-history {
|
||||
span a {
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.heads-up {
|
||||
.title {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.copy {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reverify-status-list {
|
||||
padding: 0 0 0 ($baseline/2);
|
||||
margin: ($baseline/4) 0;
|
||||
|
||||
.status-item {
|
||||
@extend %t-copy-sub2;
|
||||
|
||||
margin-bottom: 7px;
|
||||
border-bottom: 0;
|
||||
padding: 0;
|
||||
|
||||
.icon {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin: ($baseline/10) ($baseline/4) 0 0;
|
||||
}
|
||||
|
||||
&.is-open .icon {
|
||||
color: $action-primary-bg;
|
||||
}
|
||||
|
||||
&.is-pending .icon {
|
||||
color: $warning-color;
|
||||
}
|
||||
|
||||
&.is-approved .icon {
|
||||
color: $success-color;
|
||||
}
|
||||
|
||||
&.is-denied .icon {
|
||||
color: $alert-color;
|
||||
}
|
||||
|
||||
.label {
|
||||
@extend %text-sr;
|
||||
}
|
||||
|
||||
.course-name {
|
||||
@include line-height(12);
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 80%;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// status
|
||||
.status {
|
||||
.wrapper-find-courses {
|
||||
.course-advertise {
|
||||
@include clearfix();
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: $baseline;
|
||||
border: 1px solid $border-color-l3;
|
||||
|
||||
.list--nav {
|
||||
margin: ($baseline/2) 0 0 0;
|
||||
padding: 0;
|
||||
.advertise-message {
|
||||
@include font-size(12);
|
||||
|
||||
color: $gray-d4;
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
|
||||
.nav__item {
|
||||
@extend %t-weight4;
|
||||
.ad-link {
|
||||
@include text-align(center);
|
||||
|
||||
@include font-size(13);
|
||||
.btn-neutral {
|
||||
padding-bottom: 12px;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
margin-left: 26px;
|
||||
a {
|
||||
@include font-size(16);
|
||||
@include line-height(17);
|
||||
|
||||
padding: $baseline * 0.5;
|
||||
border: 1px solid theme-color('primary');
|
||||
color: theme-color('primary');
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: $white;
|
||||
background-color: theme-color('primary');
|
||||
}
|
||||
|
||||
span {
|
||||
@include margin-left($baseline*0.25);
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include margin-right($baseline*0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive behavior
|
||||
@include media-breakpoint-down(md) {
|
||||
margin: 0 $baseline $baseline*2;
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive behavior
|
||||
@include media-breakpoint-down(md) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -249,970 +1052,27 @@
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: $blue;
|
||||
border: 1px solid $blue;
|
||||
background-color: theme-color('primary');
|
||||
border: 1px solid theme-color('primary');
|
||||
box-shadow: 0 1px 8px 0 $shadow-l1;
|
||||
|
||||
@include box-sizing(border-box);
|
||||
|
||||
color: $white;
|
||||
font-family: $sans-serif;
|
||||
font-family: $font-family-sans-serif;
|
||||
display: inline-block;
|
||||
letter-spacing: 1px;
|
||||
margin-top: ($baseline/4);
|
||||
margin-left: ($baseline/4);
|
||||
padding: 15px 20px;
|
||||
padding: $baseline*0.75 $baseline;
|
||||
|
||||
&:hover, &:focus {
|
||||
background: $blue-l2;
|
||||
background: theme-color('primary')-l2;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// +Dashboard - Course Listing
|
||||
// ====================
|
||||
.dashboard {
|
||||
.my-courses {
|
||||
@include float(left);
|
||||
|
||||
margin: 0;
|
||||
margin-bottom: $baseline * 2;
|
||||
width: flex-grid(9);
|
||||
|
||||
|
||||
.wrapper-header-courses {
|
||||
border-bottom: 4px solid $border-color-l4;
|
||||
margin-bottom: $baseline;
|
||||
|
||||
.header-courses {
|
||||
@extend %t-title5;
|
||||
|
||||
@include padding-right($baseline/2);
|
||||
}
|
||||
}
|
||||
|
||||
// UI: course list
|
||||
.listing-courses {
|
||||
@extend %ui-no-list;
|
||||
|
||||
.course-item {
|
||||
margin-bottom: $baseline;
|
||||
padding-bottom: $baseline;
|
||||
|
||||
.course-container {
|
||||
border: 2px solid $border-color-l4;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// +Dashboard - Course
|
||||
// ====================
|
||||
.dashboard .my-courses {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// UI: individual course item
|
||||
.course {
|
||||
@include box-sizing(box);
|
||||
@include transition(all 0.15s linear 0s);
|
||||
@include clearfix();
|
||||
|
||||
@extend %ui-depth2;
|
||||
|
||||
margin: ($baseline/2);
|
||||
|
||||
.details {
|
||||
@include clearfix();
|
||||
|
||||
.wrapper-course-image {
|
||||
@include float(left);
|
||||
@include margin-right(flex-gutter());
|
||||
|
||||
width: flex-grid(3);
|
||||
|
||||
.cover {
|
||||
@include box-sizing(border-box);
|
||||
@include transition(all 0.15s linear 0s);
|
||||
@include float(left);
|
||||
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
max-height: 120px;
|
||||
border-radius: ($baseline/5);
|
||||
border: 1px solid $dashboard-course-cover-border;
|
||||
border-bottom: 4px solid $dashboard-course-cover-border;
|
||||
|
||||
.course-image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// "enrolled as" status
|
||||
.sts-enrollment {
|
||||
@include float(left);
|
||||
|
||||
width: 100%;
|
||||
position: relative;
|
||||
bottom: 15px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
||||
.label {
|
||||
@extend %text-sr;
|
||||
}
|
||||
|
||||
.deco-graphic {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
|
||||
@include right(0);
|
||||
}
|
||||
|
||||
.sts-enrollment-value {
|
||||
@extend %ui-depth1;
|
||||
@extend %copy-badge;
|
||||
@extend %t-demi-strong;
|
||||
|
||||
font-size: 0.6em;
|
||||
line-height: 1.5em;
|
||||
border-radius: 0;
|
||||
padding: 1px ($baseline/4);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-course-details {
|
||||
display: block;
|
||||
|
||||
@include float(left);
|
||||
|
||||
width: flex-grid(9);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.course-title {
|
||||
a, span {
|
||||
@extend %t-title3;
|
||||
@extend %t-light;
|
||||
|
||||
display: inline-block;
|
||||
margin-bottom: ($baseline/2);
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.course-info {
|
||||
display: block;
|
||||
|
||||
@include float(left);
|
||||
|
||||
width: flex-grid(4);
|
||||
padding: 0;
|
||||
margin-top: ($baseline/2);
|
||||
|
||||
[class*="info-"] {
|
||||
color: $gray-d1;
|
||||
|
||||
@extend %t-title6;
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.info-date-block {
|
||||
@extend %t-title7;
|
||||
|
||||
color: $gray; // WCAG 2.0 AA compliant
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-course-actions {
|
||||
display: block;
|
||||
|
||||
@include float(right);
|
||||
|
||||
width: flex-grid(8);
|
||||
padding: 0;
|
||||
margin-top: ($baseline/2);
|
||||
}
|
||||
|
||||
.course-actions {
|
||||
|
||||
// UI: course item actions
|
||||
.action {
|
||||
@include box-sizing(border-box);
|
||||
@include margin-right($baseline/2);
|
||||
@include float(right);
|
||||
|
||||
min-width: ($baseline*2);
|
||||
color: $gray-d3;
|
||||
border-radius: 3px;
|
||||
padding: 12px;
|
||||
border: 1px solid $white;
|
||||
text-align: center;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: $gray-d3;
|
||||
border: 1px solid $gray-l4;
|
||||
}
|
||||
|
||||
// STATE: is-disabled
|
||||
&.is-disabled {
|
||||
color: $gray-l4;
|
||||
}
|
||||
|
||||
// TYPE: facebook share
|
||||
&.action-facebook {
|
||||
color: $facebook-blue;
|
||||
}
|
||||
|
||||
// TYPE: twitter share
|
||||
&.action-twitter {
|
||||
color: $twitter-blue;
|
||||
}
|
||||
}
|
||||
|
||||
// UI: general actions dropdown layout
|
||||
.wrapper-action-more {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
@include float(right);
|
||||
|
||||
.action-more {
|
||||
@include font-size(14);
|
||||
|
||||
box-shadow: none;
|
||||
background: $white;
|
||||
background-image: none;
|
||||
color: $gray;
|
||||
line-height: 16px;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.actions-dropdown {
|
||||
@extend %ui-no-list;
|
||||
@extend %ui-depth1;
|
||||
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: ($baseline*2);
|
||||
|
||||
@include right(19px);
|
||||
|
||||
pointer-events: none;
|
||||
min-width: ($baseline*7);
|
||||
|
||||
&.is-visible {
|
||||
display: block;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.actions-dropdown-list {
|
||||
@extend %ui-no-list;
|
||||
|
||||
@include box-sizing(border-box);
|
||||
|
||||
display: table;
|
||||
box-shadow: 0 1px 1px $shadow-l1;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
margin: ($baseline/4) 0 0 0;
|
||||
border: 1px solid $gray-l3;
|
||||
padding: ($baseline/4) ($baseline/2);
|
||||
background: $white;
|
||||
|
||||
// ui triangle/nub
|
||||
&::after,
|
||||
&::before {
|
||||
bottom: 100%;
|
||||
|
||||
@include right(6px);
|
||||
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-color: $transparent;
|
||||
border-bottom-color: $white;
|
||||
border-width: 6px;
|
||||
|
||||
@include margin-right(1px);
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-color: $transparent;
|
||||
border-bottom-color: $gray-l3;
|
||||
border-width: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.actions-item {
|
||||
@extend %t-title7;
|
||||
|
||||
display: block;
|
||||
margin: 0;
|
||||
|
||||
&.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.action {
|
||||
@include margin-right(0);
|
||||
|
||||
&:hover, &:focus {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.course-status {
|
||||
background: $yellow;
|
||||
border: 1px solid $border-color-2;
|
||||
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
|
||||
margin-top: 17px;
|
||||
|
||||
@include margin-right(flex-gutter());
|
||||
|
||||
padding: ($baseline/4);
|
||||
width: flex-grid(8);
|
||||
|
||||
@include float(left);
|
||||
@include box-sizing(border-box);
|
||||
|
||||
p {
|
||||
color: $lighter-base-font-color;
|
||||
font-style: italic;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.course-status-completed {
|
||||
background: $gray-l3;
|
||||
color: $very-light-text;
|
||||
|
||||
p {
|
||||
color: $gray-d4;
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.enter-course {
|
||||
@extend %btn-pl-white-base;
|
||||
|
||||
@include float(right);
|
||||
|
||||
&.archived {
|
||||
@extend %btn-pl-default-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// UI: messages
|
||||
.wrapper-messages-primary {
|
||||
@include clearfix();
|
||||
|
||||
.messages-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.message {
|
||||
@extend %ui-depth1;
|
||||
|
||||
border-radius: 3px;
|
||||
display: none;
|
||||
margin: $baseline 0 ($baseline/2) 0;
|
||||
padding: ($baseline/2) $baseline;
|
||||
border-top: 1px solid $gray-l4;
|
||||
color: $base-font-color; // Overrides the normal white color in this one case
|
||||
|
||||
// STATE: shown
|
||||
&.is-shown {
|
||||
@include clearfix();
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: $sans-serif;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
|
||||
a {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
@include clearfix();
|
||||
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.message-title,
|
||||
.message-copy .title {
|
||||
@extend %t-title6;
|
||||
@extend %t-weight4;
|
||||
|
||||
line-height: 1em;
|
||||
margin-bottom: ($baseline/4);
|
||||
}
|
||||
|
||||
.message-copy,
|
||||
.message-copy .copy {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
margin: 2px 0 0 0;
|
||||
}
|
||||
|
||||
// CASE: expandable
|
||||
&.is-expandable {
|
||||
.wrapper-tip {
|
||||
.message-title, .message-copy {
|
||||
margin-bottom: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.message-title .value, .message-copy {
|
||||
@include transition(color $tmg-f2 ease-in-out 0s);
|
||||
}
|
||||
|
||||
// STATE: hover
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
.message-title .value, .message-copy, .ui-toggle-expansion {
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-extended {
|
||||
@include transition(opacity $tmg-f2 ease-in-out 0);
|
||||
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// STATE: is expanded
|
||||
&.is-expanded {
|
||||
.ui-toggle-expansion {
|
||||
@include rtl {
|
||||
@include transform(rotate(-90deg));
|
||||
}
|
||||
|
||||
@include ltr {
|
||||
@include transform(rotate(90deg));
|
||||
}
|
||||
|
||||
@include transform-origin(50% 50%);
|
||||
}
|
||||
|
||||
.wrapper-extended {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// TYPE: upsell
|
||||
&.message-upsell {
|
||||
.wrapper-tip {
|
||||
@include clearfix();
|
||||
|
||||
.message-title {
|
||||
@include float(left);
|
||||
}
|
||||
|
||||
.ui-toggle-expansion {
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
@include font-size(18);
|
||||
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
@include margin-right($baseline/4);
|
||||
}
|
||||
|
||||
.message-copy {
|
||||
@include float(right);
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-extended {
|
||||
padding: ($baseline/4) 0;
|
||||
|
||||
.message-copy {
|
||||
width: flex-grid(9, 12);
|
||||
display: inline-block;
|
||||
|
||||
.message-copy-bold {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-upgrade-container {
|
||||
@include float(right);
|
||||
|
||||
display: inline-block;
|
||||
margin-top: ($baseline/2);
|
||||
}
|
||||
|
||||
.action-upgrade {
|
||||
@extend %btn-primary-green;
|
||||
|
||||
@include clearfix();
|
||||
|
||||
position: relative;
|
||||
|
||||
@include left($baseline/2);
|
||||
@include padding(($baseline * 0.4), 0, ($baseline * 0.4), ($baseline * 0.75));
|
||||
|
||||
.action-upgrade-icon {
|
||||
@include float(left);
|
||||
|
||||
display: inline;
|
||||
|
||||
@include margin-right($baseline*0.4);
|
||||
|
||||
margin-top: ($baseline/4);
|
||||
background: url('#{$static-path}/images/icon-sm-verified.png') no-repeat;
|
||||
background-position: -($baseline*0.3);
|
||||
background-color: white;
|
||||
width: ($baseline*0.8);
|
||||
height: ($baseline*0.7);
|
||||
}
|
||||
|
||||
.deco-graphic {
|
||||
position: absolute;
|
||||
top: -($baseline/4);
|
||||
|
||||
@include left(-($baseline*0.75));
|
||||
|
||||
width: ($baseline*2);
|
||||
}
|
||||
|
||||
span {
|
||||
color: $white; // nasty but needed override for poor <span> styling
|
||||
}
|
||||
|
||||
.copy, .copy-sub {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.copy {
|
||||
@extend %t-action3;
|
||||
@extend %t-weight4;
|
||||
|
||||
@include margin-right($baseline);
|
||||
}
|
||||
|
||||
.copy-sub {
|
||||
@extend %t-action4;
|
||||
|
||||
opacity: 0.875;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TYPE: status
|
||||
&.message-status {
|
||||
border-color: $gray-l4;
|
||||
|
||||
.wrapper-message-primary {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.message-copy {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.credit-action {
|
||||
.credit-btn {
|
||||
@extend %btn-pl-yellow-base;
|
||||
|
||||
@include float(right);
|
||||
@include margin-right(5px);
|
||||
|
||||
background-image: none ;
|
||||
text-shadow: none;
|
||||
box-shadow: none;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
.action {
|
||||
@include float(left);
|
||||
@include margin(0, 15px, 0, 0);
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@include box-sizing(border-box);
|
||||
@include float(left);
|
||||
|
||||
border-radius: 3px;
|
||||
font: normal 0.8rem/1.2rem $sans-serif;
|
||||
letter-spacing: 1px;
|
||||
padding: 6px 12px;
|
||||
text-align: center;
|
||||
|
||||
&.disabled {
|
||||
cursor: default !important;
|
||||
|
||||
&:hover, &:focus {
|
||||
@include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%));
|
||||
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
@include float(left);
|
||||
|
||||
font: normal 0.8rem/1.2rem $sans-serif;
|
||||
letter-spacing: 1px;
|
||||
padding: 6px 12px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.exam-registration-number {
|
||||
font-family: $sans-serif;
|
||||
font-size: 18px;
|
||||
|
||||
a {
|
||||
font-family: $sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
&.exam-register {
|
||||
.message-copy {
|
||||
margin-top: ($baseline/4);
|
||||
width: 55%;
|
||||
}
|
||||
}
|
||||
|
||||
&.exam-schedule {
|
||||
.exam-button {
|
||||
margin-top: ($baseline/4);
|
||||
}
|
||||
}
|
||||
|
||||
.exam-button {
|
||||
@include button(simple, $pink);
|
||||
@include float(right);
|
||||
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.contact-button {
|
||||
@include button(simple, $pink);
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
margin-top: ($baseline/2);
|
||||
padding: 9px 18px 10px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0;
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.course-status-certrendering {
|
||||
.btn {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.course-status-certavailable {
|
||||
.message-copy {
|
||||
width: flex-grid(6, 12);
|
||||
position: relative;
|
||||
|
||||
@include float(left);
|
||||
}
|
||||
|
||||
.actions-primary {
|
||||
@include float(right);
|
||||
|
||||
.action {
|
||||
@include margin(0, 0, ($baseline/2), ($baseline*.75));
|
||||
|
||||
float: none;
|
||||
text-align: center;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.action-certificate .btn {
|
||||
@extend %btn-inherited-primary;
|
||||
|
||||
@include box-sizing(border-box);
|
||||
|
||||
float: none;
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
|
||||
@include padding(7px, ($baseline*.75), 7px, ($baseline*.75));
|
||||
|
||||
text-align: center;
|
||||
|
||||
a:link, a:visited {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.action-share .btn {
|
||||
display: inline;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions-secondary {
|
||||
margin-top: ($baseline/2);
|
||||
border-top: 1px solid $gray-l4;
|
||||
padding-top: ($baseline/2);
|
||||
|
||||
.action-share {
|
||||
@include float(right);
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.certificate-explanation {
|
||||
@extend %t-copy-sub1;
|
||||
|
||||
margin-top: ($baseline/2);
|
||||
border-top: 1px solid $gray-l4;
|
||||
padding-top: ($baseline/2);
|
||||
}
|
||||
|
||||
.verification-reminder {
|
||||
width: flex-grid(8, 12);
|
||||
|
||||
@include float(left);
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.verification-cta {
|
||||
width: flex-grid(4, 12);
|
||||
|
||||
@include float(left);
|
||||
|
||||
position: relative;
|
||||
|
||||
.btn {
|
||||
@extend %btn-pl-green-base;
|
||||
|
||||
@include float(right);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.message-related-programs {
|
||||
background: none;
|
||||
border: none;
|
||||
margin-top: ($baseline/4);
|
||||
padding-bottom: 0;
|
||||
|
||||
.related-programs-preface {
|
||||
@include float(left);
|
||||
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
@include float(left);
|
||||
|
||||
display: inline;
|
||||
padding: 0 0.5em;
|
||||
border-right: 1px solid;
|
||||
|
||||
.category-icon {
|
||||
@include float(left);
|
||||
@include margin-right($baseline/4);
|
||||
|
||||
margin-top: ($baseline/10);
|
||||
background-color: transparent;
|
||||
background-size: 100%;
|
||||
width: ($baseline*0.7);
|
||||
height: ($baseline*0.7);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove separator from last list item.
|
||||
li:last-child {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// TYPE: pre-requisites
|
||||
.prerequisites {
|
||||
@include clearfix;
|
||||
|
||||
.tip {
|
||||
font-family: $sans-serif;
|
||||
font-size: 1em;
|
||||
color: $lighter-base-font-color;
|
||||
margin-top: ($baseline/2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// CASE: "enrolled as" status - professional ed
|
||||
&.professional {
|
||||
|
||||
// changes to cover
|
||||
.wrapper-course-image .cover {
|
||||
border-color: $professional-color-lvl3;
|
||||
padding: ($baseline/10);
|
||||
}
|
||||
|
||||
// course enrollment status message
|
||||
.sts-enrollment {
|
||||
.label {
|
||||
@extend %text-sr;
|
||||
}
|
||||
|
||||
// status message
|
||||
.sts-enrollment-value {
|
||||
background: $professional-color-lvl3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: "enrolled as" status - verified
|
||||
&.verified {
|
||||
|
||||
// changes to cover
|
||||
.wrapper-course-image .cover {
|
||||
border-color: $verified-color-lvl1;
|
||||
padding: ($baseline/10);
|
||||
}
|
||||
|
||||
// course enrollment status message
|
||||
.sts-enrollment {
|
||||
.label {
|
||||
@extend %text-sr;
|
||||
}
|
||||
|
||||
.deco-graphic {
|
||||
@extend %ui-depth3;
|
||||
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
|
||||
@include right(0);
|
||||
}
|
||||
|
||||
// status message
|
||||
.sts-enrollment-value {
|
||||
background: $verified-color-lvl1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: "enrolled as" status - honor code
|
||||
&.honor {
|
||||
|
||||
// changes to cover
|
||||
.wrapper-course-image .cover {
|
||||
border-color: $honorcode-color-lvl2;
|
||||
padding: ($baseline/10);
|
||||
}
|
||||
|
||||
// status message
|
||||
.sts-enrollment-value {
|
||||
background: $honorcode-color-lvl1;
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: "enrolled as" status - auditing
|
||||
&.audit {
|
||||
|
||||
// changes to cover
|
||||
.wrapper-course-image .cover {
|
||||
border-color: $audit-color-lvl2;
|
||||
padding: ($baseline/10);
|
||||
}
|
||||
|
||||
// status message
|
||||
.sts-enrollment-value {
|
||||
background: $audit-color-lvl1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// +Misc - Uncategorized
|
||||
// ====================
|
||||
// status - language
|
||||
@@ -1417,7 +1277,7 @@ p.course-block {
|
||||
@include float(left);
|
||||
|
||||
display: block;
|
||||
font: normal 15px/1.6rem $sans-serif;
|
||||
font: normal 15px/1.6rem $font-family-sans-serif;
|
||||
letter-spacing: 0;
|
||||
padding: 6px 32px 7px;
|
||||
text-align: center;
|
||||
@@ -1431,7 +1291,7 @@ p.course-block {
|
||||
&.archived {
|
||||
@include button(simple, $button-archive-color);
|
||||
|
||||
font: normal 15px/1.6rem $sans-serif;
|
||||
font: normal 15px/1.6rem $font-family-sans-serif;
|
||||
padding: 6px 32px 7px;
|
||||
|
||||
&:hover, &:focus {
|
||||
@@ -1464,7 +1324,7 @@ a.fade-cover {
|
||||
.msg {
|
||||
@include clearfix();
|
||||
|
||||
font-family: $sans-serif;
|
||||
font-family: $font-family-sans-serif;
|
||||
padding-bottom: $baseline;
|
||||
border-bottom: thin solid $gray;
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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 settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
|
||||
<a href="${marketing_link('COURSES')}">
|
||||
${_("Explore courses")}
|
||||
</a>
|
||||
|
||||
%endif
|
||||
</div>
|
||||
% endif
|
||||
|
||||
% if staff_access and len(errored_courses) > 0:
|
||||
<div id="course-errors">
|
||||
<h2>${_("Course-loading errors")}</h2>
|
||||
|
||||
% 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>
|
||||
% endif
|
||||
</div>
|
||||
|
||||
%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-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>
|
||||
% endif
|
||||
|
||||
% if settings.FEATURES.get('ENABLE_DASHBOARD_SEARCH'):
|
||||
<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 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')}" />
|
||||
% 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
|
||||
|
||||
</ul>
|
||||
% else:
|
||||
<div class="empty-dashboard-message">
|
||||
<p>${_("You are not enrolled in any courses yet.")}</p>
|
||||
|
||||
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
|
||||
<a href="${marketing_link('COURSES')}">
|
||||
${_("Explore courses")}
|
||||
</a>
|
||||
|
||||
%endif
|
||||
</div>
|
||||
% endif
|
||||
|
||||
% if staff_access and len(errored_courses) > 0:
|
||||
<div id="course-errors">
|
||||
<h2>${_("Course-loading errors")}</h2>
|
||||
|
||||
% 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>
|
||||
% 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-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 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')}" />
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
% endif
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user