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 @@
<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">
<form class="openassessment_student_info_form">
<div class="form--error"></div>
......
openassessment/templates/openassessmentblock/staff_area/oa_staff_grade_learners.html
{% 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 staff-info__student">
<div class="staff__grade__control ui-toggle-visibility is--collapsed">
<header class="staff__grade__header ui-toggle-visibility__control">
<h3 class="staff__grade__title">
<span class="wrapper--copy">
......@@ -22,10 +21,10 @@
{% endblock %}
</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="staff__grade__form--error"></div>
<div class="staff__grade__form"></div>
</div>
</div>
</div>
\ No newline at end of file
</div>
openassessment/templates/openassessmentblock/staff_area/oa_staff_override_assessment.html
......@@ -2,52 +2,49 @@
{% spaceless %}
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--staff-assessment">
<div class="step__instruction">
<p>{% trans "Override this learner's current grade using the problem's rubric." %}</p>
</div>
<div class="wrapper--staff-assessment">
<div class="step__instruction">
<p>{% trans "Override this learner's current grade using the problem's rubric." %}</p>
</div>
<div class="step__content">
<article class="staff-assessment">
<div class="staff-assessment__display">
<header class="staff-assessment__display__header">
<h3 class="staff-assessment__display__title">
{% blocktrans %}
Response for: {{ student_username }}
{% endblocktrans %}
</h3>
</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_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__content">
<article class="staff-assessment">
<div class="staff-assessment__display">
<header class="staff-assessment__display__header">
<h3 class="staff-assessment__display__title">
{% blocktrans %}
Response for: {{ student_username }}
{% endblocktrans %}
</h3>
</header>
{% include "openassessmentblock/oa_submission_answer.html" with answer=submission.answer answer_text_label="The learner's response to the question above:" %}
<div class="step__actions">
<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>
{% 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>
<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>
<form class="staff-assessment__assessment" method="post">
{% include "openassessmentblock/oa_rubric.html" with rubric_type="staff" %}
</form>
</article>
</div>
<div class="staff-override-error"></div>
</li>
</ul>
<div class="step__actions">
<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>
<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>
{% endblock %}
{% endspaceless %}
openassessment/templates/openassessmentblock/staff_area/oa_student_info.html
......@@ -32,14 +32,16 @@
{% endblocktrans %}
</p>
{% 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 %}
<a href="{{ submission.file_url }}" class="submission--file">
{% trans "The file associated with this response." %}
</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>
{% endif %}
{% if submission.file_url %}
<a href="{{ submission.file_url }}" class="submission--file">
{% trans "The file associated with this response." %}
</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>
{% endif %}
</div>
{% endif %}
</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 @@
this.server.staffAssess(
rubric.optionsSelected(), rubric.criterionFeedback(), rubric.overallFeedback(), submissionID
).done(successCallback).fail(function(errorMessage) {
// TODO: this needs styling help Andy!
scope.find(errorSelector).html(_.escape(errorMessage));
view.staffSubmitEnabled(scope, true);
});
......
openassessment/xblock/static/sass/oa/elements/_staff.scss
......@@ -4,8 +4,7 @@
// NOTES:
// * staff-centric UI used for reporting/debugging
.wrapper--xblock {
.openassessment {
// --------------------
// general: staff UI
......@@ -81,6 +80,12 @@
.ui-staff__content__section {
padding-bottom: ($baseline-v/2);
@extend %wipe-last-child;
.wrapper--input,
.wrapper--content {
padding: $baseline-v ($baseline-h/2);
background-color: $bg-content;
}
}
// --------------------
......@@ -105,9 +110,18 @@
}
}
// UI - status (table)
.staff-info__status, .staff-info__classifierset {
.openassessment_student_info_form {
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 {
......@@ -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").
.ui-staff {
.staff__grade__control {
padding: 0 (3*$baseline-h/4);
border-top: ($baseline-v/4) solid $color-decorative-tertiary;
background: $bg-content;
.staff-assessment__display {
@extend %ui-subsection;
}
h3.staff__grade__title {
@include text-align(left);
@include float(none);
margin-top: 0 !important;
.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;
}
}
display: block;
width: 100%;
.staff-assessment__display__response {
@extend %ui-subsection-content;
@extend %copy-3;
@extend %ui-content-longanswer;
@extend %ui-well;
color: $copy-color;
}
.staff__grade__show-form {
@extend %t-superheading;
text-transform: none;
letter-spacing: normal;
}
// assessment form
.staff-assessment__assessment {
// fields
.assessment__fields {
margin-bottom: $baseline-v;
}
.staff__grade__status {
display: inline-block;
margin-top: ($baseline-v/4);
// rubric question
.assessment__rubric__question {
@extend %ui-rubric-question;
}
@include media($bp-dm) {
margin-top: 0;
@include float(right);
position: relative;
top: -($baseline-v*2);
}
// rubric options
.question__answers {
@extend %ui-rubric-answers;
}
// general feedback question
.assessment__rubric__question--feedback {
@include media($bp-dl) {
margin-top: 0;
@include float(right);
position: relative;
top: -($baseline-v*2);
.wrapper--input {
margin-top: $baseline-v;
}
@include media($bp-dx) {
margin-top: 0;
@include float(right);
position: relative;
top: -($baseline-v*2);
.question__title__copy {
@include margin-left(0);
white-space: pre-wrap;
}
.staff__grade__value {
border-radius: ($baseline-v/10);
padding: ($baseline-v/4) ($baseline-h/4);
background: $color-decorative-tertiary;
position: relative;
textarea {
@extend %ui-content-longanswer;
min-height: ($baseline-v*5);
}
}
}
@include media($bp-ds) {
display: block;
// Styling for staff grade tab ("Grade Available Responses").
.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) {
display: block;
margin-top: 0;
@include float(right);
position: relative;
top: -($baseline-v*2);
}
@include media($bp-dl) {
display: block;
margin-top: 0;
@include float(right);
position: relative;
top: -($baseline-v*2);
}
@include media($bp-dx) {
display: block;
margin-top: 0;
@include float(right);
position: relative;
top: -($baseline-v*2);
}
}
.copy {
@extend %t-score;
color: $heading-color;
}
}
.staff__grade__value {
border-radius: ($baseline-v/10);
padding: ($baseline-v/4) ($baseline-h/4);
background: $color-decorative-tertiary;
line-height: 0;
.submit_assessment--action {
display: inline;
}
}
// 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-ds) {
display: block;
}
@include media($bp-dm) {
display: block;
}
@include media($bp-dl) {
display: block;
}
@include media($bp-dx) {
display: block;
}
}
// UI - cancel submission (action)
.staff-info__workflow-cancellation {
.copy {
@extend %t-score;
color: $heading-color;
}
}
.staff-info__cancel-submission__content {
.submit_assessment--action {
display: inline;
}
.comments__label {
color: $copy-secondary-color;
.wrapper--input {
padding-top: 0;
}
}
.cancel_submission_comments {
width: 100%;
min-height: ($baseline-v*5);
text-align: left;
// 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;
}
}
// UI - cancel submission (action)
.staff-info__workflow-cancellation {
.list--actions {
.action--submit {
margin: ($baseline-v/2) 0;
.staff-info__cancel-submission__content {
.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
padding: 10px;
.ui-staff__button {
margin-left: ($baseline-v/2);
@extend %btn-reset;
padding: ($baseline-v/4) ($baseline-v/2);
border-radius: ($baseline-v/4);
text-transform: uppercase;
color: $lighter-base-font-color;
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 {
color: white;
background-color: $edx-pink;
......@@ -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 {
.label {
color: $heading-staff-color;
......@@ -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 {
@extend %hd-2;
color: $heading-staff-color;
......@@ -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 {
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
max-width: 100%;
}
// Developer SASS for Continued Grading.
.openassessment__steps__step {
.action--continue--grading {
@extend .action--submit;
}
}
#openassessment__leaderboard{
#openassessment__leaderboard {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
.step__counter, .step__counter:before {
......
openassessment/xblock/static/sass/oa/utilities/_shame.scss
......@@ -196,11 +196,11 @@
.staff-info__workflow-cancellation {
margin-bottom: ($baseline-v) !important;
}
}
.staff-info__student {
// 'p' elements in LMS have a color set on them.
.student__answer__display__content p {
color: inherit;
.wrapper--staff-assessment {
// 'p' elements in LMS have a color set on them.
.student__answer__display__content p {
color: inherit;
}
}
}
openassessment/xblock/static/sass/oa/views/_oa-base.scss
......@@ -29,6 +29,56 @@
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
......@@ -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
&.is--loading {
......@@ -540,6 +541,10 @@
display: inline-block;
vertical-align: middle;
@include margin-left(($baseline-h/4));
.list--actions {
@include text-align(left);
}
}
.response__submission__status__title {
......@@ -549,11 +554,14 @@
.response__submission__actions {
.list--actions__item {
@include text-align(left);
}
.action--save {
@extend %btn--secondary;
@extend %action-2;
display: block;
@include text-align(center);
margin-bottom: ($baseline-v/2);
min-width: 215px;
......@@ -1125,7 +1133,7 @@
@extend %ui-subsection-content;
padding-top: 0;
.list--actions {
.list--actions {
padding: 0;
}
......
openassessment/xblock/static/sass/xb/elements/_controls.scss
......@@ -106,6 +106,16 @@
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)
%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