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 165 additions and 109 deletions
apps/openassessment/templates/openassessmentblock/grade/oa_grade_complete.html
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<div class="ui-toggle-visibility__content"> <div class="ui-toggle-visibility__content">
<div class="wrapper--step__content"> <div class="wrapper--step__content">
<div class="step__content"> <div class="step__content">
<article class="submission__answer__display"> <article class="submission__answer__display step__content__section">
<h3 class="submission__answer__display__title">Your Submitted Response</h3> <h3 class="submission__answer__display__title">Your Submitted Response</h3>
<div class="submission__answer__display__content"> <div class="submission__answer__display__content">
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</div> </div>
</article> </article>
<article class="submission__peer-evaluations"> <article class="submission__peer-evaluations step__content__section">
<h3 class="submission__peer-evaluations__title">Peer Evaluations Of Your Response</h3> <h3 class="submission__peer-evaluations__title">Peer Evaluations Of Your Response</h3>
<ol class="list submission__peer-evaluations__questions"> <ol class="list submission__peer-evaluations__questions">
...@@ -138,86 +138,91 @@ ...@@ -138,86 +138,91 @@
</ol> </ol>
</article> </article>
<form id="submission__feedback" class="submission__feedback" method="post"> <form id="submission__feedback" class="submission__feedback ui-toggle-visibility step__content__section is--collapsed" method="post">
<h3 class="submission__feedback__title">Give Feedback On Peer Evaluations</h3> <i class="ico icon-caret-right"></i>
<h3 class="submission__feedback__title ui-toggle-visibility__control">Give Feedback On Peer Evaluations</h3>
<div class="submission__feedback__content {{ has_submitted_feedback|yesno:"is--submitted," }}"> <div class="ui-toggle-visibility__content">
<span class="transition__status is--hidden" aria-hidden="true">
<span class="wrapper--anim"> <div class="submission__feedback__content {{ has_submitted_feedback|yesno:"is--submitted," }}">
<i class="ico icon-refresh icon-spin"></i> <span class="transition__status is--hidden" aria-hidden="true">
<span class="copy">Submitting Feedback</span> <span class="wrapper--anim">
<i class="ico icon-refresh icon-spin"></i>
<span class="copy">Submitting Feedback</span>
</span>
</span> </span>
</span>
<div class="message message--complete {{ has_submitted_feedback|yesno:",is--hidden" }}" <div class="message message--complete {{ has_submitted_feedback|yesno:",is--hidden" }}"
{{ has_submitted_feedback|yesno:'aria-hidden=false,aria-hidden=true' }}> {{ has_submitted_feedback|yesno:'aria-hidden=false,aria-hidden=true' }}>
<h3 class="message__title">Your Feedback Has Been Submitted</h3> <h3 class="message__title">Your Feedback Has Been Submitted</h3>
<div class="message__content"> <div class="message__content">
<p>Your feedback will be sent to this course's staff for use when they review course records.</p> <p>Your feedback will be sent to this course's staff for use when they review course records.</p>
</div>
</div> </div>
</div>
<div class="submission__feedback__instructions {{ has_submitted_feedback|yesno:"is--hidden," }}" <div class="submission__feedback__instructions {{ has_submitted_feedback|yesno:"is--hidden," }}"
{{ has_submitted_feedback|yesno:'aria-hidden=true,aria-hidden=false' }}> {{ has_submitted_feedback|yesno:'aria-hidden=true,aria-hidden=false' }}>
<p>Course staff will be able to see any feedback that you provide here when they review course records.</p> <p>Course staff will be able to see any feedback that you provide here when they review course records.</p>
</div>
<ol class="list list--fields submission__feedback__fields {{ has_submitted_feedback|yesno:"is--hidden," }}"
{{ has_submitted_feedback|yesno:'aria-hidden=true,aria-hidden=false' }}>
<li class="field field-group field--radio feedback__overall" id="feedback__overall">
<h4 class="field-group__label">Please select the statements below that reflect what you think of this peer grading experience:</h4>
<ol class="list--options">
<li class="option option--useful">
<input type="checkbox"
name="feedback__overall__value"
id="feedback__overall__value--useful"
class="option__input feedback__overall__value"
value="These assessments were useful." />
<label class="option__label" for="feedback__overall__value--useful">These assessments were useful.</label>
</li>
<li class="option option--notuseful">
<input type="checkbox"
name="feedback__overall__value"
id="feedback__overall__value--notuseful"
class="option__input feedback__overall__value"
value="These assessments were not useful." />
<label class="option__label" for="feedback__overall__value--notuseful">These assessments were not useful.</label>
</li>
<li class="option option--disagree">
<input type="checkbox"
name="feedback__overall__value"
id="feedback__overall__value--disagree"
class="option__input feedback__overall__value"
value="I disagree with the ways that my peers assessed me." />
<label class="option__label" for="feedback__overall__value--disagree">I disagree with the ways that my peers assessed me.</label>
</li>
<li class="option option--inappropriate">
<input type="checkbox"
name="feedback__overall__value"
id="feedback__overall__value--inappropriate"
class="option__input feedback__overall__value"
value="I received some inappropriate comments." />
<label class="option__label" for="feedback__overall__value--inappropriate">I received some inappropriate comments.</label>
</li>
</ol>
</li>
<li class="field field--textarea feedback__remarks" id="feedback__remarks">
<label for="feedback__remarks__value">Please provide any thoughts or comments on the feedback you received from your peers here.</label>
<textarea id="feedback__remarks__value" placeholder="I feel the feedback I received was...">{{ feedback_text }}</textarea>
</li>
</ol>
<div class="submission__feedback__actions {{ has_submitted_feedback|yesno:"is--hidden," }}"
{{ has_submitted_feedback|yesno:'aria-hidden=true,aria-hidden=false' }}>
<div class="message message--inline message--error message--error-server">
<h3 class="message__title">We could not submit your feedback</h3>
<div class="message__content"></div>
</div> </div>
<ul class="list list--actions submission__feedback__actions"> <ol class="list list--fields submission__feedback__fields {{ has_submitted_feedback|yesno:"is--hidden," }}"
<li class="list--actions__item"> {{ has_submitted_feedback|yesno:'aria-hidden=true,aria-hidden=false' }}>
<button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback On Peer Evaluations</button> <li class="field field-group field--radio feedback__overall" id="feedback__overall">
<h4 class="field-group__label">Please select the statements below that reflect what you think of this peer grading experience:</h4>
<ol class="list--options">
<li class="option option--useful">
<input type="checkbox"
name="feedback__overall__value"
id="feedback__overall__value--useful"
class="option__input feedback__overall__value"
value="These assessments were useful." />
<label class="option__label" for="feedback__overall__value--useful">These assessments were useful.</label>
</li>
<li class="option option--notuseful">
<input type="checkbox"
name="feedback__overall__value"
id="feedback__overall__value--notuseful"
class="option__input feedback__overall__value"
value="These assessments were not useful." />
<label class="option__label" for="feedback__overall__value--notuseful">These assessments were not useful.</label>
</li>
<li class="option option--disagree">
<input type="checkbox"
name="feedback__overall__value"
id="feedback__overall__value--disagree"
class="option__input feedback__overall__value"
value="I disagree with the ways that my peers assessed me." />
<label class="option__label" for="feedback__overall__value--disagree">I disagree with the ways that my peers assessed me.</label>
</li>
<li class="option option--inappropriate">
<input type="checkbox"
name="feedback__overall__value"
id="feedback__overall__value--inappropriate"
class="option__input feedback__overall__value"
value="I received some inappropriate comments." />
<label class="option__label" for="feedback__overall__value--inappropriate">I received some inappropriate comments.</label>
</li>
</ol>
</li> </li>
</ul> <li class="field field--textarea feedback__remarks" id="feedback__remarks">
<label for="feedback__remarks__value">Please provide any thoughts or comments on the feedback you received from your peers here.</label>
<textarea id="feedback__remarks__value" placeholder="I feel the feedback I received was...">{{ feedback_text }}</textarea>
</li>
</ol>
<div class="submission__feedback__actions {{ has_submitted_feedback|yesno:"is--hidden," }}"
{{ has_submitted_feedback|yesno:'aria-hidden=true,aria-hidden=false' }}>
<div class="message message--inline message--error message--error-server">
<h3 class="message__title">We could not submit your feedback</h3>
<div class="message__content"></div>
</div>
<ul class="list list--actions submission__feedback__actions">
<li class="list--actions__item">
<button type="submit" id="feedback__submit" class="action action--submit feedback__submit">Submit Feedback On Peer Evaluations</button>
</li>
</ul>
</div>
</div> </div>
</div> </div>
</form> </form>
......
apps/openassessment/templates/openassessmentblock/oa_base.html
...@@ -23,14 +23,13 @@ ...@@ -23,14 +23,13 @@
<!-- if the problem is unstarted or response hasn't been submitted --> <!-- if the problem is unstarted or response hasn't been submitted -->
<div id="openassessment__message" class="openassessment__message message"> <div id="openassessment__message" class="openassessment__message message">
<div class="message__content"> <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>
</div> </div>
{% endblock %} {% endblock %}
<div class="wrapper--openassessment__prompt"> <div class="wrapper--openassessment__prompt">
<article class="openassessment__prompt ui-toggle-visibility"> <article class="openassessment__prompt ui-toggle-visibility">
<h2 class="openassessment__prompt__title">This Problem's Prompt/Question</h2> <h2 class="openassessment__prompt__title">This Problem's Prompt/Question</h2>
<div class="openassessment__prompt__copy ui-toggle-visibility__content"> <div class="openassessment__prompt__copy ui-toggle-visibility__content">
...@@ -54,10 +53,8 @@ ...@@ -54,10 +53,8 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="wrapper--anim"> <i class="ico icon-refresh icon-spin"></i>
<span class="copy">Loading</span> <span class="copy">Loading</span>
<i class="ico icon-refresh icon-spin"></i>
</span>
</span> </span>
</span> </span>
</header> </header>
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_closed.html
...@@ -9,11 +9,11 @@ ...@@ -9,11 +9,11 @@
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy"> <span class="copy">
<i class="ico icon-warning-sign"></i>
Incomplete Incomplete
(<span class="step__status__value--completed">{{ graded }}</span> of (<span class="step__status__value--completed">{{ graded }}</span> of
<span class="step__status__value--required">{{ must_grade }}</span>) <span class="step__status__value--required">{{ must_grade }}</span>)
</span> </span>
<i class="ico icon-warning-sign"></i>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_complete.html
...@@ -8,11 +8,12 @@ ...@@ -8,11 +8,12 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="ico icon-ok"></i>
<span class="copy"> <span class="copy">
Complete 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> </span>
<i class="ico icon-ok"></i>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode.html
...@@ -8,11 +8,11 @@ ...@@ -8,11 +8,11 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="ico icon-ok"></i>
<span class="copy"> <span class="copy">
Complete Complete
(<span class="step__status__value--completed">{{ graded }}</span>) (<span class="step__status__value--completed">{{ graded }}</span>
</span> </span>
<i class="ico icon-ok"></i>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/peer/oa_peer_turbo_mode_waiting.html
...@@ -8,11 +8,11 @@ ...@@ -8,11 +8,11 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<i class="ico icon-ok"></i>
<span class="copy"> <span class="copy">
Complete Complete
(<span class="step__status__value--completed">{{ graded }}</span>) (<span class="step__status__value--completed">{{ graded }}</span>
</span> </span>
<i class="ico icon-ok"></i>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/response/oa_response_closed.html
...@@ -7,8 +7,8 @@ ...@@ -7,8 +7,8 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">Incomplete</span>
<i class="ico icon-warning-sign"></i> <i class="ico icon-warning-sign"></i>
<span class="copy">Incomplete</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/response/oa_response_graded.html
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">Complete</span>
<i class="ico icon-ok"></i> <i class="ico icon-ok"></i>
<span class="copy">Complete</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/response/oa_response_submitted.html
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">Complete</span>
<i class="ico icon-ok"></i> <i class="ico icon-ok"></i>
<span class="copy">Complete</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/self/oa_self_closed.html
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">Incomplete</span>
<i class="ico icon-warning-sign"></i> <i class="ico icon-warning-sign"></i>
<span class="copy">Incomplete</span>
</span> </span>
</span> </span>
{% endblock %} {% endblock %}
......
apps/openassessment/templates/openassessmentblock/self/oa_self_complete.html
...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
<span class="step__status"> <span class="step__status">
<span class="step__status__label">This step's status:</span> <span class="step__status__label">This step's status:</span>
<span class="step__status__value"> <span class="step__status__value">
<span class="copy">Complete</span>
<i class="ico icon-ok"></i> <i class="ico icon-ok"></i>
<span class="copy">Complete</span>
</span> </span>
</span> </span>
{% endblock %} {% 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 @@ ...@@ -37,10 +37,13 @@
// step title/name // step title/name
h2.step__title { h2.step__title {
@include span-columns(3 of 4);
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 media($bp-ds) {
@include span-columns(4 of 6); @include span-columns(4 of 6);
} }
......
apps/openassessment/xblock/static/sass/oa/views/_oa-base.scss
...@@ -215,6 +215,12 @@ ...@@ -215,6 +215,12 @@
margin-left: ($baseline-h/2); margin-left: ($baseline-h/2);
border-left: 1px solid $color-decorative-tertiary; border-left: 1px solid $color-decorative-tertiary;
padding-left: ($baseline-h/2); padding-left: ($baseline-h/2);
@include media($bp-m) {
margin-left: 0;
border-left: none;
padding-left: 0;
}
} }
.step__counter { .step__counter {
...@@ -226,7 +232,15 @@ ...@@ -226,7 +232,15 @@
content: counter(item, decimal); content: counter(item, decimal);
counter-increment: item; counter-increment: item;
color: $color-decorative-tertiary; color: $color-decorative-tertiary;
}
@include media($bp-m) {
display: none;
&:before {
display: none;
}
} }
} }
...@@ -247,18 +261,36 @@ ...@@ -247,18 +261,36 @@
// step status // step status
.step__status { .step__status {
display: inline-block;
.step__status__value { .step__status__value {
border-radius: ($baseline-v/10); border-radius: ($baseline-v/10);
padding: ($baseline-v/4) ($baseline-h/4); padding: ($baseline-v/4) ($baseline-h/4);
background: $color-decorative-tertiary; 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 { .ico {
@extend %icon-3; @extend %icon-3;
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: baseline;
margin-left: ($baseline-v/4); margin-right: ($baseline-v/4);
} }
.copy { .copy {
...@@ -274,32 +306,28 @@ ...@@ -274,32 +306,28 @@
@include span-columns(2 of 6); @include span-columns(2 of 6);
@include omega(); @include omega();
position: relative; position: relative;
top: -8px; top: -12px;
text-align: right;
} }
@include media($bp-dm) { @include media($bp-dm) {
@include span-columns(3 of 12); @include span-columns(3 of 12);
@include omega(); @include omega();
position: relative; position: relative;
top:-8px; top:-12px;
text-align: right;
} }
@include media($bp-dl) { @include media($bp-dl) {
@include span-columns(3 of 12); @include span-columns(3 of 12);
@include omega(); @include omega();
position: relative; position: relative;
top: -8px; top: -12px;
text-align: right;
} }
@include media($bp-dx) { @include media($bp-dx) {
@include span-columns(3 of 12); @include span-columns(3 of 12);
@include omega(); @include omega();
position: relative; position: relative;
top: -8px; top: -12px;
text-align: right;
} }
} }
...@@ -332,6 +360,14 @@ ...@@ -332,6 +360,14 @@
margin-bottom: $baseline-v; margin-bottom: $baseline-v;
} }
.step__content__section {
margin-bottom: ($baseline-v*2);
&:last-child {
@extend %wipe-last-child;
}
}
// step actions // step actions
.step__actions { .step__actions {
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
...@@ -562,7 +598,11 @@ ...@@ -562,7 +598,11 @@
.openassessment__prompt { .openassessment__prompt {
@extend %ui-well; @extend %ui-well;
position: relative;
margin-bottom: $baseline-v; 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 { .openassessment__prompt__title {
...@@ -581,7 +621,6 @@ ...@@ -581,7 +621,6 @@
} }
} }
a { a {
@extend %link-copy; @extend %link-copy;
} }
...@@ -890,13 +929,10 @@ ...@@ -890,13 +929,10 @@
} }
} }
// -------------------- // --------------------
// UI: submitted repsonse // UI: submitted repsonse
// -------------------- // --------------------
.submission__answer__display {
@extend %ui-subsection;
}
.submission__answer__display__title { .submission__answer__display__title {
@extend %t-heading; @extend %t-heading;
margin-bottom: ($baseline-v/2); margin-bottom: ($baseline-v/2);
...@@ -1088,7 +1124,11 @@ ...@@ -1088,7 +1124,11 @@
color: $heading-secondary-color; color: $heading-secondary-color;
} }
.submission__feedback__content { .submission__feeedback__title__copy {
margin-left: ($baseline-h/4);
}
.submission__feeedback__content {
@extend %ui-subsection-content; @extend %ui-subsection-content;
margin-bottom: $baseline-v; margin-bottom: $baseline-v;
} }
......
apps/openassessment/xblock/static/sass/xb/elements/_forms.scss
...@@ -7,7 +7,16 @@ ...@@ -7,7 +7,16 @@
// contains all form elements inside of the main xblock wrapper // contains all form elements inside of the main xblock wrapper
.wrapper--xblock { .wrapper--xblock {
// forms - general // forms - general
// placeholder transitions
[placeholder]:focus::-webkit-input-placeholder {
@extend %trans-opacity;
opacity: 0.0;
}
// common inputs
input[type="text"], input[type="text"],
input[type="email"], input[type="email"],
input[type="password"], input[type="password"],
...@@ -23,6 +32,7 @@ ...@@ -23,6 +32,7 @@
color: $copy-secondary-color; color: $copy-secondary-color;
} }
// STATE: focus
&: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); 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; 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