Dashboard styling cleanup/changes, including:
- reversing the positions of the sidebar and course listing - html for new social icons (not currently wired up) - new actions dropdown for unenrollment and email settings - partial reorganization of dashboard.scss styles - text fix for unenrollment - added missing endif, p/hgroup closures - reverted la.course-item - removed extra operator - fixed broken bok choy test
This commit is contained in:
Marco Morales
@@ -46,10 +46,10 @@ class DashboardPage(PageObject):
|
||||
"""
|
||||
def _get_course_name(el):
|
||||
# The first component in the link text is the course number
|
||||
_, course_name = el.text.split(' ', 1)
|
||||
course_name = el.text
|
||||
return course_name
|
||||
|
||||
return self.q(css='section.info > hgroup > h3 > a').map(_get_course_name).results
|
||||
return self.q(css='h3.course-title > a').map(_get_course_name).results
|
||||
|
||||
@property
|
||||
def full_name(self):
|
||||
|
||||
@@ -41,6 +41,7 @@
|
||||
}
|
||||
|
||||
$('.message.is-expandable .wrapper-tip').bind('click', toggleExpandMessage);
|
||||
$('.action-more').bind('click', toggleCourseActionsDropdown);
|
||||
|
||||
// Track clicks of the upgrade button. The `trackLink` method is a helper that makes
|
||||
// a `track` call whenever a bound link is clicked. Usually the page would change before
|
||||
@@ -95,6 +96,17 @@
|
||||
});
|
||||
}
|
||||
|
||||
function toggleCourseActionsDropdown(event) {
|
||||
var dropdown = $(event.target).closest('.action-more').find('.actions-dropdown-list')
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
$(this).toggleClass('is-visible');
|
||||
|
||||
// add BI event here
|
||||
|
||||
}
|
||||
|
||||
$("#failed-verification-button-dismiss").click(function() {
|
||||
$.ajax({
|
||||
url: urls.verifyToggleBannerFailedOff,
|
||||
|
||||
@@ -258,13 +258,6 @@ footer .references {
|
||||
|
||||
// ====================
|
||||
|
||||
// poor cascade made worse by CSS splitting requires us to redefine the dashboard views' visual top padding
|
||||
.dashboard {
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// poor definition/scope on ul elements inside .vert-mod element in courseware - override needed for inline discussion editing
|
||||
.course-content .discussion-post.edit-post-form .topic-menu {
|
||||
padding-left: 0;
|
||||
|
||||
@@ -128,7 +128,7 @@ a:focus {
|
||||
@include clearfix();
|
||||
@include box-sizing(border-box);
|
||||
margin: 0 auto 0;
|
||||
padding: 0 ($baseline*1.5);
|
||||
padding: ($baseline*2) 0;
|
||||
max-width: grid-width(12);
|
||||
min-width: 760px;
|
||||
width: flex-grid(12);
|
||||
|
||||
@@ -120,3 +120,11 @@
|
||||
padding: ($baseline/5) ($baseline/2);
|
||||
color: shade($warning-color, 45%);
|
||||
}
|
||||
|
||||
// extends - content - text overflow by ellipsis
|
||||
%cont-truncated {
|
||||
@include box-sizing(border-box);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@@ -41,6 +41,7 @@
|
||||
}
|
||||
|
||||
%t-title3 {
|
||||
@extend %t-title;
|
||||
@include font-size(36);
|
||||
@include line-height(36);
|
||||
}
|
||||
|
||||
@@ -1,37 +1,40 @@
|
||||
// lms - views - user/student dashboard
|
||||
// ====================
|
||||
|
||||
// Table of Contents
|
||||
// * +Dashboard - Sidebar
|
||||
// * +Dashboard - Course Listing
|
||||
// * +Dashboard - Banner
|
||||
|
||||
|
||||
// +Dashboard - Sidebar
|
||||
// ====================
|
||||
.dashboard {
|
||||
@include clearfix();
|
||||
padding: ($baseline*2) 0 0 0;
|
||||
|
||||
.profile-sidebar {
|
||||
background: transparent;
|
||||
@include float(left);
|
||||
@include margin-right(flex-gutter());
|
||||
@include float(right);
|
||||
@include margin-left(flex-gutter());
|
||||
width: flex-grid(3);
|
||||
background: transparent;
|
||||
box-shadow: 0 0 1px $shadow-l1;
|
||||
|
||||
header.profile {
|
||||
.profile {
|
||||
@include box-sizing(border-box);
|
||||
border: 1px solid $border-color-2;
|
||||
border-bottom: none;
|
||||
border-radius: ($baseline/4) ($baseline/4) 0 0;
|
||||
width: flex-grid(12);
|
||||
background: $dashboard-profile-color;
|
||||
|
||||
.user-name {
|
||||
@extend %t-title6;
|
||||
@extend %t-ultrastrong;
|
||||
@extend %cont-truncated;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: ($baseline*0.75) ($baseline/2) 0;
|
||||
padding: $baseline $baseline 0;
|
||||
color: $base-font-color;
|
||||
text-transform: none;
|
||||
text-wrap: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -185,121 +188,47 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.news-carousel {
|
||||
@include clearfix();
|
||||
margin: 30px 10px 0;
|
||||
border: 1px solid $border-color-2;
|
||||
background: $dashboard-profile-color;
|
||||
box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.15);
|
||||
// status
|
||||
.status {
|
||||
|
||||
* {
|
||||
font-family: $sans-serif;
|
||||
}
|
||||
|
||||
header {
|
||||
@include clearfix();
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.page-dots {
|
||||
float: right;
|
||||
margin: 18px 15px 0 0;
|
||||
|
||||
li {
|
||||
float: left;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-dot {
|
||||
display: block;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 11px;
|
||||
background: $dot-color;
|
||||
|
||||
&:hover, &:focus {
|
||||
background: $lighter-base-font-color;
|
||||
.list--nav {
|
||||
margin: ($baseline/2) 0 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.current {
|
||||
background: $link-color;
|
||||
.nav__item {
|
||||
@extend %t-weight4;
|
||||
@include font-size(13);
|
||||
margin-left: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
float: left;
|
||||
margin-left: ($baseline*0.75);
|
||||
font-size: 15px;
|
||||
line-height: 48px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.pages {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
&:first-child {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.news-image {
|
||||
height: 180px;
|
||||
margin-bottom: ($baseline*0.75);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
border: 1px solid $border-color-1;
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-bottom: 8px;
|
||||
margin-left: ($baseline/4);
|
||||
|
||||
a {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.excerpt {
|
||||
margin-left: ($baseline/4);
|
||||
font-size: 13px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// course listings
|
||||
// +Dashboard - Course Listing
|
||||
// ====================
|
||||
.dashboard {
|
||||
.my-courses {
|
||||
@include float(left);
|
||||
margin: 0;
|
||||
width: flex-grid(9);
|
||||
|
||||
> header {
|
||||
border-bottom: 1px solid $border-color-2;
|
||||
margin-bottom: ($baseline*1.5);
|
||||
|
||||
.wrapper-header-courses {
|
||||
border-bottom: 4px solid $border-color-l4;
|
||||
margin-bottom: $baseline;
|
||||
|
||||
.header-courses {
|
||||
@extend %t-title5;
|
||||
@include padding-right($baseline/2);
|
||||
}
|
||||
}
|
||||
|
||||
// CASE: empty dashboard
|
||||
.empty-dashboard-message {
|
||||
padding: 60px 0px;
|
||||
padding: ($baseline*2) 0;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
@@ -339,9 +268,9 @@
|
||||
@extend %ui-no-list;
|
||||
|
||||
.course-item {
|
||||
margin-bottom: ($baseline*2.5);
|
||||
margin-bottom: $baseline;
|
||||
border-bottom: 4px solid $border-color-l4;
|
||||
padding-bottom: ($baseline*2.5);
|
||||
padding-bottom: $baseline;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
@@ -360,64 +289,60 @@
|
||||
@include clearfix();
|
||||
@extend %ui-depth2;
|
||||
position: relative;
|
||||
padding: ($baseline/2);
|
||||
|
||||
.cover {
|
||||
@include box-sizing(border-box);
|
||||
@include transition(all 0.15s linear 0s);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
@include float(left);
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
margin: 0;
|
||||
border-radius: ($baseline/10);
|
||||
border: 1px solid $dashboard-course-cover-border;
|
||||
border-bottom: 4px solid $dashboard-course-cover-border;
|
||||
padding: ($baseline/10);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
.details {
|
||||
@include clearfix();
|
||||
@include padding(0, 10px, 0, 230px);
|
||||
|
||||
> hgroup {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
.cover {
|
||||
@include box-sizing(border-box);
|
||||
@include transition(all 0.15s linear 0s);
|
||||
@include float(left);
|
||||
@include margin-right(flex-gutter());
|
||||
width: flex-grid(3);
|
||||
min-width: 150px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
position: relative;
|
||||
max-height: 100%;
|
||||
height: 120px;
|
||||
border-radius: ($baseline/10);
|
||||
border: 1px solid $dashboard-course-cover-border;
|
||||
border-bottom: 4px solid $dashboard-course-cover-border;
|
||||
|
||||
.university {
|
||||
color: $lighter-base-font-color;
|
||||
font-family: $sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin: 0 0 6px;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-top: 75%; // 4:3 aspect ratio
|
||||
}
|
||||
|
||||
.date-block {
|
||||
position: absolute;
|
||||
img {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@include right(0);
|
||||
font-family: $sans-serif;
|
||||
font-size: 13px;
|
||||
font-style: italic;
|
||||
color: $lighter-base-font-color;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
h3 a, h3 span {
|
||||
.wrapper-course-details {
|
||||
display: block;
|
||||
@include float(left);
|
||||
width: flex-grid(9);
|
||||
padding: 0;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.course-title {
|
||||
border-bottom: 2px solid $gray-l5;
|
||||
|
||||
a, span {
|
||||
@extend %t-title3;
|
||||
@extend %t-light;
|
||||
display: block;
|
||||
margin-bottom: ($baseline/2);
|
||||
font-family: $sans-serif;
|
||||
font-size: 34px;
|
||||
line-height: 42px;
|
||||
font-weight: 300;
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
@@ -425,6 +350,153 @@
|
||||
}
|
||||
}
|
||||
|
||||
.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-l1;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-course-actions {
|
||||
display: block;
|
||||
@include float(right);
|
||||
width: flex-grid(8);
|
||||
padding: 0;
|
||||
margin-top: ($baseline/2);
|
||||
}
|
||||
|
||||
.course-actions {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
// UI: course item actions
|
||||
|
||||
.action {
|
||||
@include box-sizing(border-box);
|
||||
@include margin-right($baseline/2);
|
||||
display: inline-block;
|
||||
float: right;
|
||||
min-width: ($baseline*2);
|
||||
color: $gray-l3;
|
||||
border-radius: 3px;
|
||||
padding: 12px;
|
||||
border: 1px solid $white;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: #333;
|
||||
border: 1px solid $gray-l4;
|
||||
}
|
||||
|
||||
// STATE: is-disabled
|
||||
&.is-disabled {
|
||||
color: #808080;
|
||||
color: $gray-l4;
|
||||
}
|
||||
|
||||
// TYPE: facebook share
|
||||
&.action-facebook, {
|
||||
color: #3b5998;
|
||||
}
|
||||
|
||||
// TYPE: twitter share
|
||||
&.action-twitter {
|
||||
color: #55ACEE;
|
||||
}
|
||||
}
|
||||
|
||||
// UI: general actions dropdown layout
|
||||
.wrapper-action-more {
|
||||
|
||||
.actions-dropdown {
|
||||
@extend %ui-no-list;
|
||||
@extend %ui-depth1;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: ($baseline*2);
|
||||
left: 17px;
|
||||
pointer-events: none;
|
||||
min-width: ($baseline*6.5);
|
||||
|
||||
&.is-expanded {
|
||||
display: block;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.actions-dropdown-list {
|
||||
@extend %ui-no-list;
|
||||
display: table;
|
||||
@include box-sizing(border-box);
|
||||
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/2) ($baseline*0.75);
|
||||
background: $white;
|
||||
|
||||
// ui triangle/nub
|
||||
&:after,
|
||||
&:before {
|
||||
bottom: 100%;
|
||||
@include right(3px);
|
||||
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;
|
||||
@@ -461,18 +533,14 @@
|
||||
@include button(simple, $button-color);
|
||||
@include box-sizing(border-box);
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
@include float(left);
|
||||
@include float(right);
|
||||
font: normal 15px/1.6rem $sans-serif;
|
||||
letter-spacing: 0;
|
||||
padding: 6px 32px 7px;
|
||||
text-align: center;
|
||||
margin-top: 16px;
|
||||
|
||||
&.archived {
|
||||
@include button(simple, $button-archive-color);
|
||||
font: normal 15px/1.6rem $sans-serif;
|
||||
padding: 6px 32px 7px;
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
@@ -485,17 +553,415 @@
|
||||
}
|
||||
}
|
||||
|
||||
.prerequisites {
|
||||
@include clearfix;
|
||||
// ====================
|
||||
|
||||
.tip {
|
||||
// UI: message
|
||||
.wrapper-message-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*0.5) $baseline;
|
||||
background: $gray-l5;
|
||||
border: 1px solid $gray-l4;
|
||||
|
||||
// STATE: shown
|
||||
&.is-shown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
font-family: $sans-serif;
|
||||
font-size: 1em;
|
||||
color: $lighter-base-font-color;
|
||||
margin-top: ($baseline/2);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.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.0;
|
||||
}
|
||||
|
||||
// STATE: is expanded
|
||||
&.is-expanded {
|
||||
|
||||
.ui-toggle-expansion {
|
||||
@include transform(rotate(0));
|
||||
@include transform-origin(50% 50%);
|
||||
}
|
||||
|
||||
.wrapper-extended {
|
||||
display: block;
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TYPE: upsell
|
||||
.message-upsell {
|
||||
|
||||
.wrapper-tip {
|
||||
@include clearfix();
|
||||
|
||||
.message-title {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ui-toggle-expansion {
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
@include transform-origin(50% 50%);
|
||||
@include font-size(21);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: ($baseline/4);
|
||||
|
||||
@include rtl {
|
||||
@include transform(rotate(90deg));
|
||||
}
|
||||
|
||||
@include ltr {
|
||||
@include transform(rotate(-90deg));
|
||||
}
|
||||
}
|
||||
|
||||
.message-copy {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-extended {
|
||||
padding: ($baseline/2) 0;
|
||||
|
||||
.message-copy {
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
}
|
||||
|
||||
.action-upgrade {
|
||||
@extend %btn-primary-green;
|
||||
@include clearfix();
|
||||
position: relative;
|
||||
left: ($baseline/2);
|
||||
padding: 8px $baseline 8px ($baseline*2);
|
||||
|
||||
.deco-graphic {
|
||||
position: absolute;
|
||||
top: -($baseline/4);
|
||||
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;
|
||||
margin-right: $baseline;
|
||||
}
|
||||
|
||||
.copy-sub {
|
||||
@extend %t-action4;
|
||||
opacity: 0.875;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TYPE: status
|
||||
.message-status {
|
||||
background: tint($yellow,70%);
|
||||
border-color: $gray-l3;
|
||||
|
||||
.message-copy {
|
||||
@extend %t-copy-sub1;
|
||||
margin: 0;
|
||||
|
||||
.grade-value {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
|
||||
.action {
|
||||
float: left;
|
||||
margin: 0 15px 0 0;
|
||||
|
||||
.btn, .cta {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@include box-sizing(border-box);
|
||||
border-radius: 3px;
|
||||
float: left;
|
||||
font: normal 0.8rem/1.2rem $sans-serif;
|
||||
letter-spacing: 1px;
|
||||
padding: 6px 12px;
|
||||
text-align: center;
|
||||
|
||||
&.disabled {
|
||||
cursor: default !important;
|
||||
|
||||
&:hover, &:focus {
|
||||
background: #eee;
|
||||
background-image: -webkit-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
|
||||
background-image: -moz-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
|
||||
background-image: -ms-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
|
||||
background-image: -o-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
|
||||
background-image: linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cta {
|
||||
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);
|
||||
margin-top: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.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-processing {
|
||||
background-color: $gray-l5;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&.course-status-certnotavailable {
|
||||
background-color: $gray-l5;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&.course-status-certrendering {
|
||||
background-color: $gray-l5;
|
||||
border: 0;
|
||||
|
||||
.cta {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.course-status-certavailable {
|
||||
background-color: $gray-l5;
|
||||
border: 0;
|
||||
|
||||
.message-copy {
|
||||
width: flex-grid(6, 12);
|
||||
position: relative;
|
||||
@include float(left);
|
||||
}
|
||||
|
||||
.actions-primary {
|
||||
width: flex-grid(6, 12);
|
||||
position: relative;
|
||||
@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);
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.verification-cta {
|
||||
width: flex-grid(4, 12);
|
||||
position: relative;
|
||||
float: left;
|
||||
|
||||
.cta {
|
||||
@include button(simple, $green-d1);
|
||||
@include box-sizing(border-box);
|
||||
@include float(right);
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
font: normal 15px/1.6rem $sans-serif;
|
||||
letter-spacing: 0;
|
||||
padding: 6px 32px 7px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TYPE: pre-requisites
|
||||
.prerequisites {
|
||||
@include clearfix;
|
||||
|
||||
.tip {
|
||||
font-family: $sans-serif;
|
||||
font-size: 1em;
|
||||
color: $lighter-base-font-color;
|
||||
margin-top: ($baseline/2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// "enrolled as" status
|
||||
.sts-enrollment {
|
||||
position: absolute;
|
||||
@@ -611,437 +1077,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ====================
|
||||
|
||||
// UI: message
|
||||
.wrapper-message-primary {
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
.message {
|
||||
border-radius: 3px;
|
||||
display: none;
|
||||
z-index: 10;
|
||||
margin: $baseline 0 ($baseline/2) 0;
|
||||
padding: ($baseline*0.5) $baseline;
|
||||
font-family: $sans-serif;
|
||||
background: tint($yellow,70%);
|
||||
border: 1px solid $gray-l3;
|
||||
|
||||
// STATE: shown
|
||||
&.is-shown {
|
||||
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;
|
||||
}
|
||||
|
||||
.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.0;
|
||||
}
|
||||
|
||||
// STATE: is expanded
|
||||
&.is-expanded {
|
||||
|
||||
.ui-toggle-expansion {
|
||||
@include transform(rotate(0));
|
||||
@include transform-origin(50% 50%);
|
||||
}
|
||||
|
||||
.wrapper-extended {
|
||||
display: block;
|
||||
opacity: 1.0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TYPE: upsell
|
||||
.message-upsell {
|
||||
|
||||
.wrapper-tip {
|
||||
@include clearfix();
|
||||
|
||||
.message-title {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ui-toggle-expansion {
|
||||
@include transition(all $tmg-f2 ease-in-out 0s);
|
||||
@include transform-origin(50% 50%);
|
||||
@include font-size(21);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: ($baseline/4);
|
||||
|
||||
@include rtl {
|
||||
@include transform(rotate(90deg));
|
||||
}
|
||||
|
||||
@include ltr {
|
||||
@include transform(rotate(-90deg));
|
||||
}
|
||||
}
|
||||
|
||||
.message-copy {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper-extended {
|
||||
padding: ($baseline/2) 0;
|
||||
|
||||
.message-copy {
|
||||
margin-bottom: $baseline;
|
||||
}
|
||||
}
|
||||
|
||||
.action-upgrade {
|
||||
@extend %btn-primary-green;
|
||||
@include clearfix();
|
||||
position: relative;
|
||||
left: ($baseline/2);
|
||||
padding: 8px $baseline 8px ($baseline*2);
|
||||
|
||||
.deco-graphic {
|
||||
position: absolute;
|
||||
top: -($baseline/4);
|
||||
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;
|
||||
margin-right: $baseline;
|
||||
}
|
||||
|
||||
.copy-sub {
|
||||
@extend %t-action4;
|
||||
opacity: 0.875;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TYPE: status
|
||||
.message-status {
|
||||
background: tint($yellow,70%);
|
||||
border-color: $gray-l3;
|
||||
|
||||
.message-copy {
|
||||
@extend %t-copy-sub1;
|
||||
margin: 0;
|
||||
|
||||
.grade-value {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
|
||||
.action {
|
||||
float: left;
|
||||
margin: 0 15px 0 0;
|
||||
|
||||
.btn, .cta {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@include box-sizing(border-box);
|
||||
border-radius: 3px;
|
||||
float: left;
|
||||
font: normal 0.8rem/1.2rem $sans-serif;
|
||||
letter-spacing: 1px;
|
||||
padding: 6px 12px;
|
||||
text-align: center;
|
||||
|
||||
&.disabled {
|
||||
cursor: default !important;
|
||||
|
||||
&:hover, &:focus {
|
||||
background: #eee;
|
||||
background-image: -webkit-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
|
||||
background-image: -moz-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
|
||||
background-image: -ms-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
|
||||
background-image: -o-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
|
||||
background-image: linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cta {
|
||||
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);
|
||||
margin-top: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.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-processing {
|
||||
background-color: $gray-l5;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&.course-status-certnotavailable {
|
||||
background-color: $gray-l5;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&.course-status-certrendering {
|
||||
background-color: $gray-l5;
|
||||
border: 0;
|
||||
|
||||
.cta {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.course-status-certavailable {
|
||||
background-color: $gray-l5;
|
||||
border: 0;
|
||||
|
||||
.message-copy {
|
||||
width: flex-grid(6, 12);
|
||||
position: relative;
|
||||
@include float(left);
|
||||
}
|
||||
|
||||
.actions-primary {
|
||||
width: flex-grid(6, 12);
|
||||
position: relative;
|
||||
@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);
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.verification-cta {
|
||||
width: flex-grid(4, 12);
|
||||
position: relative;
|
||||
float: left;
|
||||
|
||||
.cta {
|
||||
@include button(simple, $green-d1);
|
||||
@include box-sizing(border-box);
|
||||
@include float(right);
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
font: normal 15px/1.6rem $sans-serif;
|
||||
letter-spacing: 0;
|
||||
padding: 6px 32px 7px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.unenroll {
|
||||
@include float(right);
|
||||
display: block;
|
||||
font-style: italic;
|
||||
color: $lighter-base-font-color;
|
||||
text-decoration: underline;
|
||||
font-size: .8em;
|
||||
margin-top: 32px;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
a.email-settings {
|
||||
@extend a.unenroll;
|
||||
@include margin-right(10px);
|
||||
}
|
||||
}
|
||||
|
||||
// account-related
|
||||
.user-info {
|
||||
|
||||
// status
|
||||
.status {
|
||||
|
||||
.list--nav {
|
||||
margin: ($baseline/2) 0 0 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav__item {
|
||||
@extend %t-weight4;
|
||||
@include font-size(13);
|
||||
margin-left: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// status - language
|
||||
.status-language {
|
||||
@@ -1227,113 +1265,101 @@
|
||||
border:0;
|
||||
color:white;
|
||||
box-shadow:none;
|
||||
|
||||
&.archived {
|
||||
@include button(simple, $button-archive-color);
|
||||
font: normal 15px/1.6rem $sans-serif;
|
||||
padding: 6px 32px 7px;
|
||||
@include button(simple, $button-archive-color);
|
||||
font: normal 15px/1.6rem $sans-serif;
|
||||
padding: 6px 32px 7px;
|
||||
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.disable-look{
|
||||
color: #808080;
|
||||
}
|
||||
a.disable-look-unregister{
|
||||
color: #808080;
|
||||
float: right;
|
||||
display: block;
|
||||
font-style: italic;
|
||||
color: $lighter-base-font-color;
|
||||
text-decoration: underline;
|
||||
font-size: .8em;
|
||||
margin-top: 32px;
|
||||
|
||||
}
|
||||
a.disable-look-settings{
|
||||
@extend a.disable-look-unregister;
|
||||
margin-right: ($baseline/2);
|
||||
}
|
||||
|
||||
}
|
||||
a.fade-cover{
|
||||
@extend .cover;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.dashboard-banner {
|
||||
// +Dashboard - Banner
|
||||
// ====================
|
||||
.dashboard-banner {
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wrapper-msg {
|
||||
padding-bottom: 0;
|
||||
.wrapper-msg {
|
||||
padding-bottom: 0;
|
||||
|
||||
.msg {
|
||||
@include clearfix();
|
||||
font-family: $sans-serif;
|
||||
padding-bottom: $baseline;
|
||||
border-bottom: thin solid $gray;
|
||||
.msg {
|
||||
@include clearfix();
|
||||
font-family: $sans-serif;
|
||||
padding-bottom: $baseline;
|
||||
border-bottom: thin solid $gray;
|
||||
|
||||
&.title {
|
||||
@extend %t-title5;
|
||||
@extend %t-weight4;
|
||||
font-family: $f-sans-serif;
|
||||
&.title {
|
||||
@extend %t-title5;
|
||||
@extend %t-weight4;
|
||||
font-family: $f-sans-serif;
|
||||
|
||||
// Overriding Platform h2 styles
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
&.has-actions {
|
||||
|
||||
.donate-content {
|
||||
width: flex-grid(8, 12);
|
||||
// Overriding Platform h2 styles
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.donate-actions {
|
||||
width: flex-grid(4, 12);
|
||||
vertical-align: bottom;
|
||||
display: inline-block;
|
||||
&.has-actions {
|
||||
|
||||
.monetary-symbol {
|
||||
vertical-align: middle;
|
||||
color: $white;
|
||||
font-weight: 600;
|
||||
.donate-content {
|
||||
width: flex-grid(8, 12);
|
||||
}
|
||||
|
||||
.amount {
|
||||
height: 40px;
|
||||
width: 80px;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
border: 2px solid $white;
|
||||
.donate-actions {
|
||||
width: flex-grid(4, 12);
|
||||
vertical-align: bottom;
|
||||
display: inline-block;
|
||||
|
||||
&.validation-error {
|
||||
border: 2px solid $error-color;
|
||||
.monetary-symbol {
|
||||
vertical-align: middle;
|
||||
color: $white;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.action-donate {
|
||||
@extend %btn-primary-blue;
|
||||
vertical-align: middle;
|
||||
padding-top: ($baseline/2);
|
||||
padding-bottom: ($baseline/2);
|
||||
text-shadow: none;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
color: $white;
|
||||
font-weight: 600;
|
||||
}
|
||||
.amount {
|
||||
height: 40px;
|
||||
width: 80px;
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
border: 2px solid $white;
|
||||
|
||||
.donation-error-msg {
|
||||
padding: ($baseline/2) 0;
|
||||
&.validation-error {
|
||||
border: 2px solid $error-color;
|
||||
}
|
||||
}
|
||||
|
||||
.action-donate {
|
||||
@extend %btn-primary-blue;
|
||||
vertical-align: middle;
|
||||
padding-top: ($baseline/2);
|
||||
padding-bottom: ($baseline/2);
|
||||
text-shadow: none;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
color: $white;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.donation-error-msg {
|
||||
padding: ($baseline/2) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -74,7 +74,56 @@
|
||||
</div>
|
||||
|
||||
<section class="container dashboard" id="dashboard-main">
|
||||
<section class="my-courses" id="my-courses">
|
||||
<header class="wrapper-header-courses">
|
||||
<h2 class="header-courses">${_("Current Courses")}</h2>
|
||||
</header>
|
||||
|
||||
% if len(course_enrollment_pairs) > 0:
|
||||
<ul class="listing-courses">
|
||||
% for course, enrollment in course_enrollment_pairs:
|
||||
<% show_courseware_link = (course.id in show_courseware_links_for) %>
|
||||
<% cert_status = cert_statuses.get(course.id) %>
|
||||
<% show_email_settings = (course.id in show_email_settings_for) %>
|
||||
<% course_mode_info = all_course_modes.get(course.id) %>
|
||||
<% show_refund_option = (course.id in show_refund_option_for) %>
|
||||
<% is_paid_course = (course.id in enrolled_courses_either_paid) %>
|
||||
<% is_course_blocked = (course.id in block_courses) %>
|
||||
<% course_verification_status = verification_status_by_course.get(course.id, {}) %>
|
||||
<% course_requirements = courses_requirements_not_met.get(course.id) %>
|
||||
<%include file='dashboard/_dashboard_course_listing.html' args="course=course, enrollment=enrollment, show_courseware_link=show_courseware_link, cert_status=cert_status, show_email_settings=show_email_settings, course_mode_info=course_mode_info, show_refund_option = show_refund_option, is_paid_course = is_paid_course, is_course_blocked = is_course_blocked, verification_status=course_verification_status, course_requirements=course_requirements" />
|
||||
% endfor
|
||||
|
||||
</ul>
|
||||
% else:
|
||||
<section class="empty-dashboard-message">
|
||||
% if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
|
||||
<p>${_("Looks like you haven't enrolled in any courses yet.")}</p>
|
||||
<a href="${marketing_link('COURSES')}">
|
||||
${_("Find courses now!")}
|
||||
</a>
|
||||
% else:
|
||||
<p>${_("Looks like you haven't enrolled in any courses yet.")}</p>
|
||||
%endif
|
||||
</section>
|
||||
% 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 | h}</h3>
|
||||
<ul>
|
||||
% for (msg, err) in errors:
|
||||
<li>${msg}
|
||||
<ul><li><pre>${err}</pre></li></ul>
|
||||
</li>
|
||||
% endfor
|
||||
</ul>
|
||||
% endfor
|
||||
% endif
|
||||
</section>
|
||||
<section class="profile-sidebar">
|
||||
<header class="profile">
|
||||
<h2><span class="sr">${_("Username")}: </span><span class="user-name">${ user.username }</span></h2>
|
||||
@@ -171,6 +220,7 @@
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
<<<<<<< HEAD
|
||||
|
||||
</section>
|
||||
|
||||
@@ -223,6 +273,8 @@
|
||||
</ul>
|
||||
% endfor
|
||||
% endif
|
||||
=======
|
||||
>>>>>>> dashboard styling cleanup changes, including reversing the positions of the sidebar and course listing, html for new social icons (not currently wired up), new actions dropdown for unenrollment and email settings, partial reorganization of dashboard.scss styles as well
|
||||
</section>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -39,14 +39,13 @@ from student.helpers import (
|
||||
%>
|
||||
% else:
|
||||
<% mode_class = '' %>
|
||||
% endif
|
||||
% endif
|
||||
|
||||
<article class="course${mode_class}">
|
||||
|
||||
<%
|
||||
course_target = reverse('info', args=[course.id.to_deprecated_string()])
|
||||
%>
|
||||
|
||||
% if show_courseware_link:
|
||||
% if not is_course_blocked:
|
||||
<a href="${course_target}" class="cover">
|
||||
@@ -77,72 +76,231 @@ from student.helpers import (
|
||||
<hgroup>
|
||||
<p class="date-block">
|
||||
% if course.has_ended():
|
||||
${_("Course Completed - {end_date}").format(end_date=course.end_datetime_text("DATE_TIME"))}
|
||||
${_("Course Completed - {end_date}").format(end_date=course.end_datetime_text("DATE_TIME"))}
|
||||
% elif course.has_started():
|
||||
${_("Course Started - {start_date}").format(start_date=course.start_datetime_text("DATE_TIME"))}
|
||||
${_("Course Started - {start_date}").format(start_date=course.start_datetime_text("DATE_TIME"))}
|
||||
% elif course.start_date_is_still_default: # Course start date TBD
|
||||
${_("Course has not yet started")}
|
||||
${_("Course has not yet started")}
|
||||
% else: # hasn't started yet
|
||||
${_("Course Starts - {start_date}").format(start_date=course.start_datetime_text("DATE_TIME"))}
|
||||
${_("Course Starts - {start_date}").format(start_date=course.start_datetime_text("DATE_TIME"))}
|
||||
% endif
|
||||
</p>
|
||||
<h2 class="university">${get_course_about_section(course, 'university')}</h2>
|
||||
<h3>
|
||||
</hgroup>
|
||||
<section class="details">
|
||||
% if show_courseware_link:
|
||||
% if not is_course_blocked:
|
||||
<a href="${course_target}" class="cover">
|
||||
<img src="${course_image_url(course)}" alt="${_('{course_number} {course_name} Home Page').format(course_number=course.number, course_name=course.display_name_with_default) |h}" />
|
||||
</a>
|
||||
% else:
|
||||
<a class="fade-cover">
|
||||
<img src="${course_image_url(course)}" alt="${_('{course_number} {course_name} Cover Image').format(course_number=course.number, course_name=course.display_name_with_default) |h}" />
|
||||
</a>
|
||||
% endif
|
||||
% else:
|
||||
<div class="cover">
|
||||
<img src="${course_image_url(course)}" alt="${_('{course_number} {course_name} Cover Image').format(course_number=course.number, course_name=course.display_name_with_default) | h}" />
|
||||
</div>
|
||||
% endif
|
||||
% if settings.FEATURES.get('ENABLE_VERIFIED_CERTIFICATES'):
|
||||
<span class="sts-enrollment" title="${course_verified_certs.get('enrollment_title')}">
|
||||
<span class="label">${_("Enrolled as: ")}</span>
|
||||
% if course_verified_certs.get('show_image'):
|
||||
<img class="deco-graphic" src="${static.url('images/verified-ribbon.png')}" alt="${course_verified_certs.get('image_alt')}" />
|
||||
% endif
|
||||
<div class="sts-enrollment-value">${course_verified_certs.get('enrollment_value')}</div>
|
||||
</span>
|
||||
% endif
|
||||
<div class="wrapper-course-details">
|
||||
<h3 class="course-title">
|
||||
% if show_courseware_link:
|
||||
% if not is_course_blocked:
|
||||
<a href="${course_target}">${course.display_number_with_default | h} ${course.display_name_with_default}</a>
|
||||
% if not is_course_blocked:
|
||||
<a href="${course_target}">${course.display_name_with_default}</a>
|
||||
% else:
|
||||
<a class="disable-look">${course.display_number_with_default | h} ${course.display_name_with_default}</a>
|
||||
<a class="disable-look">${course.display_name_with_default}</a>
|
||||
% endif
|
||||
% else:
|
||||
<span>${course.display_number_with_default | h} ${course.display_name_with_default}</span>
|
||||
<span>${course.display_name_with_default}</span>
|
||||
% endif
|
||||
</h3>
|
||||
</hgroup>
|
||||
|
||||
% if course.may_certify() and cert_status:
|
||||
<%include file='_dashboard_certificate_information.html' args='cert_status=cert_status,course=course, enrollment=enrollment'/>
|
||||
% endif
|
||||
|
||||
% if verification_status.get('status') in [VERIFY_STATUS_NEED_TO_VERIFY, VERIFY_STATUS_SUBMITTED, VERIFY_STATUS_APPROVED, VERIFY_STATUS_NEED_TO_REVERIFY] and not is_course_blocked:
|
||||
<div class="message message-status wrapper-message-primary is-shown">
|
||||
% if verification_status['status'] == VERIFY_STATUS_NEED_TO_VERIFY:
|
||||
<div class="verification-reminder">
|
||||
% if verification_status['days_until_deadline'] is not None:
|
||||
<h4 class="message-title">${_('Verification not yet complete.')}</h4>
|
||||
<p class="message-copy">${ungettext(
|
||||
'You only have {days} day left to verify for this course.',
|
||||
'You only have {days} days left to verify for this course.',
|
||||
verification_status['days_until_deadline']
|
||||
).format(days=verification_status['days_until_deadline'])}</p>
|
||||
% else:
|
||||
<h4 class="message-title">${_('Almost there!')}</h4>
|
||||
<p class="message-copy">${_('You still need to verify for this course.')}</p>
|
||||
% endif
|
||||
</div>
|
||||
<div class="verification-cta">
|
||||
<a href="${reverse('verify_student_verify_later', kwargs={'course_id': unicode(course.id)})}" class="cta" data-course-id="${course.id | h}">${_('Verify Now')}</a>
|
||||
</div>
|
||||
% elif verification_status['status'] == VERIFY_STATUS_SUBMITTED:
|
||||
<h4 class="message-title">${_('You have already verified your ID!')}</h4>
|
||||
<p class="message-copy">${_('Thanks for your patience as we process your request.')}</p>
|
||||
% elif verification_status['status'] == VERIFY_STATUS_APPROVED:
|
||||
<h4 class="message-title">${_('You have already verified your ID!')}</h4>
|
||||
% if verification_status['verification_good_until'] is not None:
|
||||
<p class="message-copy">${_('Your verification status is good until {date}.').format(date=verification_status['verification_good_until'])}
|
||||
<div class="course-info">
|
||||
<span class="info-university">${get_course_about_section(course, 'university')} - </span>
|
||||
<span class="info-course-id">${course.display_number_with_default | h}</span>
|
||||
<span class="info-date-block" data-tooltip="Hi">
|
||||
% if course.has_ended():
|
||||
${_("Ended - {end_date}").format(end_date=course.end_datetime_text("SHORT_DATE"))}
|
||||
% elif course.has_started():
|
||||
${_("Started - {start_date}").format(start_date=course.start_datetime_text("SHORT_DATE"))}
|
||||
% elif course.start_date_is_still_default: # Course start date TBD
|
||||
${_("Coming Soon")}
|
||||
% else: # hasn't started yet
|
||||
${_("Starts - {start_date}").format(start_date=course.start_datetime_text("SHORT_DATE"))}
|
||||
% endif
|
||||
% elif verification_status['status'] == VERIFY_STATUS_NEED_TO_REVERIFY:
|
||||
<h4 class="message-title">${_('Your verification will expire soon!')}</h4>
|
||||
## Translators: start_link and end_link will be replaced with HTML tags;
|
||||
## please do not translate these.
|
||||
<p class="message-copy">${_('Your current verification will expire before the verification deadline for this course. {start_link}Re-verify your identity now{end_link} using a webcam and a government-issued ID.').format(start_link='<a href="{href}">'.format(href=reverse('verify_student_reverify')), end_link='</a>')}</p>
|
||||
</span>
|
||||
</div>
|
||||
% if show_courseware_link:
|
||||
<div class="wrapper-course-actions">
|
||||
<div class="course-actions">
|
||||
% if course.has_ended():
|
||||
% if not is_course_blocked:
|
||||
<a href="${course_target}" class="enter-course archived">${_('View Archived Course')}</a>
|
||||
% else:
|
||||
<a class="enter-course-blocked archived">${_('View Archived Course')}</a>
|
||||
% endif
|
||||
% else:
|
||||
% if not is_course_blocked:
|
||||
<a href="${course_target}" class="enter-course">${_('View Course')}</a>
|
||||
% else:
|
||||
<a class="enter-course-blocked">${_('View Course')}</a>
|
||||
% endif
|
||||
% endif
|
||||
|
||||
<a href="#" data-tooltip="${_('Share on Facebook')}" class="action action-facebook" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr">Facebook</span>
|
||||
<i class="fa fa-facebook" aria-hidden="true"></i>
|
||||
</a>
|
||||
<a href="#" data-tooltip="${_('Share on Twitter')}" class="action action-twitter" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr">Twitter</span>
|
||||
<i class="fa fa-twitter" aria-hidden="true"></i>
|
||||
</a>
|
||||
<div class="wrapper-action-more">
|
||||
<a href="#" class="action action-more" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr">Course options dropdown</span>
|
||||
<i class="fa fa-cog" aria-hidden="true"></i>
|
||||
</a>
|
||||
<div class="actions-dropdown">
|
||||
<ul class="actions-dropdown-list" aria-label="More Options" role="menu">
|
||||
<li class="actions-item">
|
||||
% if is_paid_course and show_refund_option:
|
||||
## Translators: The course's name will be added to the end of this sentence.
|
||||
% if not is_course_blocked:
|
||||
<a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the purchased course")}';
|
||||
document.getElementById('refund-info').innerHTML=gettext('You will be refunded the amount you paid.')">
|
||||
${_('Unenroll')}
|
||||
</a>
|
||||
% else:
|
||||
<a class="action action-unenroll is-disabled" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the purchased course")}';
|
||||
document.getElementById('refund-info').innerHTML=gettext('You will be refunded the amount you paid.')">
|
||||
${_('Unenroll')}
|
||||
</a>
|
||||
% endif
|
||||
% elif is_paid_course and not show_refund_option:
|
||||
## Translators: The course's name will be added to the end of this sentence.
|
||||
% if not is_course_blocked:
|
||||
<a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the purchased course")}';
|
||||
document.getElementById('refund-info').innerHTML=gettext('You will not be refunded the amount you paid.')">
|
||||
${_('Unenroll')}
|
||||
</a>
|
||||
% else:
|
||||
<a class="action action-unenroll is-disabled" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the purchased course")}';
|
||||
document.getElementById('refund-info').innerHTML=gettext('You will not be refunded the amount you paid.')">
|
||||
${_('Unenroll')}
|
||||
</a>
|
||||
% endif
|
||||
% elif enrollment.mode != "verified":
|
||||
## Translators: The course's name will be added to the end of this sentence.
|
||||
% if not is_course_blocked:
|
||||
<a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from")}'; document.getElementById('refund-info').innerHTML=''">
|
||||
${_('Unenroll')}
|
||||
</a>
|
||||
% else:
|
||||
<a class="action action-unenroll is-disabled" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from")}'; document.getElementById('refund-info').innerHTML=''">
|
||||
${_('Unenroll')}
|
||||
</a>
|
||||
% endif
|
||||
% elif show_refund_option:
|
||||
## Translators: The course's name will be added to the end of this sentence.
|
||||
% if not is_course_blocked:
|
||||
<a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the verified {cert_name_long} track of").format(cert_name_long=cert_name_long)}';
|
||||
document.getElementById('refund-info').innerHTML=gettext('You will be refunded the amount you paid.')">
|
||||
${_('Unenroll')}
|
||||
</a>
|
||||
% else:
|
||||
<a class="action action-unenroll is-disabled" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the verified {cert_name_long} track of").format(cert_name_long=cert_name_long)}';
|
||||
document.getElementById('refund-info').innerHTML=gettext('You will be refunded the amount you paid.')">
|
||||
${_('Unenroll')}
|
||||
</a>
|
||||
% endif
|
||||
% else:
|
||||
## Translators: The course's name will be added to the end of this sentence.
|
||||
% if not is_course_blocked:
|
||||
<a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the verified {cert_name_long} track of").format(cert_name_long=cert_name_long)}';
|
||||
document.getElementById('refund-info').innerHTML=gettext('The refund deadline for this course has passed, so you will not receive a refund.')">
|
||||
${_('Unenroll')}
|
||||
</a>
|
||||
% else:
|
||||
<a class="action action-unenroll is-disabled" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the verified {cert_name_long} track of").format(cert_name_long=cert_name_long)}';
|
||||
document.getElementById('refund-info').innerHTML=gettext('The refund deadline for this course has passed, so you will not receive a refund.')">
|
||||
${_('Unenroll')}
|
||||
</a>
|
||||
% endif
|
||||
% endif
|
||||
</li>
|
||||
<li class="actions-item">
|
||||
% if show_email_settings:
|
||||
% if not is_course_blocked:
|
||||
<a href="#email-settings-modal" class="action action-email-settings" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-optout="${unicode(course.id) in course_optouts}">${_('Email Settings')}</a>
|
||||
% else:
|
||||
<a class="action action-email-settings is-disabled" data-course-id="${course.id| h}" data-course-number="${course.number | h}" data-optout="${unicode(course.id) in course_optouts}">${_('Email Settings')}</a>
|
||||
% endif
|
||||
% endif
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
% endif
|
||||
</div>
|
||||
% endif
|
||||
|
||||
% if course_mode_info['show_upsell'] and not is_course_blocked:
|
||||
<div class="message message-upsell has-actions is-expandable is-shown">
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
<aside class="wrapper-messages-primary">
|
||||
<ul class="messages-list">
|
||||
% if course.may_certify() and cert_status:
|
||||
<%include file='_dashboard_certificate_information.html' args='cert_status=cert_status,course=course, enrollment=enrollment'/>
|
||||
% endif
|
||||
|
||||
% if verification_status.get('status') in [VERIFY_STATUS_NEED_TO_VERIFY, VERIFY_STATUS_SUBMITTED, VERIFY_STATUS_APPROVED, VERIFY_STATUS_NEED_TO_REVERIFY] and not is_course_blocked:
|
||||
<div class="message message-status wrapper-message-primary is-shown">
|
||||
% if verification_status['status'] == VERIFY_STATUS_NEED_TO_VERIFY:
|
||||
<div class="verification-reminder">
|
||||
% if verification_status['days_until_deadline'] is not None:
|
||||
<h4 class="message-title">${_('Verification not yet complete.')}</h4>
|
||||
<p class="message-copy">${ungettext(
|
||||
'You only have {days} day left to verify for this course.',
|
||||
'You only have {days} days left to verify for this course.',
|
||||
verification_status['days_until_deadline']
|
||||
).format(days=verification_status['days_until_deadline'])}</p>
|
||||
% else:
|
||||
<h4 class="message-title">${_('Almost there!')}</h4>
|
||||
<p class="message-copy">${_('You still need to verify for this course.')}</p>
|
||||
% endif
|
||||
</div>
|
||||
<div class="verification-cta">
|
||||
<a href="${reverse('verify_student_verify_later', kwargs={'course_id': unicode(course.id)})}" class="cta" data-course-id="${course.id | h}">${_('Verify Now')}</a>
|
||||
</div>
|
||||
% elif verification_status['status'] == VERIFY_STATUS_SUBMITTED:
|
||||
<h4 class="message-title">${_('You have already verified your ID!')}</h4>
|
||||
<p class="message-copy">${_('Thanks for your patience as we process your request.')}</p>
|
||||
% elif verification_status['status'] == VERIFY_STATUS_APPROVED:
|
||||
<h4 class="message-title">${_('You have already verified your ID!')}</h4>
|
||||
% if verification_status['verification_good_until'] is not None:
|
||||
<p class="message-copy">${_('Your verification status is good until {date}.').format(date=verification_status['verification_good_until'])}
|
||||
% endif
|
||||
% elif verification_status['status'] == VERIFY_STATUS_NEED_TO_REVERIFY:
|
||||
<h4 class="message-title">${_('Your verification will expire soon!')}</h4>
|
||||
## Translators: start_link and end_link will be replaced with HTML tags;
|
||||
## please do not translate these.
|
||||
<p class="message-copy">${_('Your current verification will expire before the verification deadline for this course. {start_link}Re-verify your identity now{end_link} using a webcam and a government-issued ID.').format(start_link='<a href="{href}">'.format(href=reverse('verify_student_reverify')), end_link='</a>')}</p>
|
||||
% endif
|
||||
</div>
|
||||
% endif
|
||||
|
||||
% if course_mode_info['show_upsell'] and not is_course_blocked:
|
||||
<div class="message message-upsell has-actions is-expandable is-shown">
|
||||
<div class="wrapper-tip">
|
||||
<h4 class="message-title">
|
||||
<i class="icon fa fa-caret-down ui-toggle-expansion"></i>
|
||||
@@ -165,136 +323,48 @@ from student.helpers import (
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
%endif
|
||||
% if is_course_blocked:
|
||||
<p id="block-course-msg" class="course-block">
|
||||
${_("You can no longer access this course because payment has not yet been received. "
|
||||
"You can {contact_link_start}contact the account holder{contact_link_end} "
|
||||
"to request payment, or you can "
|
||||
"{unenroll_link_start}unenroll{unenroll_link_end} "
|
||||
"from this course").format(
|
||||
contact_link_start='<a href="#">',
|
||||
contact_link_end='</a>',
|
||||
unenroll_link_start=(
|
||||
'<a id="unregister_block_course" rel="leanModal" '
|
||||
'data-course-id="{course_id}" data-course-number="{course_number}" '
|
||||
'href="#unenroll-modal">'.format(
|
||||
course_id=escape(course.id),
|
||||
course_number=escape(course.number),
|
||||
)
|
||||
),
|
||||
unenroll_link_end="</a>",
|
||||
)}
|
||||
</p>
|
||||
%endif
|
||||
</div>
|
||||
%endif
|
||||
|
||||
% if show_courseware_link:
|
||||
% if course.has_ended():
|
||||
% if not is_course_blocked:
|
||||
<a href="${course_target}" class="enter-course archived">${_('View Archived Course')}</a>
|
||||
% else:
|
||||
<a class="enter-course-blocked archived">${_('View Archived Course')}</a>
|
||||
% endif
|
||||
% else:
|
||||
% if not is_course_blocked:
|
||||
<a href="${course_target}" class="enter-course">${_('View Course')}</a>
|
||||
% else:
|
||||
<a class="enter-course-blocked">${_('View Course')}</a>
|
||||
% endif
|
||||
% endif
|
||||
% endif
|
||||
|
||||
% if is_paid_course and show_refund_option:
|
||||
## Translators: The course's name will be added to the end of this sentence.
|
||||
% if not is_course_blocked:
|
||||
<a href="#unenroll-modal" class="unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the purchased course")}';
|
||||
document.getElementById('refund-info').innerHTML=gettext('You will be refunded the amount you paid.')">
|
||||
${_('Unenroll')}
|
||||
</a>
|
||||
% else:
|
||||
<a class="disable-look-unregister" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the purchased course")}';
|
||||
document.getElementById('refund-info').innerHTML=gettext('You will be refunded the amount you paid.')">
|
||||
${_('Unenroll')}
|
||||
</a>
|
||||
% endif
|
||||
% elif is_paid_course and not show_refund_option:
|
||||
## Translators: The course's name will be added to the end of this sentence.
|
||||
% if not is_course_blocked:
|
||||
<a href="#unenroll-modal" class="unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the purchased course")}';
|
||||
document.getElementById('refund-info').innerHTML=gettext('You will not be refunded the amount you paid.')">
|
||||
${_('Unenroll')}
|
||||
</a>
|
||||
% else:
|
||||
<a class="disable-look-unregister" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the purchased course")}';
|
||||
document.getElementById('refund-info').innerHTML=gettext('You will not be refunded the amount you paid.')">
|
||||
${_('Unenroll')}
|
||||
</a>
|
||||
% endif
|
||||
% elif enrollment.mode != "verified":
|
||||
## Translators: The course's name will be added to the end of this sentence.
|
||||
% if not is_course_blocked:
|
||||
<a href="#unenroll-modal" class="unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from")}'; document.getElementById('refund-info').innerHTML=''">
|
||||
${_('Unenroll')}
|
||||
</a>
|
||||
% else:
|
||||
<a class="disable-look-unregister" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from")}'; document.getElementById('refund-info').innerHTML=''">
|
||||
${_('Unenroll')}
|
||||
</a>
|
||||
% endif
|
||||
% elif show_refund_option:
|
||||
## Translators: The course's name will be added to the end of this sentence.
|
||||
% if not is_course_blocked:
|
||||
<a href="#unenroll-modal" class="unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the verified {cert_name_long} track of").format(cert_name_long=cert_name_long)}';
|
||||
document.getElementById('refund-info').innerHTML=gettext('You will be refunded the amount you paid.')">
|
||||
${_('Unenroll')}
|
||||
</a>
|
||||
% else:
|
||||
<a class="disable-look-unregister" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the verified {cert_name_long} track of").format(cert_name_long=cert_name_long)}';
|
||||
document.getElementById('refund-info').innerHTML=gettext('You will be refunded the amount you paid.')">
|
||||
${_('Unenroll')}
|
||||
</a>
|
||||
% endif
|
||||
% else:
|
||||
## Translators: The course's name will be added to the end of this sentence.
|
||||
% if not is_course_blocked:
|
||||
<a href="#unenroll-modal" class="unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the verified {cert_name_long} track of").format(cert_name_long=cert_name_long)}';
|
||||
document.getElementById('refund-info').innerHTML=gettext('The refund deadline for this course has passed, so you will not receive a refund.')">
|
||||
${_('Unenroll')}
|
||||
</a>
|
||||
% else:
|
||||
<a class="disable-look-unregister" data-course-id="${course.id | h}" data-course-number="${course.number | h}" onclick="document.getElementById('track-info').innerHTML='${_("Are you sure you want to unenroll from the verified {cert_name_long} track of").format(cert_name_long=cert_name_long)}';
|
||||
document.getElementById('refund-info').innerHTML=gettext('The refund deadline for this course has passed, so you will not receive a refund.')">
|
||||
${_('Unenroll')}
|
||||
</a>
|
||||
% endif
|
||||
% endif
|
||||
|
||||
% if show_email_settings:
|
||||
% if not is_course_blocked:
|
||||
<a href="#email-settings-modal" class="email-settings" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-optout="${unicode(course.id) in course_optouts}">${_('Email Settings')}</a>
|
||||
% else:
|
||||
<a class="disable-look-settings" data-course-id="${course.id| h}" data-course-number="${course.number | h}" data-optout="${unicode(course.id) in course_optouts}">${_('Email Settings')}</a>
|
||||
% endif
|
||||
% endif
|
||||
% if is_course_blocked:
|
||||
<p id="block-course-msg" class="course-block">
|
||||
${_("You can no longer access this course because payment has not yet been received. "
|
||||
"You can {contact_link_start}contact the account holder{contact_link_end} "
|
||||
"to request payment, or you can "
|
||||
"{unenroll_link_start}unenroll{unenroll_link_end} "
|
||||
"from this course").format(
|
||||
contact_link_start='<a href="#">',
|
||||
contact_link_end='</a>',
|
||||
unenroll_link_start=(
|
||||
'<a id="unregister_block_course" rel="leanModal" '
|
||||
'data-course-id="{course_id}" data-course-number="{course_number}" '
|
||||
'href="#unenroll-modal">'.format(
|
||||
course_id=escape(course.id),
|
||||
course_number=escape(course.number),
|
||||
)
|
||||
),
|
||||
unenroll_link_end="</a>",
|
||||
)}
|
||||
</p>
|
||||
%endif
|
||||
|
||||
|
||||
% if course_requirements:
|
||||
## Multiple pre-requisite courses are not supported on frontend that's why we are pulling first element
|
||||
<% prc_target = reverse('about_course', args=[unicode(course_requirements['courses'][0]['key'])]) %>
|
||||
<li class="prerequisites">
|
||||
<p class="tip">
|
||||
${_("You must successfully complete {link_start}{prc_display}{link_end} before you begin this course.").format(
|
||||
link_start='<a href="{}">'.format(prc_target),
|
||||
link_end='</a>',
|
||||
prc_display=course_requirements['courses'][0]['display'],
|
||||
)}
|
||||
</p>
|
||||
</li>
|
||||
% endif
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
</section>
|
||||
% if course_requirements:
|
||||
## Multiple pre-requisite courses are not supported on frontend that's why we are pulling first element
|
||||
<% prc_target = reverse('about_course', args=[unicode(course_requirements['courses'][0]['key'])]) %>
|
||||
<section class="prerequisites">
|
||||
<p class="tip">
|
||||
${_("You must successfully complete {link_start}{prc_display}{link_end} before you begin this course.").format(
|
||||
link_start='<a href="{}">'.format(prc_target),
|
||||
link_end='</a>',
|
||||
prc_display=course_requirements['courses'][0]['display'],
|
||||
)}
|
||||
</p>
|
||||
</section>
|
||||
% endif
|
||||
</article>
|
||||
</article>
|
||||
</li>
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user