diff --git a/common/djangoapps/student/views/dashboard.py b/common/djangoapps/student/views/dashboard.py
index af8a5fc5ecd4f84ea6f36804ee4ddc8a3c2fb8f0..9c7e1d0727ac7305abe0a1d8f0dde8bda24bfc6c 100644
--- a/common/djangoapps/student/views/dashboard.py
+++ b/common/djangoapps/student/views/dashboard.py
@@ -828,6 +828,14 @@ def student_dashboard(request):
enr for enr in course_enrollments if entitlement.enrollment_course_run.course_id != enr.course_id
]
+ # Collect all program types the user is enrolled in
+ enrolled_program_types = []
+ if getattr(settings, 'ENABLE_DEMOGRAPHICS_COLLECTION', False):
+ enrolled_program_types = {
+ _program.get('type_attrs', {}).get('slug')
+ for _program in meter.engaged_programs
+ if _program.get('type_attrs', {}).get('slug') is not None
+ }
context = {
'urls': urls,
'programs_data': programs_data,
@@ -878,6 +886,7 @@ def student_dashboard(request):
'recovery_email_message': recovery_email_message,
'recovery_email_activation_message': recovery_email_activation_message,
'show_load_all_courses_link': show_load_all_courses_link(user, course_limit, course_enrollments),
+ 'enrolled_program_types': enrolled_program_types,
# TODO START: clean up as part of REVEM-199 (START)
'course_info': get_dashboard_course_info(user, course_enrollments),
# TODO START: clean up as part of REVEM-199 (END)
diff --git a/lms/static/sass/base/_build.scss b/lms/static/sass/base/_build.scss
index a36bffce87028edf1cea8926a93125ac70b4a6e2..3aa8501618dfc9ac4683dfe23780cf99365505f2 100644
--- a/lms/static/sass/base/_build.scss
+++ b/lms/static/sass/base/_build.scss
@@ -7,10 +7,20 @@
@import 'bootstrap/variables';
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins/background-variant';
@import 'bootstrap/scss/mixins/box-shadow';
@import 'bootstrap/scss/mixins/breakpoints';
+@import 'bootstrap/scss/mixins/float';
@import 'bootstrap/scss/mixins/grid';
+@import 'bootstrap/scss/mixins/hover';
@import 'bootstrap/scss/mixins/reset-text';
+@import 'bootstrap/scss/mixins/screen-reader';
+@import 'bootstrap/scss/mixins/text-truncate';
+@import 'bootstrap/scss/mixins/text-emphasis';
+@import 'bootstrap/scss/mixins/text-hide';
+@import 'bootstrap/scss/mixins/visibility';
+@import 'bootstrap/scss/utilities';
+
// Bootstrap components
@import 'bootstrap/scss/popover';
diff --git a/lms/static/sass/elements/_system-feedback.scss b/lms/static/sass/elements/_system-feedback.scss
index 07fd02912ef1b92cd3db38c9527ac9295b1995ac..27602c9460cd747fcb72bdfe4b6502ff66ad3aa6 100644
--- a/lms/static/sass/elements/_system-feedback.scss
+++ b/lms/static/sass/elements/_system-feedback.scss
@@ -120,7 +120,7 @@
box-shadow: none;
border-top: 1px solid #579cc5;
padding: 20px 20px 20px 40px;
- margin: -16px 0 5px 0;
+ margin: -16px 0 10px 0;
}
.fa-close {
diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss
index f6551b2df979744574d473e221642f14d4bc0c4d..de7cc4ada3c3b9b8b6c8462685b668972319adc1 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/lms/static/sass/multicourse/_dashboard.scss
@@ -525,6 +525,8 @@
order: 2;
.wrapper-find-courses {
+ margin-bottom: $baseline * 0.5;
+
.course-advertise {
@include clearfix();
@@ -576,31 +578,9 @@
}
}
- .wrapper-coaching {
- border: 1px solid $border-color-l3;
- margin: 20px 0;
-
- .coaching-signup {
- padding: 20px;
-
- .coaching-prompt {
- font-size: 20px;
- line-height: 28px;
- font-weight: bold;
- }
-
- .coaching-link .btn-neutral {
- display: block;
- text-align: center;
- margin: 20px 20px 0;
- border-radius: 20px;
- padding: 10px;
- border: 1px solid theme-color('primary');
- }
- }
- }
-
.profile-sidebar {
+ margin-bottom: $baseline * 0.5;
+
ul {
padding: 0;
border: 1px solid theme-color("light");
@@ -609,7 +589,6 @@
// Responsive behavior
@include media-breakpoint-down(md) {
- margin: 0 $baseline $baseline*2;
padding: 0;
max-width: 100%;
}
diff --git a/lms/static/sass/shared/_forms.scss b/lms/static/sass/shared/_forms.scss
index 3dd8e52ec9ced009657ebc6363f92265b0c9b59a..777b6446e77c007a9b5950fe8f469c00448e6232 100644
--- a/lms/static/sass/shared/_forms.scss
+++ b/lms/static/sass/shared/_forms.scss
@@ -54,9 +54,14 @@ textarea {
height: 60px;
}
+/*
+Added :not(.btn-reset) because this selector is overly broad and adding an escape
+path is easier than actually resetting all the bits or testing the entire platform
+UI after making this code less upsetting.
+*/
input[type="submit"],
input[type="button"],
-button,
+button:not(.btn-reset),
.button {
border-radius: 3px;
diff --git a/themes/edx.org/lms/static/images/quote_prompt.png b/themes/edx.org/lms/static/images/quote_prompt.png
new file mode 100644
index 0000000000000000000000000000000000000000..d183adb69cf6db1b85a7cef4d37b08f5e5533fc3
Binary files /dev/null and b/themes/edx.org/lms/static/images/quote_prompt.png differ
diff --git a/themes/edx.org/lms/static/sass/partials/lms/theme/_dashboard.scss b/themes/edx.org/lms/static/sass/partials/lms/theme/_dashboard.scss
new file mode 100644
index 0000000000000000000000000000000000000000..be55b832a6b898bf16dcf66bba6cc5d019775920
--- /dev/null
+++ b/themes/edx.org/lms/static/sass/partials/lms/theme/_dashboard.scss
@@ -0,0 +1,51 @@
+.dashboard {
+ .demographics-banner {
+ background-color: #23419f;
+ border-radius: 12px;
+ @media (min-width: 1200px) {
+ height: 64px;
+ }
+ .demographics-banner-icon {
+ height: 140px;
+ }
+ .demographics-banner-prompt {
+ font-size: 24px;
+ line-height: 24px;
+ }
+ .demographics-banner-btn {
+ color: #23419f;
+ border-radius: 20px;
+ font-size: 14px;
+ min-width: 150px;
+ .fa-thumbs-up {
+ font-size: 24px;
+ }
+ }
+ }
+ .side-container {
+ .wrapper-coaching {
+ border: 1px solid $gray-500;
+ margin-bottom: $baseline * 0.5;
+
+ .coaching-signup {
+ padding: 20px;
+
+ .coaching-prompt {
+ font-size: 20px;
+ line-height: 28px;
+ font-weight: bold;
+ }
+
+
+ .coaching-link .btn-neutral {
+ display: block;
+ text-align: center;
+ margin: 20px 20px 0;
+ border-radius: 20px;
+ padding: 10px;
+ border: 1px solid theme-color('primary');
+ }
+ }
+ }
+ }
+}
diff --git a/themes/edx.org/lms/static/sass/partials/lms/theme/_extras.scss b/themes/edx.org/lms/static/sass/partials/lms/theme/_extras.scss
index c57107fe3707872ec0dd11f5627bbdfa99278ccf..1f104fa2e0a77224f4a2da1b2f75a692e9c8070a 100644
--- a/themes/edx.org/lms/static/sass/partials/lms/theme/_extras.scss
+++ b/themes/edx.org/lms/static/sass/partials/lms/theme/_extras.scss
@@ -7,6 +7,7 @@
// rules into modular pieces.
@import 'certificates';
+@import 'dashboard';
// Ensure the header matches the edx.org marketing site header
diff --git a/themes/edx.org/lms/templates/dashboard.html b/themes/edx.org/lms/templates/dashboard.html
index bf9010e7831739d7fd9a99ff9a5b376747aedc9c..891392b3285614fa033e968678586b47e6759d05 100644
--- a/themes/edx.org/lms/templates/dashboard.html
+++ b/themes/edx.org/lms/templates/dashboard.html
@@ -140,6 +140,26 @@ from student.models import CourseEnrollment
<section class="dashboard" id="dashboard-main">
<main class="main-container" id="main" aria-label="Content" tabindex="-1">
+ <%
+ MB_SLUG = "microbachelors"
+ enrolled_in_mb_program = MB_SLUG in enrolled_program_types
+ account_mfe_url = getattr(settings, 'ACCOUNT_MICROFRONTEND_URL', '') or ''
+ %>
+ % if getattr(settings, 'ENABLE_DEMOGRAPHICS_COLLECTION', False) and enrolled_in_mb_program:
+ <a href="${account_mfe_url}#demographics">
+ <div
+ class="demographics-banner d-flex justify-content-left align-items-center flex-column flex-lg-row py-1 px-4 mb-2 mb-lg-4">
+ <img class="demographics-banner-icon d-none d-lg-inline-block" src="${static.url('edx.org/images/quote_prompt.png')}" alt="" aria-hidden="true">
+ <div class="demographics-banner-prompt d-inline-block font-weight-bold text-white py-4 px-2 px-lg-3">
+ ${_("Want to make edX better for everyone?")}
+ </div>
+ <button class="demographics-banner-btn btn-reset d-flex align-items-center bg-white font-weight-bold border-0 py-2 px-3 mx-2 mb-3 m-lg-0 shadow">
+ <span class="fa fa-thumbs-up px-2" aria-hidden="true"></span>
+ ${_("Get started")}
+ </button>
+ </div>
+ </a>
+ % endif
<section class="my-courses" id="my-courses">
<header class="wrapper-header-courses">
<h2 class="header-courses">${_("My Courses")}</h2>