Skip to content

E
edx-ora2
Commit 650d9650 by Andy Armstrong Committed by cahrens
Options

Clean up CSS related to staff grading.

parent 509d4185
Showing with 288 additions and 303 deletions
openassessment/templates/openassessmentblock/staff_area/oa_staff_area.html
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<div class="staff-info__content ui-staff__content"> <div class="staff-info__content ui-staff__content">
<div class="staff-info__student ui-staff__content__section"> <div class="staff-info__student">
<div class="wrapper--input" class="staff-info__student__form"> <div class="wrapper--input" class="staff-info__student__form">
<form class="openassessment_student_info_form"> <form class="openassessment_student_info_form">
<div class="form--error"></div> <div class="form--error"></div>
......
openassessment/templates/openassessmentblock/staff_area/oa_staff_grade_learners.html
{% load i18n %} {% load i18n %}
<!-- staff-info__student is necessary to get proper styling for the staff assessment form --> <div class="staff__grade__control ui-toggle-visibility is--collapsed">
<div class="staff__grade__control ui-toggle-visibility is--collapsed staff-info__student">
<header class="staff__grade__header ui-toggle-visibility__control"> <header class="staff__grade__header ui-toggle-visibility__control">
<h3 class="staff__grade__title"> <h3 class="staff__grade__title">
<span class="wrapper--copy"> <span class="wrapper--copy">
...@@ -22,10 +21,10 @@ ...@@ -22,10 +21,10 @@
{% endblock %} {% endblock %}
</header> </header>
<div class="staff__grade__content ui-toggle-visibility__content"> <div class="ui-staff__content__section staff__grade__content ui-toggle-visibility__content">
<div class="wrapper--input"> <div class="wrapper--input">
<div class="staff__grade__form--error"></div> <div class="staff__grade__form--error"></div>
<div class="staff__grade__form"></div> <div class="staff__grade__form"></div>
</div> </div>
</div> </div>
</div> </div>
\ No newline at end of file
openassessment/templates/openassessmentblock/staff_area/oa_staff_override_assessment.html
...@@ -2,52 +2,49 @@ ...@@ -2,52 +2,49 @@
{% spaceless %} {% spaceless %}
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="wrapper--staff-assessment">
<div class="wrapper--staff-assessment"> <div class="step__instruction">
<div class="step__instruction"> <p>{% trans "Override this learner's current grade using the problem's rubric." %}</p>
<p>{% trans "Override this learner's current grade using the problem's rubric." %}</p> </div>
</div>
<div class="step__content"> <div class="step__content">
<article class="staff-assessment"> <article class="staff-assessment">
<div class="staff-assessment__display"> <div class="staff-assessment__display">
<header class="staff-assessment__display__header"> <header class="staff-assessment__display__header">
<h3 class="staff-assessment__display__title"> <h3 class="staff-assessment__display__title">
{% blocktrans %} {% blocktrans %}
Response for: {{ student_username }} Response for: {{ student_username }}
{% endblocktrans %} {% endblocktrans %}
</h3> </h3>
</header> </header>
{% include "openassessmentblock/oa_submission_answer.html" with answer=submission.answer answer_text_label="The learner's response to the question above:" %} {% include "openassessmentblock/oa_submission_answer.html" with answer=submission.answer answer_text_label="The learner's response to the question above:" %}
{% include "openassessmentblock/oa_uploaded_file.html" with file_upload_type=file_upload_type file_url=staff_file_url header="Associated File" class_prefix="staff-assessment" show_warning="true" %}
</div>
<form class="staff-assessment__assessment" method="post">
{% include "openassessmentblock/oa_rubric.html" with rubric_type="staff" %}
</form>
</article>
</div>
<div class="step__actions"> {% include "openassessmentblock/oa_uploaded_file.html" with file_upload_type=file_upload_type file_url=staff_file_url header="Associated File" class_prefix="staff-assessment" show_warning="true" %}
<div class="message message--inline message--error message--error-server">
<h3 class="message__title">{% trans "We could not submit your assessment" %}</h3>
<div class="message__content"></div>
</div> </div>
<ul class="list list--actions"> <form class="staff-assessment__assessment" method="post">
<li class="list--actions__item"> {% include "openassessmentblock/oa_rubric.html" with rubric_type="staff" %}
<button type="submit" class="action action--submit is--disabled"> </form>
<span class="copy">{% trans "Submit assessment" %}</span> </article>
</button> </div>
<div class="staff-override-error"></div> <div class="step__actions">
</li> <div class="message message--inline message--error message--error-server">
</ul> <h3 class="message__title">{% trans "We could not submit your assessment" %}</h3>
<div class="message__content"></div>
</div> </div>
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" class="action action--submit is--disabled">
<span class="copy">{% trans "Submit assessment" %}</span>
</button>
<div class="staff-override-error"></div>
</li>
</ul>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
{% endspaceless %} {% endspaceless %}
openassessment/templates/openassessmentblock/staff_area/oa_student_info.html
...@@ -32,14 +32,16 @@ ...@@ -32,14 +32,16 @@
{% endblocktrans %} {% endblocktrans %}
</p> </p>
{% else %} {% else %}
{% include "openassessmentblock/oa_submission_answer.html" with answer=submission.answer answer_text_label="The learner's response to the question above:" %} <div class="wrapper--content">
{% include "openassessmentblock/oa_submission_answer.html" with answer=submission.answer answer_text_label="The learner's response to the question above:" %}
{% if submission.file_url %} {% if submission.file_url %}
<a href="{{ submission.file_url }}" class="submission--file"> <a href="{{ submission.file_url }}" class="submission--file">
{% trans "The file associated with this response." %} {% trans "The file associated with this response." %}
</a> </a>
<span>{% trans "Caution: This file was uploaded by another course learner and has not been verified, screened, approved, reviewed, or endorsed by edX. If you decide to access it, you do so at your own risk." %}</span> <span>{% trans "Caution: This file was uploaded by another course learner and has not been verified, screened, approved, reviewed, or endorsed by edX. If you decide to access it, you do so at your own risk." %}</span>
{% endif %} {% endif %}
</div>
{% endif %} {% endif %}
</div> </div>
</div> </div>
......
openassessment/xblock/static/css/openassessment-ltr.css
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/css/openassessment-rtl.css
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/js/src/lms/oa_staff_area.js
...@@ -443,7 +443,6 @@ ...@@ -443,7 +443,6 @@
this.server.staffAssess( this.server.staffAssess(
rubric.optionsSelected(), rubric.criterionFeedback(), rubric.overallFeedback(), submissionID rubric.optionsSelected(), rubric.criterionFeedback(), rubric.overallFeedback(), submissionID
).done(successCallback).fail(function(errorMessage) { ).done(successCallback).fail(function(errorMessage) {
// TODO: this needs styling help Andy!
scope.find(errorSelector).html(_.escape(errorMessage)); scope.find(errorSelector).html(_.escape(errorMessage));
view.staffSubmitEnabled(scope, true); view.staffSubmitEnabled(scope, true);
}); });
......
openassessment/xblock/static/sass/oa/elements/_staff.scss
...@@ -4,8 +4,7 @@ ...@@ -4,8 +4,7 @@
// NOTES: // NOTES:
// * staff-centric UI used for reporting/debugging // * staff-centric UI used for reporting/debugging
.wrapper--xblock { .openassessment {
// -------------------- // --------------------
// general: staff UI // general: staff UI
...@@ -81,6 +80,12 @@ ...@@ -81,6 +80,12 @@
.ui-staff__content__section { .ui-staff__content__section {
padding-bottom: ($baseline-v/2); padding-bottom: ($baseline-v/2);
@extend %wipe-last-child; @extend %wipe-last-child;
.wrapper--input,
.wrapper--content {
padding: $baseline-v ($baseline-h/2);
background-color: $bg-content;
}
} }
// -------------------- // --------------------
...@@ -105,9 +110,18 @@ ...@@ -105,9 +110,18 @@
} }
} }
// UI - status (table) .openassessment_student_info_form {
.staff-info__status, .staff-info__classifierset { margin-bottom: ($baseline-v/2);
.list--actions__item {
@include text-align(left);
.action--submit-username {
@extend %btn--secondary;
margin-left: 0;
}
}
} }
.staff-info__status__table, .staff-info__classifierset__table { .staff-info__status__table, .staff-info__classifierset__table {
...@@ -155,119 +169,186 @@ ...@@ -155,119 +169,186 @@
} }
} }
} // staff assessments
.wrapper--staff-assessment {
margin-top: ($baseline-v/2);
padding-top: ($baseline-v/2);
border-top: 1px solid $color-decorative-tertiary;
}
// Styling for staff grade tab ("Grade Available Responses"). .staff-assessment__display {
.ui-staff { @extend %ui-subsection;
.staff__grade__control { }
padding: 0 (3*$baseline-h/4);
border-top: ($baseline-v/4) solid $color-decorative-tertiary;
background: $bg-content;
h3.staff__grade__title { .staff-assessment__display__header {
@include text-align(left); @include clearfix();
@include float(none);
margin-top: 0 !important; span {
@extend %t-strong; // FIX: needed due to DOM structure
}
.staff-assessment__display__title {
@extend %t-heading;
margin-bottom: ($baseline-v/2);
color: $heading-secondary-color;
}
}
display: block; .staff-assessment__display__response {
width: 100%; @extend %ui-subsection-content;
@extend %copy-3;
@extend %ui-content-longanswer;
@extend %ui-well;
color: $copy-color;
}
.staff__grade__show-form { // assessment form
@extend %t-superheading; .staff-assessment__assessment {
text-transform: none;
letter-spacing: normal; // fields
} .assessment__fields {
margin-bottom: $baseline-v;
} }
.staff__grade__status { // rubric question
display: inline-block; .assessment__rubric__question {
margin-top: ($baseline-v/4); @extend %ui-rubric-question;
}
@include media($bp-dm) { // rubric options
margin-top: 0; .question__answers {
@include float(right); @extend %ui-rubric-answers;
position: relative; }
top: -($baseline-v*2);
} // general feedback question
.assessment__rubric__question--feedback {
@include media($bp-dl) { .wrapper--input {
margin-top: 0; margin-top: $baseline-v;
@include float(right);
position: relative;
top: -($baseline-v*2);
} }
@include media($bp-dx) { .question__title__copy {
margin-top: 0; @include margin-left(0);
@include float(right); white-space: pre-wrap;
position: relative;
top: -($baseline-v*2);
} }
.staff__grade__value { textarea {
border-radius: ($baseline-v/10); @extend %ui-content-longanswer;
padding: ($baseline-v/4) ($baseline-h/4); min-height: ($baseline-v*5);
background: $color-decorative-tertiary; }
position: relative; }
}
@include media($bp-ds) { // Styling for staff grade tab ("Grade Available Responses").
display: block; .ui-staff {
.staff__grade__control {
border-top: ($baseline-v/4) solid $color-decorative-tertiary;
background: $bg-content;
background-color: $bg-content;
.staff__grade__title {
@include text-align(left);
@include float(none);
padding: 0 $baseline-v;
display: block;
width: 100%;
.staff__grade__show-form {
@extend %btn-reset;
@extend %t-superheading;
@include fontSize($f-size-medium);
background-color: $bg-content;
text-transform: none;
letter-spacing: normal;
padding: 0;
} }
}
.staff__grade__status {
display: inline-block;
padding: 0 $baseline-v;
@include media($bp-dm) { @include media($bp-dm) {
display: block; margin-top: 0;
@include float(right);
position: relative;
top: -($baseline-v*2);
} }
@include media($bp-dl) { @include media($bp-dl) {
display: block; margin-top: 0;
@include float(right);
position: relative;
top: -($baseline-v*2);
} }
@include media($bp-dx) { @include media($bp-dx) {
display: block; margin-top: 0;
@include float(right);
position: relative;
top: -($baseline-v*2);
} }
}
.copy { .staff__grade__value {
@extend %t-score; border-radius: ($baseline-v/10);
color: $heading-color; padding: ($baseline-v/4) ($baseline-h/4);
} background: $color-decorative-tertiary;
} line-height: 0;
.submit_assessment--action { @include media($bp-ds) {
display: inline; display: block;
} }
}
// Override the default color for h3 (for elements that can be toggled).
.ui-toggle-visibility .ui-toggle-visibility__control .staff__grade__title {
color: $action-primary-color;
}
}
@include media($bp-dm) {
display: block;
}
@include media($bp-dl) {
display: block;
}
@include media($bp-dx) {
display: block;
}
}
// UI - cancel submission (action) .copy {
.staff-info__workflow-cancellation { @extend %t-score;
color: $heading-color;
}
}
.staff-info__cancel-submission__content { .submit_assessment--action {
display: inline;
}
.comments__label { .wrapper--input {
color: $copy-secondary-color; padding-top: 0;
}
} }
.cancel_submission_comments { // Override the default color for h3 (for elements that can be toggled).
width: 100%; .ui-toggle-visibility .ui-toggle-visibility__control .staff__grade__title {
min-height: ($baseline-v*5); color: $action-primary-color;
text-align: left;
} }
}
// UI - cancel submission (action)
.staff-info__workflow-cancellation {
.list--actions { .staff-info__cancel-submission__content {
.action--submit {
margin: ($baseline-v/2) 0; .comments__label {
color: $copy-secondary-color;
} }
}
.cancel_submission_comments {
width: 100%;
min-height: ($baseline-v*5);
text-align: left;
}
}
} }
} }
openassessment/xblock/static/sass/oa/utilities/_developer.scss
...@@ -44,23 +44,14 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or ...@@ -44,23 +44,14 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
padding: 10px; padding: 10px;
.ui-staff__button { .ui-staff__button {
margin-left: ($baseline-v/2); @extend %btn-reset;
padding: ($baseline-v/4) ($baseline-v/2); padding: ($baseline-v/4) ($baseline-v/2);
border-radius: ($baseline-v/4); border-radius: ($baseline-v/4);
text-transform: uppercase; text-transform: uppercase;
color: $lighter-base-font-color; color: $lighter-base-font-color;
background-color: $shadow-l2; background-color: $shadow-l2;
// Remove button styling
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
-webkit-appearance: none;
background-image: none;
text-shadow: none;
box-shadow: none;
border: none;
border-image: none;
&.is--active { &.is--active {
color: white; color: white;
background-color: $edx-pink; background-color: $edx-pink;
...@@ -103,14 +94,6 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or ...@@ -103,14 +94,6 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
} }
} }
.staff-info__status {
.action--submit {
@extend %btn--secondary;
@extend %action-2;
@include margin(($baseline-v/2), ($baseline-v/2), ($baseline-v/2), ($baseline-v/2));
}
}
.staff-info__student { .staff-info__student {
.label { .label {
color: $heading-staff-color; color: $heading-staff-color;
...@@ -121,12 +104,6 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or ...@@ -121,12 +104,6 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
} }
} }
.action--submit {
@extend %btn--secondary;
@extend %action-2;
@include margin(($baseline-v/2), ($baseline-v/2), ($baseline-v/2), ($baseline-v/2));
}
.title { .title {
@extend %hd-2; @extend %hd-2;
color: $heading-staff-color; color: $heading-staff-color;
...@@ -161,89 +138,9 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or ...@@ -161,89 +138,9 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
} }
} }
.staff-info__cancel-submission__content,
.staff-info__staff-override__content {
padding: $baseline-v ($baseline-h/2);
background-color: white;
}
.value { .value {
width: $max-width/2; width: $max-width/2;
} }
// staff assessments
.wrapper--staff-assessment {
margin-top: ($baseline-v/2);
padding-top: ($baseline-v/2);
border-top: 1px solid $color-decorative-tertiary;
.action--submit {
@extend .action--submit;
}
}
.staff-assessment__display {
@extend %ui-subsection;
}
.staff-assessment__display__header {
@include clearfix();
span {
@extend %t-strong; // FIX: needed due to DOM structure
}
.staff-assessment__display__title {
@extend %t-heading;
margin-bottom: ($baseline-v/2);
color: $heading-secondary-color;
}
}
.staff-assessment__display__response {
@extend %ui-subsection-content;
@extend %copy-3;
@extend %ui-content-longanswer;
@extend %ui-well;
color: $copy-color;
}
// assessment form
.staff-assessment__assessment {
// fields
.assessment__fields {
margin-bottom: $baseline-v;
}
// rubric question
.assessment__rubric__question {
@extend %ui-rubric-question;
}
// rubric options
.question__answers {
@extend %ui-rubric-answers;
}
// general feedback question
.assessment__rubric__question--feedback {
.wrapper--input {
margin-top: $baseline-v;
}
.question__title__copy {
@include margin-left(0);
white-space: pre-wrap;
}
textarea {
@extend %ui-content-longanswer;
min-height: ($baseline-v*5);
}
}
}
} }
// -------------------- // --------------------
...@@ -1211,14 +1108,7 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or ...@@ -1211,14 +1108,7 @@ $link-hover: $edx-blue-l1 !default; // from our Pattern Library http://ux.edx.or
max-width: 100%; max-width: 100%;
} }
// Developer SASS for Continued Grading. #openassessment__leaderboard {
.openassessment__steps__step {
.action--continue--grading {
@extend .action--submit;
}
}
#openassessment__leaderboard{
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
.step__counter, .step__counter:before { .step__counter, .step__counter:before {
......
openassessment/xblock/static/sass/oa/utilities/_shame.scss
...@@ -196,11 +196,11 @@ ...@@ -196,11 +196,11 @@
.staff-info__workflow-cancellation { .staff-info__workflow-cancellation {
margin-bottom: ($baseline-v) !important; margin-bottom: ($baseline-v) !important;
} }
}
.staff-info__student { .wrapper--staff-assessment {
// 'p' elements in LMS have a color set on them. // 'p' elements in LMS have a color set on them.
.student__answer__display__content p { .student__answer__display__content p {
color: inherit; color: inherit;
}
} }
} }
openassessment/xblock/static/sass/oa/views/_oa-base.scss
...@@ -29,6 +29,56 @@ ...@@ -29,6 +29,56 @@
padding: 0; padding: 0;
} }
// --------------------
// overall actions
// --------------------
.list--actions {
margin-bottom: ($baseline-v/2);
@include text-align(center);
@include media($bp-ds) {
@include text-align(right);
}
@include media($bp-dm) {
@include text-align(right);
}
@include media($bp-dl) {
@include text-align(right);
}
@include media($bp-dx) {
@include text-align(right);
}
// STATE: actions has an error
&.has--error {
.message {
margin-bottom: $baseline-v;
@include text-align(left);
}
}
.action--submit {
@extend %btn--primary;
@extend %action-2;
margin-left: ($baseline-v/2);
.copy, .icon {
display: inline;
}
.icon {
@extend %icon-2;
}
.fa-caret-right:before {
@include transform(rotate(bidi-rotate-angle(0deg)));
}
}
}
// -------------------- // --------------------
// steps // steps
...@@ -235,55 +285,6 @@ ...@@ -235,55 +285,6 @@
} }
} }
// step actions
.step__actions {
margin-bottom: ($baseline-v/2);
@include text-align(center);
@include media($bp-ds) {
@include text-align(right);
}
@include media($bp-dm) {
@include text-align(right);
}
@include media($bp-dl) {
@include text-align(right);
}
@include media($bp-dx) {
@include text-align(right);
}
.action--submit {
@extend %btn--primary;
@extend %action-2;
.copy, .icon {
display: inline;
}
.icon {
@extend %icon-2;
}
.fa-caret-right:before {
@include transform(rotate(bidi-rotate-angle(0deg)));
}
}
// STATE: actions has an error
&.has--error {
.message {
margin-bottom: $baseline-v;
@include text-align(left);
}
}
}
// STATE: step is loading // STATE: step is loading
&.is--loading { &.is--loading {
...@@ -540,6 +541,10 @@ ...@@ -540,6 +541,10 @@
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@include margin-left(($baseline-h/4)); @include margin-left(($baseline-h/4));
.list--actions {
@include text-align(left);
}
} }
.response__submission__status__title { .response__submission__status__title {
...@@ -549,11 +554,14 @@ ...@@ -549,11 +554,14 @@
.response__submission__actions { .response__submission__actions {
.list--actions__item {
@include text-align(left);
}
.action--save { .action--save {
@extend %btn--secondary; @extend %btn--secondary;
@extend %action-2; @extend %action-2;
display: block; display: block;
@include text-align(center);
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
min-width: 215px; min-width: 215px;
...@@ -1125,7 +1133,7 @@ ...@@ -1125,7 +1133,7 @@
@extend %ui-subsection-content; @extend %ui-subsection-content;
padding-top: 0; padding-top: 0;
.list--actions { .list--actions {
padding: 0; padding: 0;
} }
......
openassessment/xblock/static/sass/xb/elements/_controls.scss
...@@ -106,6 +106,16 @@ ...@@ -106,6 +106,16 @@
border-radius: ($baseline-v/10); border-radius: ($baseline-v/10);
} }
%btn-reset {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
-webkit-appearance: none;
background-image: none;
text-shadow: none;
box-shadow: none;
border: none;
border-image: none;
}
// buttons - primary (assuming dark bg/light copy) // buttons - primary (assuming dark bg/light copy)
%btn--primary { %btn--primary {
......
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