Commit 8c8edd2c by Harry Rein Committed by GitHub

Merge pull request #16274 from edx/HarryRein/LEARNER-2860-goals-styling-fixes

Orders course goals and updates styling.
parents b5e66f6e ec17971a
...@@ -83,3 +83,20 @@ def get_course_goal_options(): ...@@ -83,3 +83,20 @@ def get_course_goal_options():
strings, as defined by theCourseGoal model. strings, as defined by theCourseGoal model.
""" """
return {goal_key: goal_text for goal_key, goal_text in models.GOAL_KEY_CHOICES} 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
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
} }
.message-header { .message-header {
@include margin-right($baseline*2); @include margin-right($baseline*4);
font-weight: $font-semibold; font-weight: $font-semibold;
margin-bottom: $baseline/2; margin-bottom: $baseline/2;
...@@ -112,17 +112,34 @@ ...@@ -112,17 +112,34 @@
.goal-options-container { .goal-options-container {
margin-top: $baseline; margin-top: $baseline;
text-align: center; text-align: center;
display: flex;
flex-direction: row;
.goal-option { .goal-option {
text-decoration: none; text-decoration: none;
font-size: font-size(x-small); font-size: font-size(x-small);
padding: $baseline/2; 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 { &.dismissible {
@include right($baseline/4); @include right($baseline/4);
position: absolute; position: absolute;
top: $baseline/2; top: $baseline/2;
margin: 0;
width: auto;
flex-grow: 1;
font-size: font-size(small); font-size: font-size(small);
color: theme-color("primary"); color: theme-color("primary");
cursor: pointer; cursor: pointer;
...@@ -132,6 +149,15 @@ ...@@ -132,6 +149,15 @@
} }
} }
} }
@media (max-width: $grid-breakpoints-md) {
flex-direction: column;
.goal-option {
margin-top: $baseline/4;
width: 100%;
}
}
} }
} }
......
...@@ -60,12 +60,14 @@ export class CourseHome { // eslint-disable-line import/prefer-default-export ...@@ -60,12 +60,14 @@ export class CourseHome { // eslint-disable-line import/prefer-default-export
}); });
// Send an ajax request to update the course goal // 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(); const newGoalKey = $(event.target).val();
$goalSelect.toggle();
$currentGoalText.toggle();
$goalUpdateTitle.toggle();
$goalUpdateLabel.toggle();
$responseIndicator.removeClass().addClass('response-icon fa fa-spinner fa-spin'); $responseIndicator.removeClass().addClass('response-icon fa fa-spinner fa-spin');
$.ajax({ $.ajax({
method: 'POST', method: 'POST',
......
...@@ -16,7 +16,7 @@ from opaque_keys.edx.keys import CourseKey ...@@ -16,7 +16,7 @@ from opaque_keys.edx.keys import CourseKey
from web_fragments.fragment import Fragment from web_fragments.fragment import Fragment
from courseware.courses import get_course_date_blocks, get_course_with_access 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 lms.djangoapps.course_goals.models import GOAL_KEY_CHOICES
from openedx.core.djangoapps.plugin_api.views import EdxFragmentView from openedx.core.djangoapps.plugin_api.views import EdxFragmentView
from openedx.core.djangolib.markup import HTML, Text from openedx.core.djangolib.markup import HTML, Text
...@@ -165,22 +165,20 @@ def _register_course_goal_message(request, course): ...@@ -165,22 +165,20 @@ def _register_course_goal_message(request, course):
# Add the option to set a goal to earn a certificate, # Add the option to set a goal to earn a certificate,
# complete the course or explore the course # complete the course or explore the course
course_goal_keys = course_goal_options.keys() course_goals_by_commitment_level = valid_course_goals_ordered()
course_goal_keys.remove(GOAL_KEY_CHOICES.unsure) for goal in course_goals_by_commitment_level:
for goal_key in course_goal_keys: goal_key, goal_text = goal
goal_text = course_goal_options[goal_key]
goal_choices_html += HTML( goal_choices_html += HTML(
'{initial_tag}{goal_text}{closing_tag}' '{initial_tag}{goal_text}{closing_tag}'
).format( ).format(
initial_tag=HTML( 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}">' 'data-choice="{goal_key}">'
).format( ).format(
goal_key=goal_key, goal_key=goal_key,
aria_label_choice=Text(_("Set goal to: {goal_text}")).format( aria_label_choice=Text(_("Set goal to: {goal_text}")).format(
goal_text=Text(_(goal_text)) goal_text=Text(_(goal_text))
), )
col_sel='col-' + str(int(math.floor(12 / len(course_goal_keys))))
), ),
goal_text=goal_text, goal_text=goal_text,
closing_tag=HTML('</button>') closing_tag=HTML('</button>')
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
"coffee-loader": "^0.7.3", "coffee-loader": "^0.7.3",
"coffee-script": "1.6.1", "coffee-script": "1.6.1",
"@edx/studio-frontend": "0.1.0", "@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-pattern-library": "0.18.1",
"edx-ui-toolkit": "1.5.2", "edx-ui-toolkit": "1.5.2",
"exports-loader": "^0.6.4", "exports-loader": "^0.6.4",
......
...@@ -18,12 +18,18 @@ $theme-colors: (); ...@@ -18,12 +18,18 @@ $theme-colors: ();
$theme-colors: map-merge(( $theme-colors: map-merge((
primary: $red, primary: $red,
secondary: $gray-600, secondary: $gray-600,
inverse: $white,
disabled: $gray-600,
success: $green, success: $green,
info: $cyan, info: $pink,
warning: $yellow, warning: $yellow,
danger: $red, danger: $red,
light: $gray-100, purchase: $green,
dark: $gray-800 lightest: $gray-100,
light: $gray-200,
dark: $gray-800,
darker: $gray-900,
darkest: $black
), $theme-colors); ), $theme-colors);
// Note: for some reason this doesn't obey the primary color as defined above. // Note: for some reason this doesn't obey the primary color as defined above.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment