Skip to content

E
edx-ora2
Commit b612a082 by Brian Talbot
Options

Merge pull request #214 from edx/talbs/ui-cleanup 

UI Clean Up - Small Tweaks
parents c2509762 fa9b00d9
Showing with 86 additions and 35 deletions
apps/openassessment/templates/openassessmentblock/oa_base.html
......@@ -23,14 +23,13 @@
<!-- if the problem is unstarted or response hasn't been submitted -->
<div id="openassessment__message" class="openassessment__message message">
<div class="message__content">
<p>This problem requires that you work through multiple parts. You can begin by reading the question below and <a data-behavior="ui-scroll" href="#openassessment__response">providing your response</a>.</p>
<p>This problem requires that you work through multiple parts. <strong>You can begin by reading the question below and providing your response.</strong></p>
</div>
</div>
{% endblock %}
<div class="wrapper--openassessment__prompt">
<article class="openassessment__prompt ui-toggle-visibility">
<h2 class="openassessment__prompt__title">This Problem's Prompt/Question</h2>
<div class="openassessment__prompt__copy ui-toggle-visibility__content">
......@@ -54,10 +53,8 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="wrapper--anim">
<span class="copy">Loading</span>
<i class="ico icon-refresh icon-spin"></i>
</span>
<i class="ico icon-refresh icon-spin"></i>
<span class="copy">Loading</span>
</span>
</span>
</header>
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_closed.html
......@@ -9,11 +9,11 @@
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">
<i class="ico icon-warning-sign"></i>
Incomplete
(<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span>)
</span>
<i class="ico icon-warning-sign"></i>
</span>
</span>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_complete.html
......@@ -8,11 +8,12 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico icon-ok"></i>
<span class="copy">
Complete
(<span class="step__status__value--completed">{{ graded }}</span>)
(<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span>)
</span>
<i class="ico icon-ok"></i>
</span>
</span>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode.html
......@@ -8,11 +8,11 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico icon-ok"></i>
<span class="copy">
Complete
(<span class="step__status__value--completed">{{ graded }}</span>)
(<span class="step__status__value--completed">{{ graded }}</span>
</span>
<i class="ico icon-ok"></i>
</span>
</span>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode_waiting.html
......@@ -8,11 +8,11 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="ico icon-ok"></i>
<span class="copy">
Complete
(<span class="step__status__value--completed">{{ graded }}</span>)
(<span class="step__status__value--completed">{{ graded }}</span>
</span>
<i class="ico icon-ok"></i>
</span>
</span>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/response/oa_response_closed.html
......@@ -7,8 +7,8 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Incomplete</span>
<i class="ico icon-warning-sign"></i>
<span class="copy">Incomplete</span>
</span>
</span>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/response/oa_response_graded.html
......@@ -8,8 +8,8 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Complete</span>
<i class="ico icon-ok"></i>
<span class="copy">Complete</span>
</span>
</span>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/response/oa_response_submitted.html
......@@ -8,8 +8,8 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Complete</span>
<i class="ico icon-ok"></i>
<span class="copy">Complete</span>
</span>
</span>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/self/oa_self_closed.html
......@@ -8,8 +8,8 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Incomplete</span>
<i class="ico icon-warning-sign"></i>
<span class="copy">Incomplete</span>
</span>
</span>
{% endblock %}
......
apps/openassessment/templates/openassessmentblock/self/oa_self_complete.html
......@@ -8,8 +8,8 @@
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<span class="copy">Complete</span>
<i class="ico icon-ok"></i>
<span class="copy">Complete</span>
</span>
</span>
{% endblock %}
......
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/sass/oa/utilities/_shame.scss
......@@ -37,10 +37,13 @@
// step title/name
h2.step__title {
@include span-columns(3 of 4);
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);
}
......
apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss
......@@ -215,6 +215,12 @@
margin-left: ($baseline-h/2);
border-left: 1px solid $color-decorative-tertiary;
padding-left: ($baseline-h/2);
@include media($bp-m) {
margin-left: 0;
border-left: none;
padding-left: 0;
}
}
.step__counter {
......@@ -226,7 +232,15 @@
content: counter(item, decimal);
counter-increment: item;
color: $color-decorative-tertiary;
}
@include media($bp-m) {
display: none;
&:before {
display: none;
}
}
}
......@@ -247,18 +261,36 @@
// step status
.step__status {
display: inline-block;
.step__status__value {
border-radius: ($baseline-v/10);
padding: ($baseline-v/4) ($baseline-h/4);
background: $color-decorative-tertiary;
position: relative;
@include media($bp-ds) {
display: block;
}
@include media($bp-dm) {
display: block;
}
@include media($bp-dl) {
display: block;
}
@include media($bp-dx) {
display: block;
}
}
.ico {
@extend %icon-3;
display: inline-block;
vertical-align: bottom;
margin-left: ($baseline-v/4);
vertical-align: baseline;
margin-right: ($baseline-v/4);
}
.copy {
......@@ -274,32 +306,28 @@
@include span-columns(2 of 6);
@include omega();
position: relative;
top: -8px;
text-align: right;
top: -12px;
}
@include media($bp-dm) {
@include span-columns(3 of 12);
@include omega();
position: relative;
top:-8px;
text-align: right;
top:-12px;
}
@include media($bp-dl) {
@include span-columns(3 of 12);
@include omega();
position: relative;
top: -8px;
text-align: right;
top: -12px;
}
@include media($bp-dx) {
@include span-columns(3 of 12);
@include omega();
position: relative;
top: -8px;
text-align: right;
top: -12px;
}
}
......@@ -332,6 +360,14 @@
margin-bottom: $baseline-v;
}
.step__content__section {
margin-bottom: ($baseline-v*2);
&:last-child {
@extend %wipe-last-child;
}
}
// step actions
.step__actions {
margin-bottom: ($baseline-v/2);
......@@ -562,7 +598,11 @@
.openassessment__prompt {
@extend %ui-well;
position: relative;
margin-bottom: $baseline-v;
border: 1px solid $color-decorative-tertiary;
border-left: ($baseline-h/4) solid $color-decorative-secondary;
padding-left: ($baseline-h*0.75);
}
.openassessment__prompt__title {
......@@ -581,7 +621,6 @@
}
}
a {
@extend %link-copy;
}
......@@ -890,13 +929,10 @@
}
}
// --------------------
// UI: submitted repsonse
// --------------------
.submission__answer__display {
@extend %ui-subsection;
}
.submission__answer__display__title {
@extend %t-heading;
margin-bottom: ($baseline-v/2);
......@@ -1088,7 +1124,11 @@
color: $heading-secondary-color;
}
.submission__feedback__content {
.submission__feeedback__title__copy {
margin-left: ($baseline-h/4);
}
.submission__feeedback__content {
@extend %ui-subsection-content;
margin-bottom: $baseline-v;
}
......
apps/openassessment/xblock/static/sass/xb/elements/_forms.scss
......@@ -7,7 +7,16 @@
// contains all form elements inside of the main xblock wrapper
.wrapper--xblock {
// forms - general
// placeholder transitions
[placeholder]:focus::-webkit-input-placeholder {
@extend %trans-opacity;
opacity: 0.0;
}
// common inputs
input[type="text"],
input[type="email"],
input[type="password"],
......@@ -23,6 +32,7 @@
color: $copy-secondary-color;
}
// STATE: focus
&: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;
......
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