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 @@
<ol class="openassessment__steps" id="openassessment__steps">
{% 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 %}
</ol>
</div>
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_assessment.html
......@@ -29,6 +29,7 @@
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__instruction">
<p>Please read and assess the following response from one of your peers.</p>
</div>
......@@ -58,14 +59,16 @@
<form id="peer-assessment--001__assessment" class="peer-assessment__assessment" method="post">
<fieldset class="assessment__fields">
<ol class="list list--fields assessment__rubric">
{% for criterion in rubric_criteria %}
<!-- individual rubric question (radio-based choice) -->
<li class="field field--radio is--required assessment__rubric__question" id="assessment__rubric__question--{{ criterion.name }}">
<h4 class="question__title">
<li class="field field--radio is--required assessment__rubric__question ui-toggle-visibility is--collapsed" id="assessment__rubric__question--{{ criterion.name }}">
<h4 class="question__title ui-toggle-visibility__control">
<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>
</h4>
<div class="ui-toggle-visibility__content">
<ol class="question__answers">
{% for option in criterion.options %}
<li class="answer">
......@@ -86,15 +89,18 @@
</li>
{% endfor %}
</ol>
</div>
</li>
{% endfor %}
<li class="wrapper--input field field--textarea assessment__rubric__question assessment__rubric__question--feedback" id="assessment__rubric__question--feedback">
<label class="question__title" for="assessment__rubric__question--feedback__value">
<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 ui-toggle-visibility__control">
<i class="ico icon-caret-right"></i>
<span class="question__title__copy">Please provide additional feedback for this response.</span>
</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>
</ol>
</fieldset>
......@@ -115,5 +121,6 @@
</ul>
</div>
</div>
</div>
{% endblock %}
</li>
apps/openassessment/templates/openassessmentblock/peer/oa_peer_closed.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% 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 %}
{% block title %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_waiting.html
{% extends "openassessmentblock/peer/oa_peer_assessment.html" %}
{% 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 %}
{% block title %}
......
apps/openassessment/templates/openassessmentblock/response/oa_response.html
......@@ -26,6 +26,7 @@
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<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>
</div>
......@@ -61,5 +62,6 @@
</ul>
</div>
</div>
</div>
{% endblock %}
</li>
apps/openassessment/templates/openassessmentblock/response/oa_response_closed.html
......@@ -15,8 +15,10 @@
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__instruction">
<p>You did not complete this step before the problem's due date.</p>
</div>
</div>
</div>
{% endblock %}
apps/openassessment/templates/openassessmentblock/response/oa_response_graded.html
......@@ -16,6 +16,7 @@
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__content">
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
......@@ -33,6 +34,7 @@
{% with criterion_num=forloop.counter %}
<li class="question question--{{ criterion_num }} ui-toggle-visibility">
<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__score">
......@@ -96,5 +98,6 @@
</ul>
</form>
</div>
</div>
</div>
{% endblock %}
apps/openassessment/templates/openassessmentblock/response/oa_response_submitted.html
......@@ -16,6 +16,7 @@
{% block body %}
<div class="ui-toggle-visibility__content">
<div class="wrapper--step__content">
<div class="step__content">
<article class="submission__answer__display">
<h3 class="submission__answer__display__title">Your Submitted Response</h3>
......@@ -25,5 +26,6 @@
</div>
</article>
</div>
</div>
</div>
{% endblock %}
apps/openassessment/templates/openassessmentblock/self/oa_self_assessment.html
{% load i18n %}
{% 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 %}
<span class="system__element" id="self_submission_uuid">
{{ self_submission.uuid }}
......
apps/openassessment/templates/openassessmentblock/self/oa_self_closed.html
{% extends "openassessmentblock/self/oa_self_assessment.html" %}
{% 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 %}
{% block title %}
......
apps/openassessment/templates/openassessmentblock/self/oa_self_complete.html
{% extends "openassessmentblock/self/oa_self_assessment.html" %}
{% 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 %}
{% 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 = {
}
};
/* collapse/expand UI functionality */
function $toggleExpansion(e) {
e.preventDefault();
$(e.target).closest('.ui-toggle-visibility').toggleClass('is--collapsed');
}
/* XBlock JavaScript entry point for OpenAssessmentXBlock. */
function OpenAssessmentBlock(runtime, element) {
/**
......@@ -271,5 +277,8 @@ function OpenAssessmentBlock(runtime, element) {
var server = new OpenAssessment.Server(runtime, element);
var ui = new OpenAssessment.BaseUI(runtime, element, server);
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 @@
// NOTES:
// * 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 @@
// rubric question
%ui-rubric-question {
@include clearfix();
margin-bottom: $baseline-v;
margin-bottom: ($baseline-v/2);
@extend %wipe-last-child;
.question__title {
margin-bottom: $baseline-v;
border-bottom: ($baseline-v/10) solid $color-decorative-tertiary;
padding-bottom: ($baseline-v/4);
padding-bottom: ($baseline-v/2);
.ico {
display: inline-block;
......@@ -60,12 +59,13 @@
.question__title__copy {
@extend %hd-4;
@extend %t-weight3;
color: $heading-primary-color;
}
}
// rubric answers
%ui-rubric-answers {
margin-top: $baseline-v;
margin-bottom: $baseline-v;
.answer {
@include row();
......
apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss
......@@ -54,29 +54,8 @@
.step__header {
@extend %trans-opacity;
@include row();
margin-bottom: $baseline-v;
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 {
color: $color-focused;
}
......@@ -146,13 +125,13 @@
.step__status {
.step__status__value {
display: block;
border-radius: ($baseline-v/5);
padding: ($baseline-v/4) ($baseline-h/4);
background: $color-focused;
color: $white-t;
@include media($bp-m) {
display: block;
margin-top: ($baseline-v/2);
}
}
......@@ -212,11 +191,9 @@
@extend %text-sr;
}
// STATE: default/visible/expanded
.step__instruction, .step__content, .step__actions {
display: block;
visibility: visible;
opacity: 1.0;
// step content wrapper
.wrapper--step__content {
margin-top: $baseline-v;
}
// step instructions
......@@ -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)
&.is--collapsed {
......@@ -302,21 +307,6 @@
.step__counter:before {
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
......@@ -883,7 +873,6 @@
@extend %hd-4;
@extend %t-weight3;
float: left;
color: $heading-secondary-color;
}
.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