Skip to content

E
edx-ora2
Commit d1154015 by gradyward Committed by Will Daly
Options

Broadens the scope of the validation alert, and adjusts the editor height based on the alert height 

Conflicts:
	openassessment/xblock/static/js/openassessment-studio.min.js
parent a5921b62
Showing with 104 additions and 94 deletions
openassessment/templates/openassessmentblock/edit/oa_edit.html
......@@ -13,6 +13,18 @@
</ul>
</div>
<div id="openassessment_validation_alert" class="is--hidden">
<i class="openassessment_alert_icon"></i>
<div class="openassessment_alert_header">
<h2 class="openassessment_alert_title">{% trans "Rubric Change Impacts Settings Section" %}</h2>
<p class="openassessment_alert_message">{% trans "A change that you made to this assessment's rubric has an impact on some examples laid out in the settings tab. For more information, go to the Settings section and fix areas highlighted in red." %}</p>
</div>
<a href="" rel="view" class="action openassessment_alert_close">
<i class="icon-remove-sign"></i>
<span class="label is--hidden">{% trans "close alert" %}</span>
</a>
</div>
<div id="oa_prompt_editor_wrapper" class="oa_editor_content_wrapper">
<textarea id="openassessment_prompt_editor">{{ prompt }}</textarea>
</div>
......
openassessment/templates/openassessmentblock/edit/oa_edit_rubric.html
......@@ -9,19 +9,6 @@
{% include "openassessmentblock/edit/oa_edit_option.html" with option_name="" option_label="" option_points=1 option_explanation="" %}
</div>
<div id="openassessment_rubric_validation_alert" class="is--hidden">
<i class="openassessment_alert_icon"></i>
<div class="openassessment_alert_header">
<h2 class="openassessment_alert_title">{% trans "Rubric Change Impacts Settings Section" %}</h2>
<p class="openassessment_alert_message">{% trans "A change that you made to this assessment's rubric has an impact on some examples laid out in the settings tab. For more information, go to the Settings section and fix areas highlighted in red." %}</p>
</div>
<a href="" rel="view" class="action openassessment_alert_close">
<i class="icon-remove-sign"></i>
<span class="label is--hidden">{% trans "close alert" %}</span>
</a>
</div>
<div id="openassessment_rubric_content_editor">
<div id="openassessment_rubric_instructions">
<p class = openassessment_description>
{% trans "For open response problems, assessment is rubric-based. Rubric criterion have point breakdowns and explanations to help students with peer and self assessment steps. For more information on how to build your rubric, see our online help documentation."%}
......@@ -57,6 +44,5 @@
</ul>
</div>
</div>
</div>
{% endspaceless %}
\ No newline at end of file
openassessment/xblock/static/css/openassessment.css
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/js/src/studio/oa_edit_listeners.js
......@@ -4,7 +4,7 @@ changes to the rubric.
**/
OpenAssessment.StudentTrainingListener = function() {
this.element = $('#oa_student_training_editor');
this.alert = new OpenAssessment.ValidationAlert($('#openassessment_rubric_validation_alert'));
this.alert = new OpenAssessment.ValidationAlert();
};
OpenAssessment.StudentTrainingListener.prototype = {
......
openassessment/xblock/static/js/src/studio/oa_edit_rubric.js
......@@ -26,7 +26,7 @@ OpenAssessment.EditRubricView = function(element, notifier) {
notifier: notifier
}
);
this.alert = new OpenAssessment.ValidationAlert($('#openassessment_rubric_validation_alert', this.element));
this.alert = new OpenAssessment.ValidationAlert();
};
OpenAssessment.EditRubricView.prototype = {
......
openassessment/xblock/static/js/src/studio/oa_edit_validation_alert.js
......@@ -6,8 +6,8 @@ Returns:
Openassessment.ValidationAlert
*/
OpenAssessment.ValidationAlert = function() {
this.element = $('#openassessment_rubric_validation_alert');
this.rubricContentElement = $('#openassessment_rubric_content_editor');
this.element = $('#openassessment_validation_alert');
this.editorElement = $(this.element).parent();
this.title = $(".openassessment_alert_title", this.element);
this.message = $(".openassessment_alert_message", this.element);
};
......@@ -34,8 +34,19 @@ OpenAssessment.ValidationAlert.prototype = {
OpenAssessment.ValidationAlert
*/
hide: function() {
// Finds the height of all other elements in the editor_and_tabs (the Header) and sets the height
// of the editing area to be 100% of that element minus those constraints.
var headerHeight = $('#openassessment_editor_header', this.editorElement).outerHeight();
this.element.addClass('is--hidden');
this.rubricContentElement.removeClass('openassessment_alert_shown');
var styles = {
'height': 'Calc(100% - ' + headerHeight + 'px)',
'border-top-right-radius': '3px',
'border-top-left-radius': '3px'
};
$('.oa_editor_content_wrapper', this.editorElement).each( function () {
$(this).css(styles);
});
return this;
},
......@@ -47,7 +58,19 @@ OpenAssessment.ValidationAlert.prototype = {
*/
show : function() {
this.element.removeClass('is--hidden');
this.rubricContentElement.addClass('openassessment_alert_shown');
// Finds the height of all other elements in the editor_and_tabs (the Header and Alert) and sets
// the height of the editing area to be 100% of that element minus those constraints.
var headerHeight = $('#openassessment_editor_header', this.editorElement).outerHeight();
var heightString = 'Calc(100% - ' + (this.element.outerHeight() + headerHeight) + 'px)';
var styles = {
'height': heightString,
'border-top-right-radius': '0px',
'border-top-left-radius': '0px'
};
$('.oa_editor_content_wrapper', this.editorElement).each( function () {
$(this).css(styles);
});
return this;
},
......
openassessment/xblock/static/sass/oa/utilities/_developer.scss
......@@ -184,7 +184,7 @@
.openassessment_editor_content_and_tabs {
width: 100%;
height: Calc(100% - 97px);
height: Calc(100% - 55px);
}
#oa_editor_window_title{
......@@ -229,14 +229,75 @@
}
}
#openassessment_validation_alert{
height: auto;
width: 100%;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
background-color: #323232;
border-bottom: 3px solid rgb(192, 172, 0);
padding: 10px;
position: absolute;
z-index: 10;
min-height: 70px;
@include transition (color 0.50s ease-in-out 0s);
.openassessment_alert_icon:before{
font-family: FontAwesome;
content: "\f071";
display: inline-block;
color: rgb(192, 172, 0);
float: left;
font-size: 200%;
margin: 1.5% 0px 0px 2%;
}
.openassessment_alert_header {
width: 85%;
margin: 0 5% 0 10%;
.openassessment_alert_title {
width: auto;
color: white;
}
.openassessment_alert_message {
font-size: 80%;
color: darkgray;
}
}
// with cancel
.openassessment_alert_close {
display: inline-block;
position: absolute;
top: 0px;
right: 0px;
color: #e9e9e9;
background: #323232;
text-align: center;
margin: 5px 10px;
[class^="icon"] {
width: auto;
margin: 0;
padding: 2px;
}
&:hover {
color: $blue;
}
}
}
.oa_editor_content_wrapper {
height: Calc(100% - 1px);
height: Calc(100% - 42px);
width: 100%;
border-radius: 3px;
border: 1px solid $edx-gray-d1;
background-color: white;
overflow-y: scroll;
position: absolute;
bottom: 0;
}
#openassessment_prompt_editor {
......@@ -426,77 +487,6 @@
#oa_rubric_editor_wrapper{
#openassessment_rubric_validation_alert{
height: auto;
width: 100%;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
background-color: #323232;
border-bottom: 3px solid rgb(192, 172, 0);
padding: 10px;
position: absolute;
z-index: 10;
min-height: 70px;
@include transition (color 0.50s ease-in-out 0s);
.openassessment_alert_icon:before{
font-family: FontAwesome;
content: "\f071";
display: inline-block;
color: rgb(192, 172, 0);
float: left;
font-size: 200%;
margin: 1.5% 0px 0px 2%;
}
.openassessment_alert_header {
width: 85%;
margin: 0 5% 0 10%;
.openassessment_alert_title {
width: auto;
color: white;
}
.openassessment_alert_message {
font-size: 80%;
color: darkgray;
}
}
// with cancel
.openassessment_alert_close {
display: inline-block;
position: absolute;
top: 0px;
right: 0px;
color: #e9e9e9;
background: #323232;
text-align: center;
margin: 5px 10px;
[class^="icon"] {
width: auto;
margin: 0;
padding: 2px;
}
&:hover {
color: $blue;
}
}
}
#openassessment_rubric_content_editor{
height: 100%;
overflow-y: scroll;
}
#openassessment_rubric_content_editor.openassessment_alert_shown{
height: Calc(100% - 70px);
position: absolute;
bottom: 0;
}
.wrapper-comp-settings{
display: initial;
}
......
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