From baa73f0a1ed74f90fd6fe46c77184689e5c2ebb1 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Wed, 23 Oct 2013 22:17:05 -0400 Subject: [PATCH] LMS: adds in UI and styling for verified track upgrade to dashboard view --- lms/static/sass/base/_extends.scss | 13 ++ lms/static/sass/multicourse/_dashboard.scss | 116 ++++++++++++++---- .../dashboard/dashboard_course_listing.html | 44 ++++--- 3 files changed, 137 insertions(+), 36 deletions(-) diff --git a/lms/static/sass/base/_extends.scss b/lms/static/sass/base/_extends.scss index ebd5ae806e..abfdaa0d5c 100644 --- a/lms/static/sass/base/_extends.scss +++ b/lms/static/sass/base/_extends.scss @@ -100,3 +100,16 @@ // outline: thin dotted !important; } } + +// removes list styling/spacing when using uls, ols for navigation and less content-centric cases +%ui-no-list { + list-style: none; + margin: 0; + padding: 0; + text-indent: 0; + + li { + margin: 0; + padding: 0; + } +} diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index e11b817fcf..4bc592f77b 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/lms/static/sass/multicourse/_dashboard.scss @@ -227,6 +227,8 @@ } } + // ==================== + // course listings .my-courses { float: left; @@ -272,6 +274,8 @@ } } + // ==================== + // UI: course list .listing-courses { @extend %ui-no-list; @@ -289,6 +293,8 @@ } } + // ==================== + // UI: individual course item .course { @include box-sizing(box); @@ -416,6 +422,8 @@ } } + // ==================== + // STATE: course mode - verified &.verified { @extend %ui-depth2; @@ -459,41 +467,112 @@ } } } - } - .message-status { + // ==================== + + // UI: message + .message { @include clearfix; border-radius: 3px; display: none; z-index: 10; - margin: 20px 0 10px; - padding: 15px 20px; + margin: $baseline 0 ($baseline/2) 0; + padding: ($baseline*0.75) $baseline; font-family: $sans-serif; background: tint($yellow,70%); border: 1px solid #ccc; + // STATE: shown + &.is-shown { + display: block; + } + + a { + font-family: $sans-serif; + } + + strong { + font-weight: 700; + + a { + font-weight: 700; + } + } + + .message-title, + .message-copy .title { + @extend %t-title5; + @extend %t-weight4; + margin-bottom: ($baseline/4); + } + + .message-copy, + .message-copy .copy { + @extend %t-copy-sub1; + margin: 0; + } + + // CASE: has actions + &.has-actions { + @include clearfix(); + + .message-copy { + float: left; + width: 50%; + margin-right: 5%; + } + + .message-actions { + @extend %ui-no-list; + float: right; + width: 40%; + text-align: right; + } + } + } + + // TYPE: upsell + .message-upsell { + background: $verified-color-lvl5; + + .action-upgrade { + @extend %btn-verify-primary; + @include clearfix(); + + span { + color: $white; // nasty but needed override for poor styling + } + + .copy { + @extend %t-action3; + @extend %t-weight4; + display: block; + margin-bottom: ($baseline/4); + } + + .copy-sub { + @extend %t-action4; + display: block; + opacity: 0.875; + } + } + } + + // TYPE: status + .message-status { + background: tint($yellow,70%); + border-color: #ccc; + .message-copy { font-family: $sans-serif; font-size: 13px; margin: 0; - a { - font-family: $sans-serif; - } - .grade-value { font-size: 1.2rem; font-weight: bold; } - - strong { - font-weight: 700; - - a { - font-weight: 700; - } - } } .actions { @@ -589,10 +668,6 @@ } } - &.is-shown { - display: block; - } - &.course-status-processing { } @@ -614,7 +689,6 @@ } } - a.unenroll { float: right; display: block; diff --git a/lms/templates/dashboard/dashboard_course_listing.html b/lms/templates/dashboard/dashboard_course_listing.html index 67ff07855f..f375ee88b1 100644 --- a/lms/templates/dashboard/dashboard_course_listing.html +++ b/lms/templates/dashboard/dashboard_course_listing.html @@ -96,12 +96,12 @@
  • - Download Your PDF Certificate
    • + ${_("Download Your PDF Certificate")} % endif % if cert_status['show_survey_button']:
  • - ${_('Complete our course feedback survey')}
    • + ${_("Complete our course feedback survey")} % endif % endif @@ -109,6 +109,33 @@ % endif + %if enrollment.mode != 'verified' and 'verified' in course_modes: +
    + +
    +

    ${_("Challenge Yourself!")}

    +

    ${_("Register for the {a_start} verified certificate {a_end} track").format(a_start='', a_end="")}

    +
    + + +
    + %endif + % if show_courseware_link: % if course.has_ended(): ${_('View Archived Course')} @@ -124,18 +151,5 @@ % endif - %if enrollment.mode != 'verified' and 'verified' in course_modes: -
    - ${_("Get a verified certificate for this course!")} - %if course_modes['verified'].expiration_date: - <% days_left = (course_modes['verified'].expiration_date - date.today()).days %> -

    - ${_('Only {days} days left!').format(days=days_left)} -

    - %endif - -
    - %endif -