Skip to content

E
edx-ora2
Commit 82346853 by Brian Talbot
Options

Merge pull request #205 from edx/talbs/ui-assessmentfeedback 

Assessment Feedback Form Styling
parents a4e16c5f 610b0abf
Showing with 73 additions and 15 deletions
apps/openassessment/templates/openassessmentblock/grade/oa_grade_complete.html
...@@ -147,40 +147,40 @@ ...@@ -147,40 +147,40 @@
</div> </div>
<ol class="list list--fields submission__feedback__fields"> <ol class="list list--fields submission__feedback__fields">
<li class="field field--radio feedback__overall" id="feedback__overall"> <li class="field field-group field--radio feedback__overall" id="feedback__overall">
<h4>Please select the statements below that reflect what you think of this peer grading experience:</h4> <h4 class="field-group__label">Please select the statements below that reflect what you think of this peer grading experience:</h4>
<ol class="list--options"> <ol class="list--options">
<li class="option option--useful"> <li class="option option--useful">
<input type="checkbox" <input type="checkbox"
name="feedback__overall__value" name="feedback__overall__value"
id="feedback__overall__value--useful" id="feedback__overall__value--useful"
class="feedback__overall__value" class="option__input feedback__overall__value"
value="These assessments were useful." /> value="These assessments were useful." />
<label for="feedback__overall__value--useful">These assessments were useful.</label> <label class="option__label" for="feedback__overall__value--useful">These assessments were useful.</label>
</li> </li>
<li class="option option--notuseful"> <li class="option option--notuseful">
<input type="checkbox" <input type="checkbox"
name="feedback__overall__value" name="feedback__overall__value"
id="feedback__overall__value--notuseful" id="feedback__overall__value--notuseful"
class="feedback__overall__value" class="option__input feedback__overall__value"
value="These assessments were not useful." /> value="These assessments were not useful." />
<label for="feedback__overall__value--notuseful">These assessments were not useful.</label> <label class="option__label" for="feedback__overall__value--notuseful">These assessments were not useful.</label>
</li> </li>
<li class="option option--disagree"> <li class="option option--disagree">
<input type="checkbox" <input type="checkbox"
name="feedback__overall__value" name="feedback__overall__value"
id="feedback__overall__value--disagree" id="feedback__overall__value--disagree"
class="feedback__overall__value" class="option__input feedback__overall__value"
value="I disagree with the ways that my peers assessed me." /> value="I disagree with the ways that my peers assessed me." />
<label for="feedback__overall__value--notuseful">I disagree with the ways that my peers assessed me.</label> <label class="option__label" for="feedback__overall__value--disagree">I disagree with the ways that my peers assessed me.</label>
</li> </li>
<li class="option option--inappropriate"> <li class="option option--inappropriate">
<input type="checkbox" <input type="checkbox"
name="feedback__overall__value" name="feedback__overall__value"
id="feedback__overall__value--inappropriate" id="feedback__overall__value--inappropriate"
class="feedback__overall__value" class="option__input feedback__overall__value"
value="I received some inappropriate comments." /> value="I received some inappropriate comments." />
<label for="feedback__overall__value--notuseful">I received some inappropriate comments.</label> <label class="option__label" for="feedback__overall__value--inappropriate">I received some inappropriate comments.</label>
</li> </li>
</ol> </ol>
</li> </li>
......
apps/openassessment/xblock/static/css/openassessment.css
This source diff could not be displayed because it is too large. You can view the blob instead.
apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss
...@@ -1089,7 +1089,7 @@ ...@@ -1089,7 +1089,7 @@
border-radius: ($baseline-v/10); border-radius: ($baseline-v/10);
} }
.submission__feeedback__fields { .submission__feedback__fields {
margin-bottom: $baseline-v; margin-bottom: $baseline-v;
.field { .field {
......
apps/openassessment/xblock/static/sass/xb/elements/_base.scss
...@@ -47,6 +47,7 @@ hr.divider, ...@@ -47,6 +47,7 @@ hr.divider,
.list--controls, .list--controls,
.list--fields, .list--fields,
.list--help, .list--help,
.list--options,
.nav--wizard, .nav--wizard,
.list--tips, .list--tips,
.field--group { .field--group {
......
apps/openassessment/xblock/static/sass/xb/elements/_forms.scss
...@@ -30,15 +30,17 @@ ...@@ -30,15 +30,17 @@
} }
} }
// general field UI
.field { .field {
font-family: $f-copy; font-family: $f-copy;
label, .label { label, .label, .field-group__label {
@extend %copy-3; @extend %copy-3;
@extend %t-strong; }
.field-group__label {
display: block; display: block;
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
color: $copy-color;
} }
textarea { textarea {
...@@ -51,5 +53,60 @@ ...@@ -51,5 +53,60 @@
color: $copy-secondary-color; color: $copy-secondary-color;
} }
} }
}
// TYPE: textarea fields
.field--textarea {
.label, label {
@extend %t-strong;
margin-bottom: ($baseline-v/2);
}
}
// TYPE: field-group
.field-group {
}
.field-group__label {
@extend %t-strong;
margin-bottom: ($baseline-v/2);
}
// TYPE: radio/checkbox fields
.field--radio, .field--checkbox {
// general option UI
.option {
margin-bottom: ($baseline-v/4);
&:last-child {
@extend %wipe-last-child;
}
}
.option__input, .option__label {
display: inline-block;
vertical-align: middle;
}
.option__label {
@extend %copy-3;
@extend %t-strong;
margin-bottom: 0; // FIX: need to reset base label style
color: $copy-secondary-color;
}
.option__input {
margin-right: ($baseline-v/2);
// STATE: checked
&:checked {
+ .option__label {
color: $selected-color;
}
}
}
}
}
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