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

Merge pull request #25972 from edx/mikix/banner-cta-tweaks

Browse Source 
AA-505: Some design updates for courseware "shift dates" UI
This commit is contained in:
Michael Terry
2021-01-05 13:28:37 -05:00
committed by GitHub
parent acbefd1079 d000eb4f67
commit c3baf5c19e
7 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
common/lib/xmodule/xmodule/css/capa/display.scss
View File

@@ -970,21 +970,26 @@ div.problem .action {
} }
.problem-action-button-wrapper { .problem-action-button-wrapper {
@include border-right(1px solid $light-gray1); @include border-right(1px solid $gray-300);
@include padding(0, 13px); // to create a 26px gap, which is an a11y recommendation
display: inline-block; display: inline-block;
&:last-child { &:last-child {
border: none; border: none;
padding-right: 0;
} }
} }
.problem-action-btn { .problem-action-btn {
@include margin-right($baseline / 5); border: none;
max-width: 110px; max-width: 110px;
text-decoration: underline;
text-transform: none; &:hover,
&:focus,
&:active {
color: $primary !important;
}
.icon { .icon {
margin-bottom: $baseline / 10; margin-bottom: $baseline / 10;
@@ -994,12 +999,13 @@ div.problem .action {
@media print { @media print {
display: none; display: none;
} }
} }
.submit-attempt-container { .submit-attempt-container {
padding-bottom: $baseline; padding-bottom: $baseline;
flex-grow: 1; flex-grow: 1;
display: flex;
align-items: center;
@media (max-width: $bp-screen-lg) { @media (max-width: $bp-screen-lg) {
max-width: 100%; max-width: 100%;
@@ -1013,19 +1019,14 @@ div.problem .action {
white-space: nowrap; white-space: nowrap;
} }
.submit-cta {
display: inline-block;
}
.submit-cta-description { .submit-cta-description {
color: $blue; color: $primary;
font-size: small; font-size: small;
padding-right: $baseline / 2; padding-right: $baseline / 2;
} }
.submit-cta-link-button { .submit-cta-link-button {
border: none; color: $primary;
padding-right: $baseline / 4; padding-right: $baseline / 4;
text-decoration: underline;
text-transform: none;
} }
} }

12
lms/static/sass/course/_dates.scss
View File

@@ -40,7 +40,7 @@
background-color: #f5f5f5; background-color: #f5f5f5;
&.past-due { &.past-due {
background-color: #d1d2d4; background-color: #475b65;
} }
} }
@@ -147,13 +147,12 @@
padding: 2px 8px; padding: 2px 8px;
border-radius: 5px; border-radius: 5px;
margin-left: 8px; margin-left: 8px;
font-style: italic; font-weight: normal;
font-weight: bold;
vertical-align: top; vertical-align: top;
&.completed { &.completed {
background-color: #f3f3f4; background-color: #f0f2f2;
color: #2d323e; color: #212529;
} }
&.due-next { &.due-next {
@@ -170,7 +169,8 @@
} }
&.past-due { &.past-due {
background-color: #d1d2d4; background-color: #475b65;
color: #fff;
} }
&.today { &.today {

14
lms/static/sass/course/courseware/_courseware.scss
View File

@@ -534,22 +534,22 @@ html.video-fullscreen {
.pill { .pill {
font-size: 12px; font-size: 12px;
max-height: 20px; line-height: 14px;
max-height: 16px;
padding: 2px 8px; padding: 2px 8px;
border-radius: 5px; border-radius: 5px;
margin-top: 4px;
margin-left: 8px; margin-left: 8px;
font-style: italic;
font-weight: bold;
vertical-align: top; vertical-align: top;
&.completed { &.completed {
background-color: #f3f3f4; background-color: #f0f2f2;
color: #2d323e; color: #212529;
} }
&.past-due { &.past-due {
background-color: #d1d2d4; background-color: #475b65;
color: black; color: #fff;
} }
} }
} }

1
lms/static/sass/course/layout/_banner_cta.scss
View File

@@ -4,7 +4,6 @@
border-radius: 2px; border-radius: 2px;
border: solid 1px #0175b4; border: solid 1px #0175b4;
font-size: 14px; font-size: 14px;
font-weight: bold;
line-height: 24px; line-height: 24px;
padding: 7px 18px; padding: 7px 18px;

2
lms/templates/dates_banner.html
View File

@@ -30,7 +30,7 @@ additional_styling_class = 'on-mobile' if is_mobile_app else 'has-button'
<form method="post" action="${reset_deadlines_url}"> <form method="post" action="${reset_deadlines_url}">
<input type="hidden" id="csrf_token" name="csrfmiddlewaretoken" value="${csrf_token}"> <input type="hidden" id="csrf_token" name="csrfmiddlewaretoken" value="${csrf_token}">
<input type="hidden" name="course_id" value="${course.id}"> <input type="hidden" name="course_id" value="${course.id}">
<button class="btn">${_("Shift due dates")}</button> <button class="btn btn-outline-primary">${_("Shift due dates")}</button>
</form> </form>
</div> </div>
% endif % endif

12
lms/templates/problem.html
View File

@@ -29,12 +29,12 @@ from openedx.core.djangolib.markup import HTML
<div class="problem-action-buttons-wrapper"> <div class="problem-action-buttons-wrapper">
% if demand_hint_possible: % if demand_hint_possible:
<span class="problem-action-button-wrapper"> <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> <button type="button" class="hint-button problem-action-btn btn-link btn-small" data-value="${_('Hint')}" ${'' if should_enable_next_hint else 'disabled'}>${_('Hint')}</button>
</span> </span>
% endif % endif
% if save_button: % if save_button:
<span class="problem-action-button-wrapper"> <span class="problem-action-button-wrapper">
<button type="button" class="save problem-action-btn btn-default btn-small" data-value="${_('Save')}"> <button type="button" class="save problem-action-btn btn-link btn-small" data-value="${_('Save')}">
<span aria-hidden="true">${_('Save')}</span> <span aria-hidden="true">${_('Save')}</span>
<span class="sr">${_("Save your answer")}</span> <span class="sr">${_("Save your answer")}</span>
</button> </button>
@@ -42,12 +42,12 @@ from openedx.core.djangolib.markup import HTML
% endif % endif
% if reset_button: % if reset_button:
<span class="problem-action-button-wrapper"> <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> <button type="button" class="reset problem-action-btn btn-link btn-small" data-value="${_('Reset')}"><span aria-hidden="true">${_('Reset')}</span><span class="sr">${_("Reset your answer")}</span></button>
</span> </span>
% endif % endif
% if answer_available: % if answer_available:
<span class="problem-action-button-wrapper"> <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> <button type="button" class="show problem-action-btn btn-link btn-small" aria-describedby="${ short_id }-problem-title"><span class="show-label">${_('Show answer')}</span></button>
</span> </span>
% endif % endif
</div> </div>
@@ -58,7 +58,7 @@ from openedx.core.djangolib.markup import HTML
% if submit_disabled_cta: % if submit_disabled_cta:
% if submit_disabled_cta.get('event_data'): % if submit_disabled_cta.get('event_data'):
<button class="submit-cta-link-button btn-default btn-small" onclick="emit_event(${submit_disabled_cta['event_data']})"> <button class="submit-cta-link-button btn-link btn-small" onclick="emit_event(${submit_disabled_cta['event_data']})">
${submit_disabled_cta['link_name']} ${submit_disabled_cta['link_name']}
</button> </button>
<span class="submit-cta-description" tabindex="0" role="note" aria-label="description"> <span class="submit-cta-description" tabindex="0" role="note" aria-label="description">
@@ -73,7 +73,7 @@ from openedx.core.djangolib.markup import HTML
% for form_name, form_value in submit_disabled_cta['form_values'].items(): % for form_name, form_value in submit_disabled_cta['form_values'].items():
<input type="hidden" name="${form_name}" value="${form_value}"> <input type="hidden" name="${form_name}" value="${form_value}">
% endfor % endfor
<button class="submit-cta-link-button btn-default btn-small"> <button class="submit-cta-link-button btn-link btn-small">
${submit_disabled_cta['link_name']} ${submit_disabled_cta['link_name']}
</button> </button>
<span class="submit-cta-description" tabindex="0" role="note" aria-label="description"> <span class="submit-cta-description" tabindex="0" role="note" aria-label="description">

6
lms/templates/vert_module.html
View File

@@ -27,7 +27,7 @@ from openedx.core.djangolib.markup import HTML
% if completed: % if completed:
<div class="pill completed">${_('Completed')}</div> <div class="pill completed">${_('Completed')}</div>
% elif past_due: % elif past_due:
<div class="pill past-due">${_('Past Due')}</div> <div class="pill past-due">${_('Past due')}</div>
% endif % endif
</div> </div>
% endif % endif
@@ -42,7 +42,7 @@ from openedx.core.djangolib.markup import HTML
<div class="banner-cta-text">${vertical_banner_cta['description']}</div> <div class="banner-cta-text">${vertical_banner_cta['description']}</div>
% if vertical_banner_cta.get('event_data'): % if vertical_banner_cta.get('event_data'):
<div class="banner-cta-button"> <div class="banner-cta-button">
<button class="btn" onclick="emit_event(${vertical_banner_cta['event_data']})">${vertical_banner_cta['link_name']}</button> <button class="btn btn-outline-primary" onclick="emit_event(${vertical_banner_cta['event_data']})">${vertical_banner_cta['link_name']}</button>
</div> </div>
% else: % else:
<div class="banner-cta-button"> <div class="banner-cta-button">
@@ -51,7 +51,7 @@ from openedx.core.djangolib.markup import HTML
% for form_name, form_value in vertical_banner_cta['form_values'].items(): % for form_name, form_value in vertical_banner_cta['form_values'].items():
<input type="hidden" name="${form_name}" value="${form_value}"> <input type="hidden" name="${form_name}" value="${form_value}">
% endfor % endfor
<button class="btn">${vertical_banner_cta['link_name']}</button> <button class="btn btn-outline-primary">${vertical_banner_cta['link_name']}</button>
</form> </form>
</div> </div>
% endif % endif