Skip to content

AA-405: UI fixes for courseware #25413

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ciduarte merged 1 commit into from
Oct 23, 2020
Merged

AA-405: UI fixes for courseware #25413

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 13 additions & 6 deletions common/lib/xmodule/xmodule/css/capa/display.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -953,7 +953,6 @@ div.problem {
// +Problem - Actions
// ====================
div.problem .action {
margin-top: $baseline;
min-height: $baseline;
width: 100%;
display: flex;
Expand All @@ -963,6 +962,13 @@ div.problem .action {
align-items: center;
flex-wrap: wrap;

.problem-action-buttons-wrapper {

@ciduarte ciduarte Oct 22, 2020

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a huge fan of this name but it was already being used and I didn't want to mess with it

display: inline-flex;
justify-content: flex-end;
width: 100%;
padding-bottom: $baseline;
}

.problem-action-button-wrapper {
@include border-right(1px solid $light-gray1);

Expand All @@ -977,6 +983,8 @@ div.problem .action {
@include margin-right($baseline / 5);

max-width: 110px;
text-decoration: underline;
text-transform: none;

.icon {
margin-bottom: $baseline / 10;
Expand Down Expand Up @@ -1009,13 +1017,12 @@ div.problem .action {
display: inline-block;
}
.submit-cta-description {
margin-left: 8px;
color: $blue;
font-size: small;
}
.submit-cta-link-button {
background: none;
border: none;
color: $blue;
cursor: pointer;
text-decoration: underline;
text-transform: none;
}
}

Expand Down
4 changes: 2 additions & 2 deletions lms/djangoapps/courseware/tests/test_masquerade.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,11 +150,11 @@ def get_problem(self):

def verify_show_answer_present(self, show_answer_expected):
"""
Verifies that "Show Answer" is only present when expected (for staff only).
Verifies that "Show answer" is only present when expected (for staff only).
"""
problem_html = json.loads(self.get_problem().content.decode('utf-8'))['html']
self.assertIn(self.problem_display_name, problem_html)
self.assertEqual(show_answer_expected, "Show Answer" in problem_html)
self.assertEqual(show_answer_expected, "Show answer" in problem_html)

def ensure_masquerade_as_group_member(self, partition_id, group_id):
"""
Expand Down
8 changes: 7 additions & 1 deletion lms/static/sass/course/layout/_banner_cta.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
&.has-button {
.banner-cta-text {
flex: 1 1 20em;
max-width: 70%;
max-width: 100%;
}
}

Expand All @@ -61,6 +61,12 @@
.banner-cta-button {
align-self: start;
flex: none;
margin-top: $baseline;

@media only screen and (min-width: 630px) {

@mikix mikix Oct 23, 2020

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't have a variable for that somewhere? I totally believe we don't, just a bummer.

@ciduarte ciduarte Oct 23, 2020

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah when I did a quick search for @media only screen, all the values were hardcoded :/

margin-top: 0px;
margin-left: 10px;
}

a {
text-decoration: none;
Expand Down
81 changes: 41 additions & 40 deletions lms/templates/problem.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,35 +26,62 @@ <h3 class="hd hd-3 problem-header" id="${ short_id }-problem-title" aria-describ
</div>
% endif

<div class="problem-action-buttons-wrapper">
% if demand_hint_possible:
<span class="problem-action-button-wrapper">
<button type="button" class="hint-button problem-action-btn btn-default btn-small" data-value="${_('Hint')}" ${'' if should_enable_next_hint else 'disabled'}>${_('Hint')}</button>
</span>
% endif
% if save_button:
<span class="problem-action-button-wrapper">
<button type="button" class="save problem-action-btn btn-default btn-small" data-value="${_('Save')}">
<span aria-hidden="true">${_('Save')}</span>
<span class="sr">${_("Save your answer")}</span>
</button>
</span>
% endif
% if reset_button:
<span class="problem-action-button-wrapper">
<button type="button" class="reset problem-action-btn btn-default btn-small" data-value="${_('Reset')}"><span aria-hidden="true">${_('Reset')}</span><span class="sr">${_("Reset your answer")}</span></button>
</span>
% endif
% if answer_available:
<span class="problem-action-button-wrapper">
<button type="button" class="show problem-action-btn btn-default btn-small" aria-describedby="${ short_id }-problem-title"><span class="show-label">${_('Show answer')}</span></button>
</span>
% endif
</div>
Comment on lines 29 to 53

@ciduarte ciduarte Oct 22, 2020

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was a big copy and paste from the section below, but I removed the icon from each button

<div class="submit-attempt-container">
<button type="button" class="submit btn-brand" data-submitting="${ submit_button_submitting }" data-value="${ submit_button }" data-should-enable-submit-button="${ should_enable_submit_button }" aria-describedby="submission_feedback_${short_id}" ${'' if should_enable_submit_button else 'disabled'}>
<span class="submit-label">${ submit_button }</span>
</button>

% if submit_disabled_cta:
% if submit_disabled_cta.get('event_data'):
<button class="submit-cta-link-button btn-brand" onclick="emit_event(${submit_disabled_cta['event_data']})">${submit_disabled_cta['link_name']}
<span class="submit-cta-description" tabindex="0" role="note" aria-label="description">
<span data-tooltip="${submit_disabled_cta['description']}" data-tooltip-show-on-click="true"
class="fa fa-info-circle fa-lg" aria-hidden="true">
</span>
</span>
<span class="sr">(${submit_disabled_cta['description']})</span>
<button class="submit-cta-link-button btn-default btn-small" onclick="emit_event(${submit_disabled_cta['event_data']})">
${submit_disabled_cta['link_name']}
</button>
<span class="submit-cta-description" tabindex="0" role="note" aria-label="description">
<span data-tooltip="${submit_disabled_cta['description']}" data-tooltip-show-on-click="true"
class="fa fa-info-circle fa-lg" aria-hidden="true">
</span>
</span>
<span class="sr">(${submit_disabled_cta['description']})</span>
% else:
<form class="submit-cta" method="post" action="${submit_disabled_cta['link']}">
<input type="hidden" id="csrf_token" name="csrfmiddlewaretoken" value="${csrf_token}">
% for form_name, form_value in submit_disabled_cta['form_values'].items():
<input type="hidden" name="${form_name}" value="${form_value}">
% endfor
<button class="submit-cta-link-button btn-brand">${submit_disabled_cta['link_name']}
<span class="submit-cta-description" tabindex="0" role="note" aria-label="description">
<span data-tooltip="${submit_disabled_cta['description']}" data-tooltip-show-on-click="true"
class="fa fa-info-circle fa-lg" aria-hidden="true">
</span>
</span>
<span class="sr">(${submit_disabled_cta['description']})</span>
<button class="submit-cta-link-button btn-default btn-small">
${submit_disabled_cta['link_name']}
</button>
<span class="submit-cta-description" tabindex="0" role="note" aria-label="description">
<span data-tooltip="${submit_disabled_cta['description']}" data-tooltip-show-on-click="true"
class="fa fa-info-circle fa-lg" aria-hidden="true">
</span>
</span>
<span class="sr">(${submit_disabled_cta['description']})</span>
</form>
% endif
% endif
Expand All @@ -65,32 +92,6 @@ <h3 class="hd hd-3 problem-header" id="${ short_id }-problem-title" aria-describ
<span class="sr">${_("Some problems have options such as save, reset, hints, or show answer. These options follow the Submit button.")}</span>
</div>
</div>
<div class="problem-action-buttons-wrapper">
% if demand_hint_possible:
<span class="problem-action-button-wrapper">
<button type="button" class="hint-button problem-action-btn btn-default btn-small" data-value="${_('Hint')}" ${'' if should_enable_next_hint else 'disabled'}><span class="icon fa fa-question" aria-hidden="true"></span>${_('Hint')}</button>
</span>
% endif
% if save_button:
<span class="problem-action-button-wrapper">
<button type="button" class="save problem-action-btn btn-default btn-small" data-value="${_('Save')}">
<span class="icon fa fa-floppy-o" aria-hidden="true"></span>
<span aria-hidden="true">${_('Save')}</span>
<span class="sr">${_("Save your answer")}</span>
</button>
</span>
% endif
% if reset_button:
<span class="problem-action-button-wrapper">
<button type="button" class="reset problem-action-btn btn-default btn-small" data-value="${_('Reset')}"><span class="icon fa fa-refresh" aria-hidden="true"></span><span aria-hidden="true">${_('Reset')}</span><span class="sr">${_("Reset your answer")}</span></button>
</span>
% endif
% if answer_available:
<span class="problem-action-button-wrapper">
<button type="button" class="show problem-action-btn btn-default btn-small" aria-describedby="${ short_id }-problem-title"><span class="icon fa fa-info-circle" aria-hidden="true"></span><span class="show-label">${_('Show Answer')}</span></button>
</span>
% endif
</div>
</div>
<%include file="problem_notifications.html" args="
notification_type='warning',
Expand Down