Skip to content

E
edx-platform
Commit bd5b0b31 by Marco Morales
Options

Matt - javascript and test changes, Marco - styling feedback from initial reviews

parent 58618d8c
Showing with 451 additions and 543 deletions
common/djangoapps/student/tests/test_bulk_email_settings.py
......@@ -40,9 +40,9 @@ class TestStudentDashboardEmailView(ModuleStoreTestCase):
self.url = reverse('dashboard')
# URL for email settings modal
self.email_modal_link = (
'<a href="#email-settings-modal" class="email-settings" rel="leanModal" '
'<a href="#email-settings-modal" class="action action-email-settings" rel="leanModal" '
'data-course-id="{org}/{num}/{name}" data-course-number="{num}" '
'data-optout="False">Email Settings</a>'
'data-dashboard-index="0" data-optout="False">Email Settings</a>'
).format(
org=self.course.org,
num=self.course.number,
......@@ -86,7 +86,6 @@ class TestStudentDashboardEmailView(ModuleStoreTestCase):
# Assert that the URL for the email view is not in the response
# if this course isn't authorized
response = self.client.get(self.url)
print response.content
self.assertTrue(self.email_modal_link in response.content)
......@@ -112,9 +111,9 @@ class TestStudentDashboardEmailViewXMLBacked(ModuleStoreTestCase):
# URL for email settings modal
self.email_modal_link = (
'<a href="#email-settings-modal" class="email-settings" rel="leanModal" '
'<a href="#email-settings-modal" class="action action-email-settings" rel="leanModal" '
'data-course-id="{org}/{num}/{name}" data-course-number="{num}" '
'data-optout="False">Email Settings</a>'
'data-dashboard-index="0" data-optout="False">Email Settings</a>'
).format(
org='edX',
num='toy',
......
common/test/acceptance/pages/lms/dashboard.py
......@@ -45,9 +45,7 @@ class DashboardPage(PageObject):
Return list of the names of available courses (e.g. "999 edX Demonstration Course")
"""
def _get_course_name(el):
# The first component in the link text is the course number
course_name = el.text
return course_name
return el.text
return self.q(css='h3.course-title > a').map(_get_course_name).results
......@@ -64,7 +62,7 @@ class DashboardPage(PageObject):
@property
def username(self):
"""Return the displayed value for the user's username"""
return self.q(css='.user-name').text[0]
return self.q(css='.username-label').text[0]
def get_enrollment_mode(self, course_name):
"""Get the enrollment mode for a given course on the dashboard.
......@@ -113,7 +111,7 @@ class DashboardPage(PageObject):
el = course_listing[0]
# Expand the upsell copy and click the upgrade button
el.find_element_by_css_selector('.message-upsell').click()
el.find_element_by_css_selector('.message-upsell .ui-toggle-expansion').click()
el.find_element_by_css_selector('#upgrade-to-verified').click()
upgrade_page.wait_for_page()
......@@ -176,4 +174,4 @@ class DashboardPage(PageObject):
"""
Verify if pre-requisite course messages are being displayed.
"""
return self.q(css='section.prerequisites > .tip').visible
return self.q(css='li.prerequisites > .tip').visible
lms/djangoapps/courseware/features/registration.py
......@@ -47,7 +47,14 @@ def i_should_see_that_course_in_my_dashboard(_step, doesnt_appear, course):
@step(u'I unenroll from the course numbered "([^"]*)"')
def i_unenroll_from_that_course(_step, course):
unregister_css = 'section.info a[href*="#unenroll-modal"][data-course-number*="%s"]' % course
more_actions_dropdown_link_selector = '[id*=actions-dropdown-link-0]'
assert world.is_css_present(more_actions_dropdown_link_selector)
world.css_click(more_actions_dropdown_link_selector)
unregister_css = 'li.actions-item a.action-unenroll[data-course-number*="{course_number}"][href*=unenroll-modal]'.format(course_number=course)
assert world.is_css_present(unregister_css)
world.css_click(unregister_css)
button_css = 'section#unenroll-modal input[value="Unenroll"]'
assert world.is_css_present(button_css)
world.css_click(button_css)
lms/static/js/dashboard/legacy.js
......@@ -97,14 +97,26 @@
}
function toggleCourseActionsDropdown(event) {
var dropdown = $(event.target).closest('.action-more').find('.actions-dropdown-list')
event.preventDefault();
$(this).toggleClass('is-visible');
var dashboard_index = $(this).data('dashboard-index');
// Toggle the visibility control for the selected element and set the focus
var dropdown_selector = 'div#actions-dropdown-' + dashboard_index;
var dropdown = $(dropdown_selector);
dropdown.toggleClass('is-visible');
if (dropdown.hasClass('is-visible')) {
dropdown.attr('tabindex', -1);
} else {
dropdown.removeAttr('tabindex');
}
// add BI event here
// Inform the ARIA framework that the dropdown has been expanded
var anchor_selector = 'a#actions-dropdown-link-' + dashboard_index;
var anchor = $(anchor_selector);
var aria_expanded_state = (anchor.attr('aria-expanded') === 'true');
anchor.attr('aria-expanded', !aria_expanded_state);
// Suppress the actual click event from the browser
event.preventDefault();
}
$("#failed-verification-button-dismiss").click(function() {
......@@ -122,7 +134,7 @@
Logger.log('edx.course.enrollment.upgrade.clicked', [user, course], null);
});
$(".email-settings").click(function(event) {
$(".action-email-settings").click(function(event) {
$("#email_settings_course_id").val( $(event.target).data("course-id") );
$("#email_settings_course_number").text( $(event.target).data("course-number") );
if($(event.target).data("optout") === "False") {
......@@ -130,7 +142,7 @@
}
});
$(".unenroll").click(function(event) {
$(".action-unenroll").click(function(event) {
$("#unenroll_course_id").val( $(event.target).data("course-id") );
$("#unenroll_course_number").text( $(event.target).data("course-number") );
});
......@@ -247,8 +259,8 @@
"#dashboard-main"
);
$(".email-settings").each(function(index){
$(this).attr("id", "unenroll-" + index);
$(".action-email-settings").each(function(index){
$(this).attr("id", "email-settings-" + index);
// a bit of a hack, but gets the unique selector for the modal trigger
var trigger = "#" + $(this).attr("id");
accessibleModal(
......@@ -259,8 +271,8 @@
);
});
$(".unenroll").each(function(index){
$(this).attr("id", "email-settings-" + index);
$(".action-unenroll").each(function(index){
$(this).attr("id", "unenroll-" + index);
// a bit of a hack, but gets the unique selector for the modal trigger
var trigger = "#" + $(this).attr("id");
accessibleModal(
......
lms/static/sass/base/_variables.scss
......@@ -133,6 +133,11 @@ $green-u1: desaturate($green,15%);
$green-u2: desaturate($green,30%);
$green-u3: desaturate($green,45%);
// COLORS: social platforms
$twitter-blue: #55ACEE;
$facebook-blue: #3B5998;
$linkedin-blue: #0077B5;
// TODO: both blue and yellow variables differ from CMS rgb value, need to confirm change to CMS variable is ok in current platform uses before switching.
$blue: rgb(29,157,217);
$yellow: rgb(255, 252, 221);
......
lms/static/sass/multicourse/_dashboard.scss
......@@ -4,6 +4,8 @@
// Table of Contents
// * +Dashboard - Sidebar
// * +Dashboard - Course Listing
// * +Dashboard - Course Item
// * +Misc - Uncategorized
// * +Dashboard - Banner
......@@ -22,17 +24,21 @@
.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);
.user-name {
@extend %t-title6;
.username-header {
margin-bottom: 0;
}
.username-label {
@extend %t-title7;
@extend %t-ultrastrong;
@extend %cont-truncated;
text-align: center;
display: block;
margin: 0;
padding: $baseline $baseline 0;
padding: ($baseline*0.75) $baseline;
color: $base-font-color;
text-transform: none;
}
......@@ -279,286 +285,306 @@
}
}
}
}
}
// ====================
// UI: individual course item
.course {
@include box-sizing(box);
@include transition(all 0.15s linear 0s);
// +Dashboard - Course
// ====================
.dashboard .my-courses {
// UI: individual course item
.course {
@include box-sizing(box);
@include transition(all 0.15s linear 0s);
@include clearfix();
@extend %ui-depth2;
position: relative;
margin: ($baseline/2);
.details {
@include clearfix();
@extend %ui-depth2;
position: relative;
padding: ($baseline/2);
.details {
@include clearfix();
.wrapper-course-image {
@include float(left);
@include margin-right(flex-gutter());
width: flex-grid(3);
.cover {
@include box-sizing(border-box);
@include transition(all 0.15s linear 0s);
@include float(left);
@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);
max-height: 120px;
border-radius: ($baseline/5);
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
}
img {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
.course-image {
width: 100%;
}
}
.wrapper-course-details {
display: block;
// "enrolled as" status
.sts-enrollment {
@include float(left);
width: flex-grid(9);
padding: 0;
height: 120px;
}
width: 100%;
position: relative;
bottom: 15px;
display: inline-block;
text-align: center;
.course-title {
border-bottom: 2px solid $gray-l5;
.label {
@extend %text-sr;
}
a, span {
@extend %t-title3;
@extend %t-light;
display: block;
margin-bottom: ($baseline/2);
.deco-graphic {
position: absolute;
top: -5px;
@include right(0);
}
&:hover, &:focus {
text-decoration: none;
}
.sts-enrollment-value {
@extend %ui-depth1;
@extend %copy-badge;
@extend %t-demi-strong;
font-size: 0.6em;
line-height: 1.5em;
border-radius: 0;
padding: 1px ($baseline/4);
color: white;
}
}
}
.course-info {
display: block;
@include float(left);
width: flex-grid(4);
padding: 0;
margin-top: ($baseline/2);
.wrapper-course-details {
display: block;
@include float(left);
width: flex-grid(9);
padding: 0;
}
[class*="info-"] {
color: $gray-d1;
@extend %t-title6;
display: inline-block;
}
.course-title {
.info-date-block {
@extend %t-title7;
color: $gray-l1;
display: block;
a, span {
@extend %t-title3;
@extend %t-light;
display: inline-block;
margin-bottom: ($baseline/2);
&:hover, &:focus {
text-decoration: none;
}
}
}
.course-info {
display: block;
@include float(left);
width: flex-grid(4);
padding: 0;
margin-top: ($baseline/2);
[class*="info-"] {
color: $gray-d1;
@extend %t-title6;
display: inline-block;
}
.wrapper-course-actions {
.info-date-block {
@extend %t-title7;
color: $gray-l1;
display: block;
@include float(right);
width: flex-grid(8);
padding: 0;
margin-top: ($baseline/2);
}
}
.course-actions {
position: relative;
top: 50%;
transform: translateY(-50%);
.wrapper-course-actions {
display: block;
@include float(right);
width: flex-grid(8);
padding: 0;
margin-top: ($baseline/2);
}
// UI: course item actions
.course-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;
}
// UI: course item actions
// STATE: is-disabled
&.is-disabled {
color: #808080;
color: $gray-l4;
}
.action {
@include box-sizing(border-box);
@include margin-right($baseline/2);
@include float(right);
min-width: ($baseline*2);
color: $gray-l1;
border-radius: 3px;
padding: 12px;
border: 1px solid $white;
&:hover, &:focus {
color: $gray-d3;
border: 1px solid $gray-l4;
}
// TYPE: facebook share
&.action-facebook, {
color: #3b5998;
}
// STATE: is-disabled
&.is-disabled {
color: $gray-l4;
}
// TYPE: twitter share
&.action-twitter {
color: #55ACEE;
}
// TYPE: facebook share
&.action-facebook, {
color: $facebook-blue;
}
// UI: general actions dropdown layout
.wrapper-action-more {
// TYPE: twitter share
&.action-twitter {
color: $twitter-blue;
}
}
.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);
// UI: general actions dropdown layout
.wrapper-action-more {
display: inline-block;
position: relative;
@include float(right);
&.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;
}
.actions-dropdown {
@extend %ui-no-list;
@extend %ui-depth1;
display: none;
position: absolute;
top: ($baseline*2);
right: 19px;
pointer-events: none;
min-width: ($baseline*7);
&:after {
border-color: $transparent;
border-bottom-color: $white;
border-width: 6px;
@include margin-right(1px);
}
&.is-visible {
display: block;
pointer-events: auto;
}
&:before {
border-color: $transparent;
border-bottom-color: $gray-l3;
border-width: 7px;
}
.actions-dropdown-list {
@extend %ui-no-list;
@include box-sizing(border-box);
display: table;
box-shadow: 0 1px 1px $shadow-l1;
position: relative;
width: 100%;
border-radius: 3px;
margin: ($baseline/4) 0 0 0;
border: 1px solid $gray-l3;
padding: ($baseline/4) ($baseline/2);
background: $white;
// ui triangle/nub
&:after,
&:before {
bottom: 100%;
@include right(3px);
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.actions-item {
@extend %t-title7;
display: block;
margin: 0;
&:after {
border-color: $transparent;
border-bottom-color: $white;
border-width: 6px;
@include margin-right(1px);
}
&.is-hidden {
display: none;
}
&:before {
border-color: $transparent;
border-bottom-color: $gray-l3;
border-width: 7px;
}
}
.action {
@include margin-right(0);
.actions-item {
@extend %t-title7;
display: block;
margin: 0;
&:hover, &:focus {
border: 1px solid transparent;
}
}
&.is-hidden {
display: none;
}
.action {
@include margin-right(0);
&:hover, &:focus {
border: 1px solid transparent;
}
}
}
}
}
}
.course-status {
background: $yellow;
border: 1px solid $border-color-2;
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
margin-top: 17px;
margin-right: flex-gutter();
padding: ($baseline/4);
width: flex-grid(8);
float: left;
@include box-sizing(border-box);
.course-status {
background: $yellow;
border: 1px solid $border-color-2;
box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
margin-top: 17px;
margin-right: flex-gutter();
padding: ($baseline/4);
width: flex-grid(8);
@include float(left);
@include box-sizing(border-box);
p {
color: $lighter-base-font-color;
font-style: italic;
letter-spacing: 1px;
text-align: center;
}
p {
color: $lighter-base-font-color;
font-style: italic;
letter-spacing: 1px;
text-align: center;
}
}
.course-status-completed {
background: $gray-l3;
color: $very-light-text;
.course-status-completed {
background: $gray-l3;
color: $very-light-text;
p {
color: #222;
p {
color: $gray-d4;
span {
font-weight: bold;
}
span {
font-weight: bold;
}
}
}
.enter-course {
@include button(simple, $button-color);
@include box-sizing(border-box);
border-radius: 3px;
@include float(right);
font: normal 15px/1.6rem $sans-serif;
letter-spacing: 0;
text-align: center;
&.archived {
@include button(simple, $button-archive-color);
font: normal 15px/1.6rem $sans-serif;
.enter-course {
@include button(simple, $button-color);
@include box-sizing(border-box);
border-radius: 3px;
@include float(right);
font: normal 15px/1.6rem $sans-serif;
letter-spacing: 0;
text-align: center;
&:hover, &:focus {
text-decoration: none;
}
}
&.archived {
@include button(simple, $button-archive-color);
font: normal 15px/1.6rem $sans-serif;
&:hover, &:focus {
text-decoration: none;
}
}
&:hover, &:focus {
text-decoration: none;
}
}
}
// ====================
// ====================
// UI: message
.wrapper-message-primary {
@include clearfix();
}
// UI: messages
.wrapper-messages-primary {
@include clearfix();
.messages-list {
margin: 0;
......@@ -570,7 +596,7 @@
border-radius: 3px;
display: none;
margin: $baseline 0 ($baseline/2) 0;
padding: ($baseline*0.5) $baseline;
padding: ($baseline/2) $baseline;
background: $gray-l5;
border: 1px solid $gray-l4;
......@@ -619,6 +645,7 @@
.message-title, .message-copy {
margin-bottom: 0;
display: inline-block;
}
.message-title .value, .message-copy {
......@@ -640,51 +667,48 @@
display: none;
opacity: 0.0;
}
}
// STATE: is expanded
&.is-expanded {
// STATE: is expanded
&.is-expanded {
.ui-toggle-expansion {
@include transform(rotate(0));
@include transform-origin(50% 50%);
.ui-toggle-expansion {
@include rtl {
@include transform(rotate(-90deg));
}
.wrapper-extended {
display: block;
opacity: 1.0;
@include ltr {
@include transform(rotate(90deg));
}
@include transform-origin(50% 50%);
}
.wrapper-extended {
display: block;
opacity: 1.0;
}
}
// TYPE: upsell
.message-upsell {
&.message-upsell {
.wrapper-tip {
@include clearfix();
.message-title {
float: left;
@include float(left);
}
.ui-toggle-expansion {
@include transition(all $tmg-f2 ease-in-out 0s);
@include transform-origin(50% 50%);
@include font-size(21);
@include font-size(18);
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
@include rtl {
@include transform(rotate(90deg));
}
@include ltr {
@include transform(rotate(-90deg));
}
}
.message-copy {
float: right;
@include float(right);
}
}
......@@ -733,7 +757,7 @@
}
// TYPE: status
.message-status {
&.message-status {
background: tint($yellow,70%);
border-color: $gray-l3;
......@@ -750,7 +774,7 @@
.actions {
.action {
float: left;
@include float(left);
margin: 0 15px 0 0;
.btn, .cta {
......@@ -759,8 +783,8 @@
.btn {
@include box-sizing(border-box);
@include float(left);
border-radius: 3px;
float: left;
font: normal 0.8rem/1.2rem $sans-serif;
letter-spacing: 1px;
padding: 6px 12px;
......@@ -770,18 +794,14 @@
cursor: default !important;
&:hover, &:focus {
@include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100% ));
background: #eee;
background-image: -webkit-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
background-image: -moz-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
background-image: -ms-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
background-image: -o-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
background-image: linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%);
}
}
}
.cta {
float: left;
@include float(left);
font: normal 0.8rem/1.2rem $sans-serif;
letter-spacing: 1px;
padding: 6px 12px;
......@@ -815,8 +835,8 @@
.exam-button {
@include button(simple, $pink);
@include float(right);
margin-top: 0;
float: right;
}
.contact-button {
......@@ -925,14 +945,14 @@
.verification-reminder {
width: flex-grid(8, 12);
@include float(left);
position: relative;
float: left;
}
.verification-cta {
width: flex-grid(4, 12);
@include float(left);
position: relative;
float: left;
.cta {
@include button(simple, $green-d1);
......@@ -960,126 +980,97 @@
}
}
}
}
// "enrolled as" status
.sts-enrollment {
position: absolute;
top: 105px;
@include left(0);
display: inline-block;
text-align: center;
width: 200px;
// ====================
// CASE: "enrolled as" status - professional ed
&.professional {
// changes to cover
.wrapper-course-image .cover {
border-color: $professional-color-lvl3;
padding: ($baseline/10);
}
// course enrollment status message
.sts-enrollment {
.label {
@extend %text-sr;
}
.deco-graphic {
position: absolute;
top: -5px;
right: -8px;
}
// status message
.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;
background: $professional-color-lvl3;
}
}
}
// ====================
// 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;
}
// CASE: "enrolled as" status - verified
&.verified {
// status message
.sts-enrollment-value {
background: $professional-color-lvl3;
}
}
// changes to cover
.wrapper-course-image .cover {
border-color: $verified-color-lvl1;
padding: ($baseline/10);
}
// 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;
}
// course enrollment status message
.sts-enrollment {
.label {
@extend %text-sr;
}
.deco-graphic {
@extend %ui-depth3;
width: 40px;
position: absolute;
top: -4px;
right: -6px;
}
.deco-graphic {
@extend %ui-depth3;
width: 40px;
position: absolute;
top: -5px;
@include right(0);
}
// status message
.sts-enrollment-value {
background: $verified-color-lvl1;
}
// status message
.sts-enrollment-value {
background: $verified-color-lvl1;
}
}
}
// CASE: "enrolled as" status - honor code
&.honor {
// CASE: "enrolled as" status - honor code
&.honor {
// changes to cover
.cover {
border-color: $honorcode-color-lvl2;
padding: ($baseline/10);
}
// changes to cover
.wrapper-course-image .cover {
border-color: $honorcode-color-lvl2;
padding: ($baseline/10);
}
// status message
.sts-enrollment-value {
background: $honorcode-color-lvl1;
}
// status message
.sts-enrollment-value {
background: $honorcode-color-lvl1;
}
}
// CASE: "enrolled as" status - auditing
&.audit {
// CASE: "enrolled as" status - auditing
&.audit {
// changes to cover
.cover {
border-color: $audit-color-lvl2;
padding: ($baseline/10);
}
// changes to cover
.wrapper-course-image .cover {
border-color: $audit-color-lvl2;
padding: ($baseline/10);
}
// status message
.sts-enrollment-value {
background: $audit-color-lvl1;
}
// status message
.sts-enrollment-value {
background: $audit-color-lvl1;
}
}
}
}
// +Misc - Uncategorized
// ====================
.dashboard .my-courses {
// status - language
.status-language {
......@@ -1253,8 +1244,8 @@
.enter-course-blocked{
@include box-sizing(border-box);
@include float(left);
display: block;
float: left;
font: normal 15px/1.6rem $sans-serif;
letter-spacing: 0;
padding: 6px 32px 7px;
......@@ -1285,9 +1276,11 @@
@extend .cover;
opacity: 0.5;
}
}
// +Dashboard - Banner
// ====================
// +Dashboard - Banner
// ====================
.dashboard .my-courses {
.dashboard-banner {
&:empty {
......
lms/static/sass/shared/_header.scss
......@@ -117,7 +117,7 @@ header.global {
.user {
@include float(right);
margin-top: 4px;
margin-top: ($baseline/4);
> .primary {
display: block;
......@@ -135,7 +135,7 @@ header.global {
> a {
@include border-radius(0, 4px, 4px, 0);
@include border-left(none);
padding: 3px 8px 9px 8px;
padding: ($baseline/4) 8px 11px ($baseline/2);
&.shopping-cart {
border-radius: 4px;
......@@ -148,7 +148,7 @@ header.global {
}
a.user-link {
@include padding(3px, 12px, 8px, 8px);
@include padding(5px, 12px, 10px, 10px);
position: relative;
text-transform: none;
font-size: 14px;
......@@ -196,17 +196,17 @@ header.global {
}
.dropdown-menu {
background: $border-color-4;
background: $white;
border-radius: 4px;
box-shadow: 0 2px 24px 0 rgba(0,0,0, 0.3);
border: 1px solid $border-color-3;
box-shadow: 0 2px 2px 0 rgba(0,0,0, 0.3);
border: 1px solid $gray-l3;
display: none;
margin-top: 0;
padding: 5px 10px;
position: absolute;
@include right(0px);
top: 34px;
width: 170px;
top: 37px;
min-width: 120px;
z-index: 3;
&.expanded {
......@@ -221,14 +221,14 @@ header.global {
bottom: 6px solid transparent;
left: 6px solid transparent;
}
box-shadow: 1px 0 0 0 $border-color-3, 0 -1px 0 0 $border-color-3;
box-shadow: 1px 0 0 0 $gray-l3, 0 -1px 0 0 $gray-l3;
content: "";
display: block;
height: 0px;
position: absolute;
@include transform(rotate(-45deg));
@include right(7px);
top: -6px;
top: -5px;
width: 0px;
}
......@@ -579,7 +579,7 @@ header.global-new {
li {
display: block;
border-top: 1px dotted $border-color-2;
border-top: 1px solid $gray-l3;
box-shadow: inset 0 1px 0 0 rgba(255,255,255, 0.05);
&:first-child {
......
lms/templates/dashboard.html
......@@ -74,26 +74,25 @@
</div>
<section class="container dashboard" id="dashboard-main">
<section class="my-courses" id="my-courses">
<section class="my-courses" id="my-courses" role="main" aria-label="Content">
<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" />
% for dashboard_index, (course, enrollment) in enumerate(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, dashboard_index=dashboard_index" />
% endfor
</ul>
% else:
<section class="empty-dashboard-message">
......@@ -122,11 +121,12 @@
% endfor
</ul>
% endfor
</div>
% endif
</section>
<section class="profile-sidebar">
<section class="profile-sidebar" role="region" aria-label="User info">
<header class="profile">
<h2><span class="sr">${_("Username")}: </span><span class="user-name">${ user.username }</span></h2>
<h2 class="username-header"><span class="sr">${_("Username")}: </span><span class="username-label">${ user.username }</span></h2>
</header>
<section class="user-info">
<ul>
......@@ -220,61 +220,6 @@
</ul>
</section>
<<<<<<< HEAD
</section>
<section id="my-courses" class="my-courses" role="main" aria-label="Content">
<header>
<h2>${_("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
=======
>>>>>>> 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>
......@@ -309,8 +254,6 @@
</div>
</section>
<section id="password_reset_complete" class="modal" aria-hidden="true">
<div class="inner-wrapper" role="dialog" aria-labelledby="password-reset-email">
<button class="close-modal">
......
lms/templates/dashboard/_dashboard_course_listing.html
<%page args="course, enrollment, show_courseware_link, cert_status, show_email_settings, course_mode_info, show_refund_option, is_paid_course, is_course_blocked, verification_status, course_requirements" />
<%page args="course, enrollment, show_courseware_link, cert_status, show_email_settings, course_mode_info, show_refund_option, is_paid_course, is_course_blocked, verification_status, course_requirements, dashboard_index" />
<%!
from django.utils.translation import ugettext as _
......@@ -42,64 +42,23 @@ from student.helpers import (
% 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">
<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
<section class="info">
<hgroup>
<p class="date-block">
% if course.has_ended():
${_("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"))}
% elif course.start_date_is_still_default: # Course start date TBD
${_("Course has not yet started")}
% else: # hasn't started yet
${_("Course Starts - {start_date}").format(start_date=course.start_datetime_text("DATE_TIME"))}
% endif
</p>
</hgroup>
</section>
<% course_target = reverse('info', args=[unicode(course.id)]) %>
<section class="details">
<div class="wrapper-course-image" aria-hidden="true">
% 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>
<a href="${course_target}" class="cover">
<img src="${course_image_url(course)}" class="course-image" 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
<a class="fade-cover">
<img src="${course_image_url(course)}" class="course-image" 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>
<a class="cover">
<img src="${course_image_url(course)}" class="course-image" alt="${_('{course_number} {course_name} Cover Image').format(course_number=course.number, course_name=course.display_name_with_default) | h}" />
</a>
% endif
% if settings.FEATURES.get('ENABLE_VERIFIED_CERTIFICATES'):
<span class="sts-enrollment" title="${course_verified_certs.get('enrollment_title')}">
......@@ -110,6 +69,7 @@ from student.helpers import (
<div class="sts-enrollment-value">${course_verified_certs.get('enrollment_value')}</div>
</span>
% endif
</div>
<div class="wrapper-course-details">
<h3 class="course-title">
% if show_courseware_link:
......@@ -141,44 +101,35 @@ from student.helpers import (
<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>
% if not is_course_blocked:
<a href="${course_target}" class="enter-course archived">${_('View Archived Course')}<span class="sr">&nbsp;${course.display_name_with_default}</span></a>
% else:
<a class="enter-course-blocked archived">${_('View Archived Course')}<span class="sr">&nbsp;${course.display_name_with_default}</span></a>
% endif
% else:
<a class="enter-course-blocked archived">${_('View Archived Course')}</a>
% if not is_course_blocked:
<a href="${course_target}" class="enter-course">${_('View Course')}<span class="sr">&nbsp;${course.display_name_with_default}</span></a>
% else:
<a class="enter-course-blocked">${_('View Course')}<span class="sr">&nbsp;${course.display_name_with_default}</span></a>
% endif
% 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>
<a href="#actions-dropdown-${dashboard_index}" class="action action-more" id="actions-dropdown-link-${dashboard_index}" aria-haspopup="true" aria-expanded="false" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}">
<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">
<div class="actions-dropdown" id="actions-dropdown-${dashboard_index}" aria-label="${_('Additional Actions Menu')}">
<ul class="actions-dropdown-list" id="actions-dropdown-list-${dashboard_index}" aria-label="${_('Available Actions')}" role="menu">
<li class="actions-item" id="actions-item-unenroll-${dashboard_index}">
% if is_paid_course and show_refund_option:
## Translators: The course's name will be added to the end of this sentence.
## Translators: The course 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")}';
<a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" 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")}';
<a class="action action-unenroll is-disabled" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" 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>
......@@ -186,12 +137,12 @@ from student.helpers import (
% 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")}';
<a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" 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")}';
<a class="action action-unenroll is-disabled" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" 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>
......@@ -199,23 +150,23 @@ from student.helpers import (
% 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=''">
<a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" 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=''">
<a class="action action-unenroll is-disabled" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" 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)}';
<a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" 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)}';
<a class="action action-unenroll is-disabled" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" 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>
......@@ -223,24 +174,24 @@ from student.helpers import (
% 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)}';
<a href="#unenroll-modal" class="action action-unenroll" rel="leanModal" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" 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)}';
<a class="action action-unenroll is-disabled" data-course-id="${course.id | h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" 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">
<li class="actions-item" id="actions-item-email-settings-${dashboard_index}">
% 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>
<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-dashboard-index="${dashboard_index}" 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>
<a class="action action-email-settings is-disabled" data-course-id="${course.id| h}" data-course-number="${course.number | h}" data-dashboard-index="${dashboard_index}" data-optout="${unicode(course.id) in course_optouts}">${_('Email Settings')}</a>
% endif
% endif
</li>
......@@ -252,7 +203,7 @@ from student.helpers import (
% endif
</div>
</section>
<aside class="wrapper-messages-primary">
<footer 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'/>
......@@ -298,7 +249,7 @@ from student.helpers import (
<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>
<i class="icon fa fa-caret-right ui-toggle-expansion"></i>
<span class="value">${_("Challenge Yourself!")}</span>
</h4>
<p class="message-copy">${_("Take this course as an ID-verified student.")}</p>
......@@ -358,7 +309,7 @@ from student.helpers import (
</li>
% endif
</ul>
</aside>
</footer>
</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