Skip to content

E
edx-ora2
Commit b4a22898 by Brian Talbot
Options

revising UI and visual styling 

* proofing for specific LMS UI constraints
* proofing for poor LMS selector, styling, cascade work
* general markup/UI sync up
* aligning step-based icons different
* cleaning up small visual inconsistencies
parent a2113f9e
Showing with 238 additions and 45 deletions
apps/openassessment/templates/openassessmentblock/grade/oa_grade_complete.html
......@@ -30,6 +30,7 @@
{% with criterion_num=forloop.counter %}
<li class="question question--{{ criterion_num }} ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control">
<i class="ico icon-caret-right"></i>
<span class="question__title__copy">{{ criterion.name }}</span>
<span class="question__score">
......@@ -94,6 +95,7 @@
{% endfor %}
<li class="question question--feedback ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control">
<i class="ico icon-caret-right"></i>
<span class="question__title__copy">Additional feedback on your response</span>
</h4>
......@@ -125,21 +127,23 @@
</ol>
</article>
<form id="submission__feeedback" class="submission__feeedback ui-toggle-visibility" method="post">
<h3 class="submission__feeedback__title ui-toggle-visibility__control">Give Feedback On Peer Evaluations</h3>
<form id="submission__feeedback" class="submission__feeedback" method="post">
<h3 class="submission__feeedback__title">Give Feedback On Peer Evaluations</h3>
<ol class="list list--fields submission__feeedback__content ui-toggle-visibility__content">
<ol class="list list--fields submission__feeedback__content">
<li class="field field--textarea feedback__remarks" id="feedback__remarks">
<label for="feedback__remarks__value">Please provide any thoughts or comments on the feedback you received from your peers here.</label>
<textarea id="feedback__remarks__value" placeholder="I feel the feedback I received was..."></textarea>
</li>
</ol>
<div class="submission__feeedback__actions">
<ul class="list list--actions submission__feeedback__actions">
<li class="list--actions__item">
<button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback On Peer Evaluations</button>
</li>
</ul>
</div>
</form>
</div>
</div>
......
apps/openassessment/templates/openassessmentblock/oa_base.html
......@@ -56,15 +56,14 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico icon-cog icon-spin"></i>
<span class="copy">Loading</span>
<i class="ico icon-cog icon-spin"></i>
</span>
</span>
</span>
</header>
</li>
{% endfor %}
</ol>
</div>
</div>
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html
......@@ -96,19 +96,23 @@
</li>
{% endfor %}
<li class="wrapper--input field field--textarea assessment__rubric__question assessment__rubric__question--feedback ui-toggle-visibility" id="assessment__rubric__question--feedback">
<label class="question__title" for="assessment__rubric__question--feedback__value ui-toggle-visibility__control">
<i class="ico icon-caret-right"></i>
<li class="wrapper--input field field--textarea assessment__rubric__question assessment__rubric__question--feedback" id="assessment__rubric__question--feedback">
<label class="question__title" for="assessment__rubric__question--feedback__value">
<span class="question__title__copy">Please provide additional feedback for this response.</span>
</label>
<div class="ui-toggle-visibility__content">
<textarea class="question__answers" id="assessment__rubric__question--feedback__value" placeholder="I felt this response was..."></textarea>
<div>
<textarea id="assessment__rubric__question--feedback__value" placeholder="I felt this response was..."></textarea>
</div>
</li>
</ol>
</fieldset>
</form>
</article>
</li>
</ul>
</div>
<div class="peer-assessment__actions">
<div class="step__actions">
<div class="message message--error message--error-server">
<h3 class="message__title">We could not submit your assessment</h3>
<div class="message__content"></div>
......@@ -123,11 +127,6 @@
</li>
</ul>
</div>
</form>
</article>
</li>
</ul>
</div>
</div>
</div>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_closed.html
......@@ -8,11 +8,11 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico icon-warning-sign"></i>
<span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span> completed
</span>
<i class="ico icon-warning-sign"></i>
</span>
</span>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_complete.html
......@@ -8,10 +8,10 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico icon-ok"></i>
<span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> completed
</span>
<i class="ico icon-ok"></i>
</span>
</span>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode.html
......@@ -9,6 +9,7 @@
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Turbo Mode</span>
<i class="ico icon-ok"></i>
</span>
</span>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_unavailable.html
......@@ -6,10 +6,10 @@
{% block title %}
<span class="step__status">
<span class="ico"><i class="icon-info-sign"></i></span>
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Unavailable</span>
<span class="ico"><i class="icon-info-sign"></i></span>
</span>
</span>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_waiting.html
......@@ -6,10 +6,10 @@
{% block title %}
<span class="step__status">
<span class="ico"><i class="icon-info-sign"></i></span>
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Awaiting Peer Responses</span>
<span class="ico"><i class="icon-info-sign"></i></span>
</span>
</span>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/response/oa_response.html
......@@ -17,7 +17,6 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico icon-ok"></i>
<span class="copy">Not Completed</span>
</span>
</span>
......
apps/openassessment/templates/openassessmentblock/response/oa_response_closed.html
......@@ -7,8 +7,8 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico icon-warning-sign"></i>
<span class="copy">Closed</span>
<i class="ico icon-warning-sign"></i>
</span>
</span>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/response/oa_response_graded.html
......@@ -8,8 +8,8 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico icon-ok"></i>
<span class="copy">Graded</span>
<i class="ico icon-ok"></i>
</span>
</span>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/response/oa_response_submitted.html
......@@ -8,8 +8,8 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico icon-ok"></i>
<span class="copy">Submitted</span>
<i class="ico icon-ok"></i>
</span>
</span>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html
......@@ -20,7 +20,7 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Grading</span>
<span class="copy">Not Completed</span>
</span>
</span>
{% endblock %}
......@@ -47,13 +47,14 @@
<fieldset class="assessment__fields">
<ol class="list list--fields assessment__rubric">
{% for criterion in rubric_criteria %}
<li class="field field--radio is--required assessment__rubric__question" id="assessment__rubric__question--{{ criterion.name }}">
<h4 class="question__title">
<li class="field field--radio is--required assessment__rubric__question ui-toggle-visibility" id="assessment__rubric__question--{{ criterion.name }}">
<h4 class="question__title ui-toggle-visibility__control">
<i class="ico icon-caret-right"></i>
<span class="question__title__copy">{{ criterion.prompt }}</span>
<span class="label--required sr">* (Required)</span>
</h4>
<div class="ui-toggle-visibility__content">
<ol class="question__answers">
{% for option in criterion.options %}
<li class="answer">
......@@ -73,11 +74,15 @@
</li>
{% endfor %}
</ol>
</div>
</li>
{% endfor %}
</ol>
</fieldset>
<div class="self-assessment__actions">
</form>
</div>
<div class="step__actions">
<div class="message message--error message--error-server">
<h3 class="message__title">We could not submit your assessment</h3>
<div class="message__content"></div>
......@@ -91,7 +96,6 @@
</li>
</ul>
</div>
</form>
</div>
</div>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/self/oa_self_closed.html
......@@ -8,8 +8,8 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico icon-warning-sign"></i>
<span class="copy">Not Completed</span>
<i class="ico icon-warning-sign"></i>
</span>
</span>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/self/oa_self_complete.html
......@@ -8,8 +8,8 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico icon-ok"></i>
<span class="copy">Complete</span>
<i class="ico icon-ok"></i>
</span>
</span>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/self/oa_self_unavailable.html
......@@ -8,8 +8,8 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico icon-warning-sign"></i>
<span class="copy">Unavailable</span>
<i class="ico icon-warning-sign"></i>
</span>
</span>
{% endblock %}
......
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/elements/_navigation.scss
......@@ -21,8 +21,9 @@
vertical-align: middle;
}
.ico {
> .ico {
@include transition(all $tmg-f2 ease-in-out 0s);
@include transform(rotate(90deg));
margin-right: ($baseline-h/8);
}
......@@ -49,8 +50,8 @@
// STATE: is collapsed
&.is--collapsed {
.ui-toggle-visibility__control .ico {
@include transform(rotate(-90deg));
>.ui-toggle-visibility__control > .ico {
@include transform(rotate(0deg));
@include transform-origin(50% 50%);
}
......
apps/openassessment/xblock/static/sass/oa/utilities/_extends.scss
......@@ -33,6 +33,10 @@
%ui-section-content {
padding: $baseline-v;
p {
margin-bottom: $baseline-v;
}
}
......
apps/openassessment/xblock/static/sass/oa/utilities/_shame.scss
......@@ -2,3 +2,136 @@
// ====================
// NOTES: use for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css)
// --------------------
// LMS countermeasures
// --------------------
// rules ot overcome any poorly defined, scoped, or architected edX LMS-based CSS. Ideally this file will be removed when the LMS Front End is re-visited.
.openassessment {
// headers
.self-assessment__display__header, .peer-assessment__display__header, .step__header {
margin-bottom: 0 !important;
border-radius: 0 !important;
padding-bottom: 0 !important;
font-size: inherit !important;
border-bottom: none !important;
}
span {
line-height: normal;
}
h2 {
text-transform: none;
letter-spacing: normal;
}
// title
.openassessment__title--sub span {
color: $heading-tertiary-color !important;
}
h1.openassessment__title {
margin-bottom: $baseline-v !important;
border-bottom: ($baseline-v/5) solid $color-decorative-tertiary !important;
padding-bottom: ($baseline-v/2) !important;
}
// step header
.step__header {
.step__deadline {
color: $color-focused;
}
// step title/name
.step__title {
margin-top: 0 !important;
text-align: left !important;
@include media($bp-ds) {
@include span-columns(4 of 6);
}
@include media($bp-dm) {
@include span-columns(9 of 12);
}
@include media($bp-dl) {
@include span-columns(9 of 12);
}
@include media($bp-dx) {
@include span-columns(9 of 12);
}
.step__label {
text-transform: none;
letter-spacing: normal;
}
}
.step__status__value {
line-height: 0;
}
}
.list--actions {
list-style: none !important;
padding-left: 0 !important;
text-indent: 0 !important;
li {
margin-bottom: 0 !important;
}
button, .button, .action {
span {
color: inherit;
}
}
}
span {
color: inherit;
}
.ui-toggle-visibility .ui-toggle-visibility__control, .ui-toggle-visibility .ui-toggle-visibility__control .step__label {
color: $action-primary-color;
&:hover, &:focus {
color: $action-primary-color-focus;
}
&:active, &.is--current {
color: $action-primary-color-active;
}
}
// self assessment
.self-assessment__display__header, .peer-assessment__display__header {
padding-bottom: ($baseline-v/2) !important;
}
.self-assessment__display__title, .peer-assessment__display__title {
color: $heading-secondary-color !important;
font-weight: 600 !important;
}
// shown submission/results
.question__answers {
padding-left: 0 !important;
}
.step--grade .step__title {
width: 100% !important;
.wrapper--copy {
display: block !important;
}
}
}
apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss
......@@ -59,9 +59,9 @@
.step__deadline {
color: $color-focused;
}
}
// step title/name
// step title/name - TODO: nesting needed due to LMS CSS overrides
.step__title {
@include media($bp-ds) {
......@@ -119,7 +119,7 @@
color: $heading-secondary-color;
}
}
}
// step status
.step__status {
......@@ -144,7 +144,7 @@
.ico {
@extend %t-icon-m;
display: none; // hiding by default
margin-right: ($baseline-v/4);
margin-left: ($baseline-v/4);
}
.copy {
......@@ -247,6 +247,10 @@
.action--submit {
@extend %btn--primary;
@extend %action-4;
.ico {
@extend %t-icon-l;
}
}
// STATE: has error
......@@ -309,6 +313,18 @@
&.is--loading {
opacity: 0.3;
.step__status__value {
background: $color-primary;
.ico {
display: inline-block;
}
.copy {
color: $white-t;
}
}
.step__header {
@include media($bp-ds) {
......@@ -1018,6 +1034,9 @@
}
.step__title {
@include media($bp-m) {
@include span-columns(4 of 4);
}
@include media($bp-ds) {
@include span-columns(6 of 6);
......@@ -1040,12 +1059,10 @@
}
.step__label, .grade__value {
display: inline-block;
vertical-align: middle;
display: block;
}
.step__label {
margin-right: ($baseline-h/2);
margin-bottom: ($baseline-v/4);
color: $color-decorative-secondary;
}
......@@ -1059,10 +1076,12 @@
.grade__value__title {
@extend %hd-6;
color: $heading-primary-color;
}
.grade__value__description {
@extend %copy-4;
color: $copy-lead-color;
}
}
......@@ -1089,18 +1108,37 @@
}
// CASE: is complete
&.is--complete {
&.is--complete, &.has--grade {
.step__title {
margin-bottom: $baseline-v;
.step__label, .grade__value {
display: inline-block;
vertical-align: middle;
}
.step__label {
margin-right: ($baseline-h/8);
margin-bottom: 0;
color: $heading-primary-color;
}
.grade__value {
background: $color-complete;
color: $white;
}
.grade__value__title {
color: $white;
}
.grade__value__earned, .grade__value__potential {
@extend %t-weight3;
}
}
}
}
// --------------------
// UI: submitted repsonse
......@@ -1161,7 +1199,7 @@
.question__title__copy {
@extend %hd-4;
@extend %t-weight3;
float: left;
// float: left;
}
.question__score {
......@@ -1256,12 +1294,21 @@
.submission__feeedback__content {
@extend %ui-section-content;
textarea {
@extend %ui-content-longanswer;
min-height: ($baseline-v*10);
}
}
.submission__feeedback__actions {
@extend %ui-section-content;
padding-top: 0;
.list--actions {
padding: 0;
}
.action--submit {
@extend %btn--secondary;
@extend %action-4;
......
apps/openassessment/xblock/static/sass/xb/elements/_controls.scss
......@@ -115,6 +115,7 @@
background: $action-primary-color;
border: 1px solid shade($action-primary-color, 15%);
color: tint($action-primary-color, 90%);
box-shadow: none; // needed for LMS override
.copy {
@extend %t-weight3;
......@@ -149,6 +150,7 @@
background: $action-secondary-color;
border: 1px shade($action-secondary-color, 10%);
color: tint($action-secondary-color, 90%);
box-shadow: none; // needed for LMS override
.copy {
@extend %t-weight3;
......
apps/openassessment/xblock/test/test_self.py
......@@ -99,7 +99,7 @@ class TestSelfAssessment(XBlockHandlerTestCase):
mock_complete.return_value = True
# Expect that the self-assessment step is open
resp = self.request(xblock, 'render_self_assessment', json.dumps(dict()))
self.assertIn("Grading", resp)
self.assertIn("Not Completed", resp)
@scenario('data/self_assessment_scenario.xml', user_id='Bob')
def test_render_self_assessment_no_submission(self, xblock):
......
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