Skip to content

E
edx-ora2
Commit c4b1659c by Brian Talbot
Options

styling general frame UI revisions, prompt, and response

parent 5d1416e3
Showing with 267 additions and 132 deletions
apps/openassessment/templates/openassessmentblock/oa_base.html
......@@ -14,6 +14,10 @@
<div class="openassessment" id="openassessment">
<div class="wrapper--grid">
<h1 class="openassessment__title">
<span class="openassessment__title--super">
{{ title }}
</span>
<span class="openassessment__title--sub">
<span class="problem-type problem-type--open-ended-response">Open Ended Response</span>
{% for assessment in rubric_assessments %}
......@@ -21,10 +25,6 @@
<span class="problem-type problem-type--{{ assessment.type }}">{{ assessment.name }}</span>
{% endfor %}
</span>
<span class="openassessment__title--super">
{{ title }}
</span>
</h1>
<!--?: may have trouble with aync -->
......
apps/openassessment/templates/openassessmentblock/oa_peer_assessment.html
......@@ -11,7 +11,7 @@
<!-- CASE: default/not started -->
{% block list_item %}
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility">
<li id="openassessment__peer-assessment" class="openassessment__steps__step step--peer-assessment ui-toggle-visibility is--expanded">
{% endblock %}
<span class="system__element" id="peer_submission_uuid">
{{ peer_submission.uuid }}
......
apps/openassessment/templates/openassessmentblock/oa_response.html
......@@ -14,7 +14,7 @@
<!-- CASE: default/unanswered -->
{% block list_item %}
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility is--expanded">
{% endblock %}
{% block header %}
......@@ -48,7 +48,7 @@
<ol class="list list--fields">
<li class="field field--textarea submission__answer" id="submission__answer">
<label for="submission__answer__value">Please provide your response to the above question</label>
<textarea id="submission__answer__value" placeholder=""></textarea>
<textarea class="text" id="submission__answer__value" placeholder=""></textarea>
</li>
</ol>
......@@ -64,7 +64,10 @@
<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">Submit your response &amp; move forward</a>
<a aria-role="button" href="#" id="step--response__submit" class="action action--submit step--response__submit">
<span class="copy">Submit your response &amp; move forward</span>
<i class="ico fa fa-arrow-right"></i>
</a>
</li>
</ul>
</div>
......
apps/openassessment/templates/openassessmentblock/oa_self_assessment.html
......@@ -12,7 +12,7 @@
<!-- CASE: default/not started -->
{% block list_item %}
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility">
<li id="openassessment__self-assessment" class="openassessment__steps__step step--self-assessment ui-toggle-visibility is--expanded">
{% endblock %}
{% block header %}
......
apps/openassessment/templates/openassessmentblock/t-response.html
......@@ -13,7 +13,7 @@
<!-- CASE: default/unanswered -->
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility">
<li id="openassessment__response" class="openassessment__steps__step step--response ui-toggle-visibility is--expanded">
<header class="step__header ui-toggle-visibility__control">
<h2 class="step__title">
<span class="step__counter"></span>
......
apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss
......@@ -4,10 +4,18 @@
// NOTES:
// * The basic view and all of its states of the openassessment xblock
// --------------------
// in-view extends
// --------------------
%oa--ui--window {
box-shadow: 0 1px 1px $shadow-l1;
border: ($baseline-v/10) solid $color-decorative-tertiary;
border-radius: ($baseline-v/10);
}
.wrapper--openassessment {
position: relative;
background: $bg-view;
}
.openassessment {
......@@ -22,7 +30,7 @@
@include row();
margin-bottom: $spacing-bravo;
border-bottom: ($baseline-v/5) solid $color-decorative-tertiary;
padding-bottom: $spacing-bravo;
padding-bottom: $spacing-charlie;
}
.openassessment__title--super {
......@@ -47,8 +55,9 @@
}
.openassessment__title--sub {
@extend %hd-hotel;
@extend %hd-golf;
display: block;
color: $heading-tertiary-color;
@include media($bp-m) {
}
......@@ -78,20 +87,19 @@
padding-bottom: $spacing-bravo;
&:last-child {
padding-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
// step header
.step__header {
@extend %trans-opacity;
@include row();
opacity: 1.0;
// STATE: hover
&:hover {
.step__deadline, .step__label {
color: $heading-secondary-color;
}
}
}
......@@ -128,11 +136,14 @@
// increment: show numbers using parent list counter
&:before {
@extend %hd-charlie;
@extend %t-weight3;
@extend %hd-foxtrot;
@extend %t-weight4;
content: counter(item, decimal);
counter-increment: item;
margin-right: $spacing-charlie;
margin-right: $spacing-delta;
border-radius: ($baseline-v/10);
border: 1px solid $heading-color;
padding: $spacing-delta $spacing-charlie;
}
}
......@@ -142,12 +153,14 @@
.step__label {
@extend %hd-delta;
@extend %t-weight3;
@extend %trans-color;
}
.step__deadline {
@extend %hd-hotel;
@extend %trans-color;
color: $heading-secondary-color;
}
}
......@@ -156,10 +169,10 @@
.step__status {
.step__status__value {
border-radius: ($baseline-v/10);
border-radius: ($baseline-v/5);
padding: ($baseline-v/4) ($baseline-h/4);
background: $color-disabled;
color: $white;
color: $white-t;
@include media($bp-m) {
display: block;
......@@ -220,53 +233,82 @@
@extend %text-sr;
}
// STATE: step is collapsed (not focused on)
&.is--collapsed {
// step instructions
.step__instruction {
@extend %copy-delta;
margin-bottom: $spacing-bravo;
color: $copy-color;
}
.step__label {
color: $heading-tertiary-color;
// step content
.step__content {
margin-bottom: $spacing-bravo;
}
.step__counter:before {
color: $color-disabled;
// step actions
.step__actions {
text-align: right;
.action--submit {
@extend %btn--primary;
@extend %action-delta;
}
}
.step__status__value {
background: $color-disabled;
// STATE: step is collapsed (not focused on)
&.is--collapsed {
.step__header {
opacity: 0.4;
// STATE: hover
&:hover {
opacity: 1.0;
}
}
}
// STATE: step is expanded (focused)
&.is--expanded {
border-bottom-color: $color-focused;
.step__header {
margin-bottom: $spacing-charlie;
border-bottom: ($baseline-v/10) solid $color-focused;
padding-bottom: $spacing-charlie;
opacity: 1.0;
// STATE: hover
&:hover {
@include media($bp-ds) {
border-bottom: ($baseline-v/20) solid $color-focused;
padding-bottom: $spacing-charlie;
}
.step__deadline, .step__label {
color: $color-focused;
@include media($bp-dm) {
border-bottom: ($baseline-v/20) solid $color-focused;
padding-bottom: $spacing-charlie;
}
@include media($bp-dl) {
border-bottom: ($baseline-v/20) solid $color-focused;
padding-bottom: $spacing-charlie;
}
@include media($bp-m) {
padding-bottom: 0;
@include media($bp-dx) {
border-bottom: ($baseline-v/20) solid $color-focused;
padding-bottom: $spacing-charlie;
}
}
.step__counter:before, .step__title .step__deadline {
.step__counter:before, .step__label .step__deadline {
color: $color-focused;
}
.step__counter:before {
border-right-color: $color-focused;
}
.step__status__value {
background: $color-focused;
.copy {
color: $white;
color: $white-t;
}
}
}
......@@ -274,25 +316,11 @@
// STATE: step is incomplete
&.is--incomplete {
.step__counter:before {
color: $color-incomplete;
}
.step__status__value {
background: $color-incomplete;
}
}
// STATE: step is complete
&.is--complete {
.step__counter:before {
color: $color-complete;
}
.step__status__value {
background: $color-complete;
}
}
}
......@@ -330,9 +358,7 @@
}
.openassessment__prompt {
margin-bottom: $spacing-bravo;
border-bottom: ($baseline-v/10) solid $gray-l6;
padding-bottom: $spacing-bravo;
margin-bottom: $spacing-alpha;
}
.openassessment__prompt__title {
......@@ -340,7 +366,8 @@
}
.openassessment__prompt__copy {
@extend %copy-charlie;
@extend %copy-bravo;
color: $copy-lead-color;
> * {
margin-bottom: $spacing-bravo;
......@@ -362,6 +389,41 @@
// --------------------
.step--response {
// response form
.response__submission {
padding: $spacing-charlie $spacing-charlie $spacing-bravo $spacing-charlie;
background: $color-decorative-tertiary;
.action--submit, .tip {
display: inline-block;
vertical-align: middle;
}
.action--submit {
@extend %btn--secondary;
@extend %action-delta;
margin-right: $spacing-charlie;
}
.tip {
@extend %copy-epsilon;
color: $copy-supplemental-color;
}
.submission__answer {
margin-bottom: $spacing-charlie;
label {
@extend %text-sr;
}
textarea {
width: 100%;
min-height: ($baseline-v*10);
}
}
}
}
......@@ -386,9 +448,8 @@
// --------------------
.openassessment__grade {
@include row();
border-top: ($baseline-v/10) solid $color-decorative-secondary;
padding: $spacing-bravo;
background: $color-decorative-tertiary;
border-top: ($baseline-v/5) solid $color-decorative-tertiary;
padding-top: $spacing-bravo;
.openassessment__grade__title, .openassessment__grade__content {
display: inline-block;
......@@ -397,23 +458,8 @@
.openassessment__grade__title {
@extend %hd-delta;
color: $heading-tertiary-color;
@include media($bp-ds) {
margin-bottom: $spacing-bravo;
}
@include media($bp-dm) {
margin-right: $spacing-bravo;
}
@include media($bp-dl) {
margin-right: $spacing-bravo;
}
@include media($bp-dx) {
margin-right: $spacing-bravo;
}
color: $heading-tertiary-color;
}
.openassessment__grade__content {
......@@ -435,12 +481,10 @@
// CASE: is incomplete
&.is--incomplete {
border-top-color: $color-incomplete;
}
// CASE: is complete
&.is--complete {
border-top-color: $color-complete;
}
}
......
apps/openassessment/xblock/static/sass/themes/edx/_utilities.scss
......@@ -74,6 +74,12 @@ $edx-gray-t1: rgba($edx-gray,0.25);
$edx-gray-t2: rgba($edx-gray,0.50);
$edx-gray-t3: rgba($edx-gray,0.75);
$edx-lms-header: rgb(100, 100, 100);
$edx-lms-copy: rgb(60, 60, 60);
$edx-lms-action-primary: rgb(29, 157, 217);
$edx-lms-action-secondary: rgb(135, 135, 135);
// --------------------
// variables: overrides
// --------------------
......@@ -93,41 +99,62 @@ $f-copy: $f-sans-serif;
$f-action: $f-sans-serif;
// application - colors
$color-primary: $edx-blue-d1;
$color-secondary: $edx-blue-l1;
$color-primary: $edx-lms-action-primary;
$color-secondary: $edx-lms-action-secondary;
$color-tertiary: $gray-l1;
$color-quarternary: $gray-l2;
// application - colors: decorative
$color-decorative-primary: $edx-blue-u2;
$color-decorative-secondary: $gray-l4;
$color-decorative-primary: $gray-d3;
$color-decorative-secondary: $gray-l3;
$color-decorative-tertiary: $gray-l5;
$color-decorative-quaternary: $gray-l7;
// application - colors: states
$color-disabled: $gray-l4;
$color-focused: $edx-lms-header;
// application - colors: copy and headings
$heading-color: $gray-d3;
$heading-primary-color: $black;
$heading-secondary-color: $gray-l1;
$heading-tertiary-color: $gray-l3;
$heading-color: $edx-lms-header;
$heading-primary-color: shade($edx-lms-header, 33%);
$heading-secondary-color: tint($edx-lms-header, 33%);
$heading-tertiary-color: tint($edx-lms-header, 66%);
$copy-color: $gray-l1;
$copy-color-alt: $gray-d1;
$copy-color-focus: $gray-d4;
$copy-color: $edx-lms-copy;
$copy-color-alt: tint($edx-lms-copy, 33%);
$copy-color-focus: shade($edx-lms-copy, 33%);
$copy-lead-color: $gray;
$copy-lead-color: $gray-d1;
$copy-lead-color-focus: $gray-d4;
$copy-lead-color: $edx-lms-copy;
$copy-lead-color-focus: shade($edx-lms-copy, 33%);
$copy-supplemental-color: $gray-l2;
$copy-supplemental-color-alt: $gray-l2;
$copy-supplemental-color-focus: $gray-d1;
$copy-supplemental-color: tint($edx-lms-copy, 33%);
$copy-supplemental-color-alt: tint($edx-lms-copy, 66%);
$copy-supplemental-color-focus: $edx-lms-copy;
// application - colors:states
$selected-bg: $edx-blue-t1;
$selected-color: $edx-blue-s1;
// application - colors: actions
$action-primary-color: tint($color-primary,10%);
$action-primary-color-focus: saturate($color-primary,25%);
$action-primary-color-active: $color-primary;
$action-primary-color-visited: shade($color-primary,20%);
$action-secondary-color: $color-secondary;
$action-secondary-color-focus: shade($color-secondary,25%);
$action-secondary-color-active: $color-secondary;
$action-secondary-color-visited: shade($color-secondary,20%);
$action-tertiary-color: tint($color-teritary,10%);
$action-tertiary-color-focus: shade($color-teritary,25%);
$action-tertiary-color-active: $color-teritary;
$action-tertiary-color-visited: shade($color-teritary,20%);
// application - colors: view-based elements
$bg-view: $gray-l6;
$bg-view: transparent;
$bg-header-main: $white;
$bg-header-main: $white-t;
$color-header-main: $black;
$bg-content: $gray-l6;
......
apps/openassessment/xblock/static/sass/xb/elements/_controls.scss
......@@ -79,11 +79,17 @@
cursor: default;
pointer-events: none;
}
// CASE: icons in buttons
.copy, .ico {
display: inline-block;
vertical-align: middle;
}
}
%btn-pill {
@extend %btn;
border-radius: $baseline-v/5;
border-radius: ($baseline-v/5);
}
%btn-rounded {
......@@ -97,20 +103,23 @@
}
// buttons - primary
// buttons - primary (assuming dark bg/light copy)
%btn--primary {
@extend %btn-edged;
@extend %btn-pill;
@extend %t-weight3;
padding: ($baseline-v/2) ($baseline-h);
background: $action-primary-color;
border-color: saturate($action-primary-color, 15%);
border: 1px solid shade($action-primary-color, 15%);
color: tint($action-primary-color, 90%);
.copy {
@extend %t-weight3;
}
&:hover, &:active, &:focus {
background: $action-primary-color-focus;
border-color: $action-primary-color-focus;
color: tint($action-primary-color, 95%);
color: tint($action-primary-color, 99%);
}
&.current, &.active {
......@@ -128,20 +137,23 @@
}
// buttons - secondary
// buttons - secondary (assuming dark bg/light copy)
%btn--secondary {
@extend %btn-edged;
@extend %btn-pill;
@extend %t-weight3;
padding: ($baseline-v/2) ($baseline-h);
background: $action-secondary-color;
border-color: saturate($action-secondary-color, 15%);
border: 1px shade($action-secondary-color, 10%);
color: tint($action-secondary-color, 90%);
.copy {
@extend %t-weight3;
}
&:hover, &:active, &:focus {
background: $action-secondary-color-focus;
border-color: $action-secondary-color-focus;
color: tint($action-secondary-color, 95%);
color: tint($action-secondary-color, 99%);
}
&.current, &.active {
......@@ -159,20 +171,23 @@
}
// buttons - tertiary
// buttons - tertiary (assuming dark bg/light copy)
%btn--tertiary {
@extend %btn-edged;
@extend %t-weight3;
padding: ($baseline-v/2) ($baseline-h);
padding: ($baseline-v/2) ($baseline-h/2);
background: $action-tertiary-color;
border-color: saturate($action-tertiary-color, 15%);
border: 1px solid shade($action-tertiary-color, 10%);
color: tint($action-tertiary-color, 90%);
.copy {
@extend %t-weight3;
}
&:hover, &:active, &:focus {
background: $action-tertiary-color-focus;
border-color: $action-tertiary-color-focus;
color: tint($action-tertiary-color, 95%);
color: tint($action-tertiary-color, 99%);
}
&.current, &.active {
......
apps/openassessment/xblock/static/sass/xb/elements/_forms.scss
......@@ -4,3 +4,28 @@
// NOTES:
// * basic form element (fields, fieldsets/wrappers, actions, and states) styling for all xblocks
// contains all form elements inside of the main xblock wrapper
.wrapper--xblock {
// forms - general
input[type="text"],
input[type="email"],
input[type="password"],
textarea.text {
border: 1px solid $color-decorative-secondary;
padding: $spacing-charlie;
font-family: $f-copy;
outline: 0;
@include placeholder {
color: $copy-supplemental-color;
}
&:focus {
box-shadow: 0 0 6px 0 rgba(29,157,217,0.4),inset 0 0 4px 0 rgba(0,0,0,0.15);
border-color: $selected-color;
outline: 0;
}
}
}
apps/openassessment/xblock/static/sass/xb/elements/_typography.scss
......@@ -67,7 +67,6 @@
@include font-size(24);
@include lh(24);
font-family: $f-title;
color: $heading-primary-color;
}
%hd-bravo {
......@@ -75,7 +74,6 @@
@include font-size(21);
@include lh(21);
font-family: $f-title;
color: $heading-primary-color;
}
%hd-charlie {
......@@ -84,7 +82,6 @@
@include font-size(18);
@include lh(18);
font-family: $f-title;
color: $heading-primary-color;
}
%hd-delta {
......@@ -92,7 +89,6 @@
@include font-size(16);
@include lh(16);
font-family: $f-title;
color: $heading-primary-color;
}
%hd-epsilon {
......@@ -101,7 +97,6 @@
@include font-size(16);
@include lh(16);
font-family: $f-title;
color: $heading-secondary-color;
}
%hd-foxtrot {
......@@ -109,7 +104,6 @@
@include font-size(16);
@include lh(16);
font-family: $f-title;
color: $heading-secondary-color;
}
%hd-golf {
......@@ -118,7 +112,6 @@
@include font-size(13);
@include lh(13);
font-family: $f-title;
color: $heading-tertiary-color;
}
%hd-hotel {
......@@ -126,7 +119,6 @@
@include font-size(13);
@include lh(13);
font-family: $f-title;
color: $heading-tertiary-color;
}
%hd-india {
......@@ -135,7 +127,6 @@
@include font-size(11);
@include lh(11);
font-family: $f-title;
color: $heading-tertiary-color;
}
......@@ -147,13 +138,11 @@
@include font-size(24);
@include lh(24);
font-family: $f-copy;
color: $copy-color;
}
%copy-bravo {
@include font-size(18);
@include lh(18);
color: $copy-color;
font-family: $f-copy;
}
......@@ -162,34 +151,59 @@
@include font-size(16);
@include lh(16);
font-family: $f-copy;
color: $copy-color;
}
%copy-delta {
@include font-size(14);
@include lh(14);
font-family: $f-copy;
color: $copy-color;
}
%copy-epsilon {
@include font-size(12);
@include font-size(13);
@include lh(12);
font-family: $f-copy;
color: $copy-supplemental-color;
}
%copy-foxtrot {
@include font-size(11);
@include lh(11);
@include font-size(12);
@include lh(12);
font-family: $f-copy;
color: $copy-supplemental-color;
}
// --------------------
// canned actions
// --------------------
%action-alpha {
@include font-size(18);
@include lh(18);
font-family: $f-action;
}
%action-bravo {
@include font-size(18);
@include lh(18);
font-family: $f-action;
}
%action-charlie {
@include font-size(16);
@include lh(16);
font-family: $f-action;
}
%action-delta {
@include font-size(14);
@include lh(14);
font-family: $f-action;
}
%action-epsilon {
@include font-size(12);
@include lh(12);
font-family: $f-action;
}
// --------------------
......
apps/openassessment/xblock/static/sass/xb/utilities/_extends.scss
......@@ -136,6 +136,10 @@
@include transition(width $tmg-f1 ease-in-out, height $tmg-f1 ease-in-out);
}
%trans-opacity {
@include transition(opacity $tmg-f1 ease-in-out);
}
%trans-color {
@include transition(color $tmg-f1 ease-in-out);
}
......
apps/openassessment/xblock/static/sass/xb/utilities/_variables.scss
......@@ -135,14 +135,15 @@ $f-action: $f-sans-serif;
// application - colors
// --------------------
// application - colors: basic
$color-primary: $blue-s2;
$color-secondary: $blue;
$color-primary: $blue;
$color-secondary: $blue-u1;
$color-teritary: $blue-u2;
// application - colors: decorative
$color-decorative-primary: $blue-u2;
$color-decorative-secondary: $gray-l4;
$color-decorative-tertiary: $gray-l6;
$color-decorative-quaternary: $gray-l7;
// application - colors: states
$color-disabled: $gray-l4;
......
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