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 598 additions and 436 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,67 +289,210 @@
@include clearfix();
@extend %ui-depth2;
position: relative;
padding: ($baseline/2);
.details {
@include clearfix();
.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;
@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);
&:before {
content: "";
display: block;
padding-top: 75%; // 4:3 aspect ratio
}
img {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
min-height: 100%;
}
}
.info {
@include clearfix();
@include padding(0, 10px, 0, 230px);
.wrapper-course-details {
display: block;
@include float(left);
width: flex-grid(9);
padding: 0;
height: 120px;
}
> hgroup {
.course-title {
border-bottom: 2px solid $gray-l5;
a, span {
@extend %t-title3;
@extend %t-light;
display: block;
margin-bottom: ($baseline/2);
&:hover, &:focus {
text-decoration: none;
}
}
}
.course-info {
display: block;
@include float(left);
width: flex-grid(4);
padding: 0;
width: 100%;
margin-top: ($baseline/2);
.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;
[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;
}
}
.date-block {
// UI: general actions dropdown layout
.wrapper-action-more {
.actions-dropdown {
@extend %ui-no-list;
@extend %ui-depth1;
display: none;
position: absolute;
top: 0;
@include right(0);
font-family: $sans-serif;
font-size: 13px;
font-style: italic;
color: $lighter-base-font-color;
top: ($baseline*2);
left: 17px;
pointer-events: none;
min-width: ($baseline*6.5);
&.is-expanded {
display: block;
pointer-events: auto;
}
h3 a, h3 span {
.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-bottom: ($baseline/2);
font-family: $sans-serif;
font-size: 34px;
line-height: 42px;
font-weight: 300;
margin: 0;
&.is-hidden {
display: none;
}
.action {
@include margin-right(0);
&:hover, &:focus {
text-decoration: none;
border: 1px solid transparent;
}
}
}
}
}
}
......@@ -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,133 +553,6 @@
}
}
.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;
top: 105px;
@include left(0);
display: inline-block;
text-align: center;
width: 200px;
.label {
@extend %text-sr;
}
.deco-graphic {
position: absolute;
top: -5px;
right: -8px;
}
.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;
}
}
// ====================
// CASE: "enrolled as" status - professional ed
&.professional {
// changes to cover
.cover {
border-color: $professional-color-lvl3;
padding: ($baseline/10);
}
// course enrollment status message
.sts-enrollment {
.label {
@extend %text-sr;
}
// status message
.sts-enrollment-value {
background: $professional-color-lvl3;
}
}
}
// CASE: "enrolled as" status - verified
&.verified {
// changes to cover
.cover {
border-color: $verified-color-lvl1;
padding: ($baseline/10);
}
// course enrollment status message
.sts-enrollment {
.label {
@extend %text-sr;
}
.deco-graphic {
@extend %ui-depth3;
width: 40px;
position: absolute;
top: -4px;
right: -6px;
}
// status message
.sts-enrollment-value {
background: $verified-color-lvl1;
}
}
}
// CASE: "enrolled as" status - honor code
&.honor {
// changes to cover
.cover {
border-color: $honorcode-color-lvl2;
padding: ($baseline/10);
}
// status message
.sts-enrollment-value {
background: $honorcode-color-lvl1;
}
}
// CASE: "enrolled as" status - auditing
&.audit {
// changes to cover
.cover {
border-color: $audit-color-lvl2;
padding: ($baseline/10);
}
// status message
.sts-enrollment-value {
background: $audit-color-lvl1;
}
}
}
// ====================
// UI: message
......@@ -619,15 +560,19 @@
@include clearfix();
}
.messages-list {
margin: 0;
padding: 0;
}
.message {
@extend %ui-depth1;
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;
background: $gray-l5;
border: 1px solid $gray-l4;
// STATE: shown
&.is-shown {
......@@ -710,7 +655,6 @@
}
}
}
}
// TYPE: upsell
.message-upsell {
......@@ -1004,45 +948,139 @@
}
}
a.unenroll {
@include float(right);
display: block;
font-style: italic;
// TYPE: pre-requisites
.prerequisites {
@include clearfix;
.tip {
font-family: $sans-serif;
font-size: 1em;
color: $lighter-base-font-color;
text-decoration: underline;
font-size: .8em;
margin-top: 32px;
margin-top: ($baseline/2);
}
}
}
&:hover, &:focus {
color: #333;
// "enrolled as" status
.sts-enrollment {
position: absolute;
top: 105px;
@include left(0);
display: inline-block;
text-align: center;
width: 200px;
.label {
@extend %text-sr;
}
.deco-graphic {
position: absolute;
top: -5px;
right: -8px;
}
a.email-settings {
@extend a.unenroll;
@include margin-right(10px);
.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;
}
}
// account-related
.user-info {
// ====================
// status
.status {
// CASE: "enrolled as" status - professional ed
&.professional {
.list--nav {
margin: ($baseline/2) 0 0 0;
padding: 0;
// changes to cover
.cover {
border-color: $professional-color-lvl3;
padding: ($baseline/10);
}
.nav__item {
@extend %t-weight4;
@include font-size(13);
margin-left: 26px;
// course enrollment status message
.sts-enrollment {
.label {
@extend %text-sr;
}
// status message
.sts-enrollment-value {
background: $professional-color-lvl3;
}
}
}
// CASE: "enrolled as" status - verified
&.verified {
// changes to cover
.cover {
border-color: $verified-color-lvl1;
padding: ($baseline/10);
}
// course enrollment status message
.sts-enrollment {
.label {
@extend %text-sr;
}
.deco-graphic {
@extend %ui-depth3;
width: 40px;
position: absolute;
top: -4px;
right: -6px;
}
// status message
.sts-enrollment-value {
background: $verified-color-lvl1;
}
}
}
// CASE: "enrolled as" status - honor code
&.honor {
// changes to cover
.cover {
border-color: $honorcode-color-lvl2;
padding: ($baseline/10);
}
// status message
.sts-enrollment-value {
background: $honorcode-color-lvl1;
}
}
// CASE: "enrolled as" status - auditing
&.audit {
// changes to cover
.cover {
border-color: $audit-color-lvl2;
padding: ($baseline/10);
}
// status message
.sts-enrollment-value {
background: $audit-color-lvl1;
}
}
}
}
// status - language
.status-language {
......@@ -1227,6 +1265,7 @@
border:0;
color:white;
box-shadow:none;
&.archived {
@include button(simple, $button-archive-color);
font: normal 15px/1.6rem $sans-serif;
......@@ -1237,32 +1276,19 @@
}
}
}
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;
......@@ -1335,5 +1361,5 @@
}
}
}
}
}
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
......@@ -46,7 +46,6 @@ from student.helpers import (
<%
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">
......@@ -86,20 +85,180 @@ from student.helpers import (
${_("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>
<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
......@@ -142,7 +301,6 @@ from student.helpers import (
% 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>
......@@ -167,6 +325,7 @@ from student.helpers import (
</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. "
......@@ -189,102 +348,11 @@ from student.helpers import (
</p>
%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
</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">
<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),
......@@ -292,9 +360,11 @@ from student.helpers import (
prc_display=course_requirements['courses'][0]['display'],
)}
</p>
</section>
</li>
% endif
</article>
</ul>
</aside>
</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