Skip to content

E
edx-ora2
Commit df452912 by Brian Talbot
Options

Peer Assessment Template/Styling Work: 

* adding basic styling for rubric-based UI
* applying rubric-based UI styling to peer assessment
* adding oa-specific Sass extend partial
* basic template indentation cleanup
* adding initial JS for all collapsed/expanded UI to use
* refactoring small Sass bits

TIM-129
parent 3e07e49f
Showing with 561 additions and 245 deletions
apps/openassessment/templates/openassessmentblock/peer/oa_peer_closed.html
...@@ -5,16 +5,16 @@ ...@@ -5,16 +5,16 @@
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<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 fa fa-exclamation-triangle"></i> <i class="ico fa fa-exclamation-triangle"></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>
</span> </span>
</span>
</span>
{% endblock %} {% endblock %}
{% block body %}{% endblock %} {% block body %}{% endblock %}
apps/openassessment/templates/openassessmentblock/peer/oa_peer_complete.html
...@@ -5,16 +5,16 @@ ...@@ -5,16 +5,16 @@
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<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 fa fa-check"></i> <i class="ico fa fa-check"></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>
</span> </span>
</span>
</span>
{% endblock %} {% endblock %}
{% block body %}{% endblock %} {% block body %}{% endblock %}
apps/openassessment/templates/openassessmentblock/peer/oa_peer_waiting.html
...@@ -5,13 +5,13 @@ ...@@ -5,13 +5,13 @@
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<span class="step__status"> <span class="step__status">
<span class="ico"><i class="fa fa-info-circle"></i></span> <span class="ico"><i class="fa fa-info-circle"></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> </span>
</span> </span>
{% endblock %} {% endblock %}
{% block body %}{% endblock %} {% block body %}{% endblock %}
apps/openassessment/templates/openassessmentblock/response/oa_response.html
...@@ -40,37 +40,39 @@ ...@@ -40,37 +40,39 @@
</header> </header>
{% block body %} {% block body %}
<div class="step__instruction"> <div class="ui-toggle-visibility__content">
<p>Please provide your response to the following question. You may save your progress and return to complete your response anytime before the due date of <span class="step__deadline">due <span class="date">{{ formatted_due_date }}</span></span>. <strong class="emphasis--beta">Once you submit, you may not edit your response</strong>.</p> <div class="step__instruction">
</div> <p>Please provide your response to the following question. You may save your progress and return to complete your response anytime before the due date of <span class="step__deadline">due <span class="date">{{ formatted_due_date }}</span></span>. <strong class="emphasis--beta">Once you submit, you may not edit your response</strong>.</p>
</div>
<div class="step__content"> <div class="step__content">
<form id="response__submission" class="response__submission"> <form id="response__submission" class="response__submission">
<ol class="list list--fields response__submission__content"> <ol class="list list--fields response__submission__content">
<li class="field field--textarea submission__answer" id="submission__answer"> <li class="field field--textarea submission__answer" id="submission__answer">
<label class="sr" for="submission__answer__value">Please provide your response to the above question</label> <label class="sr" for="submission__answer__value">Please provide your response to the above question</label>
<textarea id="submission__answer__value" placeholder=""></textarea> <textarea id="submission__answer__value" placeholder=""></textarea>
</li> </li>
</ol> </ol>
<ul class="list list--actions response__submission__actions">
<li class="list--actions__item">
<button type="submit" id="submission__submit" class="action action--submit submission__submit">Save Your Progress</button>
<span class="tip">you may continue to work on your response until you submit</span>
</li>
</ul>
</form>
</div>
<ul class="list list--actions response__submission__actions"> <div class="step__actions">
<ul class="list list--actions">
<li class="list--actions__item"> <li class="list--actions__item">
<button type="submit" id="submission__submit" class="action action--submit submission__submit">Save Your Progress</button> <a aria-role="button" href="#" id="step--response__submit" class="action action--submit step--response__submit">
<span class="tip">you may continue to work on your response until you submit</span> <span class="copy">Submit your response &amp; move forward</span>
<i class="ico fa fa-arrow-right"></i>
</a>
</li> </li>
</ul> </ul>
</form> </div>
</div>
<div class="step__actions">
<ul class="list list--actions">
<li class="list--actions__item">
<a aria-role="button" href="#" id="step--response__submit" class="action action--submit step--response__submit">
<span class="copy">Submit your response &amp; move forward</span>
<i class="ico fa fa-arrow-right"></i>
</a>
</li>
</ul>
</div> </div>
{% endblock %} {% endblock %}
</li> </li>
apps/openassessment/templates/openassessmentblock/response/oa_response_closed.html
{% extends "openassessmentblock/response/oa_response.html" %} {% extends "openassessmentblock/response/oa_response.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility"> <li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<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 fa fa-exclamation-triangle"></i> <i class="ico fa fa-exclamation-triangle"></i>
<span class="copy">{{ step_status }}</span> <span class="copy">{{ step_status }}</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="step__instruction"> <div class="ui-toggle-visibility__content">
<p>You did not complete this portion of the problem before its due date.</p> <div class="step__instruction">
</div> <p>You did not complete this portion of the problem before its due date.</p>
</div>
</div>
{% endblock %} {% endblock %}
apps/openassessment/templates/openassessmentblock/response/oa_response_graded.html
{% extends "openassessmentblock/response/oa_response.html" %} {% extends "openassessmentblock/response/oa_response.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response is--graded ui-toggle-visibility"> <li id="openassessment__response" class="openassessment__steps__step step--response is--graded ui-toggle-visibility">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<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 fa fa-check"></i> <i class="ico fa fa-check"></i>
<span class="copy">{{ step_status }}</span> <span class="copy">{{ step_status }}</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content">
<div class="step__content"> <div class="step__content">
<!-- user's response --> <!-- user's response -->
<article class="submission__answer__display"> <article class="submission__answer__display">
...@@ -30,55 +31,54 @@ ...@@ -30,55 +31,54 @@
<h3 class="submission__peer-evaluations__title">Peer Evaluations Of Your Response</h3> <h3 class="submission__peer-evaluations__title">Peer Evaluations Of Your Response</h3>
<ol class="list submission__peer-evaluations__questions"> <ol class="list submission__peer-evaluations__questions">
{% for criterion in rubric_criteria %}
{% with criterion_num=forloop.counter %}
<!-- individual question from rubric -->
<li class="question question--{{ criterion_num }} ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control">
<span class="question__title__copy">{{ criterion.name }}</span>
{% for criterion in rubric_criteria %} <span class="question__score">
{% with criterion_num=forloop.counter %} <span class="label sr">Overall Question Score</span>
<!-- individual question from rubric --> <span class="question__score__value">{{ criterion.median_score }}</span>
<li class="question question--{{ criterion_num }} ui-toggle-visibility"> <span class="label label--divider sr">out of</span>
<h4 class="question__title ui-toggle-visibility__control"> <span class="question__score__potential">
<span class="question__title__copy">{{ criterion.name }}</span> {{ criterion.total_value }}
<span class="unit">Points</span>
<span class="question__score"> </span>
<span class="label sr">Overall Question Score</span> </span>
<span class="question__score__value">{{ criterion.median_score }}</span> </h4>
<span class="label label--divider sr">out of</span>
<span class="question__score__potential">
{{ criterion.total_value }}
<span class="unit">Points</span>
</span>
</span>
</h4>
<ul class="question__answers ui-toggle-visibility__content"> <ul class="question__answers ui-toggle-visibility__content">
{% for assessment in peer_assessments %} {% for assessment in peer_assessments %}
{% with peer_num=forloop.counter %} {% with peer_num=forloop.counter %}
{% for part in assessment.parts %} {% for part in assessment.parts %}
{% if part.option.criterion.name == criterion.name %} {% if part.option.criterion.name == criterion.name %}
<li class="answer peer-assessment--{{ peer_num}}" <li class="answer peer-assessment--{{ peer_num}}"
id="question--{{ criterion_num }}__answer-{{ peer_num }}"> id="question--{{ criterion_num }}__answer-{{ peer_num }}">
<h5 class="answer__title"> <h5 class="answer__title">
<span class="answer__source"> <span class="answer__source">
<span class="label sr">Assessor: </span> <span class="label sr">Assessor: </span>
<span class="value">Peer {{ peer_num }}</span> <span class="value">Peer {{ peer_num }}</span>
</span> </span>
<span class="answer__value"> <span class="answer__value">
<span class="label sr">Peer's Assessment: </span> <span class="label sr">Peer's Assessment: </span>
<span class="value">{{ part.option.name }}</span> <span class="value">{{ part.option.name }}</span>
</span> </span>
</h5> </h5>
<span class="answer__content"> <span class="answer__content">
{{ part.option.explanation }} {{ part.option.explanation }}
</span> </span>
</li> </li>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% endwith %}
{% endfor %}
</ul>
</li>
{% endwith %} {% endwith %}
{% endfor %} {% endfor %}
</ul>
</li>
{% endwith %}
{% endfor %}
</ol> </ol>
</article> </article>
...@@ -100,4 +100,5 @@ ...@@ -100,4 +100,5 @@
</ul> </ul>
</form> </form>
</div> </div>
</div>
{% endblock %} {% endblock %}
apps/openassessment/templates/openassessmentblock/response/oa_response_submitted.html
...@@ -5,16 +5,17 @@ ...@@ -5,16 +5,17 @@
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<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 fa fa-check"></i> <i class="ico fa fa-check"></i>
<span class="copy">{{ step_status }}</span> <span class="copy">{{ step_status }}</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content">
<div class="step__content"> <div class="step__content">
<!-- user's response --> <!-- user's response -->
<article class="submission__answer__display"> <article class="submission__answer__display">
...@@ -25,4 +26,5 @@ ...@@ -25,4 +26,5 @@
</div> </div>
</article> </article>
</div> </div>
</div>
{% endblock %} {% endblock %}
apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html
...@@ -9,92 +9,91 @@ ...@@ -9,92 +9,91 @@
--> -->
<!-- CASE: default/not started --> <!-- CASE: default/not started -->
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment">
<header class="step__header">
{% block list_item %} {% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--expanded"> <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--expanded">
{% endblock %} {% endblock %}
<header class="step__header">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__counter"></span> <span class="step__counter"></span>
<span class="wrapper--copy"> <span class="wrapper--copy">
<span class="step__title__label">Evaluate Your Response</span> <span class="step__label">Evaluate Your Response</span>
<span class="step__title__deadline">due <span class="date">January 31, 2014</span> at <span class="time">15:00 UTC</span></span>
<span class="step__title__label">Evaluate Your Response</span>
<span class="step__deadline">due <span class="date">{{ formatted_due_datetime }}</span></span> <span class="step__deadline">due <span class="date">{{ formatted_due_datetime }}</span></span>
</span> </span>
</h2> </h2>
{% block title %}
{% block title %}
<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">Incomplete</span> <span class="step_status_value">Incomplete</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">{{ step_status }}</span> <span class="step_status_value">{{ step_status }}</span>
</span> </span>
{% endblock %}
</header> </header>
{% endblock %}
</header>
{% block body %} {% block body %}
<div class="step--content"> <div class="ui-toggle-visibility__content">
<article class="self-assessment" id="self-assessment"> <div class="step__content">
<header class="self-assessment__header"> <article class="self-assessment" id="self-assessment">
<h3 class="self-assessment__title">Your Submitted Response</h3> <header class="self-assessment__header">
</header> <h3 class="self-assessment__title">Your Submitted Response</h3>
</header>
<!-- ?: markup validating/copy cleaning upon submission --> <!-- ?: markup validating/copy cleaning upon submission -->
<div class="self-assessment__response"> <div class="self-assessment__response">
{{ self_submission.answer }} {{ self_submission.answer }}
</div> </div>
<form id="self-assessment--001__assessment" class="self-assessment__assessment" method="post"> <form id="self-assessment--001__assessment" class="self-assessment__assessment" method="post">
<fieldset class="assessment__fields"> <fieldset class="assessment__fields">
<legend class="assessment__instruction">{{ rubric_instructions }}</legend> <legend class="assessment__instruction">{{ rubric_instructions }}</legend>
<ol class="list list--fields assessment__rubric"> <ol class="list list--fields assessment__rubric">
{% for criterion in rubric_criteria %} {% for criterion in rubric_criteria %}
<!-- individual rubric question (radio-based choice) --> <!-- individual rubric question (radio-based choice) -->
<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" id="assessment__rubric__question--{{ criterion.name }}">
<h4 class="question__title"> <h4 class="question__title">
{{ criterion.prompt }} {{ criterion.prompt }}
<span class="label--required">* <span class="sr">(Required)</span></span> <span class="label--required">* <span class="sr">(Required)</span></span>
</h4> </h4>
<ol class="question__answers"> <ol class="question__answers">
{% for option in criterion.options %} {% for option in criterion.options %}
<li class="answer"> <li class="answer">
<div class="wrapper--input"> <div class="wrapper--input">
<input type="radio" <input type="radio"
name="{{ criterion.name }}" name="{{ criterion.name }}"
id="assessment__rubric__question--{{ criterion.name }}" id="assessment__rubric__question--{{ criterion.name }}"
class="answer__value" class="answer__value"
value="{{ option.name }}" /> value="{{ option.name }}" />
<label for="assessment__rubric__question--001__option--01" <label for="assessment__rubric__question--001__option--01"
class="answer__label">{{ option.name }}</label> class="answer__label">{{ option.name }}</label>
</div> </div>
<span class="answer__tip">{{ option.explanation }}</span> <span class="answer__tip">{{ option.explanation }}</span>
</li> </li>
{% endfor %} {% endfor %}
</ol> </ol>
</li>
{% endfor %}
<!-- individual rubric question (text) -->
<li class="field field--textarea assessment__rubric__question" id="assessment__rubric__question--004">
<label for="assessment__rubric__question--004__value">Please provide any other feedback you have around this response</label>
<textarea id="assessment__rubric__question--004__value" placeholder="I felt this response was..."></textarea>
</li> </li>
{% endfor %} </ol>
</fieldset>
<!-- individual rubric question (text) --> <ul class="list list--actions">
<li class="field field--textarea assessment__rubric__question" id="assessment__rubric__question--004"> <li class="list--actions__item">
<label for="assessment__rubric__question--004__value">Please provide any other feedback you have around this response</label> <button type="submit" id="self-assessment--001__assessment__submit" class="action action--submit">Submit your assessment</button>
<textarea id="assessment__rubric__question--004__value" placeholder="I felt this response was..."></textarea>
</li> </li>
</ol> </ul>
</fieldset> </form>
</article>
<ul class="list list--actions"> </div>
<li class="list--actions__item">
<button type="submit" id="self-assessment--001__assessment__submit" class="action action--submit">Submit your assessment</button>
</li>
</ul>
</form>
</article>
</div> </div>
{% endblock %} {% endblock %}
</li> </li>
apps/openassessment/templates/openassessmentblock/self/oa_self_closed.html
...@@ -2,17 +2,17 @@ ...@@ -2,17 +2,17 @@
<!-- CASE: not started and problem closed --> <!-- CASE: not started and problem closed -->
{% block list_item %} {% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility"> <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<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 fa fa-exclamation-triangle"></i> <i class="ico fa fa-exclamation-triangle"></i>
<span class="copy">{{ step_status }}</span> <span class="copy">{{ step_status }}</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
{% block body %}{% endblock %} {% block body %}{% endblock %}
\ No newline at end of file
apps/openassessment/templates/openassessmentblock/self/oa_self_complete.html
...@@ -6,13 +6,13 @@ ...@@ -6,13 +6,13 @@
{% endblock %} {% endblock %}
{% block title %} {% block title %}
<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 fa fa-check"></i> <i class="ico fa fa-check"></i>
<span class="copy">{{ step_status }}</span> <span class="copy">{{ step_status }}</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
{% block body %}{% endblock %} {% block body %}{% 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/js/design.js → apps/openassessment/xblock/static/js/src/design.js
...@@ -5,16 +5,21 @@ ...@@ -5,16 +5,21 @@
// * this is merely for UI behavior and any work here should be folded into production-level JavaScript files and methods. // * this is merely for UI behavior and any work here should be folded into production-level JavaScript files and methods.
function $linkNewWindow(e) { function $linkNewWindow(e) {
window.open($(e.target).attr('href'));
e.preventDefault(); e.preventDefault();
window.open($(e.target).attr('href'));
}
function $toggleExpansion(e) {
e.preventDefault();
$(e.target).closest('.ui-toggle-visibility').toggleClass('is--collapsed');
} }
// -------------------- // --------------------
jQuery(document).ready(function($) { jQuery(document).ready(function($) {
// removing no-js, accessibility/modernizr marker // collapse/expand UI
$('html').removeClass('no-js'); $('.ui-toggle-visibility ui-toggle-visibility__control').bind('click', toggleExpansion);
// general link management - new window/tab // general link management - new window/tab
$('a[data-rel="external"]').bind('click', $linkNewWindow); $('a[data-rel="external"]').bind('click', $linkNewWindow);
......
apps/openassessment/xblock/static/js/design.min.js → apps/openassessment/xblock/static/js/src/design.min.js
...@@ -2,4 +2,4 @@ ...@@ -2,4 +2,4 @@
// ==================== // ====================
// NOTES: // NOTES:
// * this is merely for UI behavior and any work here should be folded into production-level JavaScript files and methods. // * this is merely for UI behavior and any work here should be folded into production-level JavaScript files and methods.
function $linkNewWindow(e){window.open($(e.target).attr("href"));e.preventDefault()}jQuery(document).ready(function(e){e("html").removeClass("no-js");e('a[data-rel="external"]').bind("click",$linkNewWindow)}); function $linkNewWindow(e){e.preventDefault();window.open($(e.target).attr("href"))}function $toggleExpansion(e){e.preventDefault();$(e.target).closest(".ui-toggle-visibility").toggleClass("is--collapsed")}jQuery(document).ready(function(e){e(".ui-toggle-visibility ui-toggle-visibility__control").bind("click",toggleExpansion);e('a[data-rel="external"]').bind("click",$linkNewWindow)});
\ No newline at end of file \ No newline at end of file
apps/openassessment/xblock/static/sass/oa/utilities/_extends.scss 0 → 100644
// openassessment: utilities - extends
// ====================
// NOTES:
// * these are Sass-placeholders (http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholder_selectors_) that are meant for use with just openassessment UI
// --------------------
// UI: content
// --------------------
%ui-content-longanswer {
max-height: ($baseline-v*15);
overflow-y: scroll;
}
// --------------------
// UI: section
// --------------------
%ui-section {
border: ($baseline-v/10) solid $color-decorative-tertiary;
border-radius: ($baseline-v/10);
margin-bottom: $spacing-bravo;
}
%ui-section-title {
@extend %hd-golf;
@extend %t-weight3;
padding: $spacing-charlie $spacing-bravo;
background: $color-decorative-tertiary;
color: $heading-secondary-color;
}
%ui-section-content {
padding: $spacing-bravo;
}
// --------------------
// UI: rubric
// --------------------
// rubric question
%ui-rubric-question {
@include clearfix();
margin-bottom: $spacing-bravo;
@extend %wipe-last-child;
.question__title {
margin-bottom: $spacing-bravo;
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: $spacing-delta;
.ico {
display: inline-block;
vertical-align: middle;
margin-right: $spacing-delta;
}
}
.question__title__copy {
@extend %hd-delta;
@extend %t-weight3;
color: $heading-primary-color;
}
}
// rubric answers
%ui-rubric-answers {
.answer {
@include row();
@extend %trans-opacity;
@extend %wipe-last-child;
margin-bottom: $spacing-charlie;
border-bottom: ($baseline-v/20) solid $color-decorative-tertiary;
padding-bottom: $spacing-charlie;
opacity: 0.75;
&:hover {
opacity: 1.0;
}
}
.wrapper--input {
margin-bottom: $spacing-delta;
@include media($bp-ds) {
@include span-columns(6 of 6);
}
@include media($bp-dm) {
@include span-columns(4 of 12);
margin-bottom: 0;
}
@include media($bp-dl) {
@include span-columns(4 of 12);
margin-bottom: 0;
}
@include media($bp-dx) {
@include span-columns(4 of 12);
margin-bottom: 0;
}
.answer__value, .answer__label {
display: inline-block;
vertical-align: middle;
}
.answer__label {
@extend %copy-delta;
@extend %t-weight3;
margin-bottom: 0; // FIX: need to reset base label style
color: $color-unfocused;
}
.answer__value {
margin-right: $spacing-charlie;
// STATE: checked
&:checked {
+ .answer__label {
color: $selected-color;
}
}
}
}
.wrapper--metadata {
display: block;
@include media($bp-dm) {
@include span-columns(8 of 12);
margin-bottom: 0;
}
@include media($bp-dl) {
@include span-columns(8 of 12);
margin-bottom: 0;
}
@include media($bp-dx) {
@include span-columns(8 of 12);
margin-bottom: 0;
}
}
.answer__tip, .answer__points {
display: block;
}
.answer__tip {
margin-bottom: $spacing-charlie;
@extend %copy-epsilon;
margin-right: $spacing-bravo;
color: $copy-supplemental-color;
@include media($bp-dm) {
@include span-columns(6 of 8);
float: left;
margin-bottom: 0;
}
@include media($bp-dl) {
@include span-columns(6 of 8);
float: left;
margin-bottom: 0;
}
@include media($bp-dx) {
@include span-columns(6 of 8);
float: left;
margin-bottom: 0;
}
&:after {
content: "";
}
}
.answer__points {
@extend %copy-epsilon;
color: $copy-color;
@extend %copy-epsilon;
margin-right: $spacing-bravo;
color: $copy-supplemental-color;
@include media($bp-dm) {
float: right;
text-align: right;
}
@include media($bp-dl) {
float: right;
text-align: right;
}
@include media($bp-dx) {
float: right;
text-align: right;
}
.label {
@extend %copy-epsilon; // FIX: need to reset base label style
display: inline-block; // FIX: need to reset base label style
margin-left: $spacing-delta;
color: $copy-supplemental-color;
}
}
}
apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss
...@@ -534,6 +534,128 @@ ...@@ -534,6 +534,128 @@
// -------------------- // --------------------
.step--peer-assessment { .step--peer-assessment {
.list--peer-assessments {
@extend %no-list;
}
// peer submission
.peer-assessment__display {
@extend %ui-section;
}
.peer-assessment__display__header {
@extend %ui-section-title;
@include clearfix();
span {
@extend %t-weight3; // FIX: needed due to DOM structure
}
.peer-assessment__display__title {
@extend %hd-golf; // FIX: needed due to DOM structure
@extend %t-weight3;
margin-bottom: $spacing-delta;
@include media($bp-ds) {
float: left;
margin-bottom: 0;
}
@include media($bp-dm) {
float: left;
margin-bottom: 0;
}
@include media($bp-dl) {
float: left;
margin-bottom: 0;
}
@include media($bp-dx) {
float: left;
margin-bottom: 0;
}
}
.peer-assessment__expected-time {
@extend %hd-golf; // FIX: needed due to DOM structure
@extend %t-weight3;
@include media($bp-ds) {
float: right;
}
@include media($bp-dm) {
float: right;
}
@include media($bp-dl) {
float: right;
}
@include media($bp-dx) {
float: right;
}
}
}
.peer-assessment__display__response {
@extend %ui-section-content;
}
// assessment form
.peer-assessment__assessment {
// fields
.assessment__fields {
margin-bottom: $spacing-bravo;
}
// rubric question
.assessment__rubric__question {
@extend %ui-rubric-question;
}
// rubric options
.question__answers {
@extend %ui-rubric-answers;
}
// genereal feedback question
.assessment__rubric__question--feedback {
textarea {
@extend %ui-content-longanswer;
min-height: ($baseline-v*5);
}
}
}
// step actions
.peer-assessment__actions {
text-align: center;
@include media($bp-ds) {
text-align: right;
}
@include media($bp-dm) {
text-align: right;
}
@include media($bp-dl) {
text-align: right;
}
@include media($bp-dx) {
text-align: right;
}
.action--submit {
@extend %btn--primary;
@extend %action-delta;
}
}
} }
...@@ -607,7 +729,7 @@ ...@@ -607,7 +729,7 @@
.submission__peer-evaluations__questions { .submission__peer-evaluations__questions {
@extend %no-list; @extend %no-list;
@extend %ui-section-content; @extend %ui-section-content;
margin-bottom: $spacing-charlie; // override city margin-bottom: $spacing-charlie;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
......
apps/openassessment/xblock/static/sass/openassessment.scss
...@@ -73,6 +73,7 @@ ...@@ -73,6 +73,7 @@
// specific UI for this application // specific UI for this application
// -------------------- // --------------------
@import 'oa/utilities/variables'; // specific variables and overrides @import 'oa/utilities/variables'; // specific variables and overrides
@import 'oa/utilities/extends'; // open assessment extends
@import 'oa/elements/header'; // view/app headers @import 'oa/elements/header'; // view/app headers
@import 'oa/elements/footer'; // view/app footers @import 'oa/elements/footer'; // view/app footers
@import 'oa/elements/navigation'; // navigation sets @import 'oa/elements/navigation'; // navigation sets
......
apps/openassessment/xblock/static/sass/xb/elements/_base.scss
...@@ -43,6 +43,7 @@ hr.divider, ...@@ -43,6 +43,7 @@ hr.divider,
.list--actions, .list--actions,
.list--docs, .list--docs,
.list--steps, .list--steps,
.list--fields,
.list--controls, .list--controls,
.list--fields, .list--fields,
.list--help, .list--help,
......
apps/openassessment/xblock/static/sass/xb/elements/_controls.scss
...@@ -85,6 +85,10 @@ ...@@ -85,6 +85,10 @@
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.copy {
margin-right: $spacing-charlie;
}
} }
%btn-pill { %btn-pill {
......
apps/openassessment/xblock/static/sass/xb/elements/_forms.scss
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
padding: $spacing-charlie; padding: $spacing-charlie;
font-family: $f-copy; font-family: $f-copy;
outline: 0; outline: 0;
color: $selected-color;
@include placeholder { @include placeholder {
color: $copy-supplemental-color-alt; color: $copy-supplemental-color-alt;
......
apps/openassessment/xblock/static/sass/xb/utilities/_extends.scss
...@@ -171,42 +171,3 @@ ...@@ -171,42 +171,3 @@
%deco-circle { %deco-circle {
border-radius: 99999em; border-radius: 99999em;
} }
// --------------------
// UI: content
// --------------------
%ui-content-longanswer {
max-height: ($baseline-v*15);
overflow-y: scroll;
}
// --------------------
// UI: section
// --------------------
%ui-section {
border: ($baseline-v/10) solid $color-decorative-quaternary;
border-radius: ($baseline-v/10);
margin-bottom: $spacing-bravo;
}
%ui-section-focus {
border-color: $color-decorative-tertiary;
}
%ui-section-title {
@extend %hd-golf;
@extend %t-weight3;
padding: $spacing-charlie $spacing-bravo;
background: $color-decorative-quaternary;
color: $heading-tertiary-color;
}
%ui-section-title-focus {
background: $color-decorative-tertiary;
color: $heading-secondary-color;
}
%ui-section-content {
padding: $spacing-bravo;
}
apps/openassessment/xblock/static/sass/xb/utilities/_variables.scss
...@@ -147,6 +147,7 @@ $color-decorative-quaternary: tint($gray-l6, 10%); ...@@ -147,6 +147,7 @@ $color-decorative-quaternary: tint($gray-l6, 10%);
// application - colors: states // application - colors: states
$color-disabled: $gray-l4; $color-disabled: $gray-l4;
$color-unfocused: $gray-l2;
$color-focused: $blue-u2; $color-focused: $blue-u2;
// application - colors: actions // application - colors: actions
......
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