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 = ( - 'Email Settings' + '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 = ( - 'Email Settings' + '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 @@
- -