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 154 additions and 93 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_assessment.html
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__instruction"> <div class="step__instruction">
<p>Please read and assess the following response from one of your peers.</p> <p>Please read and assess the following response from one of your peers.</p>
</div> </div>
...@@ -58,14 +59,16 @@ ...@@ -58,14 +59,16 @@
<form id="peer-assessment--001__assessment" class="peer-assessment__assessment" method="post"> <form id="peer-assessment--001__assessment" class="peer-assessment__assessment" method="post">
<fieldset class="assessment__fields"> <fieldset class="assessment__fields">
<ol class="list list--fields assessment__rubric"> <ol class="list list--fields assessment__rubric">
{% for criterion in rubric_criteria %} {% for criterion in rubric_criteria %}
<!-- individual rubric question (radio-based choice) --> <li class="field field--radio is--required assessment__rubric__question ui-toggle-visibility is--collapsed" id="assessment__rubric__question--{{ criterion.name }}">
<li class="field field--radio is--required assessment__rubric__question" id="assessment__rubric__question--{{ criterion.name }}"> <h4 class="question__title ui-toggle-visibility__control">
<h4 class="question__title">
<i class="ico icon-caret-right"></i> <i class="ico icon-caret-right"></i>
<span class="question__title__copy">{{ criterion.prompt }}</span> <span class="ui-toggle-visibility__control__copy question__title__copy">{{ criterion.prompt }}</span>
<span class="label--required sr">* (Required)</span> <span class="label--required sr">* (Required)</span>
</h4> </h4>
<div class="ui-toggle-visibility__content">
<ol class="question__answers"> <ol class="question__answers">
{% for option in criterion.options %} {% for option in criterion.options %}
<li class="answer"> <li class="answer">
...@@ -86,15 +89,18 @@ ...@@ -86,15 +89,18 @@
</li> </li>
{% endfor %} {% endfor %}
</ol> </ol>
</div>
</li> </li>
{% endfor %} {% endfor %}
<li class="wrapper--input field field--textarea assessment__rubric__question assessment__rubric__question--feedback" id="assessment__rubric__question--feedback"> <li class="wrapper--input field field--textarea assessment__rubric__question assessment__rubric__question--feedback ui-toggle-visibility" id="assessment__rubric__question--feedback">
<label class="question__title" for="assessment__rubric__question--feedback__value"> <label class="question__title" for="assessment__rubric__question--feedback__value ui-toggle-visibility__control">
<i class="ico icon-caret-right"></i> <i class="ico icon-caret-right"></i>
<span class="question__title__copy">Please provide additional feedback for this response.</span> <span class="question__title__copy">Please provide additional feedback for this response.</span>
</label> </label>
<textarea id="assessment__rubric__question--feedback__value" placeholder="I felt this response was..."></textarea> <div class="ui-toggle-visibility__content">
<textarea class="question__answers" id="assessment__rubric__question--feedback__value" placeholder="I felt this response was..."></textarea>
</div>
</li> </li>
</ol> </ol>
</fieldset> </fieldset>
...@@ -115,5 +121,6 @@ ...@@ -115,5 +121,6 @@
</ul> </ul>
</div> </div>
</div> </div>
</div>
{% endblock %} {% endblock %}
</li> </li>
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,6 +26,7 @@ ...@@ -26,6 +26,7 @@
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__instruction"> <div class="step__instruction">
<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> <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>
...@@ -61,5 +62,6 @@ ...@@ -61,5 +62,6 @@
</ul> </ul>
</div> </div>
</div> </div>
</div>
{% endblock %} {% endblock %}
</li> </li>
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="wrapper--step__content">
<div class="step__instruction"> <div class="step__instruction">
<p>You did not complete this step before the problem's due date.</p> <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,6 +16,7 @@ ...@@ -16,6 +16,7 @@
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__content"> <div class="step__content">
<article class="submission__answer__display"> <article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3> <h3 class="submission__answer__display__title">Your Submitted Response</h3>
...@@ -33,6 +34,7 @@ ...@@ -33,6 +34,7 @@
{% 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">
<i class="ico icon-caret-right"></i>
<span class="question__title__copy">{{ criterion.name }}</span> <span class="question__title__copy">{{ criterion.name }}</span>
<span class="question__score"> <span class="question__score">
...@@ -96,5 +98,6 @@ ...@@ -96,5 +98,6 @@
</ul> </ul>
</form> </form>
</div> </div>
</div>
</div> </div>
{% endblock %} {% endblock %}
apps/openassessment/templates/openassessmentblock/response/oa_response_submitted.html
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
{% block body %} {% block body %}
<div class="ui-toggle-visibility__content"> <div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__content"> <div class="step__content">
<article class="submission__answer__display"> <article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3> <h3 class="submission__answer__display__title">Your Submitted Response</h3>
...@@ -25,5 +26,6 @@ ...@@ -25,5 +26,6 @@
</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