From dfcb3f2b6e4991c8506f87266290e53f7c8bca1e Mon Sep 17 00:00:00 2001 From: Marco Morales Date: Wed, 25 Feb 2015 19:49:18 -0500 Subject: [PATCH 1/3] 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 --- common/test/acceptance/pages/lms/dashboard.py | 4 +- lms/static/js/dashboard/legacy.js | 12 + lms/static/sass/_shame.scss | 7 - lms/static/sass/base/_base.scss | 2 +- lms/static/sass/base/_extends.scss | 8 + lms/static/sass/elements/_typography.scss | 1 + lms/static/sass/multicourse/_dashboard.scss | 1380 +++++++++-------- lms/templates/dashboard.html | 52 + .../dashboard/_dashboard_course_listing.html | 426 ++--- 9 files changed, 1027 insertions(+), 865 deletions(-) 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 -
+ From bd5b0b31a096c17e170a5d7edd1e120a078f2e3a Mon Sep 17 00:00:00 2001 From: Marco Morales Date: Tue, 17 Mar 2015 14:05:56 -0400 Subject: [PATCH 3/3] Matt - javascript and test changes, Marco - styling feedback from initial reviews --- .../student/tests/test_bulk_email_settings.py | 9 +- common/test/acceptance/pages/lms/dashboard.py | 10 +- .../courseware/features/registration.py | 9 +- lms/static/js/dashboard/legacy.js | 36 +- lms/static/sass/base/_variables.scss | 5 + lms/static/sass/multicourse/_dashboard.scss | 773 +++++++++--------- lms/static/sass/shared/_header.scss | 22 +- lms/templates/dashboard.html | 87 +- .../dashboard/_dashboard_course_listing.html | 141 ++-- 9 files changed, 500 insertions(+), 592 deletions(-) diff --git a/common/djangoapps/student/tests/test_bulk_email_settings.py b/common/djangoapps/student/tests/test_bulk_email_settings.py index 0fd2a62f3b..4d8146405c 100644 --- a/common/djangoapps/student/tests/test_bulk_email_settings.py +++ b/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 = ( - '' + 'data-dashboard-index="0" data-optout="False">Email Settings' ).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 = ( - '' + 'data-dashboard-index="0" data-optout="False">Email Settings' ).format( org='edX', num='toy', diff --git a/common/test/acceptance/pages/lms/dashboard.py b/common/test/acceptance/pages/lms/dashboard.py index a1b5ca69ec..7736ab3e0a 100644 --- a/common/test/acceptance/pages/lms/dashboard.py +++ b/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 diff --git a/lms/djangoapps/courseware/features/registration.py b/lms/djangoapps/courseware/features/registration.py index 85f2c1f5e3..ebe4ec52df 100644 --- a/lms/djangoapps/courseware/features/registration.py +++ b/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) diff --git a/lms/static/js/dashboard/legacy.js b/lms/static/js/dashboard/legacy.js index 47096c5a4f..9abdad1a31 100644 --- a/lms/static/js/dashboard/legacy.js +++ b/lms/static/js/dashboard/legacy.js @@ -97,14 +97,26 @@ } function toggleCourseActionsDropdown(event) { - var dropdown = $(event.target).closest('.action-more').find('.actions-dropdown-list') + 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'); + } + + // 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(); - - $(this).toggleClass('is-visible'); - - // add BI event here - } $("#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( diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss index bab8e1c077..2b07279b38 100644 --- a/lms/static/sass/base/_variables.scss +++ b/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); diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index 03d6388739..af6a01c3e0 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/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,287 +285,307 @@ } } } + } +} - // ==================== +// +Dashboard - Course +// ==================== +.dashboard .my-courses { - // UI: individual course item - .course { - @include box-sizing(box); - @include transition(all 0.15s linear 0s); + // 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; - } - - .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; - 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 { + width: 100%; 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; - 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); - - 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; - - p { - color: #222; - - 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; + bottom: 15px; + display: inline-block; text-align: center; - &.archived { - @include button(simple, $button-archive-color); - font: normal 15px/1.6rem $sans-serif; - - &:hover, &:focus { - text-decoration: none; - } + .label { + @extend %text-sr; } + .deco-graphic { + position: absolute; + top: -5px; + @include right(0); + } + + .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; + } + } + } + + .wrapper-course-details { + display: block; + @include float(left); + width: flex-grid(9); + padding: 0; + } + + .course-title { + + 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); - // UI: message - .wrapper-message-primary { - @include clearfix(); + [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 { + + // UI: course item actions + + .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; + } + + // STATE: is-disabled + &.is-disabled { + color: $gray-l4; + } + + // TYPE: facebook share + &.action-facebook, { + color: $facebook-blue; + } + + // TYPE: twitter share + &.action-twitter { + color: $twitter-blue; + } + } + + // UI: general actions dropdown layout + .wrapper-action-more { + display: inline-block; + position: relative; + @include float(right); + + + .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); + + &.is-visible { + display: block; + pointer-events: auto; + } + + .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; + } + + &: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; + 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; + } + } + + .course-status-completed { + background: $gray-l3; + color: $very-light-text; + + p { + color: $gray-d4; + + 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; + + &:hover, &:focus { + text-decoration: none; + } + } + + &:hover, &:focus { + text-decoration: none; + } + } + } + + // ==================== + + // UI: messages + .wrapper-messages-primary { + @include clearfix(); + .messages-list { margin: 0; padding: 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 + // ==================== + + // 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 { - position: absolute; - top: 105px; - @include left(0); - display: inline-block; - text-align: center; - width: 200px; + .label { + @extend %text-sr; + } + // status message + .sts-enrollment-value { + background: $professional-color-lvl3; + } + } + } + + // CASE: "enrolled as" status - verified + &.verified { + + // changes to cover + .wrapper-course-image .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: -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); + @include right(0); } // 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; + background: $verified-color-lvl1; } } } + + // CASE: "enrolled as" status - honor code + &.honor { + + // changes to cover + .wrapper-course-image .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 + .wrapper-course-image .cover { + border-color: $audit-color-lvl2; + padding: ($baseline/10); + } + + // 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 { diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index e08ff32f1b..45e7bc30c4 100644 --- a/lms/static/sass/shared/_header.scss +++ b/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 { diff --git a/lms/templates/dashboard.html b/lms/templates/dashboard.html index 8c3f1749cf..6aa2c15d5a 100644 --- a/lms/templates/dashboard.html +++ b/lms/templates/dashboard.html @@ -74,26 +74,25 @@
-
+

${_("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" /> + % 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 -
% else:
@@ -122,11 +121,12 @@ % endfor % endfor + % endif
-
+
-

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

+

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

-<<<<<<< HEAD - -
- -
-
-

${_("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 -======= ->>>>>>> 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
@@ -309,8 +254,6 @@
- -