Skip to content

E
edx-ora2
Commit ed210a92 by Sandy Student Committed by Alex Dusenbery
Options

EDUCATOR-1547 | Put arrow buttons in the header (but not the heading), make them… 

EDUCATOR-1547 | Put arrow buttons in the header (but not the heading), make them the control.  aria references.
parent d1fb6966
Showing with 271 additions and 204 deletions
openassessment/templates/openassessmentblock/grade/oa_grade_cancelled.html
......@@ -2,10 +2,16 @@
{% spaceless %}
<li id="openassessment__grade__{{ xblock_id }}" class="openassessment__steps__step step--grade is--initially--collapsed has--error ui-slidable__container" tabindex="-1">
<header class="step__header ui-slidable__control">
<h4 class="step__title">
<button class="ui-slidable" aria-expanded="false" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}_content">
<span>
<button class="ui-slidable" aria-expanded="false" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}_content" aria-labeledby="oa_step_title_grade">
<span class="icon fa fa-caret-down" aria-hidden="false"/>
</button>
</span>
<span>
<h4 class="step__title">
<span class="wrapper--copy">
<span class="step__label">{% trans "Your Grade" %}: </span>
<span id="oa_step_title_grade" class="step__label">{% trans "Your Grade" %}: </span>
<span class="grade__value">
<span class="grade__value__title">
{% if score %}
......@@ -21,8 +27,8 @@
</span>
</span>
</span>
</button>
</h4>
</h4>
</span>
</header>
<div class="ui-slidable__content" id="oa_grade_{{ xblock_id }}_content" aria-labelledby="oa_grade_{{ xblock_id }}">
......
openassessment/templates/openassessmentblock/grade/oa_grade_complete.html
......@@ -2,11 +2,17 @@
{% spaceless %}
<li id="openassessment__grade__{{ xblock_id }}" class="openassessment__steps__step step--grade is--complete is--showing has--grade ui-slidable__container {% if allow_latex %}allow--latex{% endif %}" tabindex="-1">
<header class="step__header ui-slidable__control">
<h4 class="step__title">
<button class="ui-slidable" aria-expanded="true" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}_content">
<span>
<button class="ui-slidable" aria-expanded="true" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}_content" aria-labeledby="oa_step_title_grade">
<span class="icon fa fa-caret-down" aria-hidden="false"/>
</button>
</span>
<span>
<h4 class="step__title">
<span class="wrapper--copy">
{% if score %}
<span class="step__label">{% trans "Your Grade" %}: </span>
<span id="oa_step_title_grade" class="step__label">{% trans "Your Grade" %}: </span>
<span class="grade__value">
<span class="grade__value__title">
{% with points_earned_string=score.points_earned|stringformat:"s" points_possible_string=score.points_possible|stringformat:"s" %}
......@@ -17,11 +23,11 @@
</span>
</span>
{% else %}
<span class="step__label">{% trans "Your Grade" %}</span>
<span id="oa_step_title" class="step__label">{% trans "Your Grade" %}</span>
{% endif %}
</span>
</button>
</h4>
</h4>
</span>
</header>
<div class="ui-slidable__content" id="oa_grade_{{ xblock_id }}_content" aria-labelledby="oa_grade_{{ xblock_id }}">
......
openassessment/templates/openassessmentblock/grade/oa_grade_incomplete.html
......@@ -2,16 +2,22 @@
{% spaceless %}
<li id="openassessment__grade__{{ xblock_id }}" class="openassessment__steps__step step--grade is--unfinished is--initially--collapsed ui-slidable__container" tabindex="-1">
<header class="step__header ui-slidable__control">
<h4 class="step__title">
<button class="ui-slidable" aria-expanded="false" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}">
<span>
<button class="ui-slidable" aria-expanded="false" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}_content" aria-labeledby="oa_step_title_grade">
<span class="icon fa fa-caret-down" aria-hidden="false"/>
</button>
</span>
<span>
<h4 class="step__title">
<span class="wrapper--copy">
<span class="step__label">{% trans "Your Grade" %}: </span>
<span id="oa_step_title_grade" class="step__label">{% trans "Your Grade" %}: </span>
<span class="grade__value">
<span class="grade__value__title">{% trans "Not Completed" %}</span>
</span>
</span>
</button>
</h4>
</h4>
</span>
</header>
<div class="ui-slidable__content" aria-labelledby="oa_grade_{{ xblock_id }}" id="oa_grade_{{ xblock_id }}_content">
......
openassessment/templates/openassessmentblock/grade/oa_grade_not_started.html
......@@ -2,16 +2,22 @@
{% spaceless %}
<li id="openassessment__grade__{{ xblock_id }}" class="openassessment__steps__step step--grade is--unstarted is--initially--collapsed ui-slidable__container" tabindex="-1">
<header class="step__header ui-slidable__control">
<h4 class="step__title">
<button class="ui-slidable" aria-expanded="false" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}_content">
<span>
<button class="ui-slidable" aria-expanded="false" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}_content" aria-labeledby="oa_step_title_grade">
<span class="icon fa fa-caret-down" aria-hidden="false"/>
</button>
</span>
<span>
<h4 class="step__title">
<span class="wrapper--copy">
<span class="step__label">{% trans "Your Grade" %}:</span>
<span id="oa_step_title_grade" class="step__label">{% trans "Your Grade" %}: </span>
<span class="grade__value">
<span class="grade__value__title">{% trans "Not Started" %}</span>
</span>
</span>
</button>
</h4>
</h4>
</span>
</header>
<div class="ui-slidable__content" aria-labelledby="oa_grade_{{ xblock_id }}" id="oa_grade_{{ xblock_id }}_content">
......
openassessment/templates/openassessmentblock/grade/oa_grade_waiting.html
......@@ -2,16 +2,22 @@
{% spaceless %}
<li id="openassessment__grade__{{ xblock_id }}" class="openassessment__steps__step step--grade is--showing {{ is_waiting_staff }} ui-slidable__container" tabindex="-1">
<header class="step__header ui-slidable__control">
<h4 class="step__title">
<button class="ui-slidable" aria-expanded="true" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}_content">
<span>
<button class="ui-slidable" aria-expanded="false" id="oa_grade_{{ xblock_id }}" aria-controls="oa_grade_{{ xblock_id }}_content" aria-labeledby="oa_step_title_grade">
<span class="icon fa fa-caret-down" aria-hidden="false"/>
</button>
</span>
<span>
<h4 class="step__title">
<span class="wrapper--copy">
<span class="step__label">{% trans "Your Grade" %}:</span>
<span id="oa_step_title_grade" class="step__label">{% trans "Your Grade" %}: </span>
<span class="grade__value">
<span class="grade__value__title">{% trans "Waiting for Assessments" %}</span>
</span>
</span>
</button>
</h4>
</h4>
</span>
</header>
<div class="ui-slidable__content" aria-labelledby="oa_grade_{{ xblock_id }}" id="oa_grade_{{ xblock_id }}_content">
......
openassessment/templates/openassessmentblock/leaderboard/oa_leaderboard_show.html
......@@ -3,7 +3,7 @@
<li id="openassessment__leaderboard__{{ xblock_id }}" class="openassessment__steps__step step--leaderboard is--complete ui-slidable__container is--showing {% if allow_latex %} allow--latex{% endif %}" tabindex="-1">
<header class="step__header ui-slidable__control">
<h4 class="step__title">
<button class="ui-slidable" aria-expanded="true" id="oa_leaderboard_{{ xblock_id }}" aria-controls="oa_leaderboard_{{ xblock_id }}_content">
<button class="ui-slidable" aria-expanded="true" id="oa_leaderboard_{{ xblock_id }}" aria-controls="oa_leaderboard_{{ xblock_id }}_content" aria-describedby="oa_step_status oa_step_deadline">
<span class="wrapper--copy">
<span class="step__label">{% trans "Top Responses" %} </span>
</span>
......
openassessment/templates/openassessmentblock/leaderboard/oa_leaderboard_waiting.html
......@@ -3,7 +3,7 @@
<li id="openassessment__leaderboard__{{ xblock_id }}" class="openassessment__steps__step step--leaderboard is--initially--collapsed ui-slidable__container" tabindex="-1">
<header class="step__header ui-slidable__control">
<h4 class="step__title">
<button class="ui-slidable" aria-expanded="false" id="oa_leaderboard_{{ xblock_id }}" aria-controls="oa_leaderboard_{{ xblock_id }}_content">
<button class="ui-slidable" aria-expanded="false" id="oa_leaderboard_{{ xblock_id }}" aria-controls="oa_leaderboard_{{ xblock_id }}_content" aria-describedby="oa_step_status oa_step_deadline">
<span class="wrapper--copy">
<span class="step__label">{% trans "Top Responses" %} </span>
</span>
......
openassessment/templates/openassessmentblock/oa_base.html
......@@ -23,20 +23,19 @@
<li class="{{ assessment.class_id }} openassessment__steps__step is--loading">
<header class="step__header ui-slidable__container">
<h4 class="step__title">
<button class="ui-slidable" aria-expanded="false" disabled>
<button class="ui-slidable" aria-expanded="false" aria-describedby="oa_step_status oa_step_deadline" disabled>
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">{% trans assessment.title %}</span>
</span>
</button>
<span class="step__status">
<span class="step__status__value">
<span class="icon fa fa-spinner fa-spin" aria-hidden="true"></span>
<span class="copy">{% trans "Loading" %}</span>
</span>
</span>
</h4>
<span class="step__status">
<span id="oa_step_status" class="step__status__value">
<span class="icon fa fa-spinner fa-spin" aria-hidden="true"></span>
<span class="copy">{% trans "Loading" %}</span>
</span>
</span>
</header>
</li>
{% endfor %}
......
openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html
......@@ -11,45 +11,51 @@
{% spaceless %}
<header class="step__header ui-slidable__control">
<h4 class="step__title">
<span>
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer{{ xblock_id }}_content">
<button class="ui-slidable" aria-expanded="true" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content" aria-labeledby="oa_step_title_peer">
<span class="icon fa fa-caret-down" aria-hidden="false"/>
</button>
{% endblock %}
</span>
<span>
<h4 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">{% trans "Assess Peers" %}</span>
{% if peer_start %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "available August 13th, 2014 00:00 UTC (in 5 days and 45 minutes)" #}
{% blocktrans with start_date=peer_start|timezone:"UTC"|date:"c" time_until=peer_start|timeuntil %}
<span class="date ora-datetime" data-datetime="{{ start_date }}" data-string="available {date} (in {{ time_until }})" data-timezone="{{ user_timezone }}" data-language="{{ user_language }}"></span>
{% endblocktrans %}
</span>
{% elif peer_due %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "due August 13th, 2014 00:00 UTC (in 5 days and 45 minutes)" #}
{% blocktrans with due_date=peer_due|timezone:"UTC"|date:"c" time_until=peer_due|timeuntil %}
<span class="date ora-datetime" data-datetime="{{ due_date }}" data-string="due {date} (in {{ time_until }})" data-timezone="{{ user_timezone }}" data-language="{{ user_language }}"></span>
{% endblocktrans %}
</span>
{% endif %}
<span id="oa_step_title_peer" class="step__label" aria-describedby="oa_step_status_peer oa_step_deadline_peer">{% trans "Assess Peers" %}</span>
</span>
</button>
</h4>
</span>
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span class="copy">
{% with review_num_string=review_num|stringformat:"s" must_grade_string=must_grade|stringformat:"s" %}
{% blocktrans with review_number='<span class="step__status__number--current">'|safe|add:review_num_string|add:"</span>"|safe num_must_grade='<span class="step__status__value--required">'|safe|add:must_grade_string|add:"</span>"|safe %}
In Progress ({{ review_number }} of {{ num_must_grade }})
{% endblocktrans %}
{% endwith %}
</span>
</span>
{% if peer_start %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "available August 13th, 2014 00:00 UTC (in 5 days and 45 minutes)" #}
{% blocktrans with start_date=peer_start|timezone:"UTC"|date:"c" time_until=peer_start|timeuntil %}
<span id="oa_step_deadline_peer" class="date ora-datetime" data-datetime="{{ start_date }}" data-string="available {date} (in {{ time_until }})" data-timezone="{{ user_timezone }}" data-language="{{ user_language }}"></span>
{% endblocktrans %}
</span>
{% elif peer_due %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "due August 13th, 2014 00:00 UTC (in 5 days and 45 minutes)" #}
{% blocktrans with due_date=peer_due|timezone:"UTC"|date:"c" time_until=peer_due|timeuntil %}
<span id="oa_step_deadline_peer" class="date ora-datetime" data-datetime="{{ due_date }}" data-string="due {date} (in {{ time_until }})" data-timezone="{{ user_timezone }}" data-language="{{ user_language }}"></span>
{% endblocktrans %}
</span>
{% endif %}
{% block title %}
<span class="step__status">
<span id="oa_step_status_peer" class="step__status__value">
<span class="copy">
{% with review_num_string=review_num|stringformat:"s" must_grade_string=must_grade|stringformat:"s" %}
{% blocktrans with review_number='<span class="step__status__number--current">'|safe|add:review_num_string|add:"</span>"|safe num_must_grade='<span class="step__status__value--required">'|safe|add:must_grade_string|add:"</span>"|safe %}
In Progress ({{ review_number }} of {{ num_must_grade }})
{% endblocktrans %}
{% endwith %}
</span>
{% endblock %}
</h4>
</span>
</span>
{% endblock %}
</header>
{% block body %}
......
openassessment/templates/openassessmentblock/peer/oa_peer_cancelled.html
......@@ -13,7 +13,7 @@
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span id="oa_step_status_peer" class="step__status__value">
<span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<span class="copy">
{% trans "Cancelled" %}
......
openassessment/templates/openassessmentblock/peer/oa_peer_closed.html
......@@ -6,12 +6,14 @@
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content">
<button class="ui-slidable" aria-expanded="true" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content" aria-labeledby="oa_step_title_peer">
<span class="icon fa fa-caret-down" aria-hidden="false"/>
</button>
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span id="oa_step_status_peer" class="step__status__value">
<span class="copy">
<span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
{% with graded_string=graded|stringformat:"s" must_grade_string=must_grade|stringformat:"s" %}
......
openassessment/templates/openassessmentblock/peer/oa_peer_complete.html
......@@ -7,7 +7,7 @@
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span id="oa_step_status_peer" class="step__status__value">
<span class="icon fa fa-check" aria-hidden="true"></span>
<span class="copy">
<span class="step__status__value--completed">{{ graded }}</span> {% trans "Completed" %}
......@@ -17,7 +17,9 @@
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content">
<button class="ui-slidable" aria-expanded="false" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content" aria-labeledby="oa_step_title_peer">
<span class="icon fa fa-caret-down" aria-hidden="false"/>
</button>
{% endblock %}
{% block body %}
......
openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode.html
......@@ -12,12 +12,14 @@
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content">
<button class="ui-slidable" aria-expanded="true" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content" aria-labeledby="oa_step_title_peer">
<span class="icon fa fa-caret-down" aria-hidden="false"/>
</button>
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span id="oa_step_status_peer" class="step__status__value">
<span class="icon fa fa-check" aria-hidden="true"></span>
<span class="copy">
{% with graded_string=graded|stringformat:"s" %}
......
openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode_waiting.html
......@@ -6,12 +6,14 @@
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content">
<button class="ui-slidable" aria-expanded="true" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content" aria-labeledby="oa_step_title_peer">
<span class="icon fa fa-caret-down" aria-hidden="false"/>
</button>
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span id="oa_step_status_peer" class="step__status__value">
<span class="icon fa fa-check" aria-hidden="true"></span>
<span class="copy">
{% with graded_string=graded|stringformat:"s" %}
......
openassessment/templates/openassessmentblock/peer/oa_peer_unavailable.html
......@@ -7,12 +7,12 @@
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled>
<button class="ui-slidable" aria-expanded="false" disabled/>
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span id="oa_step_status_peer" class="step__status__value">
<span class="copy">{% trans "Not Available" %}</span>
</span>
</span>
......
openassessment/templates/openassessmentblock/peer/oa_peer_waiting.html
......@@ -7,12 +7,14 @@
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content">
<button class="ui-slidable" aria-expanded="true" id="oa_peer_{{ xblock_id }}" aria-controls="oa_peer_{{ xblock_id }}_content" aria-labeledby="oa_step_title_peer">
<span class="icon fa fa-caret-down" aria-hidden="false"/>
</button>
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span id="oa_step_status_peer" class="step__status__value">
<span class="copy">
{% with review_num_string=review_num|stringformat:"s" must_grade_string=must_grade|stringformat:"s" %}
{% blocktrans with review_number='<span class="step__status__number--current">'|safe|add:review_num_string|add:"</span>"|safe num_must_grade='<span class="step__status__value--required">'|safe|add:must_grade_string|add:"</span>"|safe %}
......
openassessment/templates/openassessmentblock/response/oa_response.html
......@@ -7,38 +7,45 @@
{% endblock %}
<header class="step__header ui-slidable__control">
<h4 class="step__title">
<span>
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_response_{{ xblock_id }}" aria-controls="oa_response_{{ xblock_id }}_content">
<button class="ui-slidable" aria-expanded="true" id="oa_response_{{ xblock_id }}" aria-controls="oa_response_{{ xblock_id }}_content" aria-labeledby="oa_step_title_response">
<span class="icon fa fa-caret-down" aria-hidden="false"/>
</button>
{% endblock %}
</span>
<span>
<h4 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">{% trans "Your Response" %}</span>
{% if submission_start %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "available August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with start_date=submission_start|timezone:"UTC"|date:"c" time_until=submission_start|timeuntil %}
<span class="date ora-datetime" data-datetime="{{ start_date }}" data-string="available {date} (in {{ time_until }})" data-timezone="{{ user_timezone }}" data-language="{{ user_language }}"></span>
{% endblocktrans %}
</span>
{% elif submission_due %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "due August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with due_date=submission_due|timezone:"UTC"|date:"c" time_until=submission_due|timeuntil %}
<span class="date ora-datetime" data-datetime="{{ due_date }}" data-string="due {date} (in {{ time_until }})" data-timezone="{{ user_timezone }}" data-language="{{ user_language }}"></span>
{% endblocktrans %}
</span>
{% endif %}
</span>
</button>
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span class="copy">{% trans "In Progress" %}</span>
<span id="oa_step_title_response" class="step__label" aria-describedby="oa_step_status_response oa_step_deadline_response">{% trans "Your Response" %}</span>
</span>
</h4>
</span>
{% if submission_start %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "available August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with start_date=submission_start|timezone:"UTC"|date:"c" time_until=submission_start|timeuntil %}
<span id="oa_step_deadline_response" class="date ora-datetime" data-datetime="{{ start_date }}" data-string="available {date} (in {{ time_until }})" data-timezone="{{ user_timezone }}" data-language="{{ user_language }}"></span>
{% endblocktrans %}
</span>
{% elif submission_due %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "due August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with due_date=submission_due|timezone:"UTC"|date:"c" time_until=submission_due|timeuntil %}
<span id="oa_step_deadline_response" class="date ora-datetime" data-datetime="{{ due_date }}" data-string="due {date} (in {{ time_until }})" data-timezone="{{ user_timezone }}" data-language="{{ user_language }}"></span>
{% endblocktrans %}
</span>
{% endif %}
{% block title %}
<span class="step__status">
<span id="oa_step_status_response" class="step__status__value">
<span class="copy">{% trans "In Progress" %}</span>
</span>
{% endblock %}
</h4>
</span>
{% endblock %}
</header>
{% block body %}
......@@ -50,7 +57,7 @@
{% if submission_due %}
{% trans "You can save your progress and return to complete your response at any time before the due date" %}
(<span class="step__deadline">
<span class="date ora-datetime" data-datetime="{{ submission_due|timezone:'UTC'|date:'c' }}" data-timezone="{{ user_timezone }}" data-format="longDateTime" data-language="{{ user_language }}"></span>
<span id="oa_step_deadline_response" class="date ora-datetime" data-datetime="{{ submission_due|timezone:'UTC'|date:'c' }}" data-timezone="{{ user_timezone }}" data-format="longDateTime" data-language="{{ user_language }}"></span>
</span>).
{% else %}
{% trans "You can save your progress and return to complete your response at any time." %}
......
openassessment/templates/openassessmentblock/response/oa_response_cancelled.html
......@@ -9,12 +9,14 @@
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" id="oa_response_{{ xblock_id }}" aria-controls="oa_response_{{ xblock_id }}_content">
<button class="ui-slidable" aria-expanded="true" id="oa_response_{{ xblock_id }}" aria-controls="oa_response_{{ xblock_id }}_content" aria-labeledby="oa_step_title_response">
<span class="icon fa fa-caret-down" aria-hidden="false"/>
</button>
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span id="oa_step_status_response" class="step__status__value">
<span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<span class="copy">{% trans "Cancelled" %}</span>
</span>
......
openassessment/templates/openassessmentblock/response/oa_response_closed.html
......@@ -7,12 +7,14 @@
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" id="oa_response_{{ xblock_id }}" aria-controls="oa_response_{{ xblock_id }}_content">
<button class="ui-slidable" aria-expanded="true" id="oa_response_{{ xblock_id }}" aria-controls="oa_response_{{ xblock_id }}_content" aria-labeledby="oa_step_title_response">
<span class="icon fa fa-caret-down" aria-hidden="false"/>
</button>
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span id="oa_step_status_response" class="step__status__value">
<span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<span class="copy">{% trans "Incomplete" %}</span>
</span>
......
openassessment/templates/openassessmentblock/response/oa_response_graded.html
......@@ -8,12 +8,14 @@
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" id="oa_response_{{ xblock_id }}" aria-controls="oa_response_{{ xblock_id }}_content">
<button class="ui-slidable" aria-expanded="true" id="oa_response_{{ xblock_id }}" aria-controls="oa_response_{{ xblock_id }}_content" aria-labeledby="oa_step_title_response">
<span class="icon fa fa-caret-down" aria-hidden="false"/>
</button>
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span id="oa_step_status_response" class="step__status__value">
<span class="icon fa fa-check" aria-hidden="true"></span>
<span class="copy">{% trans "Complete" %}</span>
</span>
......
openassessment/templates/openassessmentblock/response/oa_response_submitted.html
......@@ -8,12 +8,14 @@
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" id="oa_response_{{ xblock_id }}" aria-controls="oa_response_{{ xblock_id }}_content">
<button class="ui-slidable" aria-expanded="true" id="oa_response_{{ xblock_id }}" aria-controls="oa_response_{{ xblock_id }}_content" aria-labeledby="oa_step_title_response">
<span class="icon fa fa-caret-down" aria-hidden="false"/>
</button>
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span id="oa_step_status_response" class="step__status__value">
<span class="icon fa fa-check" aria-hidden="true"></span>
<span class="copy">{% trans "Complete" %}</span>
</span>
......
openassessment/templates/openassessmentblock/response/oa_response_unavailable.html
......@@ -13,7 +13,7 @@
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span id="oa_step_status_response" class="step__status__value">
<span class="copy">{% trans "Not Available" %}</span>
</span>
</span>
......
openassessment/templates/openassessmentblock/self/oa_self_assessment.html
......@@ -8,39 +8,45 @@
{% endblock %}
<header class="step__header ui-slidable__control">
<h4 class="step__title">
<span>
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_self_{{ xblock_id }}" aria-controls="oa_self_{{ xblock_id }}_content">
<button class="ui-slidable" aria-expanded="true" id="oa_self_{{ xblock_id }}" aria-controls="oa_self_{{ xblock_id }}_content" aria-labeledby="oa_step_title_self">
<span class="icon fa fa-caret-down" aria-hidden="false"/>
</button>
{% endblock %}
</span>
<span>
<h4 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">{% trans "Assess Your Response" %}</span>
{% if self_start %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "available August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with start_date=self_start|timezone:"UTC"|date:"c" time_until=self_start|timeuntil %}
<span class="date ora-datetime" data-datetime="{{ start_date }}" data-string="available {date} (in {{ time_until }})" data-timezone="{{ user_timezone }}" data-language="{{ user_language }}"></span>
{% endblocktrans %}
</span>
{% elif self_due %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "due August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with due_date=self_due|timezone:"UTC"|date:"c" time_until=self_due|timeuntil %}
<span class="date ora-datetime" data-datetime="{{ due_date }}" data-string="due {date} (in {{ time_until }})" data-timezone="{{ user_timezone }}" data-language="{{ user_language }}"></span>
{% endblocktrans %}
</span>
{% endif %}
<span id="oa_step_title_self" class="step__label" aria-describedby="oa_step_status_self oa_step_deadline_self">{% trans "Assess Your Response" %}</span>
</span>
</button>
</h4>
</span>
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span class="copy">{% trans "In Progress" %}</span>
</span>
</span>
{% endblock %}
</h4>
{% if self_start %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "available August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with start_date=self_start|timezone:"UTC"|date:"c" time_until=self_start|timeuntil %}
<span id="oa_step_deadline_self" class="date ora-datetime" data-datetime="{{ start_date }}" data-string="available {date} (in {{ time_until }})" data-timezone="{{ user_timezone }}" data-language="{{ user_language }}"></span>
{% endblocktrans %}
</span>
{% elif self_due %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "due August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with due_date=self_due|timezone:"UTC"|date:"c" time_until=self_due|timeuntil %}
<span id="oa_step_deadline_self" class="date ora-datetime" data-datetime="{{ due_date }}" data-string="due {date} (in {{ time_until }})" data-timezone="{{ user_timezone }}" data-language="{{ user_language }}"></span>
{% endblocktrans %}
</span>
{% endif %}
{% block title %}
<span class="step__status">
<span id="oa_step_status_self" class="step__status__value">
<span class="copy">{% trans "In Progress" %}</span>
</span>
</span>
{% endblock %}
</header>
{% block body %}
......
openassessment/templates/openassessmentblock/self/oa_self_cancelled.html
......@@ -10,12 +10,12 @@
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled>
<button class="ui-slidable" aria-expanded="false" aria-labeledby="oa_step_title_self" disabled/>
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span id="oa_step_status_self" class="step__status__value">
<span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<span class="copy">
{% trans "Cancelled" %}
......
openassessment/templates/openassessmentblock/self/oa_self_closed.html
......@@ -8,12 +8,14 @@
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_self_{{ xblock_id }}" aria-controls="oa_self_{{ xblock_id }}_content">
<button class="ui-slidable" aria-expanded="true" id="oa_self_{{ xblock_id }}" aria-controls="oa_self_{{ xblock_id }}_content" aria-labeledby="oa_step_title_self">
<span class="icon fa fa-caret-down" aria-hidden="false"/>
</button>
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span id="oa_step_status_self" class="step__status__value">
<span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<span class="copy">{% trans "Incomplete" %}</span>
</span>
......
openassessment/templates/openassessmentblock/self/oa_self_complete.html
......@@ -8,12 +8,12 @@
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled>
<button class="ui-slidable" aria-expanded="false" aria-labeledby="oa_step_title_self" disabled/>
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span id="oa_step_status_self" class="step__status__value">
<span class="icon fa fa-check" aria-hidden="true"></span>
<span class="copy">{% trans "Complete" %}</span>
</span>
......
openassessment/templates/openassessmentblock/self/oa_self_unavailable.html
......@@ -8,12 +8,12 @@
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" disabled>
<button class="ui-slidable" aria-expanded="false" aria-labeledby="oa_step_title_self" disabled/>
{% endblock %}
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span id="oa_step_status_self" class="step__status__value">
<span class="copy">{% trans "Not Available" %}</span>
</span>
</span>
......
openassessment/templates/openassessmentblock/staff/oa_staff_grade.html
......@@ -5,24 +5,23 @@
<h4 class="step__title">
<button class="ui-slidable" {{ button_active }}
{% if message_title %}
id="oa_staff_grade_{{ xblock_id }}" aria-controls="oa_staff_grade_{{ xblock_id }}_content"
id="oa_staff_grade_{{ xblock_id }}" aria-controls="oa_staff_grade_{{ xblock_id }}_content" aria-describedby="oa_step_status oa_step_deadline"
{% endif %}
>
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">{% trans "Staff Grade" %} </span>
</span>
</button>
<span class="step__status">
<span class="step__status__value">
{% if icon_class %}
<span class="icon fa {{ icon_class }}" aria-hidden="true"></span>
{% endif %}
<span class="copy">{{ status_value }}</span>
</span>
</span>
</button>
</h4>
<span class="step__status">
<span id="oa_step_status" class="step__status__value">
{% if icon_class %}
<span class="icon fa {{ icon_class }}" aria-hidden="true"></span>
{% endif %}
<span class="copy">{{ status_value }}</span>
</span>
</span>
</header>
{% if message_title %}
......
openassessment/templates/openassessmentblock/student_training/student_training.html
......@@ -9,44 +9,43 @@
<header class="step__header ui-slidable__control">
<h4 class="step__title">
{% block button %}
<button class="ui-slidable" aria-expanded="true" id="oa_training_{{ xblock_id }}" aria-controls="oa_training_{{ xblock_id }}_content">
<button class="ui-slidable" aria-expanded="true" id="oa_training_{{ xblock_id }}" aria-controls="oa_training_{{ xblock_id }}_content" aria-describedby="oa_step_status oa_step_deadline">
{% endblock %}
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">{% trans "Learn to Assess Responses" %}</span>
{% if training_start %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "available August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with start_date=training_start|timezone:"UTC"|date:"c" time_until=training_start|timeuntil %}
<span class="date ora-datetime" data-datetime="{{ start_date }}" data-string="available {date} (in {{ time_until }})" data-timezone="{{ user_timezone }}" data-language="{{ user_language }}"></span>
{% endblocktrans %}
</span>
{% elif training_due %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "due August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with due_date=training_due|timezone:"UTC"|date:"c" time_until=training_due|timeuntil %}
<span class="date ora-datetime" data-datetime="{{ due_date }}" data-string="due {date} (in {{ time_until }})" data-timezone="{{ user_timezone }}" data-language="{{ user_language }}"></span>
{% endblocktrans %}
</span>
</span>
{% endif %}
</span>
</button>
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span class="copy">
{% with training_num_current_string=training_num_current|stringformat:"s" training_num_available_string=training_num_available|stringformat:"s" %}
{% blocktrans with current_progress_num='<span class="step__status__number--current">'|safe|add:training_num_current_string|add:'</span>'|safe training_available_num='<span class="step__status__value--required">'|safe|add:training_num_available_string|add:'</span>'|safe %}
In Progress ({{ current_progress_num }} of {{ training_available_num }})
{% endblocktrans %}
{% endwith %}
</span>
</span>
</span>
{% endblock %}
</h4>
{% block title %}
<span class="step__status">
<span id="oa_step_status" class="step__status__value">
<span class="copy">
{% with training_num_current_string=training_num_current|stringformat:"s" training_num_available_string=training_num_available|stringformat:"s" %}
{% blocktrans with current_progress_num='<span class="step__status__number--current">'|safe|add:training_num_current_string|add:'</span>'|safe training_available_num='<span class="step__status__value--required">'|safe|add:training_num_available_string|add:'</span>'|safe %}
In Progress ({{ current_progress_num }} of {{ training_available_num }})
{% endblocktrans %}
{% endwith %}
</span>
</span>
</span>
{% endblock %}
{% if training_start %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "available August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with start_date=training_start|timezone:"UTC"|date:"c" time_until=training_start|timeuntil %}
<span id="oa_step_deadline" class="date ora-datetime" data-datetime="{{ start_date }}" data-string="available {date} (in {{ time_until }})" data-timezone="{{ user_timezone }}" data-language="{{ user_language }}"></span>
{% endblocktrans %}
</span>
{% elif training_due %}
<span class="step__deadline">
{# Translators: This string displays a date to the user, then tells them the time until that date. Example: "due August 13th, 2014 (in 5 days and 45 minutes)" #}
{% blocktrans with due_date=training_due|timezone:"UTC"|date:"c" time_until=training_due|timeuntil %}
<span id="oa_step_deadline" class="date ora-datetime" data-datetime="{{ due_date }}" data-string="due {date} (in {{ time_until }})" data-timezone="{{ user_timezone }}" data-language="{{ user_language }}"></span>
{% endblocktrans %}
</span>
</span>
{% endif %}
</header>
{% block body %}
......
openassessment/templates/openassessmentblock/student_training/student_training_closed.html
......@@ -12,7 +12,7 @@
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span id="oa_step_status" class="step__status__value">
<span class="icon fa fa-exclamation-triangle" aria-hidden="true"></span>
<span class="copy">{% trans "Incomplete" %}</span>
</span>
......
openassessment/templates/openassessmentblock/student_training/student_training_complete.html
......@@ -12,7 +12,7 @@
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span id="oa_step_status" class="step__status__value">
<span class="icon fa fa-check" aria-hidden="true"></span>
<span class="copy">{% trans "Complete" %}</span>
</span>
......
openassessment/templates/openassessmentblock/student_training/student_training_error.html
......@@ -7,7 +7,7 @@
{% endblock %}
{% block button %}
<button class="ui-slidable" aria-expanded="false" id="oa_training_{{ xblock_id }}" aria-controls="oa_training_{{ xblock_id }}_content">
<button class="ui-slidable" aria-expanded="false" id="oa_training_{{ xblock_id }}" aria-controls="oa_training_{{ xblock_id }}_content" aria-describedby="oa_step_status oa_step_deadline">
{% endblock %}
{% block body %}
......
openassessment/templates/openassessmentblock/student_training/student_training_unavailable.html
......@@ -12,7 +12,7 @@
{% block title %}
<span class="step__status">
<span class="step__status__value">
<span id="oa_step_status" class="step__status__value">
<span class="copy">{% trans "Not Available" %}</span>
</span>
</span>
......
openassessment/xblock/static/css/openassessment-ltr.css
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/css/openassessment-rtl.css
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/sass/oa/utilities/_shame.scss
......@@ -138,6 +138,7 @@
.step--grade .step__title {
display: inline;
width: 100% !important;
}
......
openassessment/xblock/static/sass/oa/views/_oa-base.scss
......@@ -94,7 +94,7 @@
// step title
.step__title {
display: block;
display: inline;
margin-bottom: ($baseline-v/2);
width: 100%;
margin-bottom: 0;
......@@ -186,21 +186,21 @@
margin-top: 0;
@include float(right);
position: relative;
top: -($baseline-v/2) - 2;
top: -($baseline-v) - 12;
}
@include media($bp-dl) {
margin-top: 0;
@include float(right);
position: relative;
top: -($baseline-v/2) - 2;
top: -($baseline-v) - 12;
}
@include media($bp-dx) {
margin-top: 0;
@include float(right);
position: relative;
top: -($baseline-v/2) - 2;
top: -($baseline-v) - 12;
}
.step__status__value {
......@@ -483,7 +483,7 @@
@extend %btn-reset;
background: none;
border-radius: ($baseline-v/4);
padding: 0px;
padding: 5px;
&:active, &:focus:not(:disabled), &:hover:not(:disabled) {
background: none;
......@@ -808,7 +808,7 @@
}
.step__label, .grade__value {
display: inline-block;
display: inline;
vertical-align: middle;
}
......
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