Commit af5afa34 by Brian Talbot

Merge pull request #144 from edx/talbs/fix-uimisc

Fix - General UI/Front End Clean Up
parents 55f2a663 cf5fce0b
......@@ -9,7 +9,6 @@
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Unavailable</span>
<span class="ico"><i class="icon-info-sign"></i></span>
</span>
</span>
{% endblock %}
......
......@@ -9,7 +9,6 @@
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Awaiting Peer Responses</span>
<span class="ico"><i class="icon-info-sign"></i></span>
</span>
</span>
{% endblock %}
......
......@@ -9,7 +9,6 @@
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Unavailable</span>
<i class="ico icon-warning-sign"></i>
</span>
</span>
{% endblock %}
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -424,7 +424,7 @@ OpenAssessment.BaseUI.prototype = {
var container = '#openassessment__' + step;
$(container).toggleClass('has--error', true);
$(container + ' .step__status__value i').removeClass().addClass('icon-warning-sign');
$(container + ' .step__status__value').html('Unable to Load');
$(container + ' .step__status__value .copy').html('Unable to Load');
}
};
......
......@@ -41,7 +41,7 @@
}
// step header
.step__header {
.openassessment__steps .openassessment__steps__step .step__header {
.step__deadline {
color: $color-focused;
......@@ -72,6 +72,29 @@
text-transform: none;
letter-spacing: normal;
}
.step__counter, .wrapper--copy {
display: inline-block;
vertical-align: middle;
}
// step counter
.step__counter {
// increment: show numbers using parent list counter
&:before {
@extend %hd-6;
@extend %t-weight4;
content: counter(item, decimal);
counter-increment: item;
margin-right: ($baseline-v/4);
border-radius: ($baseline-v/10);
border: 1px solid rgba($color-focused, 0.5);
padding: ($baseline-v/4) ($baseline-v/2);
color: $color-focused;
}
}
}
.step__status__value {
......@@ -135,6 +158,11 @@
}
}
// actions
.action--submit, .action--save {
box-shadow: none;
}
// --------------------
// Studio countermeasures
// --------------------
......
......@@ -60,70 +60,27 @@
color: $color-focused;
}
.step__label, .step__deadline {
display: block;
}
// step title/name - TODO: nesting needed due to LMS CSS overrides
.step__title {
@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__counter, .wrapper--copy {
display: inline-block;
vertical-align: middle;
}
// step counter
.step__counter {
// increment: show numbers using parent list counter
&:before {
@extend %hd-6;
@extend %t-weight4;
content: counter(item, decimal);
counter-increment: item;
margin-right: ($baseline-v/4);
border-radius: ($baseline-v/10);
border: 1px solid rgba($color-focused, 0.5);
padding: ($baseline-v/4) ($baseline-v/2);
color: $color-focused;
}
}
.step__label, .step__deadline {
display: block;
}
.step__label {
@extend %hd-4;
@extend %t-weight3;
@extend %trans-color;
}
.step__label {
@extend %hd-4;
@extend %t-weight3;
@extend %trans-color;
}
.step__deadline {
@extend %hd-8;
@extend %trans-color;
color: $heading-secondary-color;
}
.step__deadline {
@extend %hd-8;
@extend %trans-color;
color: $heading-secondary-color;
}
}
// step status
.step__status {
.step__status__value {
display: block;
border-radius: ($baseline-v/5);
......@@ -134,16 +91,27 @@
@include media($bp-m) {
margin-top: ($baseline-v/2);
}
}
.ico, .copy {
display: inline-block;
vertical-align: bottom;
@include media($bp-ds) {
display: inline-block;
vertical-align: bottom;
}
@include media($bp-dm) {
display: inline-block;
vertical-align: bottom;
}
@include media($bp-dl) {
display: inline-block;
vertical-align: bottom;
}
}
.ico {
@extend %t-icon-m;
display: none; // hiding by default
display: inline-block;
vertical-align: bottom;
margin-left: ($baseline-v/4);
}
......@@ -267,7 +235,7 @@
margin-bottom: ($baseline-v/2);
@include media($bp-ds) {
@include span-columns(4 of 6);
@include span-columns(3 of 6);
margin-bottom: 0;
text-align: left;
}
......@@ -600,35 +568,36 @@
}
.response__submission__actions {
@include transition(background-color $tmg-f1 ease-in-out 0s);
border-radius: ($baseline-v/5);
padding: ($baseline-v/2) ($baseline-h/2);
background: transparent;
.action--save {
@extend %btn--secondary;
@extend %action-4;
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;
}
}
}
......@@ -738,36 +707,6 @@
}
}
}
// step actions
.peer-assessment__actions {
@include transition(background-color $tmg-f1 ease-in-out 0s);
border-radius: ($baseline-v/5);
padding: ($baseline-v/2) ($baseline-h/2);
background: transparent;
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-4;
}
}
}
......@@ -829,36 +768,6 @@
}
}
}
// step actions
.self-assessment__actions {
@include transition(background-color $tmg-f1 ease-in-out 0s);
border-radius: ($baseline-v/5);
padding: ($baseline-v/2) ($baseline-h/2);
background: transparent;
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-4;
}
}
}
......
......@@ -115,7 +115,6 @@
background: $action-primary-color;
border: 1px solid shade($action-primary-color, 15%);
color: tint($action-primary-color, 90%);
box-shadow: none; // needed for LMS override
.copy {
@extend %t-weight3;
......@@ -150,7 +149,6 @@
background: $action-secondary-color;
border: 1px shade($action-secondary-color, 10%);
color: tint($action-secondary-color, 90%);
box-shadow: none; // needed for LMS override
.copy {
@extend %t-weight3;
......
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