Skip to content

E
edx-ora2
Commit 1f12e853 by Brian Talbot
Options

revising styling/placement of 'inline' error messages on save/submission states

parent 7f6ec2df
Showing with 41 additions and 75 deletions
apps/openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html
......@@ -108,9 +108,8 @@
</div>
<div class="step__actions">
<div class="message message--error message--error-server">
<div class="message message--inline message--error message--error-server">
<h3 class="message__title">We could not submit your assessment</h3>
<div class="message__content"></div>
</div>
<ul class="list list--actions">
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode.html
......@@ -101,9 +101,8 @@
</div>
<div class="step__actions">
<div class="message message--error message--error-server">
<div class="message message--inline message--error message--error-server">
<h3 class="message__title">We could not submit your assessment</h3>
<div class="message__content"></div>
</div>
<ul class="list list--actions">
......
apps/openassessment/templates/openassessmentblock/response/oa_response.html
......@@ -42,6 +42,10 @@
</ol>
<div class="response__submission__actions">
<div class="message message--inline message--error message--error-server">
<h3 class="message__title">We could not save your progress</h3>
</div>
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="submission__save" class="action action--save submission__save is--disabled">Save Your Progress</button>
......@@ -54,19 +58,13 @@
</div>
</li>
</ul>
<div class="message message--error message--error-server">
<h3 class="message__title">We could not save your progress</h3>
<div class="message__content"></div>
</div>
</div>
</form>
</div>
<div class="step__actions">
<div class="message message--error message--error-server">
<div class="message message--inline message--error message--error-server">
<h3 class="message__title">We could not submit your response</h3>
<div class="message__content"></div>
</div>
<ul class="list list--actions">
......
apps/openassessment/templates/openassessmentblock/response/oa_response_closed.html
......@@ -19,6 +19,7 @@
<div class="step__message message message--incomplete">
<h3 class="message__title">The due date for this part of the problem has passed</h3>
<div class="message__content">
<p> You can no longer submit a response or continue with the problem's next steps. Any progress you've made to this point is saved however.</p>
</div>
......
apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html
......@@ -80,10 +80,10 @@
</div>
<div class="step__actions">
<div class="message message--error message--error-server">
<div class="message message--inline message--error message--error-server">
<h3 class="message__title">We could not submit your assessment</h3>
<div class="message__content"></div>
</div>
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="self-assessment--001__assessment__submit" class="action action--submit is--disabled">
......
apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss
......@@ -38,7 +38,7 @@
// TYPE: error
.message--error {
background: tint($color-confirm, 95%);
background: tint($color-error, 95%);
.message__title {
color: $color-error;
......@@ -86,17 +86,13 @@
}
}
// --------------------
// errors
// --------------------
// CASE: default error display (hidden)
// CASE: showing errors is shown
.message--error {
@extend %trans-opacity;
display: none;
opacity: 0.0;
}
// CASE: error is shown
.has--error {
.message--error {
......@@ -105,6 +101,32 @@
}
}
// TYPE: inline message
.message--inline {
padding: ($baseline-v/2) ($baseline-h/2);
background: tint($color-confirm, 15%);
.message__title {
margin-bottom: 0;
border: none;
padding-bottom: 0;
color: $white-t;
text-align: center;
}
&.message--error {
background: tint($color-error, 15%);
}
&.message--warning {
background: tint($color-warning, 15%);
}
&.message--confirm {
background: tint($color-warning, 15%);
}
}
// --------------------
// general: chrome
......@@ -293,10 +315,7 @@
// step actions
.step__actions {
@include transition(background-color $tmg-f1 ease-in-out 0s);
border-radius: ($baseline-v/5);
padding: ($baseline-v/2) ($baseline-h/2);
background: transparent;
margin-bottom: ($baseline-v/2);
text-align: center;
@include media($bp-ds) {
......@@ -330,60 +349,10 @@
// STATE: actions has an error
&.has--error {
@include row();
background: tint($color-error, 90%);
.message {
display: block;
margin-bottom: ($baseline-v/2);
@include media($bp-ds) {
@include span-columns(3 of 6);
margin-bottom: 0;
text-align: left;
}
@include media($bp-dm) {
@include span-columns(6 of 12);
margin-bottom: 0;
text-align: left;
}
@include media($bp-dl) {
@include span-columns(6 of 12);
margin-bottom: 0;
text-align: left;
}
@include media($bp-dx) {
@include span-columns(6 of 12);
margin-bottom: 0;
text-align: left;
}
.message__title {
@extend %hd-4;
}
}
.list--actions {
display: block;
@include media($bp-ds) {
@include span-columns(3 of 6);
}
@include media($bp-dm) {
@include span-columns(6 of 12);
}
@include media($bp-dl) {
@include span-columns(6 of 12);
}
@include media($bp-dx) {
@include span-columns(6 of 12);
}
margin-bottom: $baseline-v;
text-align: left;
}
}
}
......
Markdown is supported
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