Skip to content

E
edx-ora2
Commit 5c10c3e5 by Christina Roberts
Options

Merge pull request #751 from edx/christina/fa-icons 

ORA, now with icons!
parents 2bd3d401 dd2c0444
Showing with 117 additions and 133 deletions
AUTHORS
......@@ -23,3 +23,4 @@ William Ono <william.ono@ubc.ca>
Pan Luo <pan.luo@ubc.ca>
Eric Fischer <efischer@edx.org>
Andy Armstrong <andya@edx.org>
Christina Roberts <christina@edx.org>
openassessment/templates/openassessmentblock/grade/oa_grade_complete.html
......@@ -41,7 +41,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>
<i class="icon fa fa-caret-right"></i>
<span class="question__title__copy">{{ criterion.label }}</span>
<span class="question__score">
......@@ -75,7 +75,7 @@
{{ part.option.label }}
<span class="ui-hint hint--top" data-hint="{{ part.option.explanation }}">
<i class="ico icon-info-sign"
<i class="icon fa fa-info-circle"
title="{% blocktrans with name=part.option.label %}More information about {{ name }}{% endblocktrans %}"></i>
</span>
......@@ -106,7 +106,7 @@
{{ part.option.label }}
<span class="ui-hint hint--top" data-hint="{{ part.option.explanation }}">
<i class="ico icon-info-sign"
<i class="icon fa fa-info-circle"
title="{% blocktrans with name=part.option.label %}More information about {{ name }}{% endblocktrans %}"></i>
</span>
</span>
......@@ -130,7 +130,7 @@
{{ part.option.label }}
<span class="ui-hint hint--top" data-hint="{{ part.option.explanation }}">
<i class="ico icon-info-sign"
<i class="icon fa fa-info-circle"
title="{% blocktrans with name=part.option.label %}More information about {{ name }}{% endblocktrans %}"></i>
</span>
</span>
......@@ -144,7 +144,7 @@
<li class="answer--feedback ui-toggle-visibility {% if criterion.options %}is--collapsed{% endif %}">
{% if criterion.options %}
<h5 class="answer--feedback__title ui-toggle-visibility__control">
<i class="ico icon-caret-right"></i>
<i class="icon fa fa-caret-right"></i>
{% if criterion.self_feedback %}
<span class="answer--feedback__title__copy">{% trans "Additional Comments" %} ({{ criterion.peer_feedback|length|add:'1' }})</span>
{% else %}
......@@ -187,7 +187,7 @@
{% if peer_assessments or self_assessment.feedback %}
<li class="question question--feedback ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control">
<i class="ico icon-caret-right"></i>
<i class="icon fa fa-caret-right"></i>
<span class="question__title__copy">{% trans "Additional comments on your response" %}</span>
</h4>
......@@ -235,7 +235,7 @@
{% if peer_assessments %}
<form id="submission__feedback" class="submission__feedback ui-toggle-visibility step__content__section is--collapsed" method="post">
<h3 class="submission__feedback__title ui-toggle-visibility__control">
<i class="ico icon-caret-right"></i>
<i class="icon fa fa-caret-right"></i>
<span class="submission__feedback__title__copy">{% trans "Provide Feedback on Peer Assessments" %}</span>
</h3>
......@@ -244,7 +244,7 @@
<div class="submission__feedback__content {{ has_submitted_feedback|yesno:"is--submitted," }}">
<span class="transition__status is--hidden" aria-hidden="true">
<span class="wrapper--anim">
<i class="ico icon-refresh icon-spin"></i>
<i class="icon fa fa-spinner fa-spin"></i>
<span class="copy">{% trans "Submitting Feedback" %}</span>
</span>
</span>
......
openassessment/templates/openassessmentblock/oa_base.html
......@@ -30,7 +30,7 @@
<span class="step__status">
<span class="step__status__label">{% trans "This step's status:" %}</span>
<span class="step__status__value">
<i class="ico icon-refresh icon-spin"></i>
<i class="icon fa fa-spinner fa-spin"></i>
<span class="copy">{% trans "Loading" %}</span>
</span>
</span>
......
openassessment/templates/openassessmentblock/oa_rubric.html
......@@ -9,7 +9,7 @@
id="assessment__rubric__question--{{ criterion.order_num }}"
>
<h4 class="question__title ui-toggle-visibility__control">
<i class="ico icon-caret-right"></i>
<i class="icon fa fa-caret-right"></i>
<span class="ui-toggle-visibility__control__copy question__title__copy">{{ criterion.prompt }}</span>
<span class="label--required sr">* ({% trans "Required" %})</span>
</h4>
......
openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html
......@@ -89,7 +89,6 @@
<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>
......
openassessment/templates/openassessmentblock/peer/oa_peer_cancelled.html
......@@ -11,7 +11,7 @@
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="ico icon-warning-sign"></i>
<i class="icon fa fa-exclamation-triangle"></i>
<span class="copy">
{% trans "Cancelled" %}
</span>
......
openassessment/templates/openassessmentblock/peer/oa_peer_closed.html
......@@ -10,7 +10,7 @@
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<span class="copy">
<i class="ico icon-warning-sign"></i>
<i class="icon fa fa-exclamation-triangle"></i>
{% with graded_string=graded|stringformat:"s" must_grade_string=must_grade|stringformat:"s" %}
{% blocktrans with num_graded='<span class="step__status__value--completed">'|safe|add:graded_string|add:"</span>"|safe num_must_grade='<span class="step__status__value--required">'|safe|add:must_grade_string|add:"</span>"|safe %}
Incomplete ({{ num_graded }} of {{ num_must_grade }})
......
openassessment/templates/openassessmentblock/peer/oa_peer_complete.html
......@@ -9,7 +9,7 @@
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="ico icon-ok"></i>
<i class="icon fa fa-check"></i>
<span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> {% trans "Completed" %}
</span>
......@@ -35,7 +35,6 @@
<li class="list--actions__item">
<button type="submit" id="peer-assessment__continue__grading" class="action action--continue--grading">
<span class="copy">{% trans "Continue Assessing Peers" %}</span>
<i class="ico icon-caret-right"></i>
</button>
</li>
</ul>
......
openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode.html
......@@ -13,7 +13,7 @@
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="ico icon-ok"></i>
<i class="icon fa fa-check"></i>
<span class="copy">
{% with graded_string=graded|stringformat:"s" %}
{% blocktrans with num_graded='<span class="step__status__value--completed">'|safe|add:graded_string|add:'</span>'|safe %}
......@@ -65,7 +65,7 @@
id="assessment__rubric__question--{{ criterion.order_num }}"
>
<h4 class="question__title ui-toggle-visibility__control">
<i class="ico icon-caret-right"></i>
<i class="icon fa fa-caret-right"></i>
<span class="ui-toggle-visibility__control__copy question__title__copy">{{ criterion.prompt }}</span>
<span class="label--required sr">* ({% trans "Required" %})</span>
</h4>
......@@ -142,7 +142,6 @@
<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>
......
openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode_waiting.html
......@@ -9,7 +9,7 @@
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="ico icon-ok"></i>
<i class="icon fa fa-check"></i>
<span class="copy">
{% with graded_string=graded|stringformat:"s" %}
{% blocktrans with num_graded='<span class="step__status__value--completed">'|safe|add:graded_string|add:'</span>'|safe %}
......
openassessment/templates/openassessmentblock/response/oa_response.html
......@@ -142,7 +142,6 @@
<a aria-role="button" href="#" id="step--response__submit"
class="action action--submit step--response__submit {{ submit_enabled|yesno:",is--disabled" }}">
<span class="copy">{% trans "Submit your response and move to the next step" %}</span>
<i class="ico icon-caret-right"></i>
</a>
</li>
</ul>
......
openassessment/templates/openassessmentblock/response/oa_response_cancelled.html
......@@ -10,7 +10,7 @@
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="ico icon-warning-sign"></i>
<i class="icon fa fa-exclamation-triangle"></i>
<span class="copy">{% trans "Cancelled" %}</span>
</span>
</span>
......
openassessment/templates/openassessmentblock/response/oa_response_closed.html
......@@ -8,7 +8,7 @@
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="ico icon-warning-sign"></i>
<i class="icon fa fa-exclamation-triangle"></i>
<span class="copy">{% trans "Incomplete" %}</span>
</span>
</span>
......
openassessment/templates/openassessmentblock/response/oa_response_graded.html
......@@ -9,7 +9,7 @@
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="ico icon-ok"></i>
<i class="icon fa fa-check"></i>
<span class="copy">{% trans "Complete" %}</span>
</span>
</span>
......
openassessment/templates/openassessmentblock/response/oa_response_submitted.html
......@@ -9,7 +9,7 @@
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="ico icon-ok"></i>
<i class="icon fa fa-check"></i>
<span class="copy">{% trans "Complete" %}</span>
</span>
</span>
......
openassessment/templates/openassessmentblock/self/oa_self_assessment.html
......@@ -63,7 +63,6 @@
<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>
......
openassessment/templates/openassessmentblock/self/oa_self_cancelled.html
......@@ -11,7 +11,7 @@
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="ico icon-warning-sign"></i>
<i class="icon fa fa-exclamation-triangle"></i>
<span class="copy">
{% trans "Cancelled" %}
</span>
......
openassessment/templates/openassessmentblock/self/oa_self_closed.html
......@@ -9,7 +9,7 @@
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="ico icon-warning-sign"></i>
<i class="icon fa fa-exclamation-triangle"></i>
<span class="copy">{% trans "Incomplete" %}</span>
</span>
</span>
......
openassessment/templates/openassessmentblock/self/oa_self_complete.html
......@@ -9,7 +9,7 @@
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="ico icon-ok"></i>
<i class="icon fa fa-check"></i>
<span class="copy">{% trans "Complete" %}</span>
</span>
</span>
......
openassessment/templates/openassessmentblock/staff_area/staff_area.html
......@@ -10,7 +10,6 @@
<div id="openassessment__staff-tools" class="wrapper--staff-tools wrapper--ui-staff is--hidden">
<div class="staff-info ui-staff">
<h2 class="staff-info__title ui-staff__title">
<i class="ico icon-caret-right"></i>
<span class="staff-info__title__copy">{% trans "Course Staff Tools" %}</span>
<button class="ui-staff_close_button"><span class="sr">{% trans "Close" %}</span> <i class="icon fa fa-close" aria-hidden="true"></i></button>
</h2>
......@@ -84,7 +83,6 @@
<div id="openassessment__staff-info" class="wrapper--staff-info wrapper--ui-staff is--hidden">
<div class="staff-info ui-staff">
<h2 class="staff-info__title ui-staff__title">
<i class="ico icon-caret-right"></i>
<span class="staff-info__title__copy">{% trans "Course Staff Information" %}</span>
<button class="ui-staff_close_button"><span class="sr">{% trans "Close" %}</span> <i class="icon fa fa-close" aria-hidden="true"></i></button>
</h2>
......
openassessment/templates/openassessmentblock/staff_area/student_info.html
......@@ -39,7 +39,7 @@
class="openassessment__staff-info__cancel__submission wrapper--ui-staff wrapper--ui--collapse">
<div class="ui-staff ui-toggle-visibility is--collapsed">
<h2 class="staff-info__title ui-staff__title ui-toggle-visibility__control">
<i class="ico icon-caret-right"></i>
<i class="icon fa fa-caret-right"></i>
<span>{% trans "Remove submission from peer grading" %}</span>
</h2>
......
openassessment/templates/openassessmentblock/student_training/student_training.html
......@@ -86,7 +86,7 @@
id="assessment__rubric__question--{{ criterion.order_num }}"
>
<h4 class="question__title ui-toggle-visibility__control">
<i class="ico icon-caret-right"></i>
<i class="icon fa fa-caret-right"></i>
<span class="question__title__copy">{{ criterion.prompt }}</span>
<span class="label--required sr">* ({% trans "Required" %})</span>
</h4>
......@@ -143,7 +143,6 @@
<li class="list--actions__item">
<button type="submit" id="student-training--001__assessment__submit" class="action action--submit is--disabled">
<span class="copy">{% trans "Compare your selections with the instructor's selections" %}</span>
<i class="ico icon-caret-right"></i>
</button>
</li>
</ul>
......
openassessment/templates/openassessmentblock/student_training/student_training_cancelled.html
......@@ -10,7 +10,7 @@
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="ico icon-warning-sign"></i>
<i class="icon fa fa-exclamation-triangle"></i>
<span class="copy">{% trans "Cancelled" %}</span>
</span>
</span>
......
openassessment/templates/openassessmentblock/student_training/student_training_closed.html
......@@ -9,7 +9,7 @@
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="ico icon-warning-sign"></i>
<i class="icon fa fa-exclamation-triangle"></i>
<span class="copy">{% trans "Incomplete" %}</span>
</span>
</span>
......
openassessment/templates/openassessmentblock/student_training/student_training_complete.html
......@@ -9,7 +9,7 @@
<span class="step__status">
<span class="step__status__label">{% trans "This step's status" %}:</span>
<span class="step__status__value">
<i class="ico icon-ok"></i>
<i class="icon fa fa-check"></i>
<span class="copy">{% trans "Complete" %}</span>
</span>
</span>
......
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_base.js
......@@ -145,7 +145,7 @@ OpenAssessment.BaseView.prototype = {
showLoadError: function(step) {
var container = '#openassessment__' + step;
$(container).toggleClass('has--error', true);
$(container + ' .step__status__value i').removeClass().addClass('ico icon-warning-sign');
$(container + ' .step__status__value i').removeClass().addClass('icon fa fa-exclamation-triangle');
$(container + ' .step__status__value .copy').html(gettext('Unable to Load'));
}
};
......
openassessment/xblock/static/sass/oa/elements/_navigation.scss
......@@ -17,12 +17,12 @@
text-decoration: none;
// optional icon
.ico, .ui-toggle-visibility__control__copy {
.icon, .ui-toggle-visibility__control__copy {
display: inline-block;
vertical-align: middle;
}
> .ico {
> .icon {
@include transition(all $tmg-f2 ease-in-out 0s);
@include transform(rotate(bidi-rotate-angle(90deg)));
}
......@@ -53,7 +53,7 @@
// STATE: is collapsed
&.is--collapsed {
>.ui-toggle-visibility__control > .ico {
>.ui-toggle-visibility__control > .icon {
@include transform(rotate(bidi-rotate-angle(0deg)));
@include transform-origin(50% 50%);
}
......@@ -79,7 +79,7 @@
.ui-hint {
@extend %fake-link;
.ico {
.icon {
@include margin-left(($baseline-h/8));
}
......
openassessment/xblock/static/sass/oa/utilities/_extends.scss
......@@ -164,7 +164,7 @@
border-bottom: ($baseline-v/10) solid $heading-color;
padding-bottom: ($baseline-v/4);
.ico {
.icon {
display: inline-block;
vertical-align: middle;
}
......
openassessment/xblock/static/sass/oa/utilities/_shame.scss
......@@ -37,28 +37,10 @@
// step title/name
h2.step__title {
margin-top: 0 !important;
@include text-align(left);
@include float(none);
margin-top: 0 !important;
@include media($bp-m) {
margin-bottom: ($baseline-v/2);
}
@include media($bp-ds) {
@include bidi-span-columns(4 of 6);
}
@include media($bp-dm) {
@include bidi-span-columns(8 of 12);
}
@include media($bp-dl) {
@include bidi-span-columns(8 of 12);
}
@include media($bp-dx) {
@include bidi-span-columns(9 of 12);
}
.step__label {
text-transform: none;
......@@ -85,10 +67,6 @@
}
}
.step__status {
}
.step__status__value {
line-height: 0;
}
......@@ -147,6 +125,14 @@
@include padding-left(0);
}
// submission/results collapse and expand targets
.question__title.ui-toggle-visibility__control {
.question__title__copy {
color: inherit !important;
}
}
.step--grade .step__title {
width: 100% !important;
......@@ -172,7 +158,7 @@
// --------------------
// rules to overcome any poorly defined, scoped, or architected edX Studio problem preview/rendering CSS.
.ico {
.icon {
font-style: normal;
}
......@@ -185,6 +171,8 @@
margin-bottom: 0;
}
//
// --------------------
// needed overrides
......
openassessment/xblock/static/sass/oa/views/_oa-base.scss
......@@ -41,24 +41,11 @@
.openassessment__steps__step {
@extend %ui-section;
// step header
.step__header {
@include row();
}
// step title
.step__title {
display: block;
margin-bottom: ($baseline-v/2);
@include media($bp-ds) {
@include bidi-span-columns(4 of 6);
margin-bottom: 0;
}
@include media($bp-dm) {
@include bidi-span-columns(8 of 12);
margin-bottom: 0;
}
width: 100%;
@include media($bp-dl) {
@include bidi-span-columns(8 of 12);
......@@ -85,25 +72,51 @@
@include border-left(none);
@include padding-left(0);
}
@include media($bp-ds) {
@include margin-left(0);
@include border-left(none);
@include padding-left(0);
}
}
.step__counter {
display: none;
// increment: show numbers using parent list counter
&:before {
@extend %hd-2;
@extend %t-strong;
display: none;
content: counter(item, decimal);
counter-increment: item;
color: $color-decorative-tertiary;
}
@include media($bp-m) {
display: none;
@include media($bp-dm) {
display: inline-block;
&:before {
display: inline;
}
}
@include media($bp-dl) {
display: inline-block;
&:before {
display: inline;
}
}
@include media($bp-dx) {
display: inline-block;
&:before {
display: none;
display: inline;
}
}
}
......@@ -126,6 +139,28 @@
// step status
.step__status {
display: inline-block;
margin-top: ($baseline-v/4);
@include media($bp-dm) {
margin-top: 0;
@include float(right);
position: relative;
top: -($baseline-v*2);
}
@include media($bp-dl) {
margin-top: 0;
@include float(right);
position: relative;
top: -($baseline-v*2);
}
@include media($bp-dx) {
margin-top: 0;
@include float(right);
position: relative;
top: -($baseline-v*2);
}
.step__status__value {
border-radius: ($baseline-v/10);
......@@ -150,7 +185,7 @@
}
}
.ico {
.icon {
@extend %icon-3;
display: inline-block;
vertical-align: baseline;
......@@ -161,38 +196,6 @@
@extend %t-score;
color: $heading-color;
}
@include media($bp-m) {
position: relative;
}
@include media($bp-ds) {
@include bidi-span-columns(2 of 6);
@include bidi-omega();
position: relative;
top: -12px;
}
@include media($bp-dm) {
@include bidi-span-columns(4 of 12);
@include bidi-omega();
position: relative;
top:-12px;
}
@include media($bp-dl) {
@include bidi-span-columns(4 of 12);
@include bidi-omega();
position: relative;
top: -12px;
}
@include media($bp-dx) {
@include bidi-span-columns(3 of 12);
@include bidi-omega();
position: relative;
top: -12px;
}
}
.step__status__label {
......@@ -257,15 +260,15 @@
@extend %btn--primary;
@extend %action-2;
.copy, .ico {
.copy, .icon {
display: inline;
}
.ico {
.icon {
@extend %icon-2;
}
.icon-caret-right:before {
.fa-caret-right:before {
@include transform(rotate(bidi-rotate-angle(0deg)));
}
......@@ -301,7 +304,7 @@
@include animation(pulse $tmg-s3 ease-in-out infinite);
}
.ico {
.icon {
display: inline-block;
color: $copy-secondary-color;
}
......@@ -333,7 +336,7 @@
.step__status__value {
background: $color-incomplete;
.copy, .ico {
.copy, .icon {
color: $white-t;
}
}
......@@ -353,7 +356,7 @@
.step__status__value {
background: $color-unavailable;
.ico {
.icon {
display: inline-block;
color: $copy-secondary-color;
}
......@@ -374,7 +377,7 @@
.step__status__value {
background: $color-unavailable;
.ico {
.icon {
display: inline-block;
color: $copy-secondary-color;
}
......@@ -403,11 +406,11 @@
.step__status__value {
background: $color-complete;
.ico {
.icon {
display: inline-block;
}
.copy, .ico {
.copy, .icon {
color: $white-t;
}
}
......@@ -424,7 +427,7 @@
.step__status__value {
background: $color-error;
.copy, .ico {
.copy, .icon {
color: $white-t;
}
}
......@@ -1060,10 +1063,10 @@
.submission__feedback__title {
@extend %ui-subsection-title;
@extend %t-heading;
margin-bottom: ($baseline-v/2);
border-bottom-color: solid $heading-color;
color: $heading-color;
.ico {
.icon {
@extend %icon-1;
display: inline-block;
vertical-align: middle;
......
openassessment/xblock/static/sass/xb/elements/_controls.scss
......@@ -81,7 +81,7 @@
}
// CASE: icons in buttons
.copy, .ico {
.copy, .icon {
display: inline-block;
vertical-align: middle;
}
......
openassessment/xblock/static/sass/xb/elements/_system-feedback.scss
......@@ -160,12 +160,12 @@
@include animation(pulse $tmg-s3 ease-in-out infinite);
}
.ico, .copy {
.icon, .copy {
display: block;
color: $copy-secondary-color;
}
.ico {
.icon {
@extend %icon-0;
margin-bottom: ($baseline-v/2);
}
......
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