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 @@ ...@@ -223,21 +223,6 @@
.wrapper--metadata { .wrapper--metadata {
display: block; 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 { .answer__tip, .answer__points {
...@@ -251,24 +236,6 @@ ...@@ -251,24 +236,6 @@
margin-right: $baseline-v; margin-right: $baseline-v;
color: $copy-secondary-color; 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 { &:after {
content: ""; content: "";
} }
...@@ -277,21 +244,6 @@ ...@@ -277,21 +244,6 @@
.answer__points { .answer__points {
@extend %t-score; @extend %t-score;
color: $copy-secondary-color; 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 { .answer__points__label {
......
openassessment/xblock/static/sass/oa/utilities/_shame.scss
...@@ -40,26 +40,6 @@ ...@@ -40,26 +40,6 @@
margin-top: 0 !important; margin-top: 0 !important;
text-align: left !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 { .step__label {
text-transform: none; text-transform: none;
letter-spacing: normal; letter-spacing: normal;
......
openassessment/xblock/static/sass/oa/views/_oa-base.scss
...@@ -49,26 +49,6 @@ ...@@ -49,26 +49,6 @@
.step__title { .step__title {
margin-bottom: ($baseline-v/2); 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 { .step__counter, .wrapper--copy {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
...@@ -124,7 +104,7 @@ ...@@ -124,7 +104,7 @@
// step status // step status
.step__status { .step__status {
display: inline-block; position: relative;
.step__status__value { .step__status__value {
border-radius: ($baseline-v/10); border-radius: ($baseline-v/10);
...@@ -160,38 +140,6 @@ ...@@ -160,38 +140,6 @@
@extend %t-score; @extend %t-score;
color: $heading-color; 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 { .step__status__label {
...@@ -236,22 +184,6 @@ ...@@ -236,22 +184,6 @@
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
text-align: center; 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 { .action--submit {
@extend %btn--primary; @extend %btn--primary;
@extend %action-2; @extend %action-2;
...@@ -541,30 +473,6 @@ ...@@ -541,30 +473,6 @@
display: block; display: block;
text-align: center; text-align: center;
margin-bottom: ($baseline-v/2); 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 @@ ...@@ -723,25 +631,6 @@
.step--grade { .step--grade {
.step__title { .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 { .step__label, .grade__value {
display: inline-block; display: inline-block;
...@@ -898,26 +787,6 @@ ...@@ -898,26 +787,6 @@
.answer { .answer {
margin-bottom: $baseline-v; 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 // CASE: self assessment
&.self-assessment { &.self-assessment {
border-left: ($baseline-h/8) solid $color-decorative-quaternary; border-left: ($baseline-h/8) solid $color-decorative-quaternary;
...@@ -1093,14 +962,4 @@ ...@@ -1093,14 +962,4 @@
margin-right: ($baseline-v/2); 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