Skip to content

E
edx-ora2
Commit be592f53 by Brian Talbot
Options

reverting responsiveness of ORA xblock: 

* due to xblocks being placed in various UI, mediaqueries can't be used reliably
* xblocks cannot get information on their parent element's dimensions
* t-shirt-based sizing, based on responsively made media queries, was recommended given these constraints
* sizes include: xs, s, m, l, xl and correspond to sass variables that have been previously used for native media queries
* this is less than idea but needed and causes: gaps in transitions; a manual class to be added to the .xblock classed HTML element; bloat/redundancy in compiled CSS
parent 8e62f837
Showing with 274 additions and 210 deletions
openassessment/xblock/static/css/openassessment.css
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/sass/oa/contexts/_responsive.scss
// openassessment: contexts - responsive sizing
// ====================
// NOTES:
// * this creates different sized layouts/grid based to use in lieu of native media queries (since XBlocks don't control the chrome they are rendered in)
.xblock {
// --------------------
// CASE: extra small digital screen
// --------------------
&.ui-size-xs .wrapper--grid {
.step--grade .step__title {
@include span-columns(4 of 4);
}
}
// --------------------
// CASE: small desktop screen
// --------------------
&.ui-size-s .wrapper--grid {
.step__title {
@include span-columns(4 of 6);
margin-bottom: 0;
}
.step__status {
@include span-columns(2 of 6);
@include omega();
top: -8px;
text-align: right;
}
.step__actions {
text-align: right;
}
.response__submission__actions .action--save {
display: inline-block;
margin-right: ($baseline-v/2);
margin-bottom: 0;
}
.step--grade .step__title {
@include span-columns(6 of 6);
}
.submission__peer-evaluations__questions .answer {
@include span-columns(3 of 6);
@include omega(2n);
}
%ui-rubric-answers {
.wrapper--input {
@include span-columns(6 of 6);
}
.answer__tip {
}
.answer__points {
}
}
// shame-based override (inherited from _shame.scss mediaquery)
.openassessment__steps .openassessment__steps__step .step__header h2.step__title {
@include span-columns(4 of 6);
}
}
// --------------------
// CASE: medium desktop screen
// --------------------
&.ui-size-m .wrapper--grid {
.step__title {
@include span-columns(9 of 12);
margin-bottom: 0;
}
.step__status {
@include span-columns(3 of 12);
@include omega();
top:-8px;
text-align: right;
}
.step__actions {
text-align: right;
}
.response__submission__actions .action--save {
display: inline-block;
margin-right: ($baseline-v/2);
margin-bottom: 0;
}
.step--grade .step__title {
@include span-columns(12 of 12);
}
.submission__peer-evaluations__questions .answer {
@include span-columns(3 of 12);
@include omega(4n);
}
%ui-rubric-answers {
.wrapper--input {
@include span-columns(4 of 12);
margin-bottom: 0;
}
.wrapper--metadata {
@include span-columns(8 of 12);
margin-bottom: 0;
}
.answer__tip {
@include span-columns(6 of 8);
float: left;
margin-bottom: 0;
}
.answer__points {
float: right;
text-align: right;
}
}
// shame-based override (inherited from _shame.scss mediaquery)
.openassessment__steps .openassessment__steps__step .step__header h2.step__title {
@include span-columns(9 of 12);
}
}
// --------------------
// CASE: large desktop screen
// --------------------
&.ui-size-l .wrapper--grid {
.step__title {
@include span-columns(9 of 12);
margin-bottom: 0;
}
.step__status {
@include span-columns(3 of 12);
@include omega();
top: -8px;
text-align: right;
}
.step__actions {
text-align: right;
}
.response__submission__actions .action--save {
display: inline-block;
margin-right: ($baseline-v/2);
margin-bottom: 0;
}
.step--grade .step__title {
@include span-columns(12 of 12);
}
.submission__peer-evaluations__questions .answer {
@include span-columns(3 of 12);
@include omega(4n);
}
%ui-rubric-answers {
.wrapper--input {
@include span-columns(4 of 12);
margin-bottom: 0;
}
.wrapper--metadata {
@include span-columns(8 of 12);
margin-bottom: 0;
}
.answer__tip {
@include span-columns(6 of 8);
float: left;
margin-bottom: 0;
}
.answer__points {
float: right;
text-align: right;
}
}
// shame-based override (inherited from _shame.scss mediaquery)
.openassessment__steps .openassessment__steps__step .step__header h2.step__title {
@include span-columns(9 of 12);
}
}
// --------------------
// CASE: extra large desktop screen
// --------------------
&.ui-size-xl .wrapper--grid {
.step__title {
@include span-columns(9 of 12);
margin-bottom: 0;
}
.step__status {
@include span-columns(3 of 12);
@include omega();
top: -8px;
text-align: right;
}
.step__actions {
text-align: right;
}
.response__submission__actions .action--save {
display: inline-block;
margin-right: ($baseline-v/2);
margin-bottom: 0;
}
.step--grade .step__title {
@include span-columns(12 of 12);
}
.submission__peer-evaluations__questions .answer {
@include span-columns(3 of 12);
@include omega(4n);
}
%ui-rubric-answers {
.wrapper--input {
@include span-columns(4 of 12);
margin-bottom: 0;
}
.wrapper--metadata {
@include span-columns(8 of 12);
margin-bottom: 0;
}
.answer__tip {
@include span-columns(6 of 8);
float: left;
margin-bottom: 0;
}
.answer__points {
float: right;
text-align: right;
}
}
// shame-based override (inherited from _shame.scss mediaquery)
.openassessment__steps .openassessment__steps__step .step__header h2.step__title {
@include span-columns(9 of 12);
}
}
}
openassessment/xblock/static/sass/oa/utilities/_extends.scss
......@@ -223,21 +223,6 @@
.wrapper--metadata {
display: block;
@include media($bp-dm) {
@include span-columns(8 of 12);
margin-bottom: 0;
}
@include media($bp-dl) {
@include span-columns(8 of 12);
margin-bottom: 0;
}
@include media($bp-dx) {
@include span-columns(8 of 12);
margin-bottom: 0;
}
}
.answer__tip, .answer__points {
......@@ -251,24 +236,6 @@
margin-right: $baseline-v;
color: $copy-secondary-color;
@include media($bp-dm) {
@include span-columns(6 of 8);
float: left;
margin-bottom: 0;
}
@include media($bp-dl) {
@include span-columns(6 of 8);
float: left;
margin-bottom: 0;
}
@include media($bp-dx) {
@include span-columns(6 of 8);
float: left;
margin-bottom: 0;
}
&:after {
content: "";
}
......@@ -277,21 +244,6 @@
.answer__points {
@extend %t-score;
color: $copy-secondary-color;
@include media($bp-dm) {
float: right;
text-align: right;
}
@include media($bp-dl) {
float: right;
text-align: right;
}
@include media($bp-dx) {
float: right;
text-align: right;
}
}
.answer__points__label {
......
openassessment/xblock/static/sass/oa/utilities/_shame.scss
......@@ -40,26 +40,6 @@
margin-top: 0 !important;
text-align: left !important;
@include media($bp-m) {
margin-bottom: ($baseline-v/2);
}
@include media($bp-ds) {
@include span-columns(4 of 6);
}
@include media($bp-dm) {
@include span-columns(9 of 12);
}
@include media($bp-dl) {
@include span-columns(9 of 12);
}
@include media($bp-dx) {
@include span-columns(9 of 12);
}
.step__label {
text-transform: none;
letter-spacing: normal;
......
openassessment/xblock/static/sass/oa/views/_oa-base.scss
......@@ -49,26 +49,6 @@
.step__title {
margin-bottom: ($baseline-v/2);
@include media($bp-ds) {
@include span-columns(4 of 6);
margin-bottom: 0;
}
@include media($bp-dm) {
@include span-columns(9 of 12);
margin-bottom: 0;
}
@include media($bp-dl) {
@include span-columns(9 of 12);
margin-bottom: 0;
}
@include media($bp-dx) {
@include span-columns(9 of 12);
margin-bottom: 0;
}
.step__counter, .wrapper--copy {
display: inline-block;
vertical-align: middle;
......@@ -124,7 +104,7 @@
// step status
.step__status {
display: inline-block;
position: relative;
.step__status__value {
border-radius: ($baseline-v/10);
......@@ -160,38 +140,6 @@
@extend %t-score;
color: $heading-color;
}
@include media($bp-m) {
position: relative;
}
@include media($bp-ds) {
@include span-columns(2 of 6);
@include omega();
position: relative;
top: -12px;
}
@include media($bp-dm) {
@include span-columns(3 of 12);
@include omega();
position: relative;
top:-12px;
}
@include media($bp-dl) {
@include span-columns(3 of 12);
@include omega();
position: relative;
top: -12px;
}
@include media($bp-dx) {
@include span-columns(3 of 12);
@include omega();
position: relative;
top: -12px;
}
}
.step__status__label {
......@@ -236,22 +184,6 @@
margin-bottom: ($baseline-v/2);
text-align: center;
@include media($bp-ds) {
text-align: right;
}
@include media($bp-dm) {
text-align: right;
}
@include media($bp-dl) {
text-align: right;
}
@include media($bp-dx) {
text-align: right;
}
.action--submit {
@extend %btn--primary;
@extend %action-2;
......@@ -541,30 +473,6 @@
display: block;
text-align: center;
margin-bottom: ($baseline-v/2);
@include media($bp-ds) {
display: inline-block;
margin-right: ($baseline-v/2);
margin-bottom: 0;
}
@include media($bp-dm) {
display: inline-block;
margin-right: ($baseline-v/2);
margin-bottom: 0;
}
@include media($bp-dl) {
display: inline-block;
margin-right: ($baseline-v/2);
margin-bottom: 0;
}
@include media($bp-dx) {
display: inline-block;
margin-right: ($baseline-v/2);
margin-bottom: 0;
}
}
}
}
......@@ -723,25 +631,6 @@
.step--grade {
.step__title {
@include media($bp-m) {
@include span-columns(4 of 4);
}
@include media($bp-ds) {
@include span-columns(6 of 6);
}
@include media($bp-dm) {
@include span-columns(12 of 12);
}
@include media($bp-dl) {
@include span-columns(12 of 12);
}
@include media($bp-dx) {
@include span-columns(12 of 12);
}
.step__label, .grade__value {
display: inline-block;
......@@ -898,26 +787,6 @@
.answer {
margin-bottom: $baseline-v;
@include media($bp-ds) {
@include span-columns(3 of 6);
@include omega(2n);
}
@include media($bp-dm) {
@include span-columns(4 of 12);
@include omega(3n);
}
@include media($bp-dl) {
@include span-columns(4 of 12);
@include omega(3n);
}
@include media($bp-dx) {
@include span-columns(4 of 12);
@include omega(3n);
}
// CASE: self assessment
&.self-assessment {
border-left: ($baseline-h/8) solid $color-decorative-quaternary;
......@@ -1093,14 +962,4 @@
margin-right: ($baseline-v/2);
}
}
// --------------------
// STATE: incomplete
// --------------------
// --------------------
// STATE: waiting
// --------------------
}
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