Orders course goals and updates styling.

LEARNER-2860

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

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%;
+        }
+      }
     }
   }
 

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',

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(
-                '<button tabindex="0" aria-label="{aria_label_choice}" class="goal-option {col_sel} btn" '
+                '<button tabindex="0" aria-label="{aria_label_choice}" class="goal-option btn" '
                 'data-choice="{goal_key}">'
             ).format(
                 goal_key=goal_key,
                 aria_label_choice=Text(_("Set goal to: {goal_text}")).format(
                     goal_text=Text(_(goal_text))
-                ),
-                col_sel='col-' + str(int(math.floor(12 / len(course_goal_keys))))
+                )
             ),
             goal_text=goal_text,
             closing_tag=HTML('</button>')

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",

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.