From ec17971a2b974b5fba6b14c0bae58c3b0bf2d55c Mon Sep 17 00:00:00 2001 From: Harry Rein Date: Wed, 18 Oct 2017 15:28:37 -0400 Subject: [PATCH] Orders course goals and updates styling. LEARNER-2860 --- lms/djangoapps/course_goals/api.py | 17 +++++++++++ .../sass/features/_course-experience.scss | 28 ++++++++++++++++++- .../static/course_experience/js/CourseHome.js | 12 ++++---- .../views/course_home_messages.py | 14 ++++------ package.json | 2 +- .../sass/partials/bootstrap/_theme.scss | 12 ++++++-- 6 files changed, 67 insertions(+), 18 deletions(-) diff --git a/lms/djangoapps/course_goals/api.py b/lms/djangoapps/course_goals/api.py index de86f918f2..3d05885f52 100644 --- a/lms/djangoapps/course_goals/api.py +++ b/lms/djangoapps/course_goals/api.py @@ -83,3 +83,20 @@ def get_course_goal_options(): strings, as defined by theCourseGoal model. """ return {goal_key: goal_text for goal_key, goal_text in models.GOAL_KEY_CHOICES} + + +def valid_course_goals_ordered(): + """ + Returns a list of the valid options for goal keys ordered by the level of commitment. + Each option is represented as a tuple, with (goal_key, goal_string). + + This list does not return the unsure option since it does not have a relevant commitment level. + """ + goal_options = get_course_goal_options() + + ordered_goal_options = [] + ordered_goal_options.append((models.GOAL_KEY_CHOICES.certify, goal_options[models.GOAL_KEY_CHOICES.certify])) + ordered_goal_options.append((models.GOAL_KEY_CHOICES.complete, goal_options[models.GOAL_KEY_CHOICES.complete])) + ordered_goal_options.append((models.GOAL_KEY_CHOICES.explore, goal_options[models.GOAL_KEY_CHOICES.explore])) + + return ordered_goal_options diff --git a/lms/static/sass/features/_course-experience.scss b/lms/static/sass/features/_course-experience.scss index 723b283e45..5d6eb8f714 100644 --- a/lms/static/sass/features/_course-experience.scss +++ b/lms/static/sass/features/_course-experience.scss @@ -81,7 +81,7 @@ } .message-header { - @include margin-right($baseline*2); + @include margin-right($baseline*4); font-weight: $font-semibold; margin-bottom: $baseline/2; @@ -112,17 +112,34 @@ .goal-options-container { margin-top: $baseline; text-align: center; + display: flex; + flex-direction: row; .goal-option { text-decoration: none; font-size: font-size(x-small); padding: $baseline/2; + margin: $baseline/4 $baseline/4 0; + flex-grow: 1; + + &:not(.dismissible):first-of-type { + color: theme-color("purchase"); + border-color: theme-color("purchase"); + + &:hover { + color: theme-color("inverse"); + background-color: theme-color("purchase"); + } + } &.dismissible { @include right($baseline/4); position: absolute; top: $baseline/2; + margin: 0; + width: auto; + flex-grow: 1; font-size: font-size(small); color: theme-color("primary"); cursor: pointer; @@ -132,6 +149,15 @@ } } } + + @media (max-width: $grid-breakpoints-md) { + flex-direction: column; + + .goal-option { + margin-top: $baseline/4; + width: 100%; + } + } } } diff --git a/openedx/features/course_experience/static/course_experience/js/CourseHome.js b/openedx/features/course_experience/static/course_experience/js/CourseHome.js index 1bfd886068..e8c411b8a9 100644 --- a/openedx/features/course_experience/static/course_experience/js/CourseHome.js +++ b/openedx/features/course_experience/static/course_experience/js/CourseHome.js @@ -60,12 +60,14 @@ export class CourseHome { // eslint-disable-line import/prefer-default-export }); // Send an ajax request to update the course goal - $goalSelect.on('change', (event) => { + $goalSelect.on('blur change', (event) => { + $currentGoalText.show(); + $goalUpdateTitle.show(); + $goalUpdateLabel.hide(); + $goalSelect.hide(); + // No need to update in the case of a blur event + if (event.type === 'blur') return; const newGoalKey = $(event.target).val(); - $goalSelect.toggle(); - $currentGoalText.toggle(); - $goalUpdateTitle.toggle(); - $goalUpdateLabel.toggle(); $responseIndicator.removeClass().addClass('response-icon fa fa-spinner fa-spin'); $.ajax({ method: 'POST', diff --git a/openedx/features/course_experience/views/course_home_messages.py b/openedx/features/course_experience/views/course_home_messages.py index 7bd7831281..dbe74db2de 100644 --- a/openedx/features/course_experience/views/course_home_messages.py +++ b/openedx/features/course_experience/views/course_home_messages.py @@ -16,7 +16,7 @@ from opaque_keys.edx.keys import CourseKey from web_fragments.fragment import Fragment from courseware.courses import get_course_date_blocks, get_course_with_access -from lms.djangoapps.course_goals.api import get_course_goal, get_course_goal_options, get_goal_api_url, has_course_goal_permission +from lms.djangoapps.course_goals.api import get_course_goal, get_course_goal_options, valid_course_goals_ordered, get_goal_api_url, has_course_goal_permission from lms.djangoapps.course_goals.models import GOAL_KEY_CHOICES from openedx.core.djangoapps.plugin_api.views import EdxFragmentView from openedx.core.djangolib.markup import HTML, Text @@ -165,22 +165,20 @@ def _register_course_goal_message(request, course): # Add the option to set a goal to earn a certificate, # complete the course or explore the course - course_goal_keys = course_goal_options.keys() - course_goal_keys.remove(GOAL_KEY_CHOICES.unsure) - for goal_key in course_goal_keys: - goal_text = course_goal_options[goal_key] + course_goals_by_commitment_level = valid_course_goals_ordered() + for goal in course_goals_by_commitment_level: + goal_key, goal_text = goal goal_choices_html += HTML( '{initial_tag}{goal_text}{closing_tag}' ).format( initial_tag=HTML( - '') diff --git a/package.json b/package.json index 38d0e71ca4..a0a12a8283 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "coffee-loader": "^0.7.3", "coffee-script": "1.6.1", "@edx/studio-frontend": "0.1.0", - "@edx/edx-bootstrap": "0.3.3", + "@edx/edx-bootstrap": "0.3.4", "edx-pattern-library": "0.18.1", "edx-ui-toolkit": "1.5.2", "exports-loader": "^0.6.4", diff --git a/themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss b/themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss index 8ecfca1692..f87ce36371 100644 --- a/themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss +++ b/themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss @@ -18,12 +18,18 @@ $theme-colors: (); $theme-colors: map-merge(( primary: $red, secondary: $gray-600, + inverse: $white, + disabled: $gray-600, success: $green, - info: $cyan, + info: $pink, warning: $yellow, danger: $red, - light: $gray-100, - dark: $gray-800 + purchase: $green, + lightest: $gray-100, + light: $gray-200, + dark: $gray-800, + darker: $gray-900, + darkest: $black ), $theme-colors); // Note: for some reason this doesn't obey the primary color as defined above.