Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Orders course goals and updates styling.
This commit is contained in:
Harry Rein
2017-10-19 09:16:12 -04:00
committed by GitHub
parent b5e66f6e90 ec17971a2b
commit 8c8edd2c80
6 changed files with 67 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
lms/djangoapps/course_goals/api.py
View File

@@ -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

28
lms/static/sass/features/_course-experience.scss
View File

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

12
openedx/features/course_experience/static/course_experience/js/CourseHome.js
View File

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

14
openedx/features/course_experience/views/course_home_messages.py
View File

@@ -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>')

2
package.json
View File

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

12
themes/red-theme/lms/static/sass/partials/bootstrap/_theme.scss
View File

@@ -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.