Skip to content
Snippets Groups Projects
Unverified Commit 3e2fc5d8 authored by Carla Duarte's avatar Carla Duarte Committed by GitHub
Browse files

Merge pull request #25413 from edx/ciduarte/AA-405

AA-405: UI fixes for courseware
parents 64ee4a89 ca7434ce
Branches
Tags
No related merge requests found
......@@ -953,7 +953,6 @@ div.problem {
// +Problem - Actions
// ====================
div.problem .action {
margin-top: $baseline;
min-height: $baseline;
width: 100%;
display: flex;
......@@ -963,6 +962,13 @@ div.problem .action {
align-items: center;
flex-wrap: wrap;
.problem-action-buttons-wrapper {
display: inline-flex;
justify-content: flex-end;
width: 100%;
padding-bottom: $baseline;
}
.problem-action-button-wrapper {
@include border-right(1px solid $light-gray1);
......@@ -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;
......@@ -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;
}
}
......
......@@ -150,11 +150,11 @@ class MasqueradeTestCase(SharedModuleStoreTestCase, LoginEnrollmentTestCase, Mas
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):
"""
......
......@@ -49,7 +49,7 @@
&.has-button {
.banner-cta-text {
flex: 1 1 20em;
max-width: 70%;
max-width: 100%;
}
}
......@@ -61,6 +61,12 @@
.banner-cta-button {
align-self: start;
flex: none;
margin-top: $baseline;
@media only screen and (min-width: 630px) {
margin-top: 0px;
margin-left: 10px;
}
a {
text-decoration: none;
......
......@@ -26,6 +26,31 @@ from openedx.core.djangolib.markup import HTML
</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>
<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>
......@@ -33,28 +58,30 @@ from openedx.core.djangolib.markup import HTML
% 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
......@@ -65,32 +92,6 @@ from openedx.core.djangolib.markup import HTML
<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',
......
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