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 @@
<div class="wrapper wrapper--openassessment theme--basic">
<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">
<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>
<!-- STATUS: system messages -->
<!-- SEE t-messages.html for all cases -->
<!-- STATUS: system messages -->
<!-- SEE t-messages.html for all cases -->
<!-- question -->
<div class="wrapper--openassessment__prompt">
<article class="openassessment__prompt ui-toggle-visibility">
<!-- question -->
<div class="wrapper--openassessment__prompt">
<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">
<p>{{ question }}</p>
</div>
<div class="openassessment__prompt__copy ui-toggle-visibility__content">
<p>{{ question }}</p>
</div>
<ul class="list list--controls">
<li class="list--controls__item">
<a href="" class="action action--toggle ui-toggle-visibility__control">Collapse/Expand This</a>
</li>
</ul>
</article>
</div>
<ul class="list list--controls">
<li class="list--controls__item">
<a href="" class="action action--toggle ui-toggle-visibility__control">Collapse/Expand This</a>
</li>
</ul>
</article>
</div>
<!-- steps -->
<ol class="openassessment__steps" id="openassessment__steps">
<!-- steps -->
<ol class="openassessment__steps" id="openassessment__steps">
<!-- STEP: response -->
{% for assessment in rubric_assessments %}
<li id="{{ assessment.class_id }}">{{ assessment.title }}</li>
{% endfor %}
<!-- STEP: response -->
{% for assessment in rubric_assessments %}
<li id="{{ assessment.class_id }}">{{ assessment.title }}</li>
{% endfor %}
</ol>
</ol>
<!-- STATUS: problem grade -->
{% include "openassessmentblock/oa_grade.html" %}
<!-- STATUS: problem grade -->
{% include "openassessmentblock/oa_grade.html" %}
</div>
</div>
</div>
apps/openassessment/templates/openassessmentblock/oa_grade.html
......@@ -18,6 +18,6 @@
<div class="openassessment__grade__content">
<span class="grade__value">{{ grade_state.value }}</span>
<p>{{ grade_state.message }}</p>
<p class="grade__description">{{ grade_state.message }}</p>
</div>
</div>
apps/openassessment/templates/openassessmentblock/oa_peer_assessment.html
......@@ -9,41 +9,19 @@
-->
<!-- CASE: default/not started -->
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment">
<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>
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility">
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<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 class="system__element" id="peer_submission_uuid">
{{ peer_submission.uuid }}
</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">
<ul class="list--peer-assessments">
<li class="list--peer-assessments__item">
<article class="peer-assessment" id="peer-assessment--001">
<header class="peer-assessment__header">
<h3 class="peer-assessment__title">Assessment #
<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>
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<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>
</span>
</header>
......@@ -84,22 +62,14 @@
</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>
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="peer-assessment--001__assessment__submit" class="action action--submit">Submit your assessment &amp; move to response #2</button>
</li>
</ol>
</fieldset>
<ul class="list list--actions">
<li class="list--actions__item">
<button type="submit" id="peer-assessment--001__assessment__submit" class="action action--submit">Submit your assessment &amp; move to response #2</button>
</li>
</ul>
</form>
</article>
</li>
</ul>
</div>
</ul>
</form>
</article>
</li>
</ul>
</div>
</li>
apps/openassessment/templates/openassessmentblock/oa_response.html
......@@ -19,10 +19,13 @@
{% block header %}
<!--header class="step__header ui-toggle-visibility__control"-->
<h2 class="step__title">
<span class="step__label">Your Response</span>
{% if formatted_due_datetime %}
<span class="step__deadline">due <span class="date">{{ formatted_due_datetime }}</span></span>
{% endif %}
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">Your Response</span>
{% if formatted_due_datetime %}
<span class="step__deadline">due <span class="date">{{ formatted_due_datetime }}</span></span>
{% endif %}
</span>
</h2>
<span class="step__status">
......
apps/openassessment/templates/openassessmentblock/oa_self_assessment.html
......@@ -12,17 +12,20 @@
<!-- CASE: default/not started -->
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment">
{# <header class="step__header">#}
<header class="step__header">
<h2 class="step__title">
<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 class="step__counter"></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>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step_status_value">Incomplete</span>
</span>
{# </header>#}
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step_status_value">Incomplete</span>
</span>
</header>
<div class="step--content">
<article class="self-assessment" id="self-assessment">
......
apps/openassessment/xblock/static/sass/xb/elements/_base.scss
......@@ -30,6 +30,13 @@ hr.divider,
@extend %text-sr;
}
// --------------------
// system-needed elements, but visually hidden
// --------------------
.system__element {
@extend %text-sr;
}
// --------------------
// 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