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 40 additions and 74 deletions
apps/openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html
...@@ -108,9 +108,8 @@ ...@@ -108,9 +108,8 @@
</div> </div>
<div class="step__actions"> <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> <h3 class="message__title">We could not submit your assessment</h3>
<div class="message__content"></div>
</div> </div>
<ul class="list list--actions"> <ul class="list list--actions">
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode.html
...@@ -101,9 +101,8 @@ ...@@ -101,9 +101,8 @@
</div> </div>
<div class="step__actions"> <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> <h3 class="message__title">We could not submit your assessment</h3>
<div class="message__content"></div>
</div> </div>
<ul class="list list--actions"> <ul class="list list--actions">
......
apps/openassessment/templates/openassessmentblock/response/oa_response.html
...@@ -42,6 +42,10 @@ ...@@ -42,6 +42,10 @@
</ol> </ol>
<div class="response__submission__actions"> <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"> <ul class="list list--actions">
<li class="list--actions__item"> <li class="list--actions__item">
<button type="submit" id="submission__save" class="action action--save submission__save is--disabled">Save Your Progress</button> <button type="submit" id="submission__save" class="action action--save submission__save is--disabled">Save Your Progress</button>
...@@ -54,19 +58,13 @@ ...@@ -54,19 +58,13 @@
</div> </div>
</li> </li>
</ul> </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> </div>
</form> </form>
</div> </div>
<div class="step__actions"> <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> <h3 class="message__title">We could not submit your response</h3>
<div class="message__content"></div>
</div> </div>
<ul class="list list--actions"> <ul class="list list--actions">
......
apps/openassessment/templates/openassessmentblock/response/oa_response_closed.html
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
<div class="step__message message message--incomplete"> <div class="step__message message message--incomplete">
<h3 class="message__title">The due date for this part of the problem has passed</h3> <h3 class="message__title">The due date for this part of the problem has passed</h3>
<div class="message__content"> <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> <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> </div>
......
apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html
...@@ -80,10 +80,10 @@ ...@@ -80,10 +80,10 @@
</div> </div>
<div class="step__actions"> <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> <h3 class="message__title">We could not submit your assessment</h3>
<div class="message__content"></div>
</div> </div>
<ul class="list list--actions"> <ul class="list list--actions">
<li class="list--actions__item"> <li class="list--actions__item">
<button type="submit" id="self-assessment--001__assessment__submit" class="action action--submit is--disabled"> <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 @@ ...@@ -38,7 +38,7 @@
// TYPE: error // TYPE: error
.message--error { .message--error {
background: tint($color-confirm, 95%); background: tint($color-error, 95%);
.message__title { .message__title {
color: $color-error; color: $color-error;
...@@ -86,17 +86,13 @@ ...@@ -86,17 +86,13 @@
} }
} }
// -------------------- // CASE: showing errors is shown
// errors
// --------------------
// CASE: default error display (hidden)
.message--error { .message--error {
@extend %trans-opacity; @extend %trans-opacity;
display: none; display: none;
opacity: 0.0; opacity: 0.0;
} }
// CASE: error is shown
.has--error { .has--error {
.message--error { .message--error {
...@@ -105,6 +101,32 @@ ...@@ -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 // general: chrome
...@@ -293,10 +315,7 @@ ...@@ -293,10 +315,7 @@
// step actions // step actions
.step__actions { .step__actions {
@include transition(background-color $tmg-f1 ease-in-out 0s); margin-bottom: ($baseline-v/2);
border-radius: ($baseline-v/5);
padding: ($baseline-v/2) ($baseline-h/2);
background: transparent;
text-align: center; text-align: center;
@include media($bp-ds) { @include media($bp-ds) {
...@@ -330,61 +349,11 @@ ...@@ -330,61 +349,11 @@
// STATE: actions has an error // STATE: actions has an error
&.has--error { &.has--error {
@include row();
background: tint($color-error, 90%);
.message { .message {
display: block; margin-bottom: $baseline-v;
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; 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);
}
}
} }
} }
......
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