Skip to content
Snippets Groups Projects
Unverified Commit c3baf5c1 authored by Michael Terry's avatar Michael Terry Committed by GitHub
Browse files

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

AA-505: Some design updates for courseware "shift dates" UI
parents acbefd10 d000eb4f
Branches
Tags release-2021-01-05-15.23
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 37 additions and 37 deletions
common/lib/xmodule/xmodule/css/capa/display.scss
+ 14
− 13
View file @ c3baf5c1
......@@ -970,21 +970,26 @@ div.problem .action {
}
.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;
&:last-child {
border: none;
padding-right: 0;
}
}
.problem-action-btn {
@include margin-right($baseline / 5);
border: none;
max-width: 110px;
text-decoration: underline;
text-transform: none;
&:hover,
&:focus,
&:active {
color: $primary !important;
}
.icon {
margin-bottom: $baseline / 10;
......@@ -994,12 +999,13 @@ div.problem .action {
@media print {
display: none;
}
}
.submit-attempt-container {
padding-bottom: $baseline;
flex-grow: 1;
display: flex;
align-items: center;
@media (max-width: $bp-screen-lg) {
max-width: 100%;
......@@ -1013,19 +1019,14 @@ div.problem .action {
white-space: nowrap;
}
.submit-cta {
display: inline-block;
}
.submit-cta-description {
color: $blue;
color: $primary;
font-size: small;
padding-right: $baseline / 2;
}
.submit-cta-link-button {
border: none;
color: $primary;
padding-right: $baseline / 4;
text-decoration: underline;
text-transform: none;
}
}
......
lms/static/sass/course/_dates.scss
+ 6
− 6
View file @ c3baf5c1
......@@ -40,7 +40,7 @@
background-color: #f5f5f5;
&.past-due {
background-color: #d1d2d4;
background-color: #475b65;
}
}
......@@ -147,13 +147,12 @@
padding: 2px 8px;
border-radius: 5px;
margin-left: 8px;
font-style: italic;
font-weight: bold;
font-weight: normal;
vertical-align: top;
&.completed {
background-color: #f3f3f4;
color: #2d323e;
background-color: #f0f2f2;
color: #212529;
}
&.due-next {
......@@ -170,7 +169,8 @@
}
&.past-due {
background-color: #d1d2d4;
background-color: #475b65;
color: #fff;
}
&.today {
......
lms/static/sass/course/courseware/_courseware.scss
+ 7
− 7
View file @ c3baf5c1
......@@ -534,22 +534,22 @@ html.video-fullscreen {
.pill {
font-size: 12px;
max-height: 20px;
line-height: 14px;
max-height: 16px;
padding: 2px 8px;
border-radius: 5px;
margin-top: 4px;
margin-left: 8px;
font-style: italic;
font-weight: bold;
vertical-align: top;
&.completed {
background-color: #f3f3f4;
color: #2d323e;
background-color: #f0f2f2;
color: #212529;
}
&.past-due {
background-color: #d1d2d4;
color: black;
background-color: #475b65;
color: #fff;
}
}
}
......
lms/static/sass/course/layout/_banner_cta.scss
+ 0
− 1
View file @ c3baf5c1
......@@ -4,7 +4,6 @@
border-radius: 2px;
border: solid 1px #0175b4;
font-size: 14px;
font-weight: bold;
line-height: 24px;
padding: 7px 18px;
......
lms/templates/dates_banner.html
+ 1
− 1
View file @ c3baf5c1
......@@ -30,7 +30,7 @@ additional_styling_class = 'on-mobile' if is_mobile_app else 'has-button'
<form method="post" action="${reset_deadlines_url}">
<input type="hidden" id="csrf_token" name="csrfmiddlewaretoken" value="${csrf_token}">
<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>
</div>
% endif
......
lms/templates/problem.html
+ 6
− 6
View file @ c3baf5c1
......@@ -29,12 +29,12 @@ from openedx.core.djangolib.markup import HTML
<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>
<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>
% 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')}">
<button type="button" class="save problem-action-btn btn-link btn-small" data-value="${_('Save')}">
<span aria-hidden="true">${_('Save')}</span>
<span class="sr">${_("Save your answer")}</span>
</button>
......@@ -42,12 +42,12 @@ from openedx.core.djangolib.markup import HTML
% 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>
<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>
% 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>
<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>
% endif
</div>
......@@ -58,7 +58,7 @@ 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-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']}
</button>
<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():
<input type="hidden" name="${form_name}" value="${form_value}">
% 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']}
</button>
<span class="submit-cta-description" tabindex="0" role="note" aria-label="description">
......
lms/templates/vert_module.html
+ 3
− 3
View file @ c3baf5c1
......@@ -27,7 +27,7 @@ from openedx.core.djangolib.markup import HTML
% if completed:
<div class="pill completed">${_('Completed')}</div>
% elif past_due:
<div class="pill past-due">${_('Past Due')}</div>
<div class="pill past-due">${_('Past due')}</div>
% endif
</div>
% endif
......@@ -42,7 +42,7 @@ from openedx.core.djangolib.markup import HTML
<div class="banner-cta-text">${vertical_banner_cta['description']}</div>
% if vertical_banner_cta.get('event_data'):
<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>
% else:
<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():
<input type="hidden" name="${form_name}" value="${form_value}">
% endfor
<button class="btn">${vertical_banner_cta['link_name']}</button>
<button class="btn btn-outline-primary">${vertical_banner_cta['link_name']}</button>
</form>
</div>
% endif
......
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