Skip to content

E
edx-ora2
Commit 4ebacb89 by Brian Talbot
Options

revising markup and styling for oa_*.html templates: 

* matches static template expected markup
* adds in missing classes
* revises indentation/nesting
* adds in system__element markup/styling for system-based DOM elements
parent efd1bbb2
Showing with 100 additions and 116 deletions
apps/openassessment/templates/openassessmentblock/oa_base.html
...@@ -12,69 +12,70 @@ ...@@ -12,69 +12,70 @@
<div class="wrapper wrapper--openassessment theme--basic"> <div class="wrapper wrapper--openassessment theme--basic">
<div class="openassessment" id="openassessment"> <div class="openassessment" id="openassessment">
<div class="wrapper--grid">
<h1 class="openassessment__title">
<span class="openassessment__title--super">
{{ title }}
</span>
<span class="openassessment__title--sub">
<span class="problem-type problem-type--open-ended-response">Open Ended Response</span>
{% for assessment in rubric_assessments %}
+
<span class="problem-type problem-type--{{ assessment.type }}">{{ assessment.name }}</span>
{% endfor %}
</span>
</h1>
<!--?: may have trouble with aync -->
<nav class="nav--contents">
<h2 class="title">Skip to a part of this problem:</h2>
<ol class="list list--nav">
{% for assessment in rubric_assessments %}
<li class="list--nav__item">
<a class="action" href="#openassessment__{{ assessment.type }}">{{ assessment.navigation_text }}</a>
</li>
{% endfor %}
<li class="list--nav__item">
<a class="action" href="#openassessment__grade">Your grade for this problem</a>
</li>
</ol>
</nav>
<h1 class="openassessment__title"> <!-- STATUS: system messages -->
<span class="openassessment__title--super"> <!-- SEE t-messages.html for all cases -->
{{ title }}
</span>
<span class="openassessment__title--sub">
<span class="problem-type problem-type--open-ended-response">Open Ended Response</span>
{% for assessment in rubric_assessments %}
+
<span class="problem-type problem-type--{{ assessment.type }}">{{ assessment.name }}</span>
{% endfor %}
</span>
</h1>
<!--?: may have trouble with aync -->
<nav class="nav--contents">
<h2 class="title">Skip to a part of this problem:</h2>
<ol class="list list--nav">
{% for assessment in rubric_assessments %}
<li class="list--nav__item">
<a class="action" href="#openassessment__{{ assessment.type }}">{{ assessment.navigation_text }}</a>
</li>
{% endfor %}
<li class="list--nav__item">
<a class="action" href="#openassessment__grade">Your grade for this problem</a>
</li>
</ol>
</nav>
<!-- STATUS: system messages -->
<!-- SEE t-messages.html for all cases -->
<!-- question --> <!-- question -->
<div class="wrapper--openassessment__prompt"> <div class="wrapper--openassessment__prompt">
<article class="openassessment__prompt ui-toggle-visibility"> <article class="openassessment__prompt ui-toggle-visibility">
<h2 class="openassessment__prompt__title">Open Assessment Problem</h2> <h2 class="openassessment__prompt__title">Open Assessment Problem</h2>
<div class="openassessment__prompt__copy ui-toggle-visibility__content"> <div class="openassessment__prompt__copy ui-toggle-visibility__content">
<p>{{ question }}</p> <p>{{ question }}</p>
</div> </div>
<ul class="list list--controls"> <ul class="list list--controls">
<li class="list--controls__item"> <li class="list--controls__item">
<a href="" class="action action--toggle ui-toggle-visibility__control">Collapse/Expand This</a> <a href="" class="action action--toggle ui-toggle-visibility__control">Collapse/Expand This</a>
</li> </li>
</ul> </ul>
</article> </article>
</div> </div>
<!-- steps --> <!-- steps -->
<ol class="openassessment__steps" id="openassessment__steps"> <ol class="openassessment__steps" id="openassessment__steps">
<!-- STEP: response --> <!-- STEP: response -->
{% for assessment in rubric_assessments %} {% for assessment in rubric_assessments %}
<li id="{{ assessment.class_id }}">{{ assessment.title }}</li> <li id="{{ assessment.class_id }}">{{ assessment.title }}</li>
{% endfor %} {% endfor %}
</ol> </ol>
<!-- STATUS: problem grade --> <!-- STATUS: problem grade -->
{% include "openassessmentblock/oa_grade.html" %} {% include "openassessmentblock/oa_grade.html" %}
</div>
</div> </div>
</div> </div>
apps/openassessment/templates/openassessmentblock/oa_grade.html
...@@ -18,6 +18,6 @@ ...@@ -18,6 +18,6 @@
<div class="openassessment__grade__content"> <div class="openassessment__grade__content">
<span class="grade__value">{{ grade_state.value }}</span> <span class="grade__value">{{ grade_state.value }}</span>
<p>{{ grade_state.message }}</p> <p class="grade__description">{{ grade_state.message }}</p>
</div> </div>
</div> </div>
apps/openassessment/templates/openassessmentblock/oa_peer_assessment.html
...@@ -9,41 +9,19 @@ ...@@ -9,41 +9,19 @@
--> -->
<!-- CASE: default/not started --> <!-- CASE: default/not started -->
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility">
<div id="peer_submission_uuid" hidden="true">{{ peer_submission.uuid }}</div>
<h2 class="step__title">
<span class="step__label">Evaluate Peers' Responses</span>
<span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
</h2>
<span class="step__status"> <span class="system__element" id="peer_submission_uuid">
<span class="step__status__label">This step's status:</span> {{ peer_submission.uuid }}
<span class="step__status__value">
<span class="step__status__value--completed">0</span> of
<span class="step__status__value--required">5</span> completed
</span>
</span> </span>
{#</header>#}
<div class="step__instruction">
<p>Please read and evaluate the following response from one of your peers in the course.</p>
</div>
<div class="step__content"> <header class="step__header ui-toggle-visibility__control">
<ul class="list--peer-assessments"> <h2 class="step__title">
<li class="list--peer-assessments__item"> <span class="step__counter"></span>
<article class="peer-assessment" id="peer-assessment--001"> <span class="wrapper--copy">
<header class="peer-assessment__header"> <span class="step__label">Evaluate Peers' Responses</span>
<h3 class="peer-assessment__title">Assessment # <span class="step__deadline">due <span class="date">January 30, 2014</span> at <span class="time">15:00 UTC</span></span>
<span class="peer-assessment__number--current">1</span> of
<span class="peer-assessment__number--required">3</span>
</h3>
<span class="peer-assessment__expected-time">
<span class="label">Expected Time Spent:</span>
<span class="value">20 Minutes</span>
</span> </span>
</header> </header>
...@@ -84,22 +62,14 @@ ...@@ -84,22 +62,14 @@
</li> </li>
{% endfor %} {% endfor %}
<!-- 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="peer-assessment--001__assessment__submit" class="action action--submit">Submit your assessment &amp; move to response #2</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"> </li>
<li class="list--actions__item"> </ul>
<button type="submit" id="peer-assessment--001__assessment__submit" class="action action--submit">Submit your assessment &amp; move to response #2</button> </div>
</li>
</ul>
</form>
</article>
</li>
</ul>
</div>
</li> </li>
apps/openassessment/templates/openassessmentblock/oa_response.html
...@@ -19,10 +19,13 @@ ...@@ -19,10 +19,13 @@
{% block header %} {% block header %}
<!--header class="step__header ui-toggle-visibility__control"--> <!--header class="step__header ui-toggle-visibility__control"-->
<h2 class="step__title"> <h2 class="step__title">
<span class="step__label">Your Response</span> <span class="step__counter"></span>
{% if formatted_due_datetime %} <span class="wrapper--copy">
<span class="step__deadline">due <span class="date">{{ formatted_due_datetime }}</span></span> <span class="step__label">Your Response</span>
{% endif %} {% if formatted_due_datetime %}
<span class="step__deadline">due <span class="date">{{ formatted_due_datetime }}</span></span>
{% endif %}
</span>
</h2> </h2>
<span class="step__status"> <span class="step__status">
......
apps/openassessment/templates/openassessmentblock/oa_self_assessment.html
...@@ -12,17 +12,20 @@ ...@@ -12,17 +12,20 @@
<!-- CASE: default/not started --> <!-- CASE: default/not started -->
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment"> <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment">
{# <header class="step__header">#} <header class="step__header">
<h2 class="step__title"> <h2 class="step__title">
<span class="step__title__label">Evaluate Your Response</span> <span class="step__counter"></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="wrapper--copy">
<span class="step__title__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>
</h2> </h2>
<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> </span>
{# </header>#} </header>
<div class="step--content"> <div class="step--content">
<article class="self-assessment" id="self-assessment"> <article class="self-assessment" id="self-assessment">
......
apps/openassessment/xblock/static/sass/xb/elements/_base.scss
...@@ -30,6 +30,13 @@ hr.divider, ...@@ -30,6 +30,13 @@ hr.divider,
@extend %text-sr; @extend %text-sr;
} }
// --------------------
// system-needed elements, but visually hidden
// --------------------
.system__element {
@extend %text-sr;
}
// -------------------- // --------------------
// semantic lists used for UI // semantic lists used for UI
......
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