Skip to content

E
edx-ora2
Commit 7f6ec2df by Brian Talbot
Options

adding problem-wide UI for messages (along with placeholder/example messages for most occasions)

parent fbbd76f5
Showing with 238 additions and 142 deletions
apps/openassessment/templates/openassessmentblock/oa_base.html
...@@ -19,6 +19,71 @@ ...@@ -19,6 +19,71 @@
</ol> </ol>
</nav> </nav>
{% block message %}
<!-- if the problem is unstarted or response hasn't been submitted -->
<div id="openassessment__message" class="openassessment__message message">
<div class="message__content">
<p>This problem requires that you work through 3 parts. You can begin by reading the question below and <a data-behavior="ui-scroll" href="#openassessment__response">providing your response</a>.</p>
</div>
</div>
<!-- if the problem is closed and incomplete -->
<div id="openassessment__message" class="openassessment__message message message--incomplete">
<h3 class="message__title">This problem’s due date has past and submissions are now closed</h3>
<div class="message__content">
<p>You did not complete the necessary requirements and received <a data-behavior="ui-scroll" href="#openassessment__grade">an incomplete grade</a>.</p>
</div>
</div>
<!-- if response has been submitted -->
<div id="openassessment__message" class="openassessment__message message">
<h3 class="message__title">Your Response Has Been Submitted for Peer Assessment</h3>
<div class="message__content">
<p>You still need to complete <a data-behavior="ui-scroll" href="#openassessment__peer-assessment">assessing your peers</a> and <a data-behavior="ui-scroll" href="#openassessment__self-assessment">assessing yourself</a> in order to complete this problem and receive your grade.</p>
</div>
</div>
<!-- if response has been graded -->
<div id="openassessment__message" class="openassessment__message message">
<h3 class="message__title">Your Response Has Been Graded</h3>
<div class="message__content">
<p>You still need to complete <a data-behavior="ui-scroll" href="#openassessment__peer-assessment">assessing your peers</a> and <a data-behavior="ui-scroll" href="#openassessment__self-assessment">assessing yourself</a> in order to complete this problem and receive your grade.</p>
</div>
</div>
<!-- if the problem's due date is approaching and tasks remain -->
<div id="openassessment__message" class="openassessment__message message message--warning">
<h3 class="message__title">You still need to complete 2 Tasks</h3>
<div class="message__content">
<p>You still need to complete <a data-behavior="ui-scroll" href="#openassessment__peer-assessment">assessing your peers</a> and <a data-behavior="ui-scroll" href="#openassessment__self-assessment">assessing yourself</a> in order to complete this problem and receive your grade.</p>
</div>
</div>
<!-- if no peer assessments remain for student to grade -->
<div id="openassessment__message" class="openassessment__message message">
<h3 class="message__title">Awaiting More Peer Responses</h3>
<div class="message__content">
<p>There are currently no responses for you to assess. This should change momentarily. Check back shortly to continue completing this problem. One this and all other steps are completed, you will receive a grade.</p>
</div>
</div>
<!-- if student has completed the entire problem and received a grade -->
<div id="openassessment__message" class="openassessment__message message message--complete">
<h3 class="message__title">You have completed this problem</h3>
<div class="message__content">
<p>Review <a data-behavior="ui-scroll" href="#openassessment__grade">your grade and assessment details</a>.</p>
</div>
</div>
<!-- if student has completed the entire problem and not yet received a grade (from peers) -->
<div id="openassessment__message" class="openassessment__message message message--complete">
<h3 class="message__title">You have completed this problem</h3>
<div class="message__content">
<p>Your grade should be available shortly once your peers complete their assessments of your response.</p>
</div>
</div>
{% endblock %}
<div class="wrapper--openassessment__prompt"> <div class="wrapper--openassessment__prompt">
<article class="openassessment__prompt ui-toggle-visibility"> <article class="openassessment__prompt ui-toggle-visibility">
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_closed.html
...@@ -24,7 +24,9 @@ ...@@ -24,7 +24,9 @@
<div class="step__message message message--incomplete"> <div class="step__message message message--incomplete">
<h3 class="message__title">The deadline for this part of the problem has passed</h3> <h3 class="message__title">The deadline for this part of the problem has passed</h3>
<div class="message__content">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.</div> <div class="message__content">
<p> You can no longer assess your peers' responses or continue with the problem's next steps. Any progress you've made to this point is saved however.</p>
</div>
</div> </div>
</div> </div>
</div> </div>
......
apps/openassessment/templates/openassessmentblock/response/oa_response_closed.html
...@@ -19,7 +19,9 @@ ...@@ -19,7 +19,9 @@
<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">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.</div> <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>
</div> </div>
</div> </div>
</div> </div>
......
apps/openassessment/templates/openassessmentblock/self/oa_self_closed.html
...@@ -20,7 +20,9 @@ ...@@ -20,7 +20,9 @@
<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">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.</div> <div class="message__content">
<p> You can no longer assess your response to this problem or continue with the problem's next steps. Any progress you've made to this point is saved however.</p>
</div>
</div> </div>
</div> </div>
</div> </div>
......
apps/openassessment/xblock/static/css/openassessment.css
...@@ -456,17 +456,17 @@ hr.divider, ...@@ -456,17 +456,17 @@ hr.divider,
.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__actions .action--submit, .openassessment .step--response .response__submission__actions .action--save, .openassessment .submission__feeedback__actions .action--submit {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; } font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.openassessment .openassessment__prompt__copy a { .openassessment .message .message__content a, .openassessment .openassessment__prompt__copy a {
-webkit-transition: color 0.5s ease-in-out, border 0.5s ease-in-out; -webkit-transition: color 0.5s ease-in-out, border 0.5s ease-in-out;
-moz-transition: color 0.5s ease-in-out, border 0.5s ease-in-out; -moz-transition: color 0.5s ease-in-out, border 0.5s ease-in-out;
transition: color 0.5s ease-in-out, border 0.5s ease-in-out; transition: color 0.5s ease-in-out, border 0.5s ease-in-out;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
color: #33a6dc; color: #33a6dc;
text-decoration: none; } text-decoration: none; }
.openassessment .openassessment__prompt__copy a:hover, .openassessment .openassessment__prompt__copy a:focus { .openassessment .message .message__content a:hover, .openassessment .openassessment__prompt__copy a:hover, .openassessment .message .message__content a:focus, .openassessment .openassessment__prompt__copy a:focus {
color: #00a7f6; color: #00a7f6;
border-color: #00a7f6; } border-color: #00a7f6; }
.openassessment .openassessment__prompt__copy a:active, .openassessment .openassessment__prompt__copy a.is--current { .openassessment .message .message__content a:active, .openassessment .openassessment__prompt__copy a:active, .openassessment .message .message__content a.is--current, .openassessment .openassessment__prompt__copy a.is--current {
color: #1d9dd9; color: #1d9dd9;
border-color: #1d9dd9; } border-color: #1d9dd9; }
...@@ -891,6 +891,48 @@ hr.divider, ...@@ -891,6 +891,48 @@ hr.divider,
.wrapper--openassessment { .wrapper--openassessment {
position: relative; } position: relative; }
.openassessment .message {
margin-bottom: 30px;
border-radius: 2px;
padding: 20px 20px;
background: #f5f6f7; }
.openassessment .message .message__title {
margin-bottom: 5px;
border-bottom: 2px solid #d7dbdf;
padding-bottom: 5px; }
.openassessment .message .message__content {
color: #a5a6aa; }
.openassessment .message--error {
background: #f4f4f4; }
.openassessment .message--error .message__title {
color: #bc5547;
border-bottom-color: #bc5547; }
.openassessment .message--warning {
background: #fdfaf4; }
.openassessment .message--warning .message__title {
color: #e5a635;
border-bottom-color: #e5a635; }
.openassessment .message--confirmation {
background: #f4f4f4; }
.openassessment .message--confirmation .message__title {
color: #2d2e30;
border-bottom-color: #2d2e30; }
.openassessment .message--complete {
background: #f7fbf5; }
.openassessment .message--complete .message__title {
color: #62c24a;
border-bottom-color: #62c24a; }
.openassessment .message--incomplete {
background: #fdfaf4; }
.openassessment .message--incomplete .message__title {
color: #e5a635;
border-bottom-color: #e5a635; }
.openassessment .message--error {
display: none;
opacity: 0.0; }
.openassessment .has--error .message--error {
display: block;
opacity: 1.0; }
.openassessment .openassessment__title { .openassessment .openassessment__title {
*zoom: 1; *zoom: 1;
display: block; } display: block; }
...@@ -899,6 +941,16 @@ hr.divider, ...@@ -899,6 +941,16 @@ hr.divider,
display: table; } display: table; }
.openassessment .openassessment__title:after { .openassessment .openassessment__title:after {
clear: both; } clear: both; }
.openassessment .openassessment__message {
*zoom: 1;
display: block;
background: none;
padding: 0; }
.openassessment .openassessment__message:before, .openassessment .openassessment__message:after {
content: " ";
display: table; }
.openassessment .openassessment__message:after {
clear: both; }
.openassessment .openassessment__steps { .openassessment .openassessment__steps {
counter-reset: item; } counter-reset: item; }
.openassessment .openassessment__steps__step .step__header { .openassessment .openassessment__steps__step .step__header {
...@@ -1225,48 +1277,6 @@ hr.divider, ...@@ -1225,48 +1277,6 @@ hr.divider,
color: #00a7f6; } color: #00a7f6; }
.openassessment .ui-toggle-visibility .ui-toggle-visibility__control .step__label:active, .openassessment .ui-toggle-visibility .ui-toggle-visibility__control .step__label.is--current { .openassessment .ui-toggle-visibility .ui-toggle-visibility__control .step__label:active, .openassessment .ui-toggle-visibility .ui-toggle-visibility__control .step__label.is--current {
color: #1d9dd9; } color: #1d9dd9; }
.openassessment .message {
margin-bottom: 30px;
border-radius: 2px;
padding: 20px 20px;
background: #f5f6f7; }
.openassessment .message .message__title {
margin-bottom: 5px;
border-bottom: 2px solid #d7dbdf;
padding-bottom: 5px; }
.openassessment .message .message__content {
color: #a5a6aa; }
.openassessment .message--error {
background: #f4f4f4; }
.openassessment .message--error .message__title {
color: #bc5547;
border-bottom-color: #bc5547; }
.openassessment .message--warning {
background: #fdfaf4; }
.openassessment .message--warning .message__title {
color: #e5a635;
border-bottom-color: #e5a635; }
.openassessment .message--confirmation {
background: #f4f4f4; }
.openassessment .message--confirmation .message__title {
color: #2d2e30;
border-bottom-color: #2d2e30; }
.openassessment .message--complete {
background: #f7fbf5; }
.openassessment .message--complete .message__title {
color: #62c24a;
border-bottom-color: #62c24a; }
.openassessment .message--incomplete {
background: #fdfaf4; }
.openassessment .message--incomplete .message__title {
color: #e5a635;
border-bottom-color: #e5a635; }
.openassessment .message--error {
display: none;
opacity: 0.0; }
.openassessment .has--error .message--error {
display: block;
opacity: 1.0; }
.openassessment .openassessment__prompt { .openassessment .openassessment__prompt {
margin-bottom: 20px; } margin-bottom: 20px; }
.openassessment .openassessment__prompt__copy { .openassessment .openassessment__prompt__copy {
......
apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss
...@@ -11,16 +11,123 @@ ...@@ -11,16 +11,123 @@
.openassessment { .openassessment {
// -------------------- // --------------------
// general // general: messages
// -------------------- // --------------------
.message {
margin-bottom: ($baseline-v*1.5);
border-radius: ($baseline-v/10);
padding: $baseline-v ($baseline-h/2);
background: $color-decorative-quaternary;
.message__title {
@extend %t-heading;
margin-bottom: ($baseline-v/4);
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: ($baseline-v/4);
}
.message__content {
@extend %copy-3;
color: $copy-secondary-color;
a {
@extend %link-copy;
}
}
}
// TYPE: error
.message--error {
background: tint($color-confirm, 95%);
.message__title {
color: $color-error;
border-bottom-color: $color-error;
}
}
// TYPE: warning
.message--warning {
background: tint($color-warning, 95%);
.message__title {
color: $color-warning;
border-bottom-color: $color-warning;
}
}
// TYPE: confirmation
.message--confirmation {
background: tint($color-confirm, 95%);
.message__title {
color: $color-confirm;
border-bottom-color: $color-confirm;
}
}
// TYPE: complete
.message--complete {
background: tint($color-complete, 95%);
.message__title {
color: $color-complete;
border-bottom-color: $color-complete;
}
}
// TYPE: incomplete
.message--incomplete {
background: tint($color-incomplete, 95%);
.message__title {
color: $color-incomplete;
border-bottom-color: $color-incomplete;
}
}
// --------------------
// errors
// --------------------
// CASE: default error display (hidden)
.message--error {
@extend %trans-opacity;
display: none;
opacity: 0.0;
}
// CASE: error is shown
.has--error {
.message--error {
display: block;
opacity: 1.0;
}
}
// chrome: title // --------------------
// general: chrome
// --------------------
.openassessment__title { .openassessment__title {
@include row(); @include row();
@extend %t-regular; @extend %t-regular;
} }
// --------------------
// overall message
// --------------------
.openassessment__message {
@include row();
background: none;
padding: 0;
}
// --------------------
// steps // steps
// --------------------
.openassessment__steps { .openassessment__steps {
@extend %no-list; @extend %no-list;
counter-reset: item; // setting counter here counter-reset: item; // setting counter here
...@@ -455,98 +562,6 @@ ...@@ -455,98 +562,6 @@
// -------------------- // --------------------
// messages
// --------------------
.message {
margin-bottom: ($baseline-v*1.5);
border-radius: ($baseline-v/10);
padding: $baseline-v ($baseline-h/2);
background: $color-decorative-quaternary;
.message__title {
@extend %t-heading;
margin-bottom: ($baseline-v/4);
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: ($baseline-v/4);
}
.message__content {
@extend %copy-3;
color: $copy-secondary-color;
}
}
// TYPE: error
.message--error {
background: tint($color-confirm, 95%);
.message__title {
color: $color-error;
border-bottom-color: $color-error;
}
}
// TYPE: warning
.message--warning {
background: tint($color-warning, 95%);
.message__title {
color: $color-warning;
border-bottom-color: $color-warning;
}
}
// TYPE: confirmation
.message--confirmation {
background: tint($color-confirm, 95%);
.message__title {
color: $color-confirm;
border-bottom-color: $color-confirm;
}
}
// TYPE: complete
.message--complete {
background: tint($color-complete, 95%);
.message__title {
color: $color-complete;
border-bottom-color: $color-complete;
}
}
// TYPE: incomplete
.message--incomplete {
background: tint($color-incomplete, 95%);
.message__title {
color: $color-incomplete;
border-bottom-color: $color-incomplete;
}
}
// --------------------
// errors
// --------------------
// CASE: default error display (hidden)
.message--error {
@extend %trans-opacity;
display: none;
opacity: 0.0;
}
// CASE: error is shown
.has--error {
.message--error {
display: block;
opacity: 1.0;
}
}
// --------------------
// problem // problem
// -------------------- // --------------------
.wrapper--openassessment__prompt { .wrapper--openassessment__prompt {
......
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