Skip to content

E
edx-ora2
Commit 50583fbc by Brian Talbot
Options

Merge pull request #178 from edx/talbs/ui-cleanup 

UI Sprucing and Addressing Product Feedback
parents 770565f2 abadd180
Showing with 687 additions and 354 deletions
apps/openassessment/templates/openassessmentblock/grade/oa_grade_closed.html 0 → 100644
{% spaceless %}
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--complete">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="wrapper--copy">
<span class="step__label">Your Grade: </span>
<span class="grade__value">
<span class="grade__value__title">Incomplete</span>
<p class="grade__value__description">You have not completed the {% for step in incomplete_steps %}<span class="step">{{ step }} step </span> {% if not forloop.last %} and {% endif %}{% endfor %} of this problem.</p>
</span>
</span>
</h2>
</header>
</li>
{% endspaceless %}
apps/openassessment/templates/openassessmentblock/grade/oa_grade_incomplete.html
{% spaceless %}
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--incomplete">
<li id="openassessment__grade" class="openassessment__steps__step step--grade">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="wrapper--copy">
<span class="step__label">Your Grade: </span>
<span class="grade__value">
<span class="grade__value__title">Not Completed</span>
<p class="grade__value__description">You have not completed the {% for step in incomplete_steps %}<span class="step">{{ step }} step </span> {% if not forloop.last %} and {% endif %}{% endfor %} of this problem.</p>
</span>
</span>
</h2>
</header>
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__content">
<div class="grade__value__description">
<p>You have not completed the {% for step in incomplete_steps %}<span class="step">{{ step }} step </span> {% if not forloop.last %} and {% endif %}{% endfor %} of this problem.</p>
</div>
</div>
</div>
</div>
</li>
{% endspaceless %}
apps/openassessment/templates/openassessmentblock/grade/oa_grade_not_started.html
......@@ -5,11 +5,20 @@
<span class="wrapper--copy">
<span class="step__label">Your Grade:</span>
<span class="grade__value">
<p>You have not started this problem</p>
<span class="grade__value__title">Not Started</span>
</span>
</span>
</h2>
</header>
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__content">
<div class="grade__value__description">
<p>You have not started this problem yet.</p>
</div>
</div>
</div>
</div>
</li>
{% endspaceless %}
apps/openassessment/templates/openassessmentblock/grade/oa_grade_waiting.html
{% spaceless %}
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--incomplete awaiting--peer-evaluations">
<li id="openassessment__grade" class="openassessment__steps__step step--grade is--waiting">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="wrapper--copy">
<span class="step__label">Your Grade:</span>
<span class="grade__value">
<span class="grade__value__title">Waiting for Peers to Assess Your Response</span>
<p class="grade__value__description">Your response is still undergoing peer assessment. After your peers have assessed your response, you'll see their feedback and receive your final grade.</p>
</span>
</span>
</h2>
</header>
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__content">
<div class="grade__value__description">
<p>Your response is still undergoing peer assessment. After your peers have assessed your response, you'll see their feedback and receive your final grade.</p>
</div>
</div>
</div>
</div>
</li>
{% endspaceless %}
apps/openassessment/templates/openassessmentblock/oa_base.html
{% spaceless %}
<div class="wrapper wrapper--xblock wrapper--openassessment theme--basic">
<div class="openassessment" id="openassessment">
<div class="openassessment problem" id="openassessment">
<div class="wrapper--grid">
<h2 class="openassessment__title ">
<span class="problem-header">{{ title }}</span>
</h2>
<h2 class="openassessment__title problem__header">{{ title }}</h2>
<nav class="nav--contents">
<h2 class="title">Skip to a specific step:</h2>
......@@ -21,13 +19,22 @@
</ol>
</nav>
{% block message %}
<!-- if the problem is unstarted or response hasn't been submitted -->
<div id="openassessment__message" class="openassessment__message message">
<div class="message__content">
<p>This problem requires that you work through 3 parts. You can begin by reading the question below and <a data-behavior="ui-scroll" href="#openassessment__response">providing your response</a>.</p>
</div>
</div>
{% endblock %}
<div class="wrapper--openassessment__prompt">
<article class="openassessment__prompt ui-toggle-visibility">
<h2 class="openassessment__prompt__title">Open Response Assessment Problem</h2>
<h2 class="openassessment__prompt__title">This Problem's Prompt/Question</h2>
<div class="openassessment__prompt__copy ui-toggle-visibility__content">
<p>{{ question|linebreaks }}</p>
<p>{{ question }}</p>
</div>
</article>
</div>
......@@ -46,10 +53,9 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Loading</span>
<i class="ico icon-cog icon-spin"></i>
</span>
<span class="step__status__value">
<span class="copy">Loading</span>
<i class="ico icon-refresh icon-spin"></i>
</span>
</span>
</header>
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html
......@@ -20,8 +20,9 @@
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span> completed
In Progress
(<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span>)
</span>
</span>
</span>
......@@ -31,11 +32,8 @@
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
{% block message %}
{% endblock %}
<div class="step__instruction">
<p>Please read and assess the following response from one of your peers.</p>
<p>Read and assess the following response from one of your peers.</p>
</div>
<div class="step__content">
......@@ -48,11 +46,6 @@
<span class="peer-assessment__number--current">{{ review_num }}</span> of
<span class="peer-assessment__number--required">{{ must_grade }}</span>
</h3>
<span class="peer-assessment__expected-time">
<span class="label">Expected Time:</span>
<span class="value">{{ estimated_time }}</span>
</span>
</header>
<div class="peer-assessment__display__response">
......@@ -79,16 +72,16 @@
<div class="wrapper--input">
<input type="radio"
name="{{ criterion.name }}"
id="assessment__rubric__question--{{ criterion.name }}"
id="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__value"
value="{{ option.name }}" />
<label for="assessment__rubric__question--{{ criterion.name }}"
<label for="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__label"
>{{ option.name }}</label>
</div>
<div class="wrapper--metadata">
<span class="answer__tip">{{ option.explanation }}</span>
<span class="answer__points">{{option.points}} <span class="label">points</span></span>
<span class="answer__points">{{option.points}} <span class="answer__points__label">points</span></span>
</div>
</li>
{% endfor %}
......@@ -101,7 +94,8 @@
<label class="question__title" for="assessment__rubric__question--feedback__value">
<span class="question__title__copy">(Optional) What aspects of this response stood out to you? What did it do well? How could it improve?</span>
</label>
<div>
<div class="wrapper--input">
<textarea id="assessment__rubric__question--feedback__value" placeholder="I noticed that this response..."></textarea>
</div>
</li>
......@@ -114,9 +108,8 @@
</div>
<div class="step__actions">
<div class="message message--error message--error-server">
<div class="message message--inline 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">
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_closed.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% block list_item %}
<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--collapsed">
<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--incomplete ui-toggle-visibility">
{% endblock %}
{% block title %}
......@@ -9,8 +9,9 @@
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span> completed
Incomplete
(<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span>)
</span>
<i class="ico icon-warning-sign"></i>
</span>
......@@ -18,4 +19,15 @@
{% endblock %}
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__message message message--incomplete">
<h3 class="message__title">The deadline for this part of the problem has passed</h3>
<div class="message__content">
<p> You can no longer assess your peers' responses or continue with the problem's next steps. Any progress you've made to this point is saved however.</p>
</div>
</div>
</div>
</div>
{% endblock %}
apps/openassessment/templates/openassessmentblock/peer/oa_peer_complete.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--collapsed is--complete">
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--empty is--complete is--collapsed">
{% endblock %}
{% block title %}
......@@ -9,7 +9,8 @@
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> completed
Complete
(<span class="step__status__value--completed">{{ graded }}</span>)
</span>
<i class="ico icon-ok"></i>
</span>
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% block list_item %}
<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--complete">
<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--complete is--collapsed">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Turbo Mode</span>
<span class="copy">
Complete
(<span class="step__status__value--completed">{{ graded }}</span>)
</span>
<i class="ico icon-ok"></i>
</span>
</span>
{% endblock %}
{% block message %}
<div class="step__message message message--confirmation message--confirmation-turbo-mode">
<h3 class="message__title">Congratulations!</h3>
<div class="message__content">You have successfully completed all of the peer assessment that you have been asked to do for this step. If you would like to continue providing feedback to your peers you may do so here, but it will not influence your final grade.</div>
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__message message message--complete">
<h3 class="message__title">Congratulations!</h3>
<div class="message__content">You have successfully completed all of the peer assessment that you have been asked to do for this step. If you would like to continue providing feedback to your peers you may do so here, but it will not influence your final grade.</div>
</div>
<div class="step__instruction">
<p>Read and assess the following response from one of your peers.</p>
</div>
<div class="step__content">
<ul class="list--peer-assessments">
<li class="list--peer-assessments__item">
<article class="peer-assessment" id="peer-assessment--001">
<div class="peer-assessment__display">
<header class="peer-assessment__display__header">
<h3 class="peer-assessment__display__title">Assessment #
<span class="peer-assessment__number--current">{{ review_num }}</span> of
<span class="peer-assessment__number--required">{{ must_grade }}</span>
</h3>
</header>
<div class="peer-assessment__display__response">
{{ peer_submission.answer.text|linebreaks }}
</div>
</div>
<form id="peer-assessment--001__assessment" class="peer-assessment__assessment" method="post">
<fieldset class="assessment__fields">
<ol class="list list--fields assessment__rubric">
{% for criterion in rubric_criteria %}
<li class="field field--radio is--required assessment__rubric__question ui-toggle-visibility" id="assessment__rubric__question--{{ criterion.name }}">
<h4 class="question__title ui-toggle-visibility__control">
<i class="ico icon-caret-right"></i>
<span class="ui-toggle-visibility__control__copy question__title__copy">{{ criterion.prompt }}</span>
<span class="label--required sr">* (Required)</span>
</h4>
<div class="ui-toggle-visibility__content">
<ol class="question__answers">
{% for option in criterion.options %}
<li class="answer">
<div class="wrapper--input">
<input type="radio"
name="{{ criterion.name }}"
id="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__value"
value="{{ option.name }}" />
<label for="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__label"
>{{ option.name }}</label>
</div>
<div class="wrapper--metadata">
<span class="answer__tip">{{ option.explanation }}</span>
<span class="answer__points">{{option.points}} <span class="answer__points__label">points</span></span>
</div>
</li>
{% endfor %}
</ol>
</div>
</li>
{% endfor %}
<li class="wrapper--input field field--textarea assessment__rubric__question assessment__rubric__question--feedback" id="assessment__rubric__question--feedback">
<label class="question__title" for="assessment__rubric__question--feedback__value">
<span class="question__title__copy">Provide additional feedback for this response</span>
</label>
<div class="wrapper--input">
<textarea id="assessment__rubric__question--feedback__value" placeholder="I felt this response was..."></textarea>
</div>
</li>
</ol>
</fieldset>
</form>
</article>
</li>
</ul>
</div>
<div class="step__actions">
<div class="message message--inline message--error message--error-server">
<h3 class="message__title">We could not submit your assessment</h3>
</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>
{% endblock %}
apps/openassessment/templates/openassessmentblock/peer/oa_peer_unavailable.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--collapsed is--unavailable">
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--unavailable is--empty is--collapsed">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Unavailable</span>
<span class="copy">Not Available</span>
</span>
</span>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_waiting.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--collapsed">
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--waiting is--empty is--collapsed">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Awaiting Peer Responses</span>
<span class="copy">
In Progress
(<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span>)
</span>
</span>
</span>
{% endblock %}
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__message message message--incomplete">
<h3 class="message__title">Waiting for more peer responses</h3>
<div class="message__content">
<p>There are currently no responses for you to assess. This should change momentarily. Check back shortly to continue completing this problem. One this and all other steps are completed, you will receive a grade.</p>
</div>
</div>
</div>
</div>
{% endblock %}
apps/openassessment/templates/openassessmentblock/response/oa_response.html
......@@ -18,7 +18,7 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Not Completed</span>
<span class="copy">In Progress</span>
</span>
</span>
{% endblock %}
......@@ -27,49 +27,44 @@
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
{% block message %}
{% endblock %}
<div class="step__instruction">
<p>Please provide your response below. You can save your progress and return to complete your response at any time before the due date of <span class="step__deadline"><span class="date">{{ formatted_due_date }}</span></span>. <strong class="emphasis--beta">After you submit your response, you cannot edit it</strong>.</p>
<p>Please provide your response below. You can save your progress and return to complete your response at any time before the due date of <span class="step__deadline"><span class="date">{{ formatted_due_date }}</span></span>. <strong class="emphasis">After you submit your response, you cannot edit it</strong>.</p>
</div>
<div class="step__content">
<form id="response__submission" class="response__submission">
<div id="response__save_status" class="response__submission__status">
<h3 class="response__submission__status__title">
<span class="sr">Your Working Submission Status:</span>
{{ save_status }}
</h3>
</div>
<ol class="list list--fields response__submission__content">
<li class="field field--textarea submission__answer" id="submission__answer">
<label class="sr" for="submission__answer__value">Please provide your response to the question.</label>
<label class="sr" for="submission__answer__value">Provide your response to the question.</label>
<textarea id="submission__answer__value" placeholder="">{{ saved_response }}</textarea>
<span class="tip">You may continue to work on your response until you submit it.</span>
</li>
</ol>
<div class="response__submission__actions">
<div class="message message--inline message--error message--error-server">
<h3 class="message__title">We could not save your progress</h3>
</div>
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="submission__save" class="action action--save submission__save is--disabled">Save Your Progress</button>
<div id="response__save_status" class="response__submission__status">
<h3 class="response__submission__status__title">
<span class="sr">Your Working Submission Status:</span>
{{ save_status }}
</h3>
</div>
</li>
</ul>
<div class="message message--error message--error-server">
<h3 class="message__title">We could not save your progress</h3>
<div class="message__content"></div>
</div>
</div>
</form>
</div>
<div class="step__actions">
<div class="message message--error message--error-server">
<div class="message message--inline message--error message--error-server">
<h3 class="message__title">We could not submit your response</h3>
<div class="message__content"></div>
</div>
<ul class="list list--actions">
......
apps/openassessment/templates/openassessmentblock/response/oa_response_closed.html
{% extends "openassessmentblock/response/oa_response.html" %}
{% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility is--collapsed">
<li id="openassessment__response" class="openassessment__steps__step step--response is--incomplete ui-toggle-visibility">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Closed</span>
<span class="copy">Incomplete</span>
<i class="ico icon-warning-sign"></i>
</span>
</span>
......@@ -15,10 +15,15 @@
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__instruction">
<p>You did not complete this step before the problem's due date.</p>
<div class="wrapper--step__content">
<div class="step__message message message--incomplete">
<h3 class="message__title">The due date for this part of the problem has passed</h3>
<div class="message__content">
<p> You can no longer submit a response or continue with the problem's next steps. Any progress you've made to this point is saved however.</p>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
apps/openassessment/templates/openassessmentblock/response/oa_response_graded.html
{% extends "openassessmentblock/response/oa_response.html" %}
{% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response is--graded ui-toggle-visibility is--collapsed">
<li id="openassessment__response" class="openassessment__steps__step step--response is--complete ui-toggle-visibility is--collapsed">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Graded</span>
<span class="copy">Complete</span>
<i class="ico icon-ok"></i>
</span>
</span>
......
apps/openassessment/templates/openassessmentblock/response/oa_response_submitted.html
{% extends "openassessmentblock/response/oa_response.html" %}
{% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response is--submitted ui-toggle-visibility is--collapsed">
<li id="openassessment__response" class="openassessment__steps__step step--response is--complete ui-toggle-visibility is--collapsed">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Submitted</span>
<span class="copy">Complete</span>
<i class="ico icon-ok"></i>
</span>
</span>
......@@ -17,6 +17,12 @@
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__message message message--complete">
<h3 class="message__title">Your response has been successfully submitted</h3>
<div class="message__content">Your peers in this class will now grade this response and you will receive feedback shortly</div>
</div>
<div class="step__content">
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
......
apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html
......@@ -20,7 +20,7 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Not Completed</span>
<span class="copy">In Progress</span>
</span>
</span>
{% endblock %}
......@@ -29,9 +29,6 @@
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
{% block message %}
{% endblock %}
<div class="step__content">
<article class="self-assessment__display" id="self-assessment">
<header class="self-assessment__display__header">
......@@ -61,15 +58,15 @@
<div class="wrapper--input">
<input type="radio"
name="{{ criterion.name }}"
id="assessment__rubric__question--{{ criterion.name }}"
id="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__value"
value="{{ option.name }}" />
<label for="assessment__rubric__question--{{ criterion.name }}"
<label for="assessment__rubric__question--{{ criterion.name }}__{{ option.name }}"
class="answer__label">{{ option.name }}</label>
</div>
<div class="wrapper--metadata">
<span class="answer__tip">{{ option.explanation }}</span>
<span class="answer__points">{{option.points}} <span class="label">points</span></span>
<span class="answer__points">{{option.points}} <span class="answer__points__label">points</span></span>
</div>
</li>
{% endfor %}
......@@ -83,10 +80,10 @@
</div>
<div class="step__actions">
<div class="message message--error message--error-server">
<div class="message message--inline 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="self-assessment--001__assessment__submit" class="action action--submit is--disabled">
......
apps/openassessment/templates/openassessmentblock/self/oa_self_closed.html
{% extends "openassessmentblock/self/oa_self_assessment.html" %}
{% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--collapsed">
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--incomplete ui-toggle-visibility">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Not Completed</span>
<span class="copy">Incomplete</span>
<i class="ico icon-warning-sign"></i>
</span>
</span>
{% endblock %}
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__message message message--incomplete">
<h3 class="message__title">The due date for this part of the problem has passed</h3>
<div class="message__content">
<p> You can no longer assess your response to this problem or continue with the problem's next steps. Any progress you've made to this point is saved however.</p>
</div>
</div>
</div>
</div>
{% endblock %}
apps/openassessment/templates/openassessmentblock/self/oa_self_complete.html
{% extends "openassessmentblock/self/oa_self_assessment.html" %}
{% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--collapsed is--complete">
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--complete is--empty is--collapsed">
{% endblock %}
{% block title %}
......
apps/openassessment/templates/openassessmentblock/self/oa_self_unavailable.html
{% extends "openassessmentblock/self/oa_self_assessment.html" %}
{% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--collapsed is--unavailable">
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--empty is--unavailable is--collapsed">
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Unavailable</span>
<span class="copy">Not Available</span>
</span>
</span>
{% endblock %}
......
apps/openassessment/xblock/openassessmentblock.py
......@@ -127,7 +127,7 @@ UI_MODELS = {
"name": "grade",
"class_id": "openassessment__grade",
"navigation_text": "Your grade for this problem",
"title": "Your grade for this problem"
"title": "Your Grade:"
}
}
......
apps/openassessment/xblock/peer_assessment_mixin.py
......@@ -139,11 +139,11 @@ class PeerAssessmentMixin(object):
if continue_grading:
context_dict["submit_button_text"] = (
"Submit your assessment & review another response."
"Submit your assessment & review another response"
)
elif assessment["must_grade"] - count == 1:
context_dict["submit_button_text"] = (
"Submit your assessment & move onto next step."
"Submit your assessment & move onto next step"
)
else:
context_dict["submit_button_text"] = (
......@@ -165,11 +165,9 @@ class PeerAssessmentMixin(object):
path = 'openassessmentblock/peer/oa_peer_turbo_mode.html'
context_dict["peer_submission"] = peer_sub
else:
path = 'openassessmentblock/peer/oa_peer_complete.html'
elif workflow.get("status") == "done":
path = 'openassessmentblock/peer/oa_peer_waiting.html'
elif workflow.get("status") == "done" or finished:
path = "openassessmentblock/peer/oa_peer_complete.html"
elif finished:
path = 'openassessmentblock/peer/oa_peer_waiting.html'
return self.render_assessment(path, context_dict)
......
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/html/t-messages.html 0 → 100644
<!-- if the problem is closed and incomplete -->
<div id="openassessment__message" class="openassessment__message message message--incomplete">
<h3 class="message__title">This problem’s due date has past and submissions are now closed</h3>
<div class="message__content">
<p>You did not complete the necessary requirements and received <a data-behavior="ui-scroll" href="#openassessment__grade">an incomplete grade</a>.</p>
</div>
</div>
<!-- if response has been submitted -->
<div id="openassessment__message" class="openassessment__message message">
<h3 class="message__title">Your Response Has Been Submitted for Peer Assessment</h3>
<div class="message__content">
<p>You still need to complete <a data-behavior="ui-scroll" href="#openassessment__peer-assessment">assessing your peers</a> and <a data-behavior="ui-scroll" href="#openassessment__self-assessment">assessing yourself</a> in order to complete this problem and receive your grade.</p>
</div>
</div>
<!-- if response has been graded -->
<div id="openassessment__message" class="openassessment__message message">
<h3 class="message__title">Your Response Has Been Graded</h3>
<div class="message__content">
<p>You still need to complete <a data-behavior="ui-scroll" href="#openassessment__peer-assessment">assessing your peers</a> and <a data-behavior="ui-scroll" href="#openassessment__self-assessment">assessing yourself</a> in order to complete this problem and receive your grade.</p>
</div>
</div>
<!-- if the problem's due date is approaching and tasks remain -->
<div id="openassessment__message" class="openassessment__message message message--warning">
<h3 class="message__title">You still need to complete 2 Tasks</h3>
<div class="message__content">
<p>You still need to complete <a data-behavior="ui-scroll" href="#openassessment__peer-assessment">assessing your peers</a> and <a data-behavior="ui-scroll" href="#openassessment__self-assessment">assessing yourself</a> in order to complete this problem and receive your grade.</p>
</div>
</div>
<!-- if no peer assessments remain for student to grade -->
<div id="openassessment__message" class="openassessment__message message">
<h3 class="message__title">Awaiting More Peer Responses</h3>
<div class="message__content">
<p>There are currently no responses for you to assess. This should change momentarily. Check back shortly to continue completing this problem. One this and all other steps are completed, you will receive a grade.</p>
</div>
</div>
<!-- if student has completed the entire problem and received a grade -->
<div id="openassessment__message" class="openassessment__message message message--complete">
<h3 class="message__title">You have completed this problem</h3>
<div class="message__content">
<p>Review <a data-behavior="ui-scroll" href="#openassessment__grade">your grade and assessment details</a>.</p>
</div>
</div>
<!-- if student has completed the entire problem and not yet received a grade (from peers) -->
<div id="openassessment__message" class="openassessment__message message message--complete">
<h3 class="message__title">You have completed this problem</h3>
<div class="message__content">
<p>Your grade should be available shortly once your peers complete their assessments of your response.</p>
</div>
</div>
apps/openassessment/xblock/static/html/v-problem-initial.html
......@@ -108,14 +108,14 @@
</header>
<div class="step__instruction">
<p>Please provide your response below. 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">January 24, 2014</span></span>. <strong class="emphasis--beta">Once you submit, you may not edit your response</strong>.</p>
<p>Provide your your response below. 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">January 24, 2014</span></span>. <strong class="emphasis--beta">Once you submit, you may not edit your response</strong>.</p>
</div>
<div class="step__content">
<form id="response__submission" class="response__submission" method="post">
<ol class="list list--fields">
<li class="field field--textarea submission__answer" id="submission__answer">
<label for="submission__answer__value">Please provide your response to the above question</label>
<label for="submission__answer__value">Provide your response to the above question</label>
<textarea id="submission__answer__value" placeholder="Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."></textarea>
</li>
</ol>
......
apps/openassessment/xblock/static/js/src/oa_base.js
......@@ -98,7 +98,7 @@ OpenAssessment.BaseUI.prototype = {
ui.save();
}
);
}
).fail(function(errMsg) {
ui.showLoadError('response');
......@@ -253,7 +253,7 @@ OpenAssessment.BaseUI.prototype = {
function(html) {
// Load the HTML
$('#openassessment__grade', ui.element).replaceWith(html);
// Install a click handler for collapse/expand
var sel = $('#openassessment__grade', ui.element);
ui.setUpCollapseExpand(sel);
......@@ -267,7 +267,7 @@ OpenAssessment.BaseUI.prototype = {
).fail(function(errMsg) {
ui.showLoadError('grade', errMsg);
});
},
/**
......@@ -453,7 +453,7 @@ OpenAssessment.BaseUI.prototype = {
showLoadError: function(step) {
var container = '#openassessment__' + step;
$(container).toggleClass('has--error', true);
$(container + ' .step__status__value i').removeClass().addClass('icon-warning-sign');
$(container + ' .step__status__value i').removeClass().addClass('ico icon-warning-sign');
$(container + ' .step__status__value .copy').html('Unable to Load');
}
};
......
apps/openassessment/xblock/static/sass/oa/elements/_navigation.scss
......@@ -11,8 +11,8 @@
// control to toggle
.ui-toggle-visibility__control {
@include transition(color $tmg-f2 ease-in);
@extend %fake-link;
color: $action-primary-color;
text-decoration: none;
// optional icon
......@@ -24,7 +24,10 @@
> .ico {
@include transition(all $tmg-f2 ease-in-out 0s);
@include transform(rotate(90deg));
margin-right: ($baseline-h/8);
}
.ui-toggle-visibility__control__copy {
margin-left: ($baseline-h/4);
}
&:hover, &:focus {
......
apps/openassessment/xblock/static/sass/oa/utilities/_extends.scss
......@@ -6,11 +6,28 @@
// --------------------
// UI: content
// typography: subheading
// --------------------
%ui-content-longanswer {
max-height: ($baseline-v*15);
overflow-y: scroll;
%t-superheading {
@extend %hd-2;
@extend %t-strong;
}
%t-heading {
@extend %hd-4;
@extend %t-strong;
@extend %t-titlecase;
}
%t-subheading {
@extend %hd-4;
@extend %t-strong;
}
%t-score {
@extend %copy-4;
@extend %t-strong;
@extend %t-titlecase;
}
......@@ -18,21 +35,96 @@
// UI: section
// --------------------
%ui-section {
border: ($baseline-v/10) solid $color-decorative-tertiary;
@include transition(all $tmg-f1 ease-in-out);
@include transform(scale(1.0));
border-radius: ($baseline-v/10);
box-shadow: 0 1px 1px $shadow-l1;
margin-bottom: $baseline-v;
border: 1px solid $color-decorative-tertiary;
border-top: ($baseline-v/4) solid $color-decorative-tertiary;
padding: ($baseline-v/2) ($baseline-h/2);
background: $bg-content;
&:last-child {
margin-bottom: 0;
}
// STATE: hover and focus
&:hover, &:focus {
@include transform(scale(1.0));
border-color: $color-decorative-tertiary;
box-shadow: 0 1px 1px $shadow-l2;
}
// STATE: is collapsed
&.is--collapsed {
@include transform(scale(0.99));
box-shadow: 0 1px 1px $shadow-l2;
&:hover, &:focus {
@include transform(scale(1.0));
}
}
// STATE: is loading
&.is--loading {
@include transform(scale(0.99));
box-shadow: 0 1px 1px $shadow-l2;
}
// STATE: is empty
&.is--empty {
&:hover, &:focus {
@include transform(scale(0.99));
}
}
// STATE: is unavailable
&.is--unavailable {
border-top-color: $color-unavailable;
&:hover, &:focus {
@include transform(scale(0.99));
}
}
// STATE: is complete
&.is--complete {
border-top-color: $color-complete;
}
// STATE: is incomplete
&.is--incomplete {
border-top-color: $color-incomplete;
}
// STATE: has errors
&.has--error {
border-top-color: $color-error;
}
// STATE: is incomplete
&.is--closed, &.is--incomplete {
border-top-color: $color-incomplete;
}
}
// --------------------
// UI: subsection
// --------------------
%ui-subsection {
margin-bottom: $baseline-v;
}
%ui-section-title {
@extend %hd-7;
@extend %t-weight3;
padding: ($baseline-v/2) $baseline-v;
background: $color-decorative-tertiary;
color: $heading-secondary-color;
%ui-subsection-title {
margin-bottom: ($baseline-v/2);
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: ($baseline-v/2);
}
%ui-section-content {
padding: $baseline-v;
%ui-subsection-content {
p {
margin-bottom: $baseline-v;
......@@ -43,6 +135,23 @@
}
}
// --------------------
// UI: well
// --------------------
%ui-well {
box-shadow: inset 0 1px 2px 1px $shadow-l1;
padding: $baseline-v ($baseline-h/2);
background: $color-decorative-quinternary;
}
// --------------------
// UI: content
// --------------------
%ui-content-longanswer {
max-height: ($baseline-v*15);
overflow-y: scroll;
}
// --------------------
// UI: rubric
......@@ -54,19 +163,18 @@
@extend %wipe-last-child;
.question__title {
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: ($baseline-v/2);
border-bottom: ($baseline-v/10) solid $heading-color;
padding-bottom: ($baseline-v/4);
.ico {
display: inline-block;
vertical-align: middle;
margin-right: ($baseline-v/4);
}
}
.question__title__copy {
@extend %hd-4;
@extend %t-weight3;
@extend %t-heading;
color: $heading-color;
}
}
......@@ -77,16 +185,10 @@
.answer {
@include row();
@extend %trans-opacity;
@extend %wipe-last-child;
margin-bottom: ($baseline-v/2);
border-bottom: ($baseline-v/20) solid $color-decorative-tertiary;
border-bottom: ($baseline-v/20) solid $color-decorative-quaternary;
padding-bottom: ($baseline-v/2);
opacity: 0.75;
&:hover {
opacity: 1.0;
}
}
.wrapper--input {
......@@ -117,10 +219,10 @@
}
.answer__label {
@extend %copy-4;
@extend %t-weight3;
@extend %copy-3;
@extend %t-strong;
margin-bottom: 0; // FIX: need to reset base label style
color: $color-unfocused;
color: $copy-secondary-color;
}
.answer__value {
......@@ -162,9 +264,9 @@
.answer__tip {
margin-bottom: ($baseline-v/2);
@extend %copy-5;
@extend %copy-3;
margin-right: $baseline-v;
color: $copy-supplemental-color;
color: $copy-secondary-color;
@include media($bp-dm) {
@include span-columns(6 of 8);
......@@ -190,12 +292,8 @@
}
.answer__points {
@extend %copy-5;
color: $copy-color;
@extend %copy-5;
margin-right: $baseline-v;
color: $copy-supplemental-color;
@extend %t-score;
color: $copy-secondary-color;
@include media($bp-dm) {
float: right;
......@@ -211,13 +309,11 @@
float: right;
text-align: right;
}
}
.label {
@extend %copy-5; // FIX: need to reset base label style
display: inline-block; // FIX: need to reset base label style
margin-left: ($baseline-v/4);
color: $copy-supplemental-color;
}
.answer__points__label {
display: inline-block; // FIX: need to reset base label style
margin-left: ($baseline-v/4);
color: $copy-secondary-color;
}
}
apps/openassessment/xblock/static/sass/oa/utilities/_shame.scss
......@@ -28,27 +28,16 @@
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
.openassessment__steps .openassessment__steps__step .step__header {
.step__deadline {
color: $color-focused;
color: $heading-secondary-color;
}
// step title/name
.step__title {
h2.step__title {
@include span-columns(3 of 4);
margin-top: 0 !important;
text-align: left !important;
......@@ -83,25 +72,26 @@
// increment: show numbers using parent list counter
&:before {
@extend %hd-6;
@extend %t-weight4;
@extend %hd-2;
@extend %t-strong;
content: counter(item, decimal);
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;
color: $color-decorative-tertiary;
}
}
}
}
.step__status {
.step__status__value {
line-height: 0;
}
}
.step__status__value {
line-height: 0;
}
.list--actions {
list-style: none !important;
padding-left: 0 !important;
......@@ -135,14 +125,17 @@
}
}
// self assessment
.self-assessment__display__header, .peer-assessment__display__header {
padding-bottom: ($baseline-v/2) !important;
// peer assessment
.step--peer-assessment .list--peer-assessments {
list-style: none outside none !important;
padding-left: 0 !important;;
}
// self assessment
.self-assessment__display__title, .peer-assessment__display__title {
margin-bottom: ($baseline-v/2) !important;
color: $heading-secondary-color !important;
font-weight: 600 !important;
}
// shown submission/results
......@@ -150,6 +143,7 @@
padding-left: 0 !important;
}
.step--grade .step__title {
width: 100% !important;
......@@ -160,7 +154,7 @@
// actions
.action--submit, .action--save {
box-shadow: none;
box-shadow: none !important;;
}
// --------------------
......@@ -176,4 +170,8 @@
letter-spacing: normal;
text-transform: none;
}
.openassessment__steps__step .step__header .step__title {
margin-bottom: 0;
}
}
apps/openassessment/xblock/static/sass/oa/utilities/_variables.scss
......@@ -26,6 +26,9 @@ $bp-dx: new-breakpoint(min-width $grid-size-x 12);
// --------------------
// // application - colors: states
// --------------------
$color-incomplete: rgb(188, 85, 71);
$color-complete: rgb(98, 194, 74);
$color-error: rgb(188, 85, 71);
$color-warning: rgb(229, 166, 53);
$color-complete: rgb(98, 194, 74);
$color-incomplete: $color-warning;
$color-confirm: $heading-primary-color;
$color-unavailable: tint($copy-color, 85%);
apps/openassessment/xblock/static/sass/themes/edx/_base.scss
......@@ -3,3 +3,15 @@
// NOTES:
// * This is where any edX-theme related base styling is defined
.wrapper--xblock {
.problem {
}
.problem__header {
@extend %hd-problem;
}
}
apps/openassessment/xblock/static/sass/themes/edx/_utilities.scss
......@@ -83,6 +83,10 @@ $edx-lms-action-secondary: rgb(135, 135, 135);
// --------------------
// variables: overrides
// --------------------
// colors
$white-t: rgb(255,255,255);
$black-t: rgb(0,0,0);
// fonts
$f-serif: 'PT Serif', Cambria, Georgia, 'Times New Roman', Times, serif;
$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
......@@ -96,6 +100,7 @@ $gutter: $baseline-v;
$f-title: $f-sans-serif;
$f-copy: $f-sans-serif;
$f-action: $f-sans-serif;
$f-base-color: $edx-gray;
// application - colors
$color-primary: $edx-lms-action-primary;
......@@ -105,9 +110,6 @@ $color-quarternary: $gray-l2;
// application - colors: decorative
$color-decorative-primary: $gray-d3;
$color-decorative-secondary: $gray-l3;
$color-decorative-tertiary: $gray-l5;
$color-decorative-quaternary: $gray-l7;
// application - colors: states
$color-disabled: $edx-gray-l4;
......@@ -115,24 +117,11 @@ $color-focused: $edx-gray;
// application - colors: copy and headings
$heading-color: $edx-lms-header;
$heading-primary-color: shade($edx-lms-header, 33%);
$heading-secondary-color: tint($edx-lms-header, 33%);
$heading-tertiary-color: tint($edx-lms-header, 66%);
$copy-color: $edx-lms-copy;
$copy-color-alt: tint($edx-lms-copy, 33%);
$copy-color-focus: shade($edx-lms-copy, 33%);
$copy-lead-color: $edx-lms-copy;
$copy-lead-color-focus: shade($edx-lms-copy, 33%);
$copy-supplemental-color: tint($edx-lms-copy, 33%);
$copy-supplemental-color-alt: tint($edx-lms-copy, 66%);
$copy-supplemental-color-focus: $edx-lms-copy;
// application - colors:states
$selected-bg: $edx-blue-t1;
$selected-color: $edx-blue-s1;
$selected-color: $edx-blue;
// application - colors: actions
$action-primary-color: tint($color-primary,10%);
......@@ -156,12 +145,15 @@ $bg-view: transparent;
$bg-header-main: $white-t;
$color-header-main: $black;
$bg-content: $gray-l6;
$bg-content: $white-t;
$color-content: $gray-d1;
$bg-content-main: $gray-l5;
$color-content-main: $gray-d1;
// application - colors: states
$selected-color: $black-t;
// --------------------
// mixins:
// --------------------
......@@ -170,3 +162,9 @@ $color-content-main: $gray-d1;
// --------------------
// extends:
// --------------------
%hd-problem {
@extend %hd-3;
@extend %t-titlecase;
margin-bottom: $baseline-v;
color: $heading-secondary-color;
}
apps/openassessment/xblock/static/sass/xb/elements/_controls.scss
......@@ -110,14 +110,14 @@
// buttons - primary (assuming dark bg/light copy)
%btn--primary {
@extend %btn-pill;
@extend %t-weight3;
@extend %t-strong;
padding: ($baseline-v/2) ($baseline-h);
background: $action-primary-color;
border: 1px solid shade($action-primary-color, 15%);
color: tint($action-primary-color, 90%);
.copy {
@extend %t-weight3;
@extend %t-strong;
}
&:hover, &:active, &:focus {
......@@ -144,14 +144,14 @@
// buttons - secondary (assuming dark bg/light copy)
%btn--secondary {
@extend %btn-pill;
@extend %t-weight3;
@extend %t-strong;
padding: ($baseline-v/2) ($baseline-h);
background: $action-secondary-color;
border: 1px shade($action-secondary-color, 10%);
color: tint($action-secondary-color, 90%);
.copy {
@extend %t-weight3;
@extend %t-strong;
}
&:hover, &:active, &:focus {
......@@ -178,14 +178,14 @@
// buttons - tertiary (assuming dark bg/light copy)
%btn--tertiary {
@extend %btn-edged;
@extend %t-weight3;
@extend %t-strong;
padding: ($baseline-v/2) ($baseline-h/2);
background: $action-tertiary-color;
border: 1px solid shade($action-tertiary-color, 10%);
color: tint($action-tertiary-color, 90%);
.copy {
@extend %t-weight3;
@extend %t-strong;
}
&:hover, &:active, &:focus {
......
apps/openassessment/xblock/static/sass/xb/elements/_forms.scss
......@@ -12,13 +12,15 @@
input[type="email"],
input[type="password"],
textarea {
@extend %t-strong;
border: 1px solid $color-decorative-secondary;
padding: ($baseline-v/2);
outline: 0;
color: $selected-color;
color: $copy-color;
@include placeholder {
color: $copy-supplemental-color-alt;
@extend %t-regular;
color: $copy-secondary-color;
}
&:focus {
......@@ -32,8 +34,8 @@
font-family: $f-copy;
label, .label {
@extend %copy-4;
@extend %t-weight3;
@extend %copy-3;
@extend %t-strong;
display: block;
margin-bottom: ($baseline-v/2);
color: $copy-color;
......@@ -45,8 +47,8 @@
.tip {
display: block;
@extend %copy-5;
color: $copy-supplemental-color;
@extend %copy-4;
color: $copy-secondary-color;
}
}
}
......
apps/openassessment/xblock/static/sass/xb/elements/_typography.scss
......@@ -3,58 +3,61 @@
// NOTES:
// * all typographical settings should be placed here for general xblocks use
// * typographical scale reference: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72
// * typographical scale reference: 0, 14, 18, 24, 32, 43
// --------------------
// weight
// type weights
// --------------------
%t-weight0 {
font-weight: 300;
%t-ultrastrong {
font-weight: 800;
}
%t-weight1 {
font-weight: 400;
%t-strong {
font-weight: 600;
}
%t-weight2 {
font-weight: 500;
%t-regular {
font-weight: 400;
}
%t-weight3 {
font-weight: 600;
%t-light {
font-weight: 300;
}
%t-weight4 {
font-weight: 700;
%t-ultralight {
font-weight: 200;
}
// --------------------
// titlecase
// type size variants
// --------------------
%t-titlecase {
text-transform: uppercase;
letter-spacing: 0.05rem;
%t-xsmall {
@include typeSet(xsmall);
}
%t-small {
@include typeSet(small);
}
// --------------------
// canned icon sizes
// --------------------
%t-icon-s {
@include font-size(12);
%t-base {
@include typeSet(base);
}
%t-icon-m {
@include font-size(16);
%t-medium {
@include typeSet(medium);
}
%t-icon-l {
@include font-size(24);
%t-large {
@include typeSet(large);
}
%t-icon-xl {
@include font-size(36);
%t-xlarge {
@include typeSet(xlarge);
}
// --------------------
// style: titlecase
// --------------------
%t-titlecase {
text-transform: uppercase;
letter-spacing: 0.05rem;
}
......@@ -62,62 +65,27 @@
// canned headings
// --------------------
%hd-1 {
@extend %t-weight1;
@extend %t-titlecase;
@include font-size(24);
@include lh(24);
@extend %t-xlarge;
font-family: $f-title;
}
%hd-2 {
@extend %t-weight3;
@include font-size(21);
@include lh(21);
@extend %t-large;
font-family: $f-title;
}
%hd-3 {
@extend %t-weight1;
@extend %t-titlecase;
@include font-size(18);
@include lh(18);
@extend %t-medium;
font-family: $f-title;
}
%hd-4 {
@extend %t-weight3;
@include font-size(16);
@include lh(16);
@extend %t-base;
font-family: $f-title;
}
%hd-5 {
@extend %t-weight1;
@extend %t-titlecase;
@include font-size(16);
@include lh(16);
font-family: $f-title;
}
%hd-6 {
@extend %t-weight3;
@include font-size(16);
@include lh(16);
font-family: $f-title;
}
%hd-7 {
@extend %t-weight1;
@extend %t-titlecase;
@include font-size(13);
@include lh(13);
font-family: $f-title;
}
%hd-8 {
@extend %t-weight1;
@include font-size(13);
@include lh(13);
@extend %t-small;
font-family: $f-title;
}
......@@ -126,40 +94,27 @@
// canned copy
// --------------------
%copy-1 {
@extend %t-weight0;
@include font-size(24);
@include lh(24);
@extend %t-large;
font-family: $f-copy;
}
%copy-2 {
@include font-size(18);
@include lh(18);
@extend %t-medium;
font-family: $f-copy;
}
%copy-3 {
@extend %t-weight1;
@include font-size(16);
@include lh(16);
@extend %t-base;
font-family: $f-copy;
}
%copy-4 {
@include font-size(14);
@include lh(14);
@extend %t-small;
font-family: $f-copy;
}
%copy-5 {
@include font-size(13);
@include lh(13);
font-family: $f-copy;
}
%copy-6 {
@include font-size(12);
@include lh(12);
@extend %t-xsmall;
font-family: $f-copy;
}
......@@ -168,49 +123,48 @@
// canned actions
// --------------------
%action-1 {
@include font-size(18);
@include lh(18);
@extend %t-medium;
font-family: $f-action;
}
%action-2 {
@include font-size(18);
@include lh(18);
@extend %t-base;
font-family: $f-action;
}
%action-3 {
@include font-size(16);
@include lh(16);
@extend %t-small;
font-family: $f-action;
}
%action-4 {
@include font-size(14);
@include lh(14);
@extend %t-xsmall;
font-family: $f-action;
}
%action-5 {
@include font-size(12);
@include lh(12);
font-family: $f-action;
// --------------------
// canned icons
// --------------------
%icon-1 {
@extend %t-medium;
}
%icon-2 {
@extend %t-base;
}
// --------------------
// visual emphasis
// --------------------
%emphasis {
font-style: normal;
%icon-3 {
@extend %t-small;
}
%emphasis-1 {
@extend %emphasis;
@extend %t-weight3;
%icon-4 {
@extend %t-xsmall;
}
%emphasis-2 {
@extend %emphasis;
@extend %t-weight2;
// --------------------
// visual emphasis
// --------------------
%emphasis {
@extend %t-strong;
}
apps/openassessment/xblock/static/sass/xb/utilities/_mixins.scss
......@@ -8,7 +8,7 @@
// --------------------
// shorthand - absolute position
// --------------------
@mixin pos-abs ($top: auto, $right: auto, $bottom: auto, $left: auto) {
@mixin posAbs ($top: auto, $right: auto, $bottom: auto, $left: auto) {
position: absolute;
top: $top;
right: $right;
......@@ -18,9 +18,9 @@
// --------------------
// font-size (rems)
// fontSize (rems)
// --------------------
@mixin font-size($sizeValue: 16){
@mixin fontSize($sizeValue: 16){
font-size: $sizeValue + px;
// font-size: ($sizeValue/10) + rem; // since we don't control the root element of the DOM, we can't accurately get this fluid unit of measurement to render consistently
}
......@@ -34,3 +34,38 @@
// line-height: (($fontSize/10)*1.50) + rem; // since we don't control the root element of the DOM, we can't accurately get this fluid unit of measurement to render consistently
}
// --------------------
// type setting
// --------------------
@mixin typeSet($size) {
@if $size == "xsmall" {
@include fontSize($f-size-xsmall);
@include lh($f-size-xsmall);
}
@if $size == "small" {
@include fontSize($f-size-small);
@include lh($f-size-small);
}
@if $size == "base" {
@include fontSize($f-size-base);
@include lh($f-size-base);
}
@if $size == "medium" {
@include fontSize($f-size-medium);
@include lh($f-size-medium);
}
@if $size == "large" {
@include fontSize($f-size-large);
@include lh($f-size-large);
}
@if $size == "xlarge" {
@include fontSize($f-size-xlarge);
@include lh($f-size-xlarge);
}
}
apps/openassessment/xblock/static/sass/xb/utilities/_reset.scss
......@@ -437,12 +437,12 @@
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
@extend %t-weight1;
margin: 0;
vertical-align: baseline;
border: 0;
padding: 0;
outline: 0;
font-weight: 400;
}
abbr[title] {
......@@ -451,8 +451,8 @@
cursor: help;
}
strong {
@extend %t-weight3;
strong, .emphasis {
@extend %t-strong;
}
......
apps/openassessment/xblock/static/sass/xb/utilities/_variables.scss
......@@ -121,6 +121,15 @@ $anim-distance-offviewport: ($baseline-h*100); // for large
$f-title: $f-sans-serif;
$f-copy: $f-serif;
$f-action: $f-sans-serif;
$f-base-color: $gray-l2;
// type sizes
$f-size-xsmall: 10;
$f-size-small: 12;
$f-size-base: 14;
$f-size-medium: 16;
$f-size-large: 18;
$f-size-xlarge: 22;
// --------------------
......@@ -133,9 +142,10 @@ $color-teritary: $blue-u2;
// application - colors: decorative
$color-decorative-primary: $blue-u2;
$color-decorative-secondary: $gray-l4;
$color-decorative-tertiary: $gray-l6;
$color-decorative-quaternary: tint($gray-l6, 10%);
$color-decorative-secondary: tint($color-decorative-primary, 30%);
$color-decorative-tertiary: tint($color-decorative-primary, 60%);
$color-decorative-quaternary: tint($color-decorative-primary, 90%);
$color-decorative-quinternary: tint($color-decorative-primary, 98%);
// application - colors: states
$color-disabled: $gray-l4;
......@@ -159,22 +169,11 @@ $action-tertiary-color-active: $color-teritary;
$action-tertiary-color-visited: shade($color-teritary,20%);
// application - colors: copy and headings
$heading-color: $gray-d5;
$heading-primary-color: $black;
$heading-secondary-color: $gray-l1;
$heading-tertiary-color: $gray-l3;
$copy-color: $gray-l1;
$copy-color-alt: $gray-d1;
$copy-color-focus: $gray-d4;
$copy-lead-color: $gray;
$copy-lead-color: $gray-d1;
$copy-lead-color-focus: $gray-d4;
$copy-supplemental-color: $gray-l2;
$copy-supplemental-color-alt: $gray-l2;
$copy-supplemental-color-focus: $gray-d1;
$heading-color: shade($f-base-color, 50%);
$heading-primary-color: shade($f-base-color, 66%);
$heading-secondary-color: tint($f-base-color, 33%);
$copy-color: $f-base-color;
$copy-secondary-color: tint($copy-color, 25%);
// application - colors: states
$selected-bg: $blue-t1;
......
apps/openassessment/xblock/test/test_self.py
......@@ -112,7 +112,7 @@ class TestSelfAssessment(XBlockHandlerTestCase):
@scenario('data/self_assessment_scenario.xml')
def test_render_self_assessment_preview(self, xblock):
resp = self.request(xblock, 'render_self_assessment', json.dumps(dict()))
self.assertIn("Unavailable", resp)
self.assertIn("Not Available", resp)
@scenario('data/self_assessment_scenario.xml', user_id='Bob')
def test_render_self_assessment_complete(self, xblock):
......@@ -141,14 +141,14 @@ class TestSelfAssessment(XBlockHandlerTestCase):
mock_complete.return_value = True
# Expect that the self-assessment step is open
resp = self.request(xblock, 'render_self_assessment', json.dumps(dict()))
self.assertIn("Not Completed", resp)
self.assertIn("In Progress", resp)
@scenario('data/self_assessment_scenario.xml', user_id='Bob')
def test_render_self_assessment_no_submission(self, xblock):
# Without creating a submission, render the self-assessment step
# Expect that the step is closed
resp = self.request(xblock, 'render_self_assessment', json.dumps(dict()))
self.assertIn("Unavailable", resp)
self.assertIn("Not Available", resp)
@scenario('data/self_assessment_scenario.xml', user_id='Bob')
def test_render_self_assessessment_api_error(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