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 @@
<div class="ui-toggle-visibility__content">
<div class="wrapper--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>
<div class="submission__answer__display__content">
......@@ -24,7 +24,7 @@
</div>
</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>
<ol class="list submission__peer-evaluations__questions">
......@@ -138,86 +138,91 @@
</ol>
</article>
<form id="submission__feedback" class="submission__feedback" method="post">
<h3 class="submission__feedback__title">Give Feedback On Peer Evaluations</h3>
<form id="submission__feedback" class="submission__feedback ui-toggle-visibility step__content__section is--collapsed" method="post">
<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," }}">
<span class="transition__status is--hidden" aria-hidden="true">
<span class="wrapper--anim">
<i class="ico icon-refresh icon-spin"></i>
<span class="copy">Submitting Feedback</span>
<div class="ui-toggle-visibility__content">
<div class="submission__feedback__content {{ has_submitted_feedback|yesno:"is--submitted," }}">
<span class="transition__status is--hidden" aria-hidden="true">
<span class="wrapper--anim">
<i class="ico icon-refresh icon-spin"></i>
<span class="copy">Submitting Feedback</span>
</span>
</span>
</span>
<div class="message message--complete {{ has_submitted_feedback|yesno:",is--hidden" }}"
{{ has_submitted_feedback|yesno:'aria-hidden=false,aria-hidden=true' }}>
<h3 class="message__title">Your Feedback Has Been Submitted</h3>
<div class="message__content">
<p>Your feedback will be sent to this course's staff for use when they review course records.</p>
<div class="message message--complete {{ has_submitted_feedback|yesno:",is--hidden" }}"
{{ has_submitted_feedback|yesno:'aria-hidden=false,aria-hidden=true' }}>
<h3 class="message__title">Your Feedback Has Been Submitted</h3>
<div class="message__content">
<p>Your feedback will be sent to this course's staff for use when they review course records.</p>
</div>
</div>
</div>
<div class="submission__feedback__instructions {{ has_submitted_feedback|yesno:"is--hidden," }}"
{{ 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>
</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 class="submission__feedback__instructions {{ has_submitted_feedback|yesno:"is--hidden," }}"
{{ 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>
</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>
<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>
</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>
</form>
......
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