Skip to content

E
edx-ora2
Commit 26a8eaf3 by Brian Talbot
Options

Merge pull request #129 from edx/talbs/ui-lmsproofing 

Proofing UI in General and for LMS Context
parents 7063f2f3 b4a22898
Showing with 337 additions and 563 deletions
apps/openassessment/templates/openassessmentblock/grade/oa_grade_complete.html
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
{% with criterion_num=forloop.counter %} {% with criterion_num=forloop.counter %}
<li class="question question--{{ criterion_num }} ui-toggle-visibility"> <li class="question question--{{ criterion_num }} ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control"> <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__title__copy">{{ criterion.name }}</span>
<span class="question__score"> <span class="question__score">
...@@ -94,6 +95,7 @@ ...@@ -94,6 +95,7 @@
{% endfor %} {% endfor %}
<li class="question question--feedback ui-toggle-visibility"> <li class="question question--feedback ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control"> <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> <span class="question__title__copy">Additional feedback on your response</span>
</h4> </h4>
...@@ -125,21 +127,23 @@ ...@@ -125,21 +127,23 @@
</ol> </ol>
</article> </article>
<form id="submission__feeedback" class="submission__feeedback ui-toggle-visibility" method="post"> <form id="submission__feeedback" class="submission__feeedback" method="post">
<h3 class="submission__feeedback__title ui-toggle-visibility__control">Give Feedback On Peer Evaluations</h3> <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"> <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> <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> <textarea id="feedback__remarks__value" placeholder="I feel the feedback I received was..."></textarea>
</li> </li>
</ol> </ol>
<ul class="list list--actions submission__feeedback__actions"> <div class="submission__feeedback__actions">
<li class="list--actions__item"> <ul class="list list--actions submission__feeedback__actions">
<button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback On Peer Evaluations</button> <li class="list--actions__item">
</li> <button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback On Peer Evaluations</button>
</ul> </li>
</ul>
</div>
</form> </form>
</div> </div>
</div> </div>
......
apps/openassessment/templates/openassessmentblock/oa_base.html
...@@ -56,15 +56,14 @@ ...@@ -56,15 +56,14 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="ico icon-cog icon-spin"></i>
<span class="copy">Loading</span> <span class="copy">Loading</span>
<i class="ico icon-cog icon-spin"></i>
</span> </span>
</span> </span>
</span> </span>
</header> </header>
</li> </li>
{% endfor %} {% endfor %}
</ol> </ol>
</div> </div>
</div> </div>
......
apps/openassessment/templates/openassessmentblock/oa_error.html
<!-- TODO: this is a placeholder -->
<div>{{ error_msg }}</div> <div>{{ error_msg }}</div>
apps/openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html
...@@ -96,38 +96,37 @@ ...@@ -96,38 +96,37 @@
</li> </li>
{% endfor %} {% endfor %}
<li class="wrapper--input field field--textarea assessment__rubric__question assessment__rubric__question--feedback ui-toggle-visibility" id="assessment__rubric__question--feedback"> <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 ui-toggle-visibility__control"> <label class="question__title" for="assessment__rubric__question--feedback__value">
<i class="ico icon-caret-right"></i>
<span class="question__title__copy">Please provide additional feedback for this response.</span> <span class="question__title__copy">Please provide additional feedback for this response.</span>
</label> </label>
<div class="ui-toggle-visibility__content"> <div>
<textarea class="question__answers" id="assessment__rubric__question--feedback__value" placeholder="I felt this response was..."></textarea> <textarea id="assessment__rubric__question--feedback__value" placeholder="I felt this response was..."></textarea>
</div> </div>
</li> </li>
</ol> </ol>
</fieldset> </fieldset>
<div class="peer-assessment__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>
</div>
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="peer-assessment--001__assessment__submit" class="action action--submit is--disabled">
<span class="copy">{{ submit_button_text }}</span>
<i class="ico icon-caret-right"></i>
</button>
</li>
</ul>
</div>
</form> </form>
</article> </article>
</li> </li>
</ul> </ul>
</div> </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>
</div>
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="peer-assessment--001__assessment__submit" class="action action--submit is--disabled">
<span class="copy">{{ submit_button_text }}</span>
<i class="ico icon-caret-right"></i>
</button>
</li>
</ul>
</div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_closed.html
...@@ -8,11 +8,11 @@ ...@@ -8,11 +8,11 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="ico icon-warning-sign"></i>
<span class="copy"> <span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> of <span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span> completed <span class="step__status__value--required">{{ must_grade }}</span> completed
</span> </span>
<i class="ico icon-warning-sign"></i>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_complete.html
...@@ -8,10 +8,10 @@ ...@@ -8,10 +8,10 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="ico icon-ok"></i>
<span class="copy"> <span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> completed <span class="step__status__value--completed">{{ graded }}</span> completed
</span> </span>
<i class="ico icon-ok"></i>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode.html
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">Turbo Mode</span> <span class="copy">Turbo Mode</span>
<i class="ico icon-ok"></i>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_unavailable.html
...@@ -6,10 +6,10 @@ ...@@ -6,10 +6,10 @@
{% block title %} {% block title %}
<span class="step__status"> <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__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">Unavailable</span> <span class="copy">Unavailable</span>
<span class="ico"><i class="icon-info-sign"></i></span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_waiting.html
...@@ -6,10 +6,10 @@ ...@@ -6,10 +6,10 @@
{% block title %} {% block title %}
<span class="step__status"> <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__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">Awaiting Peer Responses</span> <span class="copy">Awaiting Peer Responses</span>
<span class="ico"><i class="icon-info-sign"></i></span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/response/oa_response.html
...@@ -17,7 +17,6 @@ ...@@ -17,7 +17,6 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="ico icon-ok"></i>
<span class="copy">Not Completed</span> <span class="copy">Not Completed</span>
</span> </span>
</span> </span>
......
apps/openassessment/templates/openassessmentblock/response/oa_response_closed.html
...@@ -7,8 +7,8 @@ ...@@ -7,8 +7,8 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="ico icon-warning-sign"></i>
<span class="copy">Closed</span> <span class="copy">Closed</span>
<i class="ico icon-warning-sign"></i>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/response/oa_response_graded.html
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="ico icon-ok"></i>
<span class="copy">Graded</span> <span class="copy">Graded</span>
<i class="ico icon-ok"></i>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/response/oa_response_submitted.html
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="ico icon-ok"></i>
<span class="copy">Submitted</span> <span class="copy">Submitted</span>
<i class="ico icon-ok"></i>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">Grading</span> <span class="copy">Not Completed</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
...@@ -47,51 +47,55 @@ ...@@ -47,51 +47,55 @@
<fieldset class="assessment__fields"> <fieldset class="assessment__fields">
<ol class="list list--fields assessment__rubric"> <ol class="list list--fields assessment__rubric">
{% for criterion in rubric_criteria %} {% for criterion in rubric_criteria %}
<li class="field field--radio is--required assessment__rubric__question" id="assessment__rubric__question--{{ criterion.name }}"> <li class="field field--radio is--required assessment__rubric__question ui-toggle-visibility" id="assessment__rubric__question--{{ criterion.name }}">
<h4 class="question__title"> <h4 class="question__title ui-toggle-visibility__control">
<i class="ico icon-caret-right"></i> <i class="ico icon-caret-right"></i>
<span class="question__title__copy">{{ criterion.prompt }}</span> <span class="question__title__copy">{{ criterion.prompt }}</span>
<span class="label--required sr">* (Required)</span> <span class="label--required sr">* (Required)</span>
</h4> </h4>
<ol class="question__answers"> <div class="ui-toggle-visibility__content">
{% for option in criterion.options %} <ol class="question__answers">
<li class="answer"> {% for option in criterion.options %}
<div class="wrapper--input"> <li class="answer">
<input type="radio" <div class="wrapper--input">
name="{{ criterion.name }}" <input type="radio"
id="assessment__rubric__question--{{ criterion.name }}" name="{{ criterion.name }}"
class="answer__value" id="assessment__rubric__question--{{ criterion.name }}"
value="{{ option.name }}" /> class="answer__value"
<label for="assessment__rubric__question--{{ criterion.name }}" value="{{ option.name }}" />
class="answer__label">{{ option.name }}</label> <label for="assessment__rubric__question--{{ criterion.name }}"
</div> class="answer__label">{{ option.name }}</label>
<div class="wrapper--metadata"> </div>
<span class="answer__tip">{{ option.explanation }}</span> <div class="wrapper--metadata">
<span class="answer__points">{{option.points}} <span class="label">points</span></span> <span class="answer__tip">{{ option.explanation }}</span>
</div> <span class="answer__points">{{option.points}} <span class="label">points</span></span>
</li> </div>
{% endfor %} </li>
</ol> {% endfor %}
</ol>
</div>
</li> </li>
{% endfor %} {% endfor %}
</ol> </ol>
</fieldset> </fieldset>
<div class="self-assessment__actions"> </form>
<div class="message message--error message--error-server"> </div>
<h3 class="message__title">We could not submit your assessment</h3>
<div class="message__content"></div> <div class="step__actions">
</div> <div class="message message--error message--error-server">
<ul class="list list--actions"> <h3 class="message__title">We could not submit your assessment</h3>
<li class="list--actions__item"> <div class="message__content"></div>
<button type="submit" id="self-assessment--001__assessment__submit" class="action action--submit is--disabled">
<span class="copy">{% trans "Submit Your Assessment" %}</span>
<i class="ico icon-caret-right"></i>
</button>
</li>
</ul>
</div> </div>
</form> <ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="self-assessment--001__assessment__submit" class="action action--submit is--disabled">
<span class="copy">{% trans "Submit Your Assessment" %}</span>
<i class="ico icon-caret-right"></i>
</button>
</li>
</ul>
</div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/self/oa_self_closed.html
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="ico icon-warning-sign"></i>
<span class="copy">Not Completed</span> <span class="copy">Not Completed</span>
<i class="ico icon-warning-sign"></i>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/self/oa_self_complete.html
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="ico icon-ok"></i>
<span class="copy">Complete</span> <span class="copy">Complete</span>
<i class="ico icon-ok"></i>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/self/oa_self_unavailable.html
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="ico icon-warning-sign"></i>
<span class="copy">Unavailable</span> <span class="copy">Unavailable</span>
<i class="ico icon-warning-sign"></i>
</span> </span>
</span> </span>
{% endblock %} {% 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 @@ ...@@ -21,8 +21,9 @@
vertical-align: middle; vertical-align: middle;
} }
.ico { > .ico {
@include transition(all $tmg-f2 ease-in-out 0s); @include transition(all $tmg-f2 ease-in-out 0s);
@include transform(rotate(90deg));
margin-right: ($baseline-h/8); margin-right: ($baseline-h/8);
} }
...@@ -49,8 +50,8 @@ ...@@ -49,8 +50,8 @@
// STATE: is collapsed // STATE: is collapsed
&.is--collapsed { &.is--collapsed {
.ui-toggle-visibility__control .ico { >.ui-toggle-visibility__control > .ico {
@include transform(rotate(-90deg)); @include transform(rotate(0deg));
@include transform-origin(50% 50%); @include transform-origin(50% 50%);
} }
......
apps/openassessment/xblock/static/sass/oa/utilities/_extends.scss
...@@ -33,6 +33,10 @@ ...@@ -33,6 +33,10 @@
%ui-section-content { %ui-section-content {
padding: $baseline-v; padding: $baseline-v;
p {
margin-bottom: $baseline-v;
}
} }
......
apps/openassessment/xblock/static/sass/oa/utilities/_shame.scss
...@@ -2,3 +2,136 @@ ...@@ -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) // 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,68 +59,68 @@ ...@@ -59,68 +59,68 @@
.step__deadline { .step__deadline {
color: $color-focused; color: $color-focused;
} }
}
// step title/name
.step__title {
@include media($bp-ds) { // step title/name - TODO: nesting needed due to LMS CSS overrides
@include span-columns(4 of 6); .step__title {
}
@include media($bp-dm) { @include media($bp-ds) {
@include span-columns(9 of 12); @include span-columns(4 of 6);
} }
@include media($bp-dl) { @include media($bp-dm) {
@include span-columns(9 of 12); @include span-columns(9 of 12);
} }
@include media($bp-dx) { @include media($bp-dl) {
@include span-columns(9 of 12); @include span-columns(9 of 12);
} }
.step__counter, .wrapper--copy { @include media($bp-dx) {
display: inline-block; @include span-columns(9 of 12);
vertical-align: middle; }
}
// step counter .step__counter, .wrapper--copy {
.step__counter { display: inline-block;
vertical-align: middle;
// increment: show numbers using parent list counter }
&:before {
@extend %hd-6; // step counter
@extend %t-weight4; .step__counter {
content: counter(item, decimal);
counter-increment: item; // increment: show numbers using parent list counter
margin-right: ($baseline-v/4); &:before {
border-radius: ($baseline-v/10); @extend %hd-6;
border: 1px solid rgba($color-focused, 0.5); @extend %t-weight4;
padding: ($baseline-v/4) ($baseline-v/2); content: counter(item, decimal);
color: $color-focused; counter-increment: item;
margin-right: ($baseline-v/4);
border-radius: ($baseline-v/10);
border: 1px solid rgba($color-focused, 0.5);
padding: ($baseline-v/4) ($baseline-v/2);
color: $color-focused;
}
} }
}
.step__label, .step__deadline { .step__label, .step__deadline {
display: block; display: block;
} }
.step__label { .step__label {
@extend %hd-4; @extend %hd-4;
@extend %t-weight3; @extend %t-weight3;
@extend %trans-color; @extend %trans-color;
} }
.step__deadline { .step__deadline {
@extend %hd-8; @extend %hd-8;
@extend %trans-color; @extend %trans-color;
color: $heading-secondary-color; color: $heading-secondary-color;
}
} }
} }
// step status // step status
.step__status { .step__status {
...@@ -144,7 +144,7 @@ ...@@ -144,7 +144,7 @@
.ico { .ico {
@extend %t-icon-m; @extend %t-icon-m;
display: none; // hiding by default display: none; // hiding by default
margin-right: ($baseline-v/4); margin-left: ($baseline-v/4);
} }
.copy { .copy {
...@@ -247,6 +247,10 @@ ...@@ -247,6 +247,10 @@
.action--submit { .action--submit {
@extend %btn--primary; @extend %btn--primary;
@extend %action-4; @extend %action-4;
.ico {
@extend %t-icon-l;
}
} }
// STATE: has error // STATE: has error
...@@ -309,6 +313,18 @@ ...@@ -309,6 +313,18 @@
&.is--loading { &.is--loading {
opacity: 0.3; opacity: 0.3;
.step__status__value {
background: $color-primary;
.ico {
display: inline-block;
}
.copy {
color: $white-t;
}
}
.step__header { .step__header {
@include media($bp-ds) { @include media($bp-ds) {
...@@ -1018,6 +1034,9 @@ ...@@ -1018,6 +1034,9 @@
} }
.step__title { .step__title {
@include media($bp-m) {
@include span-columns(4 of 4);
}
@include media($bp-ds) { @include media($bp-ds) {
@include span-columns(6 of 6); @include span-columns(6 of 6);
...@@ -1040,12 +1059,10 @@ ...@@ -1040,12 +1059,10 @@
} }
.step__label, .grade__value { .step__label, .grade__value {
display: inline-block; display: block;
vertical-align: middle;
} }
.step__label { .step__label {
margin-right: ($baseline-h/2);
margin-bottom: ($baseline-v/4); margin-bottom: ($baseline-v/4);
color: $color-decorative-secondary; color: $color-decorative-secondary;
} }
...@@ -1059,10 +1076,12 @@ ...@@ -1059,10 +1076,12 @@
.grade__value__title { .grade__value__title {
@extend %hd-6; @extend %hd-6;
color: $heading-primary-color;
} }
.grade__value__description { .grade__value__description {
@extend %copy-4; @extend %copy-4;
color: $copy-lead-color;
} }
} }
...@@ -1089,15 +1108,34 @@ ...@@ -1089,15 +1108,34 @@
} }
// CASE: is complete // CASE: is complete
&.is--complete { &.is--complete, &.has--grade {
.grade__value { .step__title {
background: $color-complete; margin-bottom: $baseline-v;
color: $white;
}
.grade__value__earned, .grade__value__potential { .step__label, .grade__value {
@extend %t-weight3; 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;
}
} }
} }
} }
...@@ -1161,7 +1199,7 @@ ...@@ -1161,7 +1199,7 @@
.question__title__copy { .question__title__copy {
@extend %hd-4; @extend %hd-4;
@extend %t-weight3; @extend %t-weight3;
float: left; // float: left;
} }
.question__score { .question__score {
...@@ -1256,12 +1294,21 @@ ...@@ -1256,12 +1294,21 @@
.submission__feeedback__content { .submission__feeedback__content {
@extend %ui-section-content; @extend %ui-section-content;
textarea {
@extend %ui-content-longanswer;
min-height: ($baseline-v*10);
}
} }
.submission__feeedback__actions { .submission__feeedback__actions {
@extend %ui-section-content; @extend %ui-section-content;
padding-top: 0; padding-top: 0;
.list--actions {
padding: 0;
}
.action--submit { .action--submit {
@extend %btn--secondary; @extend %btn--secondary;
@extend %action-4; @extend %action-4;
......
apps/openassessment/xblock/static/sass/openassessment.scss
...@@ -33,7 +33,6 @@ ...@@ -33,7 +33,6 @@
// general xblocks: assets // general xblocks: assets
@import 'xb/assets/fonts'; // imported/used fonts @import 'xb/assets/fonts'; // imported/used fonts
@import 'xb/assets/graphics'; // sprites, basic img/figure/svg styling @import 'xb/assets/graphics'; // sprites, basic img/figure/svg styling
@import 'xb/assets/animations'; // css-based animations
// -------------------- // --------------------
......
apps/openassessment/xblock/static/sass/xb/assets/_animations.scss deleted 100644 → 0
// xblock: assets - animations
// ====================
// NOTES:
// * these are bourbon-translated animations that can be used on any xblock
// --------------------
// fade in
// --------------------
@include keyframes(fadeIn) {
0% {
opacity: 0.0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1.0;
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-fadeIn {
@include animation(fadeIn $tmg-f2 linear 1);
}
// --------------------
// fade in + left
// --------------------
@include keyframes(fadeInLeft) {
0% {
@include transform(translateX(-($baseline-h)));
opacity: 0;
}
100% {
@include transform(translateX(0));
opacity: 1;
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-fadeInLeft {
@include animation(fadeInLeft $tmg-f2 linear 1);
}
// --------------------
// fade in + right
// --------------------
@include keyframes(fadeInRight) {
0% {
@include transform(translateX($baseline-h));
opacity: 0;
}
100% {
@include transform(translateX(0));
opacity: 1;
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-fadeInRight {
@include animation(fadeInRight $tmg-f2 linear 1);
}
// --------------------
// fade in + up
// --------------------
@include keyframes(fadeInUp) {
0% {
@include transform(translateY($baseline-v));
opacity: 0;
}
100% {
@include transform(translateY(0));
opacity: 1;
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-fadeInUp {
@include animation(fadeInUp $tmg-f2 linear 1);
}
// --------------------
// fade in + down
// --------------------
@include keyframes(fadeInDown) {
0% {
@include transform(translateY(-($baseline-v)));
opacity: 0;
}
100% {
@include transform(translateY(0));
opacity: 1;
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-fadeInDown {
@include animation(fadeInDown $tmg-f2 linear 1);
}
// --------------------
// fade out
// --------------------
@include keyframes(fadeOut) {
0% {
opacity: 1.0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 0.0;
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-fadeOut {
@include animation(fadeOut $tmg-f2 linear 1);
}
// --------------------
// slide in left
// --------------------
@include keyframes(slideInLeft) {
0% {
@include transform(translateX(-($anim-distance-offviewport)));
opacity: 0;
}
100% {
@include transform(translateX(0));
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-slideInLeft {
@include animation(slideInLeft $tmg-f2 linear 1);
}
// --------------------
// slide in right
// --------------------
@include keyframes(slideInRight) {
0% {
@include transform(translateX($anim-distance-offviewport));
opacity: 0;
}
100% {
@include transform(translateX(0));
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-slideInRight {
@include animation(slideInRight $tmg-f2 linear 1);
}
// --------------------
// slide in down
// --------------------
@include keyframes(slideInDown) {
0% {
@include transform(translateY(-($anim-distance-offviewport)));
opacity: 0;
}
100% {
@include transform(translateY(0));
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-slideInDown {
@include animation(slideInDown $tmg-f2 linear 1);
}
// --------------------
// slide in up
// --------------------
@include keyframes(slideInUp) {
0% {
@include transform(translateY($anim-distance-offviewport));
opacity: 0;
}
100% {
@include transform(translateY(0));
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-slideInUp {
@include animation(slideInUp $tmg-f2 linear 1);
}
// --------------------
// slide out left
// --------------------
@include keyframes(slideOutLeft) {
0% {
@include transform(translateX(0));
}
100% {
@include transform(translateX(-($anim-distance-offviewport)));
opacity: 0;
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-slideOutLeft {
@include animation(slideOutLeft $tmg-f2 linear 1);
}
// --------------------
// slide out right
// --------------------
@include keyframes(slideOutRight) {
0% {
@include transform(translateX(0));
}
100% {
@include transform(translateX($anim-distance-offviewport));
opacity: 0;
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-slideOutRight {
@include animation(slideOutRight $tmg-f2 linear 1);
}
// --------------------
// slide out up
// --------------------
@include keyframes(slideOutUp) {
0% {
@include transform(translateY(0));
}
100% {
@include transform(translateY(-($anim-distance-offviewport)));
opacity: 0;
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-slideOutUp {
@include animation(slideOutUp $tmg-f2 linear 1);
}
// --------------------
// rotate up
// --------------------
@include keyframes(rotateUp) {
0% {
@include transform(rotate(0deg));
}
50% {
@include transform(rotate(-90deg));
}
100% {
@include transform(rotate(-180deg));
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-rotateUp {
@include animation(rotateUp $tmg-f2 ease-in-out 1);
}
// --------------------
// rotate down
// --------------------
@include keyframes(rotateDown) {
0% {
@include transform(rotate(0deg));
}
50% {
@include transform(rotate(90deg));
}
100% {
@include transform(rotate(180deg));
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-rotateDown {
@include animation(rotateDown $tmg-f2 ease-in-out 1);
}
// --------------------
// rotate clockwise
// --------------------
@include keyframes(rotateCW) {
0% {
@include transform(rotate(0deg));
}
50% {
@include transform(rotate(180deg));
}
100% {
@include transform(rotate(360deg));
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-rotateCW {
@include animation(rotateCW $tmg-s1 linear infinite);
}
// --------------------
// rotate counter-clockwise
// --------------------
@include keyframes(rotateCCW) {
0% {
@include transform(rotate(0deg));
}
50% {
@include transform(rotate(-180deg));
}
100% {
@include transform(rotate(-360deg));
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-rotateCCW {
@include animation(rotateCCW $tmg-s1 linear infinite);
}
// --------------------
// bounce in
// --------------------
@include keyframes(bounceIn) {
0% {
opacity: 0.0;
@include transform(scale(0.3));
}
50% {
opacity: 1.0;
@include transform(scale(1.05));
}
100% {
@include transform(scale(1));
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-bounceIn {
@include animation(bounceIn $tmg-f1 ease-in-out 1);
}
// --------------------
// bounce out
// --------------------
@include keyframes(bounceOut) {
0% {
@include transform(scale(1));
}
50% {
opacity: 1.0;
@include transform(scale(1.05));
}
100% {
opacity: 0.0;
@include transform(scale(0.3));
}
}
// canned animation - use if you want out of the box/non-customized anim
%anim-bounceOut {
@include animation(bounceOut $tmg-f1 ease-in-out 1);
}
apps/openassessment/xblock/static/sass/xb/elements/_controls.scss
...@@ -115,6 +115,7 @@ ...@@ -115,6 +115,7 @@
background: $action-primary-color; background: $action-primary-color;
border: 1px solid shade($action-primary-color, 15%); border: 1px solid shade($action-primary-color, 15%);
color: tint($action-primary-color, 90%); color: tint($action-primary-color, 90%);
box-shadow: none; // needed for LMS override
.copy { .copy {
@extend %t-weight3; @extend %t-weight3;
...@@ -149,6 +150,7 @@ ...@@ -149,6 +150,7 @@
background: $action-secondary-color; background: $action-secondary-color;
border: 1px shade($action-secondary-color, 10%); border: 1px shade($action-secondary-color, 10%);
color: tint($action-secondary-color, 90%); color: tint($action-secondary-color, 90%);
box-shadow: none; // needed for LMS override
.copy { .copy {
@extend %t-weight3; @extend %t-weight3;
......
apps/openassessment/xblock/test/test_self.py
...@@ -99,7 +99,7 @@ class TestSelfAssessment(XBlockHandlerTestCase): ...@@ -99,7 +99,7 @@ class TestSelfAssessment(XBlockHandlerTestCase):
mock_complete.return_value = True mock_complete.return_value = True
# Expect that the self-assessment step is open # Expect that the self-assessment step is open
resp = self.request(xblock, 'render_self_assessment', json.dumps(dict())) 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') @scenario('data/self_assessment_scenario.xml', user_id='Bob')
def test_render_self_assessment_no_submission(self, xblock): 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