Skip to content

E
edx-platform
Commit dfcb3f2b by Marco Morales
Options

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
parent e1251bfe
Showing with 1020 additions and 858 deletions
common/test/acceptance/pages/lms/dashboard.py
......@@ -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):
......
lms/static/js/dashboard/legacy.js
......@@ -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,
......
lms/static/sass/_shame.scss
......@@ -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;
......
lms/static/sass/base/_base.scss
......@@ -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);
......
lms/static/sass/base/_extends.scss
......@@ -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;
}
lms/static/sass/elements/_typography.scss
......@@ -41,6 +41,7 @@
}
%t-title3 {
@extend %t-title;
@include font-size(36);
@include line-height(36);
}
......
lms/static/sass/multicourse/_dashboard.scss
// 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);
* {
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;
}
&.current {
background: $link-color;
}
}
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);
// status
.status {
img {
width: 100%;
border: 1px solid $border-color-1;
.list--nav {
margin: ($baseline/2) 0 0 0;
padding: 0;
}
}
h5 {
margin-bottom: 8px;
margin-left: ($baseline/4);
a {
font-size: 16px;
font-weight: 700;
.nav__item {
@extend %t-weight4;
@include font-size(13);
margin-left: 26px;
}
}
.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%;
.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;
.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;
&: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%;
}
}
.wrapper-course-details {
display: block;
@include float(left);
width: flex-grid(9);
padding: 0;
height: 120px;
}
h3 a, h3 span {
.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,563 +553,533 @@
}
}
.prerequisites {
@include clearfix;
// ====================
.tip {
font-family: $sans-serif;
font-size: 1em;
color: $lighter-base-font-color;
margin-top: ($baseline/2);
}
// UI: message
.wrapper-message-primary {
@include clearfix();
}
// "enrolled as" status
.sts-enrollment {
position: absolute;
top: 105px;
@include left(0);
display: inline-block;
text-align: center;
width: 200px;
.messages-list {
margin: 0;
padding: 0;
}
.label {
@extend %text-sr;
}
.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;
.deco-graphic {
position: absolute;
top: -5px;
right: -8px;
// STATE: shown
&.is-shown {
display: block;
}
.sts-enrollment-value {
@extend %ui-depth1;
@extend %copy-badge;
font-size: 0.6em;
line-height: 1.5em;
font-weight: 600;
border-radius: 0;
padding: 1px ($baseline/2);
color: white;
a {
font-family: $sans-serif;
}
}
// ====================
strong {
font-weight: 700;
// CASE: "enrolled as" status - professional ed
&.professional {
a {
font-weight: 700;
}
}
// changes to cover
.cover {
border-color: $professional-color-lvl3;
padding: ($baseline/10);
.actions {
@include clearfix();
list-style: none;
margin: 0;
padding: 0;
}
// course enrollment status message
.sts-enrollment {
.label {
@extend %text-sr;
}
.message-title,
.message-copy .title {
@extend %t-title6;
@extend %t-weight4;
line-height: 1em;
margin-bottom: ($baseline/4);
}
// status message
.sts-enrollment-value {
background: $professional-color-lvl3;
}
.message-copy,
.message-copy .copy {
@extend %t-copy-sub1;
margin: 2px 0 0 0;
}
}
// CASE: "enrolled as" status - verified
&.verified {
// CASE: expandable
&.is-expandable {
// changes to cover
.cover {
border-color: $verified-color-lvl1;
padding: ($baseline/10);
}
.wrapper-tip {
// course enrollment status message
.sts-enrollment {
.label {
@extend %text-sr;
.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;
}
}
}
.deco-graphic {
@extend %ui-depth3;
width: 40px;
position: absolute;
top: -4px;
right: -6px;
.wrapper-extended {
@include transition(opacity $tmg-f2 ease-in-out 0);
display: none;
opacity: 0.0;
}
// status message
.sts-enrollment-value {
background: $verified-color-lvl1;
// STATE: is expanded
&.is-expanded {
.ui-toggle-expansion {
@include transform(rotate(0));
@include transform-origin(50% 50%);
}
.wrapper-extended {
display: block;
opacity: 1.0;
}
}
}
}
// CASE: "enrolled as" status - honor code
&.honor {
// TYPE: upsell
.message-upsell {
// changes to cover
.cover {
border-color: $honorcode-color-lvl2;
padding: ($baseline/10);
}
.wrapper-tip {
@include clearfix();
// status message
.sts-enrollment-value {
background: $honorcode-color-lvl1;
}
}
.message-title {
float: left;
}
// CASE: "enrolled as" status - auditing
&.audit {
.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);
// changes to cover
.cover {
border-color: $audit-color-lvl2;
padding: ($baseline/10);
}
@include rtl {
@include transform(rotate(90deg));
}
// status message
.sts-enrollment-value {
background: $audit-color-lvl1;
}
}
}
@include ltr {
@include transform(rotate(-90deg));
}
}
// ====================
.message-copy {
float: right;
}
}
// UI: message
.wrapper-message-primary {
@include clearfix();
}
.wrapper-extended {
padding: ($baseline/2) 0;
.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;
}
.message-copy {
margin-bottom: $baseline;
}
}
a {
font-family: $sans-serif;
}
.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);
}
strong {
font-weight: 700;
span {
color: $white; // nasty but needed override for poor <span> styling
}
a {
font-weight: 700;
.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;
}
}
}
}
.actions {
@include clearfix();
list-style: none;
margin: 0;
padding: 0;
}
// TYPE: status
.message-status {
background: tint($yellow,70%);
border-color: $gray-l3;
.message-title,
.message-copy .title {
@extend %t-title6;
@extend %t-weight4;
line-height: 1em;
margin-bottom: ($baseline/4);
}
.message-copy {
@extend %t-copy-sub1;
margin: 0;
.message-copy,
.message-copy .copy {
@extend %t-copy-sub1;
margin: 2px 0 0 0;
}
.grade-value {
font-size: 1.2rem;
font-weight: bold;
}
}
// CASE: expandable
&.is-expandable {
.actions {
.wrapper-tip {
.action {
float: left;
margin: 0 15px 0 0;
.message-title, .message-copy {
margin-bottom: 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%);
}
}
}
.message-title .value, .message-copy {
@include transition(color $tmg-f2 ease-in-out 0s);
.cta {
float: left;
font: normal 0.8rem/1.2rem $sans-serif;
letter-spacing: 1px;
padding: 6px 12px;
text-align: center;
}
}
}
// STATE: hover
&:hover {
cursor: pointer;
.exam-registration-number {
font-family: $sans-serif;
font-size: 18px;
.message-title .value, .message-copy, .ui-toggle-expansion {
color: $link-color;
a {
font-family: $sans-serif;
}
}
}
.wrapper-extended {
@include transition(opacity $tmg-f2 ease-in-out 0);
display: none;
opacity: 0.0;
}
// STATE: is expanded
&.is-expanded {
&.exam-register {
.ui-toggle-expansion {
@include transform(rotate(0));
@include transform-origin(50% 50%);
.message-copy {
margin-top: ($baseline/4);
width: 55%;
}
}
.wrapper-extended {
display: block;
opacity: 1.0;
&.exam-schedule {
.exam-button {
margin-top: ($baseline/4);
}
}
}
}
}
// TYPE: upsell
.message-upsell {
.wrapper-tip {
@include clearfix();
.exam-button {
@include button(simple, $pink);
margin-top: 0;
float: right;
}
.message-title {
float: left;
}
.contact-button {
@include button(simple, $pink);
}
.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);
.button {
display: inline-block;
margin-top: ($baseline/2);
padding: 9px 18px 10px;
font-size: 13px;
font-weight: bold;
letter-spacing: 0;
@include rtl {
@include transform(rotate(90deg));
&:hover, &:focus {
text-decoration: none;
}
}
@include ltr {
@include transform(rotate(-90deg));
&.course-status-processing {
background-color: $gray-l5;
border: 0;
}
}
.message-copy {
float: right;
}
}
&.course-status-certnotavailable {
background-color: $gray-l5;
border: 0;
}
.wrapper-extended {
padding: ($baseline/2) 0;
&.course-status-certrendering {
background-color: $gray-l5;
border: 0;
.message-copy {
margin-bottom: $baseline;
}
}
.cta {
margin-top: 2px;
}
}
.action-upgrade {
@extend %btn-primary-green;
@include clearfix();
position: relative;
left: ($baseline/2);
padding: 8px $baseline 8px ($baseline*2);
&.course-status-certavailable {
background-color: $gray-l5;
border: 0;
.deco-graphic {
position: absolute;
top: -($baseline/4);
left: -($baseline*0.75);
width: ($baseline*2);
}
.message-copy {
width: flex-grid(6, 12);
position: relative;
@include float(left);
}
span {
color: $white; // nasty but needed override for poor <span> styling
}
.actions-primary {
width: flex-grid(6, 12);
position: relative;
@include float(right);
.copy, .copy-sub {
display: inline-block;
vertical-align: middle;
}
.action {
@include margin(0, 0, ($baseline/2), ($baseline*.75));
float: none;
text-align: center;
.copy {
@extend %t-action3;
@extend %t-weight4;
margin-right: $baseline;
}
&:last-child {
margin-bottom: 0;
}
.copy-sub {
@extend %t-action4;
opacity: 0.875;
}
}
}
.btn {
float: none;
}
}
// TYPE: status
.message-status {
background: tint($yellow,70%);
border-color: $gray-l3;
.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;
.message-copy {
@extend %t-copy-sub1;
margin: 0;
a:link, a:visited {
color: #fff;
}
}
.grade-value {
font-size: 1.2rem;
font-weight: bold;
}
}
.action-share .btn {
display: inline;
letter-spacing: 0;
}
}
}
.actions {
.actions-secondary {
margin-top: ($baseline/2);
border-top: 1px solid $gray-l4;
padding-top: ($baseline/2);
.action {
float: left;
margin: 0 15px 0 0;
.action-share {
@include float(right);
margin: 0;
}
}
.btn, .cta {
display: inline-block;
.certificate-explanation {
@extend %t-copy-sub1;
margin-top: ($baseline/2);
border-top: 1px solid $gray-l4;
padding-top: ($baseline/2);
}
.btn {
@include box-sizing(border-box);
border-radius: 3px;
.verification-reminder {
width: flex-grid(8, 12);
position: relative;
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 {
.verification-cta {
width: flex-grid(4, 12);
position: relative;
float: left;
font: normal 0.8rem/1.2rem $sans-serif;
letter-spacing: 1px;
padding: 6px 12px;
text-align: center;
.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;
}
}
}
}
.exam-registration-number {
font-family: $sans-serif;
font-size: 18px;
// TYPE: pre-requisites
.prerequisites {
@include clearfix;
a {
font-family: $sans-serif;
.tip {
font-family: $sans-serif;
font-size: 1em;
color: $lighter-base-font-color;
margin-top: ($baseline/2);
}
}
}
&.exam-register {
// "enrolled as" status
.sts-enrollment {
position: absolute;
top: 105px;
@include left(0);
display: inline-block;
text-align: center;
width: 200px;
.message-copy {
margin-top: ($baseline/4);
width: 55%;
.label {
@extend %text-sr;
}
}
&.exam-schedule {
.exam-button {
margin-top: ($baseline/4);
.deco-graphic {
position: absolute;
top: -5px;
right: -8px;
}
}
.exam-button {
@include button(simple, $pink);
margin-top: 0;
float: right;
.sts-enrollment-value {
@extend %ui-depth1;
@extend %copy-badge;
font-size: 0.6em;
line-height: 1.5em;
font-weight: 600;
border-radius: 0;
padding: 1px ($baseline/2);
color: white;
}
}
.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;
// CASE: "enrolled as" status - professional ed
&.professional {
&:hover, &:focus {
text-decoration: none;
// changes to cover
.cover {
border-color: $professional-color-lvl3;
padding: ($baseline/10);
}
}
&.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;
// course enrollment status message
.sts-enrollment {
.label {
@extend %text-sr;
}
.cta {
margin-top: 2px;
// status message
.sts-enrollment-value {
background: $professional-color-lvl3;
}
}
}
&.course-status-certavailable {
background-color: $gray-l5;
border: 0;
// CASE: "enrolled as" status - verified
&.verified {
.message-copy {
width: flex-grid(6, 12);
position: relative;
@include float(left);
// changes to cover
.cover {
border-color: $verified-color-lvl1;
padding: ($baseline/10);
}
.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;
}
// course enrollment status message
.sts-enrollment {
.label {
@extend %text-sr;
}
.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;
}
.deco-graphic {
@extend %ui-depth3;
width: 40px;
position: absolute;
top: -4px;
right: -6px;
}
.action-share .btn {
display: inline;
letter-spacing: 0;
// status message
.sts-enrollment-value {
background: $verified-color-lvl1;
}
}
}
.actions-secondary {
margin-top: ($baseline/2);
border-top: 1px solid $gray-l4;
padding-top: ($baseline/2);
// CASE: "enrolled as" status - honor code
&.honor {
.action-share {
@include float(right);
margin: 0;
// changes to cover
.cover {
border-color: $honorcode-color-lvl2;
padding: ($baseline/10);
}
}
.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;
// status message
.sts-enrollment-value {
background: $honorcode-color-lvl1;
}
}
.verification-cta {
width: flex-grid(4, 12);
position: relative;
float: left;
// CASE: "enrolled as" status - auditing
&.audit {
.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;
// changes to cover
.cover {
border-color: $audit-color-lvl2;
padding: ($baseline/10);
}
}
}
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;
// status message
.sts-enrollment-value {
background: $audit-color-lvl1;
}
}
}
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;
}
.wrapper-msg {
padding-bottom: 0;
.msg {
@include clearfix();
font-family: $sans-serif;
padding-bottom: $baseline;
border-bottom: thin solid $gray;
&:empty {
display: none;
}
&.title {
@extend %t-title5;
@extend %t-weight4;
font-family: $f-sans-serif;
.wrapper-msg {
padding-bottom: 0;
// Overriding Platform h2 styles
text-transform: none;
letter-spacing: 0;
}
.msg {
@include clearfix();
font-family: $sans-serif;
padding-bottom: $baseline;
border-bottom: thin solid $gray;
&.has-actions {
&.title {
@extend %t-title5;
@extend %t-weight4;
font-family: $f-sans-serif;
.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;
}
}
}
}
}
}
}
lms/templates/dashboard.html
......@@ -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>
......
lms/templates/dashboard/_dashboard_course_listing.html
......@@ -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>
<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
</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>
</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
<%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>
% 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
</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'])}
% 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
% 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>
</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">
% 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_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 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>
% 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
% 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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment