diff --git a/common/test/acceptance/pages/lms/dashboard.py b/common/test/acceptance/pages/lms/dashboard.py index 278b9a3519..a1b5ca69ec 100644 --- a/common/test/acceptance/pages/lms/dashboard.py +++ b/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): diff --git a/lms/static/js/dashboard/legacy.js b/lms/static/js/dashboard/legacy.js index c0651a6b6d..47096c5a4f 100644 --- a/lms/static/js/dashboard/legacy.js +++ b/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, diff --git a/lms/static/sass/_shame.scss b/lms/static/sass/_shame.scss index e4b2db6ab3..218e316e2c 100644 --- a/lms/static/sass/_shame.scss +++ b/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; diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss index 95e2a7ac53..19ed009ce0 100644 --- a/lms/static/sass/base/_base.scss +++ b/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); diff --git a/lms/static/sass/base/_extends.scss b/lms/static/sass/base/_extends.scss index 7048196f98..2ab91d0662 100644 --- a/lms/static/sass/base/_extends.scss +++ b/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; +} diff --git a/lms/static/sass/elements/_typography.scss b/lms/static/sass/elements/_typography.scss index afdd3ceced..d1469077c0 100644 --- a/lms/static/sass/elements/_typography.scss +++ b/lms/static/sass/elements/_typography.scss @@ -41,6 +41,7 @@ } %t-title3 { + @extend %t-title; @include font-size(36); @include line-height(36); } diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index 3f2d1b974f..03d6388739 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/lms/static/sass/multicourse/_dashboard.scss @@ -1,37 +1,40 @@ // lms - views - user/student dashboard // ==================== +// Table of Contents +// * +Dashboard - Sidebar +// * +Dashboard - Course Listing +// * +Dashboard - Banner + + +// +Dashboard - Sidebar +// ==================== .dashboard { @include clearfix(); padding: ($baseline*2) 0 0 0; .profile-sidebar { - background: transparent; - @include float(left); - @include margin-right(flex-gutter()); + @include float(right); + @include margin-left(flex-gutter()); width: flex-grid(3); background: transparent; - box-shadow: 0 0 1px $shadow-l1; - header.profile { + .profile { @include box-sizing(border-box); border: 1px solid $border-color-2; + border-bottom: none; border-radius: ($baseline/4) ($baseline/4) 0 0; width: flex-grid(12); - background: $dashboard-profile-color; .user-name { + @extend %t-title6; + @extend %t-ultrastrong; + @extend %cont-truncated; display: block; - overflow: hidden; margin: 0; - padding: ($baseline*0.75) ($baseline/2) 0; + padding: $baseline $baseline 0; color: $base-font-color; text-transform: none; - text-wrap: nowrap; - text-overflow: ellipsis; - text-align: center; - font-weight: 700; - line-height: 1.2em; } } @@ -185,121 +188,47 @@ } } } - } - .news-carousel { - @include clearfix(); - margin: 30px 10px 0; - border: 1px solid $border-color-2; - background: $dashboard-profile-color; - box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.15); + // status + .status { - * { - font-family: $sans-serif; - } - - header { - @include clearfix(); - height: 50px; - } - - .page-dots { - float: right; - margin: 18px 15px 0 0; - - li { - float: left; - margin-left: 6px; - } - } - - .page-dot { - display: block; - width: 11px; - height: 11px; - border-radius: 11px; - background: $dot-color; - - &:hover, &:focus { - background: $lighter-base-font-color; + .list--nav { + margin: ($baseline/2) 0 0 0; + padding: 0; } - &.current { - background: $link-color; + .nav__item { + @extend %t-weight4; + @include font-size(13); + margin-left: 26px; } } - - h4 { - float: left; - margin-left: ($baseline*0.75); - font-size: 15px; - line-height: 48px; - font-weight: 700; - text-transform: uppercase; - } - - .pages { - position: relative; - } - - .page { - display: none; - position: absolute; - top: 0; - left: 0; - - &:first-child { - display: block; - } - } - - section { - padding: 0 10px; - } - - .news-image { - height: 180px; - margin-bottom: ($baseline*0.75); - - img { - width: 100%; - border: 1px solid $border-color-1; - } - } - - h5 { - margin-bottom: 8px; - margin-left: ($baseline/4); - - a { - font-size: 16px; - font-weight: 700; - } - } - - .excerpt { - margin-left: ($baseline/4); - font-size: 13px; - padding-bottom: 40px; - } } } +} - // ==================== - - // course listings +// +Dashboard - Course Listing +// ==================== +.dashboard { .my-courses { @include float(left); margin: 0; width: flex-grid(9); - > header { - border-bottom: 1px solid $border-color-2; - margin-bottom: ($baseline*1.5); + + .wrapper-header-courses { + border-bottom: 4px solid $border-color-l4; + margin-bottom: $baseline; + + .header-courses { + @extend %t-title5; + @include padding-right($baseline/2); + } } + // CASE: empty dashboard .empty-dashboard-message { - padding: 60px 0px; + padding: ($baseline*2) 0; text-align: center; p { @@ -339,9 +268,9 @@ @extend %ui-no-list; .course-item { - margin-bottom: ($baseline*2.5); + margin-bottom: $baseline; border-bottom: 4px solid $border-color-l4; - padding-bottom: ($baseline*2.5); + padding-bottom: $baseline; &:last-child { margin-bottom: 0; @@ -360,64 +289,60 @@ @include clearfix(); @extend %ui-depth2; position: relative; + padding: ($baseline/2); - .cover { - @include box-sizing(border-box); - @include transition(all 0.15s linear 0s); - overflow: hidden; - position: relative; - @include float(left); - height: 100%; - max-height: 100%; - width: 200px; - height: 120px; - margin: 0; - border-radius: ($baseline/10); - border: 1px solid $dashboard-course-cover-border; - border-bottom: 4px solid $dashboard-course-cover-border; - padding: ($baseline/10); - - img { - width: 100%; - min-height: 100%; - } - } - - .info { + .details { @include clearfix(); - @include padding(0, 10px, 0, 230px); - > hgroup { - padding: 0; - width: 100%; + .cover { + @include box-sizing(border-box); + @include transition(all 0.15s linear 0s); + @include float(left); + @include margin-right(flex-gutter()); + width: flex-grid(3); + min-width: 150px; + overflow: hidden; + display: block; + position: relative; + max-height: 100%; + height: 120px; + border-radius: ($baseline/10); + border: 1px solid $dashboard-course-cover-border; + border-bottom: 4px solid $dashboard-course-cover-border; - .university { - color: $lighter-base-font-color; - font-family: $sans-serif; - font-size: 16px; - font-weight: 400; - margin: 0 0 6px; - text-transform: none; - letter-spacing: 0; + &:before { + content: ""; + display: block; + padding-top: 75%; // 4:3 aspect ratio } - .date-block { - position: absolute; + img { + display: block; + position: absolute; top: 0; - @include right(0); - font-family: $sans-serif; - font-size: 13px; - font-style: italic; - color: $lighter-base-font-color; + left: 0; + bottom: 0; + right: 0; + width: 100%; } + } - h3 a, h3 span { + .wrapper-course-details { + display: block; + @include float(left); + width: flex-grid(9); + padding: 0; + height: 120px; + } + + .course-title { + border-bottom: 2px solid $gray-l5; + + a, span { + @extend %t-title3; + @extend %t-light; display: block; margin-bottom: ($baseline/2); - font-family: $sans-serif; - font-size: 34px; - line-height: 42px; - font-weight: 300; &:hover, &:focus { text-decoration: none; @@ -425,6 +350,153 @@ } } + .course-info { + display: block; + @include float(left); + width: flex-grid(4); + padding: 0; + margin-top: ($baseline/2); + + [class*="info-"] { + color: $gray-d1; + @extend %t-title6; + display: inline-block; + } + + .info-date-block { + @extend %t-title7; + color: $gray-l1; + display: block; + } + } + + .wrapper-course-actions { + display: block; + @include float(right); + width: flex-grid(8); + padding: 0; + margin-top: ($baseline/2); + } + + .course-actions { + position: relative; + top: 50%; + transform: translateY(-50%); + + // UI: course item actions + + .action { + @include box-sizing(border-box); + @include margin-right($baseline/2); + display: inline-block; + float: right; + min-width: ($baseline*2); + color: $gray-l3; + border-radius: 3px; + padding: 12px; + border: 1px solid $white; + + &:hover, &:focus { + color: #333; + border: 1px solid $gray-l4; + } + + // STATE: is-disabled + &.is-disabled { + color: #808080; + color: $gray-l4; + } + + // TYPE: facebook share + &.action-facebook, { + color: #3b5998; + } + + // TYPE: twitter share + &.action-twitter { + color: #55ACEE; + } + } + + // UI: general actions dropdown layout + .wrapper-action-more { + + .actions-dropdown { + @extend %ui-no-list; + @extend %ui-depth1; + display: none; + position: absolute; + top: ($baseline*2); + left: 17px; + pointer-events: none; + min-width: ($baseline*6.5); + + &.is-expanded { + display: block; + pointer-events: auto; + } + + .actions-dropdown-list { + @extend %ui-no-list; + display: table; + @include box-sizing(border-box); + box-shadow: 0 1px 1px $shadow-l1; + position: relative; + width: 100%; + border-radius: 3px; + margin: ($baseline/4) 0 0 0; + border: 1px solid $gray-l3; + padding: ($baseline/2) ($baseline*0.75); + background: $white; + + // ui triangle/nub + &:after, + &:before { + bottom: 100%; + @include right(3px); + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + &:after { + border-color: $transparent; + border-bottom-color: $white; + border-width: 6px; + @include margin-right(1px); + } + + &:before { + border-color: $transparent; + border-bottom-color: $gray-l3; + border-width: 7px; + } + } + + .actions-item { + @extend %t-title7; + display: block; + margin: 0; + + &.is-hidden { + display: none; + } + + .action { + @include margin-right(0); + + &:hover, &:focus { + border: 1px solid transparent; + } + } + } + } + } + } + .course-status { background: $yellow; border: 1px solid $border-color-2; @@ -461,18 +533,14 @@ @include button(simple, $button-color); @include box-sizing(border-box); border-radius: 3px; - display: block; - @include float(left); + @include float(right); font: normal 15px/1.6rem $sans-serif; letter-spacing: 0; - padding: 6px 32px 7px; text-align: center; - margin-top: 16px; &.archived { @include button(simple, $button-archive-color); font: normal 15px/1.6rem $sans-serif; - padding: 6px 32px 7px; &:hover, &:focus { text-decoration: none; @@ -485,17 +553,415 @@ } } - .prerequisites { - @include clearfix; + // ==================== - .tip { + // UI: message + .wrapper-message-primary { + @include clearfix(); + } + + .messages-list { + margin: 0; + padding: 0; + } + + .message { + @extend %ui-depth1; + border-radius: 3px; + display: none; + margin: $baseline 0 ($baseline/2) 0; + padding: ($baseline*0.5) $baseline; + background: $gray-l5; + border: 1px solid $gray-l4; + + // STATE: shown + &.is-shown { + display: block; + } + + a { font-family: $sans-serif; - font-size: 1em; - color: $lighter-base-font-color; - margin-top: ($baseline/2); + } + + strong { + font-weight: 700; + + a { + font-weight: 700; + } + } + + .actions { + @include clearfix(); + list-style: none; + margin: 0; + padding: 0; + } + + .message-title, + .message-copy .title { + @extend %t-title6; + @extend %t-weight4; + line-height: 1em; + margin-bottom: ($baseline/4); + } + + .message-copy, + .message-copy .copy { + @extend %t-copy-sub1; + margin: 2px 0 0 0; + } + + // CASE: expandable + &.is-expandable { + + .wrapper-tip { + + .message-title, .message-copy { + margin-bottom: 0; + } + + .message-title .value, .message-copy { + @include transition(color $tmg-f2 ease-in-out 0s); + } + + // STATE: hover + &:hover { + cursor: pointer; + + .message-title .value, .message-copy, .ui-toggle-expansion { + color: $link-color; + } + } + } + + .wrapper-extended { + @include transition(opacity $tmg-f2 ease-in-out 0); + display: none; + opacity: 0.0; + } + + // STATE: is expanded + &.is-expanded { + + .ui-toggle-expansion { + @include transform(rotate(0)); + @include transform-origin(50% 50%); + } + + .wrapper-extended { + display: block; + opacity: 1.0; + } + } + } + + // TYPE: upsell + .message-upsell { + + .wrapper-tip { + @include clearfix(); + + .message-title { + float: left; + } + + .ui-toggle-expansion { + @include transition(all $tmg-f2 ease-in-out 0s); + @include transform-origin(50% 50%); + @include font-size(21); + display: inline-block; + vertical-align: middle; + margin-right: ($baseline/4); + + @include rtl { + @include transform(rotate(90deg)); + } + + @include ltr { + @include transform(rotate(-90deg)); + } + } + + .message-copy { + float: right; + } + } + + .wrapper-extended { + padding: ($baseline/2) 0; + + .message-copy { + margin-bottom: $baseline; + } + } + + .action-upgrade { + @extend %btn-primary-green; + @include clearfix(); + position: relative; + left: ($baseline/2); + padding: 8px $baseline 8px ($baseline*2); + + .deco-graphic { + position: absolute; + top: -($baseline/4); + left: -($baseline*0.75); + width: ($baseline*2); + } + + span { + color: $white; // nasty but needed override for poor styling + } + + .copy, .copy-sub { + display: inline-block; + vertical-align: middle; + } + + .copy { + @extend %t-action3; + @extend %t-weight4; + margin-right: $baseline; + } + + .copy-sub { + @extend %t-action4; + opacity: 0.875; + } + } + } + + // TYPE: status + .message-status { + background: tint($yellow,70%); + border-color: $gray-l3; + + .message-copy { + @extend %t-copy-sub1; + margin: 0; + + .grade-value { + font-size: 1.2rem; + font-weight: bold; + } + } + + .actions { + + .action { + float: left; + margin: 0 15px 0 0; + + .btn, .cta { + display: inline-block; + } + + .btn { + @include box-sizing(border-box); + border-radius: 3px; + float: left; + font: normal 0.8rem/1.2rem $sans-serif; + letter-spacing: 1px; + padding: 6px 12px; + text-align: center; + + &.disabled { + cursor: default !important; + + &:hover, &:focus { + background: #eee; + background-image: -webkit-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%); + background-image: -moz-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%); + background-image: -ms-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%); + background-image: -o-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%); + background-image: linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%); + } + } + } + + .cta { + float: left; + font: normal 0.8rem/1.2rem $sans-serif; + letter-spacing: 1px; + padding: 6px 12px; + text-align: center; + } + } + } + + .exam-registration-number { + font-family: $sans-serif; + font-size: 18px; + + a { + font-family: $sans-serif; + } + } + + &.exam-register { + + .message-copy { + margin-top: ($baseline/4); + width: 55%; + } + } + + &.exam-schedule { + .exam-button { + margin-top: ($baseline/4); + } + } + + .exam-button { + @include button(simple, $pink); + margin-top: 0; + float: right; + } + + .contact-button { + @include button(simple, $pink); + } + + .button { + display: inline-block; + margin-top: ($baseline/2); + padding: 9px 18px 10px; + font-size: 13px; + font-weight: bold; + letter-spacing: 0; + + &:hover, &:focus { + text-decoration: none; + } + } + + &.course-status-processing { + background-color: $gray-l5; + border: 0; + } + + &.course-status-certnotavailable { + background-color: $gray-l5; + border: 0; + } + + &.course-status-certrendering { + background-color: $gray-l5; + border: 0; + + .cta { + margin-top: 2px; + } + } + + &.course-status-certavailable { + background-color: $gray-l5; + border: 0; + + .message-copy { + width: flex-grid(6, 12); + position: relative; + @include float(left); + } + + .actions-primary { + width: flex-grid(6, 12); + position: relative; + @include float(right); + + .action { + @include margin(0, 0, ($baseline/2), ($baseline*.75)); + float: none; + text-align: center; + + &:last-child { + margin-bottom: 0; + } + + .btn { + float: none; + } + } + + .action-certificate .btn { + @extend %btn-inherited-primary; + @include box-sizing(border-box); + float: none; + border-radius: 3px; + display: block; + @include padding(7px, ($baseline*.75), 7px, ($baseline*.75)); + text-align: center; + + a:link, a:visited { + color: #fff; + } + } + + .action-share .btn { + display: inline; + letter-spacing: 0; + } + } + } + + .actions-secondary { + margin-top: ($baseline/2); + border-top: 1px solid $gray-l4; + padding-top: ($baseline/2); + + .action-share { + @include float(right); + margin: 0; + } + } + + .certificate-explanation { + @extend %t-copy-sub1; + margin-top: ($baseline/2); + border-top: 1px solid $gray-l4; + padding-top: ($baseline/2); + } + + .verification-reminder { + width: flex-grid(8, 12); + position: relative; + float: left; + } + + .verification-cta { + width: flex-grid(4, 12); + position: relative; + float: left; + + .cta { + @include button(simple, $green-d1); + @include box-sizing(border-box); + @include float(right); + border-radius: 3px; + display: block; + font: normal 15px/1.6rem $sans-serif; + letter-spacing: 0; + padding: 6px 32px 7px; + text-align: center; + } + } + } + + // TYPE: pre-requisites + .prerequisites { + @include clearfix; + + .tip { + font-family: $sans-serif; + font-size: 1em; + color: $lighter-base-font-color; + margin-top: ($baseline/2); + } } } + // "enrolled as" status .sts-enrollment { position: absolute; @@ -611,437 +1077,9 @@ } } } - - // ==================== - - // UI: message - .wrapper-message-primary { - @include clearfix(); - } - - .message { - border-radius: 3px; - display: none; - z-index: 10; - margin: $baseline 0 ($baseline/2) 0; - padding: ($baseline*0.5) $baseline; - font-family: $sans-serif; - background: tint($yellow,70%); - border: 1px solid $gray-l3; - - // STATE: shown - &.is-shown { - display: block; - } - - a { - font-family: $sans-serif; - } - - strong { - font-weight: 700; - - a { - font-weight: 700; - } - } - - .actions { - @include clearfix(); - list-style: none; - margin: 0; - padding: 0; - } - - .message-title, - .message-copy .title { - @extend %t-title6; - @extend %t-weight4; - line-height: 1em; - margin-bottom: ($baseline/4); - } - - .message-copy, - .message-copy .copy { - @extend %t-copy-sub1; - margin: 2px 0 0 0; - } - - // CASE: expandable - &.is-expandable { - - .wrapper-tip { - - .message-title, .message-copy { - margin-bottom: 0; - } - - .message-title .value, .message-copy { - @include transition(color $tmg-f2 ease-in-out 0s); - } - - // STATE: hover - &:hover { - cursor: pointer; - - .message-title .value, .message-copy, .ui-toggle-expansion { - color: $link-color; - } - } - } - - .wrapper-extended { - @include transition(opacity $tmg-f2 ease-in-out 0); - display: none; - opacity: 0.0; - } - - // STATE: is expanded - &.is-expanded { - - .ui-toggle-expansion { - @include transform(rotate(0)); - @include transform-origin(50% 50%); - } - - .wrapper-extended { - display: block; - opacity: 1.0; - } - } - } - } - - // TYPE: upsell - .message-upsell { - - .wrapper-tip { - @include clearfix(); - - .message-title { - float: left; - } - - .ui-toggle-expansion { - @include transition(all $tmg-f2 ease-in-out 0s); - @include transform-origin(50% 50%); - @include font-size(21); - display: inline-block; - vertical-align: middle; - margin-right: ($baseline/4); - - @include rtl { - @include transform(rotate(90deg)); - } - - @include ltr { - @include transform(rotate(-90deg)); - } - } - - .message-copy { - float: right; - } - } - - .wrapper-extended { - padding: ($baseline/2) 0; - - .message-copy { - margin-bottom: $baseline; - } - } - - .action-upgrade { - @extend %btn-primary-green; - @include clearfix(); - position: relative; - left: ($baseline/2); - padding: 8px $baseline 8px ($baseline*2); - - .deco-graphic { - position: absolute; - top: -($baseline/4); - left: -($baseline*0.75); - width: ($baseline*2); - } - - span { - color: $white; // nasty but needed override for poor styling - } - - .copy, .copy-sub { - display: inline-block; - vertical-align: middle; - } - - .copy { - @extend %t-action3; - @extend %t-weight4; - margin-right: $baseline; - } - - .copy-sub { - @extend %t-action4; - opacity: 0.875; - } - } - } - - // TYPE: status - .message-status { - background: tint($yellow,70%); - border-color: $gray-l3; - - .message-copy { - @extend %t-copy-sub1; - margin: 0; - - .grade-value { - font-size: 1.2rem; - font-weight: bold; - } - } - - .actions { - - .action { - float: left; - margin: 0 15px 0 0; - - .btn, .cta { - display: inline-block; - } - - .btn { - @include box-sizing(border-box); - border-radius: 3px; - float: left; - font: normal 0.8rem/1.2rem $sans-serif; - letter-spacing: 1px; - padding: 6px 12px; - text-align: center; - - &.disabled { - cursor: default !important; - - &:hover, &:focus { - background: #eee; - background-image: -webkit-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%); - background-image: -moz-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%); - background-image: -ms-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%); - background-image: -o-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%); - background-image: linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%); - } - } - } - - .cta { - float: left; - font: normal 0.8rem/1.2rem $sans-serif; - letter-spacing: 1px; - padding: 6px 12px; - text-align: center; - } - } - } - - .exam-registration-number { - font-family: $sans-serif; - font-size: 18px; - - a { - font-family: $sans-serif; - } - } - - &.exam-register { - - .message-copy { - margin-top: ($baseline/4); - width: 55%; - } - } - - &.exam-schedule { - .exam-button { - margin-top: ($baseline/4); - } - } - - .exam-button { - @include button(simple, $pink); - margin-top: 0; - float: right; - } - - .contact-button { - @include button(simple, $pink); - } - - .button { - display: inline-block; - margin-top: ($baseline/2); - padding: 9px 18px 10px; - font-size: 13px; - font-weight: bold; - letter-spacing: 0; - - &:hover, &:focus { - text-decoration: none; - } - } - - &.course-status-processing { - background-color: $gray-l5; - border: 0; - } - - &.course-status-certnotavailable { - background-color: $gray-l5; - border: 0; - } - - &.course-status-certrendering { - background-color: $gray-l5; - border: 0; - - .cta { - margin-top: 2px; - } - } - - &.course-status-certavailable { - background-color: $gray-l5; - border: 0; - - .message-copy { - width: flex-grid(6, 12); - position: relative; - @include float(left); - } - - .actions-primary { - width: flex-grid(6, 12); - position: relative; - @include float(right); - - .action { - @include margin(0, 0, ($baseline/2), ($baseline*.75)); - float: none; - text-align: center; - - &:last-child { - margin-bottom: 0; - } - - .btn { - float: none; - } - } - - .action-certificate .btn { - @extend %btn-inherited-primary; - @include box-sizing(border-box); - float: none; - border-radius: 3px; - display: block; - @include padding(7px, ($baseline*.75), 7px, ($baseline*.75)); - text-align: center; - - a:link, a:visited { - color: #fff; - } - } - - .action-share .btn { - display: inline; - letter-spacing: 0; - } - } - } - - .actions-secondary { - margin-top: ($baseline/2); - border-top: 1px solid $gray-l4; - padding-top: ($baseline/2); - - .action-share { - @include float(right); - margin: 0; - } - } - - .certificate-explanation { - @extend %t-copy-sub1; - margin-top: ($baseline/2); - border-top: 1px solid $gray-l4; - padding-top: ($baseline/2); - } - - .verification-reminder { - width: flex-grid(8, 12); - position: relative; - float: left; - } - - .verification-cta { - width: flex-grid(4, 12); - position: relative; - float: left; - - .cta { - @include button(simple, $green-d1); - @include box-sizing(border-box); - @include float(right); - border-radius: 3px; - display: block; - font: normal 15px/1.6rem $sans-serif; - letter-spacing: 0; - padding: 6px 32px 7px; - text-align: center; - } - } - } - - a.unenroll { - @include float(right); - display: block; - font-style: italic; - color: $lighter-base-font-color; - text-decoration: underline; - font-size: .8em; - margin-top: 32px; - - &:hover, &:focus { - color: #333; - } - } - - a.email-settings { - @extend a.unenroll; - @include margin-right(10px); - } } - // account-related - .user-info { - // status - .status { - - .list--nav { - margin: ($baseline/2) 0 0 0; - padding: 0; - } - - .nav__item { - @extend %t-weight4; - @include font-size(13); - margin-left: 26px; - } - } - } // status - language .status-language { @@ -1227,113 +1265,101 @@ border:0; color:white; box-shadow:none; + &.archived { - @include button(simple, $button-archive-color); - font: normal 15px/1.6rem $sans-serif; - padding: 6px 32px 7px; + @include button(simple, $button-archive-color); + font: normal 15px/1.6rem $sans-serif; + padding: 6px 32px 7px; - &:hover, &:focus { - text-decoration: none; - } - } + &:hover, &:focus { + text-decoration: none; + } + } } + a.disable-look{ color: #808080; } - a.disable-look-unregister{ - color: #808080; - float: right; - display: block; - font-style: italic; - color: $lighter-base-font-color; - text-decoration: underline; - font-size: .8em; - margin-top: 32px; - } - a.disable-look-settings{ - @extend a.disable-look-unregister; - margin-right: ($baseline/2); - } - - } a.fade-cover{ @extend .cover; opacity: 0.5; } -.dashboard-banner { + // +Dashboard - Banner + // ==================== + .dashboard-banner { - &:empty { - display: none; - } + &:empty { + display: none; + } - .wrapper-msg { - padding-bottom: 0; + .wrapper-msg { + padding-bottom: 0; - .msg { - @include clearfix(); - font-family: $sans-serif; - padding-bottom: $baseline; - border-bottom: thin solid $gray; + .msg { + @include clearfix(); + font-family: $sans-serif; + padding-bottom: $baseline; + border-bottom: thin solid $gray; - &.title { - @extend %t-title5; - @extend %t-weight4; - font-family: $f-sans-serif; + &.title { + @extend %t-title5; + @extend %t-weight4; + font-family: $f-sans-serif; - // Overriding Platform h2 styles - text-transform: none; - letter-spacing: 0; - } - - &.has-actions { - - .donate-content { - width: flex-grid(8, 12); + // Overriding Platform h2 styles + text-transform: none; + letter-spacing: 0; } - .donate-actions { - width: flex-grid(4, 12); - vertical-align: bottom; - display: inline-block; + &.has-actions { - .monetary-symbol { - vertical-align: middle; - color: $white; - font-weight: 600; + .donate-content { + width: flex-grid(8, 12); } - .amount { - height: 40px; - width: 80px; - vertical-align: middle; - text-align: left; - border: 2px solid $white; + .donate-actions { + width: flex-grid(4, 12); + vertical-align: bottom; + display: inline-block; - &.validation-error { - border: 2px solid $error-color; + .monetary-symbol { + vertical-align: middle; + color: $white; + font-weight: 600; } - } - .action-donate { - @extend %btn-primary-blue; - vertical-align: middle; - padding-top: ($baseline/2); - padding-bottom: ($baseline/2); - text-shadow: none; - text-transform: none; - letter-spacing: 0; - color: $white; - font-weight: 600; - } + .amount { + height: 40px; + width: 80px; + vertical-align: middle; + text-align: left; + border: 2px solid $white; - .donation-error-msg { - padding: ($baseline/2) 0; + &.validation-error { + border: 2px solid $error-color; + } + } + + .action-donate { + @extend %btn-primary-blue; + vertical-align: middle; + padding-top: ($baseline/2); + padding-bottom: ($baseline/2); + text-shadow: none; + text-transform: none; + letter-spacing: 0; + color: $white; + font-weight: 600; + } + + .donation-error-msg { + padding: ($baseline/2) 0; + } } } } } } } - diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html index d4468ed865..ac53136051 100644 --- a/lms/templates/dashboard.html +++ b/lms/templates/dashboard.html @@ -74,7 +74,56 @@
+
+
+

${_("Current Courses")}

+
+ % if len(course_enrollment_pairs) > 0: +
    + % 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 + +
+ % else: +
+ % if settings.FEATURES.get('COURSES_ARE_BROWSABLE'): +

${_("Looks like you haven't enrolled in any courses yet.")}

+ + ${_("Find courses now!")} + + % else: +

${_("Looks like you haven't enrolled in any courses yet.")}

+ %endif +
+ % endif + + % if staff_access and len(errored_courses) > 0: +
+

${_("Course-loading errors")}

+ + % for course_dir, errors in errored_courses.items(): +

${course_dir | h}

+
    + % for (msg, err) in errors: +
  • ${msg} + 
    • ${err}
    +
    • + % endfor +
+ % endfor + % endif +

${_("Username")}: ${ user.username }

@@ -171,6 +220,7 @@
+<<<<<<< HEAD
@@ -223,6 +273,8 @@ % 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 diff --git a/lms/templates/dashboard/_dashboard_course_listing.html b/lms/templates/dashboard/_dashboard_course_listing.html index 2a1bbdddad..77baa1e956 100644 --- a/lms/templates/dashboard/_dashboard_course_listing.html +++ b/lms/templates/dashboard/_dashboard_course_listing.html @@ -39,14 +39,13 @@ from student.helpers import ( %> % else: <% mode_class = '' %> - % endif + % endif
<% course_target = reverse('info', args=[course.id.to_deprecated_string()]) %> - % if show_courseware_link: % if not is_course_blocked: @@ -77,72 +76,231 @@ from student.helpers import (

% 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

-

${get_course_about_section(course, 'university')}

-

+

+
+ % if show_courseware_link: + % if not is_course_blocked: + + ${_('{course_number} {course_name} Home Page').format(course_number=course.number, course_name=course.display_name_with_default) |h} + + % else: + + ${_('{course_number} {course_name} Cover Image').format(course_number=course.number, course_name=course.display_name_with_default) |h} + + % endif + % else: +
+ ${_('{course_number} {course_name} Cover Image').format(course_number=course.number, course_name=course.display_name_with_default) | h} +
+ % endif + % if settings.FEATURES.get('ENABLE_VERIFIED_CERTIFICATES'): + + ${_("Enrolled as: ")} + % if course_verified_certs.get('show_image'): + ${course_verified_certs.get('image_alt')} + % endif +
${course_verified_certs.get('enrollment_value')}
+ + % endif +
+

% if show_courseware_link: - % if not is_course_blocked: - ${course.display_number_with_default | h} ${course.display_name_with_default} + % if not is_course_blocked: + ${course.display_name_with_default} % else: - ${course.display_number_with_default | h} ${course.display_name_with_default} + ${course.display_name_with_default} % endif % else: - ${course.display_number_with_default | h} ${course.display_name_with_default} + ${course.display_name_with_default} % endif

- - - % if course.may_certify() and cert_status: - <%include file='_dashboard_certificate_information.html' args='cert_status=cert_status,course=course, enrollment=enrollment'/> - % endif - - % if verification_status.get('status') in [VERIFY_STATUS_NEED_TO_VERIFY, VERIFY_STATUS_SUBMITTED, VERIFY_STATUS_APPROVED, VERIFY_STATUS_NEED_TO_REVERIFY] and not is_course_blocked: -
- % if verification_status['status'] == VERIFY_STATUS_NEED_TO_VERIFY: -
- % if verification_status['days_until_deadline'] is not None: -

${_('Verification not yet complete.')}

-

${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'])}

- % else: -

${_('Almost there!')}

-

${_('You still need to verify for this course.')}

- % endif -
-
- ${_('Verify Now')} -
- % elif verification_status['status'] == VERIFY_STATUS_SUBMITTED: -

${_('You have already verified your ID!')}

-

${_('Thanks for your patience as we process your request.')}

- % elif verification_status['status'] == VERIFY_STATUS_APPROVED: -

${_('You have already verified your ID!')}

- % if verification_status['verification_good_until'] is not None: -

${_('Your verification status is good until {date}.').format(date=verification_status['verification_good_until'])} +

+ ${get_course_about_section(course, 'university')} - + ${course.display_number_with_default | h} + + % if course.has_ended(): + ${_("Ended - {end_date}").format(end_date=course.end_datetime_text("SHORT_DATE"))} + % elif course.has_started(): + ${_("Started - {start_date}").format(start_date=course.start_datetime_text("SHORT_DATE"))} + % elif course.start_date_is_still_default: # Course start date TBD + ${_("Coming Soon")} + % else: # hasn't started yet + ${_("Starts - {start_date}").format(start_date=course.start_datetime_text("SHORT_DATE"))} % endif - % elif verification_status['status'] == VERIFY_STATUS_NEED_TO_REVERIFY: -

${_('Your verification will expire soon!')}

- ## Translators: start_link and end_link will be replaced with HTML tags; - ## please do not translate these. -

${_('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=''.format(href=reverse('verify_student_reverify')), end_link='')}

+ +
+ % if show_courseware_link: +
+
+ % if course.has_ended(): + % if not is_course_blocked: + ${_('View Archived Course')} + % else: + ${_('View Archived Course')} + % endif + % else: + % if not is_course_blocked: + ${_('View Course')} + % else: + ${_('View Course')} + % endif + % endif + + + +
+ +
+ +
+
+
+
% endif
- % endif - % if course_mode_info['show_upsell'] and not is_course_blocked: -
+ - - % 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'])]) %> -
-

- ${_("You must successfully complete {link_start}{prc_display}{link_end} before you begin this course.").format( - link_start=''.format(prc_target), - link_end='', - prc_display=course_requirements['courses'][0]['display'], - )} -

-
- % endif -