Skip to content

E
edx-ora2
Commit 8378745a by Brian Talbot
Options

Merge pull request #105 from edx/talbs/ui-transitions 

WIP: UI Transitions
parents 8db01ff1 90982173
Showing with 247 additions and 193 deletions
apps/openassessment/templates/openassessmentblock/oa_base.html
...@@ -43,7 +43,26 @@ ...@@ -43,7 +43,26 @@
<ol class="openassessment__steps" id="openassessment__steps"> <ol class="openassessment__steps" id="openassessment__steps">
{% for assessment in rubric_assessments %} {% for assessment in rubric_assessments %}
<li id="{{ assessment.class_id }}">{{ assessment.title }}</li> <li id="{{ assessment.class_id }}" class="openassessment__steps__step is--loading">
<header class="step__header">
<h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">{{ assessment.title }}</span>
</span>
</h2>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico icon-cog icon-spin"></i>
<span class="copy">Loading</span>
</span>
</span>
</span>
</header>
</li>
{% endfor %} {% endfor %}
</ol> </ol>
</div> </div>
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_closed.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %} {% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--collapsed"> <li id="openassessment__peer-assessment"class="openassessment__steps__step step--peer-assessment is--collapsed">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_waiting.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %} {% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--collapsed"> <li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment is--collapsed">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
......
apps/openassessment/templates/openassessmentblock/response/oa_response.html
...@@ -26,39 +26,41 @@ ...@@ -26,39 +26,41 @@
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-toggle-visibility__content">
<div class="step__instruction"> <div class="wrapper--step__content">
<p>Please provide your response to the following question. 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> <div class="step__instruction">
</div> <p>Please provide your response to the following question. 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>
</div>
<div class="step__content"> <div class="step__content">
<!-- @talbs: This is some more ugly placeholder stuff that you can replace --> <!-- @talbs: This is some more ugly placeholder stuff that you can replace -->
<div id="response__save_status">{{ save_status }}</div> <div id="response__save_status">{{ save_status }}</div>
<form id="response__submission" class="response__submission"> <form id="response__submission" class="response__submission">
<ol class="list list--fields response__submission__content"> <ol class="list list--fields response__submission__content">
<li class="field field--textarea submission__answer" id="submission__answer"> <li class="field field--textarea submission__answer" id="submission__answer">
<label class="sr" for="submission__answer__value">Please provide your response to the question.</label> <label class="sr" for="submission__answer__value">Please provide your response to the question.</label>
<textarea id="submission__answer__value" placeholder="">{{ saved_response }}</textarea> <textarea id="submission__answer__value" placeholder="">{{ saved_response }}</textarea>
</li> </li>
</ol> </ol>
<ul class="list list--actions response__submission__actions">
<li class="list--actions__item">
<button type="submit" id="submission__save" class="action action--save submission__save">Save Your Progress</button>
<span class="tip">You may continue to work on your response until you submit it.</span>
</li>
</ul>
</form>
</div>
<ul class="list list--actions response__submission__actions"> <div class="step__actions">
<ul class="list list--actions">
<li class="list--actions__item"> <li class="list--actions__item">
<button type="submit" id="submission__save" class="action action--save submission__save">Save Your Progress</button> <a aria-role="button" href="#" id="step--response__submit" class="action action--submit step--response__submit">
<span class="tip">You may continue to work on your response until you submit it.</span> <span class="copy">Submit your response and move to the next step</span>
<i class="ico icon-caret-right"></i>
</a>
</li> </li>
</ul> </ul>
</form> </div>
</div>
<div class="step__actions">
<ul class="list list--actions">
<li class="list--actions__item">
<a aria-role="button" href="#" id="step--response__submit" class="action action--submit step--response__submit">
<span class="copy">Submit your response and move to the next step</span>
<i class="ico icon-caret-right"></i>
</a>
</li>
</ul>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/response/oa_response_closed.html
...@@ -15,8 +15,10 @@ ...@@ -15,8 +15,10 @@
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-toggle-visibility__content">
<div class="step__instruction"> <div class="wrapper--step__content">
<p>You did not complete this step before the problem's due date.</p> <div class="step__instruction">
<p>You did not complete this step before the problem's due date.</p>
</div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
apps/openassessment/templates/openassessmentblock/response/oa_response_graded.html
...@@ -16,85 +16,88 @@ ...@@ -16,85 +16,88 @@
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-toggle-visibility__content">
<div class="step__content"> <div class="wrapper--step__content">
<article class="submission__answer__display"> <div class="step__content">
<h3 class="submission__answer__display__title">Your Submitted Response</h3> <article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
<div class="submission__answer__display__content"> <div class="submission__answer__display__content">
{{ student_submission.answer|linebreaks }} {{ student_submission.answer|linebreaks }}
</div> </div>
</article> </article>
<article class="submission__peer-evaluations"> <article class="submission__peer-evaluations">
<h3 class="submission__peer-evaluations__title">Peer Assessments of Your Response</h3> <h3 class="submission__peer-evaluations__title">Peer Assessments of Your Response</h3>
<ol class="list submission__peer-evaluations__questions"> <ol class="list submission__peer-evaluations__questions">
{% for criterion in rubric_criteria %} {% for criterion in rubric_criteria %}
{% with criterion_num=forloop.counter %} {% with criterion_num=forloop.counter %}
<li class="question question--{{ criterion_num }} ui-toggle-visibility"> <li class="question question--{{ criterion_num }} ui-toggle-visibility">
<h4 class="question__title ui-toggle-visibility__control"> <h4 class="question__title ui-toggle-visibility__control">
<span class="question__title__copy">{{ criterion.name }}</span> <i class="ico icon-caret-right"></i>
<span class="question__title__copy">{{ criterion.name }}</span>
<span class="question__score"> <span class="question__score">
<span class="label sr">Overall Question Score</span> <span class="label sr">Overall Question Score</span>
<span class="question__score__value">{{ criterion.median_score }}</span> <span class="question__score__value">{{ criterion.median_score }}</span>
<span class="label label--divider sr">out of</span> <span class="label label--divider sr">out of</span>
<span class="question__score__potential"> <span class="question__score__potential">
{{ criterion.total_value }} {{ criterion.total_value }}
<span class="unit">Points</span> <span class="unit">Points</span>
</span>
</span>
</h4>
<ul class="question__answers ui-toggle-visibility__content">
{% for assessment in peer_assessments %}
{% with peer_num=forloop.counter %}
{% for part in assessment.parts %}
{% if part.option.criterion.name == criterion.name %}
<li class="answer peer-assessment--{{ peer_num}}"
id="question--{{ criterion_num }}__answer-{{ peer_num }}">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Peer Assessor: </span>
<span class="value">Peer {{ peer_num }}</span>
</span>
<span class="answer__value">
<span class="label sr">Assessment: </span>
<span class="value">{{ part.option.name }}</span>
</span>
</h5>
<span class="answer__content">
{{ part.option.explanation }}
</span> </span>
</li> </span>
{% endif %} </h4>
{% endfor %}
{% endwith %}
{% endfor %}
</ul>
</li>
{% endwith %}
{% endfor %}
</ol>
</article>
<form id="submission__feeedback" class="submission__feeedback ui-toggle-visibility" method="post"> <ul class="question__answers ui-toggle-visibility__content">
<h3 class="submission__feeedback__title ui-toggle-visibility__control">Provide Feedback on Peer Assessments</h3> {% for assessment in peer_assessments %}
{% with peer_num=forloop.counter %}
{% for part in assessment.parts %}
{% if part.option.criterion.name == criterion.name %}
<li class="answer peer-assessment--{{ peer_num}}"
id="question--{{ criterion_num }}__answer-{{ peer_num }}">
<h5 class="answer__title">
<span class="answer__source">
<span class="label sr">Peer Assessor: </span>
<span class="value">Peer {{ peer_num }}</span>
</span>
<span class="answer__value">
<span class="label sr">Assessment: </span>
<span class="value">{{ part.option.name }}</span>
</span>
</h5>
<ol class="list list--fields submission__feeedback__content ui-toggle-visibility__content"> <span class="answer__content">
<li class="field field--textarea feedback__remarks" id="feedback__remarks"> {{ part.option.explanation }}
<label for="feedback__remarks__value">Please provide feedback on the score and comments you received from your peers.</label> </span>
<textarea id="feedback__remarks__value" placeholder="I feel the score and comments I received were..."></textarea> </li>
{% endif %}
{% endfor %}
{% endwith %}
{% endfor %}
</ul>
</li> </li>
</ol> {% endwith %}
{% endfor %}
</ol>
</article>
<ul class="list list--actions submission__feeedback__actions"> <form id="submission__feeedback" class="submission__feeedback ui-toggle-visibility" method="post">
<li class="list--actions__item"> <h3 class="submission__feeedback__title ui-toggle-visibility__control">Provide Feedback on Peer Assessments</h3>
<button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback on Peer Assessments</button>
</li> <ol class="list list--fields submission__feeedback__content ui-toggle-visibility__content">
</ul> <li class="field field--textarea feedback__remarks" id="feedback__remarks">
</form> <label for="feedback__remarks__value">Please provide feedback on the score and comments you received from your peers.</label>
<textarea id="feedback__remarks__value" placeholder="I feel the score and comments I received were..."></textarea>
</li>
</ol>
<ul class="list list--actions submission__feeedback__actions">
<li class="list--actions__item">
<button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback on Peer Assessments</button>
</li>
</ul>
</form>
</div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
apps/openassessment/templates/openassessmentblock/response/oa_response_submitted.html
...@@ -16,14 +16,16 @@ ...@@ -16,14 +16,16 @@
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-toggle-visibility__content">
<div class="step__content"> <div class="wrapper--step__content">
<article class="submission__answer__display"> <div class="step__content">
<h3 class="submission__answer__display__title">Your Submitted Response</h3> <article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
<div class="submission__answer__display__content"> <div class="submission__answer__display__content">
{{ student_submission.answer|linebreaks }} {{ student_submission.answer|linebreaks }}
</div> </div>
</article> </article>
</div>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}
apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html
{% load i18n %} {% load i18n %}
{% block list_item %} {% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment"> <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility">
{% endblock %} {% endblock %}
<span class="system__element" id="self_submission_uuid"> <span class="system__element" id="self_submission_uuid">
{{ self_submission.uuid }} {{ self_submission.uuid }}
......
apps/openassessment/templates/openassessmentblock/self/oa_self_closed.html
{% extends "openassessmentblock/self/oa_self_assessment.html" %} {% extends "openassessmentblock/self/oa_self_assessment.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility is--collapsed"> <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--collapsed">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
......
apps/openassessment/templates/openassessmentblock/self/oa_self_complete.html
{% extends "openassessmentblock/self/oa_self_assessment.html" %} {% extends "openassessmentblock/self/oa_self_assessment.html" %}
{% block list_item %} {% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility is--collapsed is--complete"> <li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment is--collapsed is--complete">
{% endblock %} {% endblock %}
{% block title %} {% block title %}
......
apps/openassessment/xblock/static/css/openassessment.css
This source diff could not be displayed because it is too large. You can view the blob instead.
apps/openassessment/xblock/static/js/src/design.js deleted 100644 → 0
// openassessment: design-focused js
// ====================
// NOTES:
// * this is merely for UI behavior and any work here should be folded into production-level JavaScript files and methods.
function $linkNewWindow(e) {
e.preventDefault();
window.open($(e.target).attr('href'));
}
function $toggleExpansion(e) {
e.preventDefault();
$(e.target).closest('.ui-toggle-visibility').toggleClass('is--collapsed');
}
// --------------------
jQuery(document).ready(function($) {
// collapse/expand UI
$('.ui-toggle-visibility ui-toggle-visibility__control').bind('click', toggleExpansion);
// general link management - new window/tab
$('a[data-rel="external"]').bind('click', $linkNewWindow);
});
apps/openassessment/xblock/static/js/src/design.min.js deleted 100644 → 0
// openassessment: design-focused js
// ====================
// NOTES:
// * this is merely for UI behavior and any work here should be folded into production-level JavaScript files and methods.
function $linkNewWindow(e){e.preventDefault();window.open($(e.target).attr("href"))}function $toggleExpansion(e){e.preventDefault();$(e.target).closest(".ui-toggle-visibility").toggleClass("is--collapsed")}jQuery(document).ready(function(e){e(".ui-toggle-visibility ui-toggle-visibility__control").bind("click",toggleExpansion);e('a[data-rel="external"]').bind("click",$linkNewWindow)});
\ No newline at end of file
apps/openassessment/xblock/static/js/src/oa_base.js
...@@ -262,6 +262,12 @@ OpenAssessment.BaseUI.prototype = { ...@@ -262,6 +262,12 @@ OpenAssessment.BaseUI.prototype = {
} }
}; };
/* collapse/expand UI functionality */
function $toggleExpansion(e) {
e.preventDefault();
$(e.target).closest('.ui-toggle-visibility').toggleClass('is--collapsed');
}
/* XBlock JavaScript entry point for OpenAssessmentXBlock. */ /* XBlock JavaScript entry point for OpenAssessmentXBlock. */
function OpenAssessmentBlock(runtime, element) { function OpenAssessmentBlock(runtime, element) {
/** /**
...@@ -271,5 +277,8 @@ function OpenAssessmentBlock(runtime, element) { ...@@ -271,5 +277,8 @@ function OpenAssessmentBlock(runtime, element) {
var server = new OpenAssessment.Server(runtime, element); var server = new OpenAssessment.Server(runtime, element);
var ui = new OpenAssessment.BaseUI(runtime, element, server); var ui = new OpenAssessment.BaseUI(runtime, element, server);
ui.load(); ui.load();
/* TODO: refactor this event based on workflow and logic steps */
$(document).on('click', '.ui-toggle-visibility .ui-toggle-visibility__control', $toggleExpansion);
}); });
} }
apps/openassessment/xblock/static/sass/oa/elements/_navigation.scss
...@@ -3,3 +3,64 @@ ...@@ -3,3 +3,64 @@
// NOTES: // NOTES:
// * openassessment-specific navigation UI // * openassessment-specific navigation UI
// --------------------
// collapse/expand
// --------------------
.ui-toggle-visibility {
// control to toggle
.ui-toggle-visibility__control {
@extend %fake-link;
color: $action-primary-color;
text-decoration: none;
// optional icon
.ico, .ui-toggle-visibility__control__copy {
display: inline-block;
vertical-align: middle;
}
.ico {
@include transition(all $tmg-f2 ease-in-out 0s);
margin-right: ($baseline-h/8);
}
&:hover, &:focus {
color: $action-primary-color-focus;
}
&:active, &.is--current {
color: $action-primary-color-active;
}
}
// item being toggled
.ui-toggle-visibility__content {
@include transition(opacity $tmg-f1 ease-in 0, max-height $tmg-f2 ease-in 0);
@extend %trans-opacity;
max-height: ($baseline-v*2000);
overflow: auto;
opacity: 1.0;
padding-left: ($baseline-h/20);
padding-right: ($baseline-h/20);
}
// STATE: is collapsed
&.is--collapsed {
.ui-toggle-visibility__control .ico {
@include transform(rotate(-90deg));
@include transform-origin(50% 50%);
}
// item being toggled
.ui-toggle-visibility__content {
@include transition(opacity $tmg-f2 ease-in 0, max-height $tmg-f1 ease-in 0);
@extend %trans-opacity;
max-height: 0;
overflow: hidden;
opacity: 0.0;
}
}
}
apps/openassessment/xblock/static/sass/oa/utilities/_extends.scss
...@@ -42,13 +42,12 @@ ...@@ -42,13 +42,12 @@
// rubric question // rubric question
%ui-rubric-question { %ui-rubric-question {
@include clearfix(); @include clearfix();
margin-bottom: $baseline-v; margin-bottom: ($baseline-v/2);
@extend %wipe-last-child; @extend %wipe-last-child;
.question__title { .question__title {
margin-bottom: $baseline-v;
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary; border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: ($baseline-v/4); padding-bottom: ($baseline-v/2);
.ico { .ico {
display: inline-block; display: inline-block;
...@@ -60,12 +59,13 @@ ...@@ -60,12 +59,13 @@
.question__title__copy { .question__title__copy {
@extend %hd-4; @extend %hd-4;
@extend %t-weight3; @extend %t-weight3;
color: $heading-primary-color;
} }
} }
// rubric answers // rubric answers
%ui-rubric-answers { %ui-rubric-answers {
margin-top: $baseline-v;
margin-bottom: $baseline-v;
.answer { .answer {
@include row(); @include row();
......
apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss
...@@ -54,29 +54,8 @@ ...@@ -54,29 +54,8 @@
.step__header { .step__header {
@extend %trans-opacity; @extend %trans-opacity;
@include row(); @include row();
margin-bottom: $baseline-v;
opacity: 1.0; opacity: 1.0;
@include media($bp-ds) {
border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: ($baseline-v/1.5);
}
@include media($bp-dm) {
border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: ($baseline-v/1.5);
}
@include media($bp-dl) {
border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: ($baseline-v/1.5);
}
@include media($bp-dx) {
border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: ($baseline-v/1.5);
}
.step__deadline { .step__deadline {
color: $color-focused; color: $color-focused;
} }
...@@ -146,13 +125,13 @@ ...@@ -146,13 +125,13 @@
.step__status { .step__status {
.step__status__value { .step__status__value {
display: block;
border-radius: ($baseline-v/5); border-radius: ($baseline-v/5);
padding: ($baseline-v/4) ($baseline-h/4); padding: ($baseline-v/4) ($baseline-h/4);
background: $color-focused; background: $color-focused;
color: $white-t; color: $white-t;
@include media($bp-m) { @include media($bp-m) {
display: block;
margin-top: ($baseline-v/2); margin-top: ($baseline-v/2);
} }
} }
...@@ -212,11 +191,9 @@ ...@@ -212,11 +191,9 @@
@extend %text-sr; @extend %text-sr;
} }
// STATE: default/visible/expanded // step content wrapper
.step__instruction, .step__content, .step__actions { .wrapper--step__content {
display: block; margin-top: $baseline-v;
visibility: visible;
opacity: 1.0;
} }
// step instructions // step instructions
...@@ -257,6 +234,34 @@ ...@@ -257,6 +234,34 @@
} }
} }
// STATE: step is loading
&.is--loading {
opacity: 0.3;
.step__header {
@include media($bp-ds) {
border-bottom: none;
padding-bottom: 0;
}
@include media($bp-dm) {
border-bottom: none;
padding-bottom: 0;
}
@include media($bp-dl) {
border-bottom: none;
padding-bottom: 0;
}
@include media($bp-dx) {
border-bottom: none;
padding-bottom: 0;
}
}
}
// STATE: step is collapsed (not focused on) // STATE: step is collapsed (not focused on)
&.is--collapsed { &.is--collapsed {
...@@ -302,21 +307,6 @@ ...@@ -302,21 +307,6 @@
.step__counter:before { .step__counter:before {
border: 1px solid rgba($heading-color, 0.5); border: 1px solid rgba($heading-color, 0.5);
} }
.step__instruction, .step__content, .step__actions {
@extend %trans-opacity;
display: none;
visibility: hidden;
opacity: 0.0;
}
}
// STATE: step is expanded (focused)
&.is--expanded {
.step__status__value {
background: $color-focused;
}
} }
// STATE: step is incomplete // STATE: step is incomplete
...@@ -883,7 +873,6 @@ ...@@ -883,7 +873,6 @@
@extend %hd-4; @extend %hd-4;
@extend %t-weight3; @extend %t-weight3;
float: left; float: left;
color: $heading-secondary-color;
} }
.question__score { .question__score {
......
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