Commit e381eb15 by Brian Talbot

adding styling and markup for step loading-based errors

parent b617ad3a
...@@ -64,6 +64,33 @@ ...@@ -64,6 +64,33 @@
</header> </header>
</li> </li>
{% endfor %} {% endfor %}
<li class="openassessment__steps__step has--error">
<header class="step__header">
<h2 class="step__title">
<span class="step__counter"></span>
<span class="wrapper--copy">
<span class="step__label">Your Response</span>
<div class="message message--error message--error-server">
<div class="message__content">
<p>There was a problem communicating with the server. Please try again.</p>
</div>
</div>
</span>
</h2>
<span class="step__status">
<span class="step__status__label">This step's status:</span>
<span class="step__status__value">
<i class="icon-warning-sign"></i>
<span class="copy">Unable to Load</span>
</span>
</span>
</span>
</header>
</li>
</ol> </ol>
</div> </div>
</div> </div>
......
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -403,16 +403,29 @@ ...@@ -403,16 +403,29 @@
} }
} }
// STATE: step is saved // STATE: has error
&.is--saved { &.has--error {
.step__counter:before {
border-color: rgba($color-error, 0.5);
color: $color-error;
}
.step__status__value { .step__status__value {
background: $color-primary; background: $color-error;
.copy { .copy {
color: $white-t; color: $white-t;
} }
} }
.step__label {
color: $color-error;
}
.message {
}
} }
} }
......
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