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 63 additions and 170 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/css/openassessment.css
......@@ -416,7 +416,7 @@ hr.divider,
font-size: 12px;
line-height: 18px; }
.openassessment .step--peer-assessment .peer-assessment__assessment .assessment__rubric__question .question__title__copy, .openassessment .step--self-assessment .self-assessment__assessment .assessment__rubric__question .question__title__copy, .openassessment .message .message__title, .openassessment .step--peer-assessment .peer-assessment__display__header .peer-assessment__display__title, .openassessment .step--self-assessment .self-assessment__display__title, .openassessment .submission__answer__display__title, .openassessment .submission__peer-evaluations__title, .openassessment .submission__peer-evaluations__questions .question__title__copy, .openassessment .submission__feeedback__title, .openassessment .openassessment__steps__step .step__title .step__deadline, .openassessment .openassessment__steps__step .step__actions.has--error .message .message__title, .wrapper--xblock .field label, .wrapper--xblock .field .label, .openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--input .answer__label, .openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--input .answer__label, .openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__tip, .openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__tip, .openassessment .message .message__content, .openassessment .step--peer-assessment .peer-assessment__display__response, .openassessment .step--self-assessment .self-assessment__display__response, .openassessment .submission__answer__display__content, .openassessment .submission__peer-evaluations__questions .question--feedback .answer__value, .openassessment .openassessment__steps__step .step__actions .action--submit, .openassessment .step--response .response__submission__actions .action--save, .openassessment .submission__feeedback__actions .action--submit, .openassessment .openassessment__steps__step .step__status .ico {
.openassessment .step--peer-assessment .peer-assessment__assessment .assessment__rubric__question .question__title__copy, .openassessment .step--self-assessment .self-assessment__assessment .assessment__rubric__question .question__title__copy, .openassessment .message .message__title, .openassessment .step--peer-assessment .peer-assessment__display__header .peer-assessment__display__title, .openassessment .step--self-assessment .self-assessment__display__title, .openassessment .submission__answer__display__title, .openassessment .submission__peer-evaluations__title, .openassessment .submission__peer-evaluations__questions .question__title__copy, .openassessment .submission__feeedback__title, .openassessment .openassessment__steps__step .step__title .step__deadline, .wrapper--xblock .field label, .wrapper--xblock .field .label, .openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .wrapper--input .answer__label, .openassessment .step--self-assessment .self-assessment__assessment .question__answers .wrapper--input .answer__label, .openassessment .step--peer-assessment .peer-assessment__assessment .question__answers .answer__tip, .openassessment .step--self-assessment .self-assessment__assessment .question__answers .answer__tip, .openassessment .message .message__content, .openassessment .step--peer-assessment .peer-assessment__display__response, .openassessment .step--self-assessment .self-assessment__display__response, .openassessment .submission__answer__display__content, .openassessment .submission__peer-evaluations__questions .question--feedback .answer__value, .openassessment .openassessment__steps__step .step__actions .action--submit, .openassessment .step--response .response__submission__actions .action--save, .openassessment .submission__feeedback__actions .action--submit, .openassessment .openassessment__steps__step .step__status .ico {
font-size: 14px;
line-height: 21px; }
......@@ -438,7 +438,7 @@ hr.divider,
.wrapper--xblock .problem__header, .openassessment .submission__peer-evaluations__questions .answer__value__value {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.openassessment .step--peer-assessment .peer-assessment__assessment .assessment__rubric__question .question__title__copy, .openassessment .step--self-assessment .self-assessment__assessment .assessment__rubric__question .question__title__copy, .openassessment .message .message__title, .openassessment .step--peer-assessment .peer-assessment__display__header .peer-assessment__display__title, .openassessment .step--self-assessment .self-assessment__display__title, .openassessment .submission__answer__display__title, .openassessment .submission__peer-evaluations__title, .openassessment .submission__peer-evaluations__questions .question__title__copy, .openassessment .submission__feeedback__title, .openassessment .openassessment__steps__step .step__title .step__deadline, .openassessment .openassessment__steps__step .step__actions.has--error .message .message__title {
.openassessment .step--peer-assessment .peer-assessment__assessment .assessment__rubric__question .question__title__copy, .openassessment .step--self-assessment .self-assessment__assessment .assessment__rubric__question .question__title__copy, .openassessment .message .message__title, .openassessment .step--peer-assessment .peer-assessment__display__header .peer-assessment__display__title, .openassessment .step--self-assessment .self-assessment__display__title, .openassessment .submission__answer__display__title, .openassessment .submission__peer-evaluations__title, .openassessment .submission__peer-evaluations__questions .question__title__copy, .openassessment .submission__feeedback__title, .openassessment .openassessment__steps__step .step__title .step__deadline {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.openassessment .submission__peer-evaluations__questions .answer__source {
......@@ -903,7 +903,7 @@ hr.divider,
.openassessment .message .message__content {
color: #a5a6aa; }
.openassessment .message--error {
background: #f4f4f4; }
background: #fbf6f5; }
.openassessment .message--error .message__title {
color: #bc5547;
border-bottom-color: #bc5547; }
......@@ -933,6 +933,21 @@ hr.divider,
.openassessment .has--error .message--error {
display: block;
opacity: 1.0; }
.openassessment .message--inline {
padding: 10px 20px;
background: #4c4d4f; }
.openassessment .message--inline .message__title {
margin-bottom: 0;
border: none;
padding-bottom: 0;
color: white;
text-align: center; }
.openassessment .message--inline.message--error {
background: #c66e62; }
.openassessment .message--inline.message--warning {
background: #e8b353; }
.openassessment .message--inline.message--confirm {
background: #e8b353; }
.openassessment .openassessment__title {
*zoom: 1;
display: block; }
......@@ -1096,12 +1111,7 @@ hr.divider,
.openassessment .openassessment__steps__step .step__content {
margin-bottom: 20px; }
.openassessment .openassessment__steps__step .step__actions {
-webkit-transition: background-color 0.5s ease-in-out 0s;
-moz-transition: background-color 0.5s ease-in-out 0s;
transition: background-color 0.5s ease-in-out 0s;
border-radius: 4px;
padding: 10px 20px;
background: transparent;
margin-bottom: 10px;
text-align: center; }
@media screen and (min-width: 530px) and (max-width: 759px) {
.openassessment .openassessment__steps__step .step__actions {
......@@ -1117,92 +1127,9 @@ hr.divider,
text-align: right; } }
.openassessment .openassessment__steps__step .step__actions .action--submit .copy, .openassessment .openassessment__steps__step .step__actions .action--submit .ico {
display: inline; }
.openassessment .openassessment__steps__step .step__actions.has--error {
*zoom: 1;
display: block;
background: #f8eeec; }
.openassessment .openassessment__steps__step .step__actions.has--error:before, .openassessment .openassessment__steps__step .step__actions.has--error:after {
content: " ";
display: table; }
.openassessment .openassessment__steps__step .step__actions.has--error:after {
clear: both; }
.openassessment .openassessment__steps__step .step__actions.has--error .message {
display: block;
margin-bottom: 10px; }
@media screen and (min-width: 530px) and (max-width: 759px) {
.openassessment .openassessment__steps__step .step__actions.has--error .message {
float: left;
display: block;
margin-right: 4.82916%;
width: 47.58542%;
margin-bottom: 0;
text-align: left; }
.openassessment .openassessment__steps__step .step__actions.has--error .message:last-child {
margin-right: 0; } }
@media screen and (min-width: 760px) and (max-width: 924px) {
.openassessment .openassessment__steps__step .step__actions.has--error .message {
float: left;
display: block;
margin-right: 2.35765%;
width: 48.82117%;
margin-bottom: 0;
text-align: left; }
.openassessment .openassessment__steps__step .step__actions.has--error .message:last-child {
margin-right: 0; } }
@media screen and (min-width: 925px) and (max-width: 1299px) {
.openassessment .openassessment__steps__step .step__actions.has--error .message {
float: left;
display: block;
margin-right: 2.35765%;
width: 48.82117%;
margin-bottom: 0;
text-align: left; }
.openassessment .openassessment__steps__step .step__actions.has--error .message:last-child {
margin-right: 0; } }
@media screen and (min-width: 1300px) {
.openassessment .openassessment__steps__step .step__actions.has--error .message {
float: left;
display: block;
margin-right: 2.35765%;
width: 48.82117%;
margin-bottom: 0;
text-align: left; }
.openassessment .openassessment__steps__step .step__actions.has--error .message:last-child {
margin-right: 0; } }
.openassessment .openassessment__steps__step .step__actions.has--error .list--actions {
display: block; }
@media screen and (min-width: 530px) and (max-width: 759px) {
.openassessment .openassessment__steps__step .step__actions.has--error .list--actions {
float: left;
display: block;
margin-right: 4.82916%;
width: 47.58542%; }
.openassessment .openassessment__steps__step .step__actions.has--error .list--actions:last-child {
margin-right: 0; } }
@media screen and (min-width: 760px) and (max-width: 924px) {
.openassessment .openassessment__steps__step .step__actions.has--error .list--actions {
float: left;
display: block;
margin-right: 2.35765%;
width: 48.82117%; }
.openassessment .openassessment__steps__step .step__actions.has--error .list--actions:last-child {
margin-right: 0; } }
@media screen and (min-width: 925px) and (max-width: 1299px) {
.openassessment .openassessment__steps__step .step__actions.has--error .list--actions {
float: left;
display: block;
margin-right: 2.35765%;
width: 48.82117%; }
.openassessment .openassessment__steps__step .step__actions.has--error .list--actions:last-child {
margin-right: 0; } }
@media screen and (min-width: 1300px) {
.openassessment .openassessment__steps__step .step__actions.has--error .list--actions {
float: left;
display: block;
margin-right: 2.35765%;
width: 48.82117%; }
.openassessment .openassessment__steps__step .step__actions.has--error .list--actions:last-child {
margin-right: 0; } }
.openassessment .openassessment__steps__step .step__actions.has--error .message {
margin-bottom: 20px;
text-align: left; }
.openassessment .openassessment__steps__step.is--loading .step__header {
padding-bottom: 0;
border-bottom: none;
......
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