Skip to content

X
xblock-drag-and-drop-v2
Commit 3b99ed1f by Tim Krones
Options

Fix labels for input fields in Studio.

parent 3644354d
Showing with 38 additions and 43 deletions
drag_and_drop_v2/public/css/drag_and_drop_edit.css
...@@ -68,10 +68,17 @@ ...@@ -68,10 +68,17 @@
clear: both; clear: both;
} }
.xblock--drag-and-drop--editor .tab h3 { .xblock--drag-and-drop--editor .tab h3,
.xblock--drag-and-drop--editor .tab .h3 {
margin: 20px 0 8px 0; margin: 20px 0 8px 0;
} }
.xblock--drag-and-drop--editor .tab .h3 {
display: block;
font: inherit;
font-size: 100%;
}
.xblock--drag-and-drop--editor .tab-header, .xblock--drag-and-drop--editor .tab-header,
.xblock--drag-and-drop--editor .tab-content, .xblock--drag-and-drop--editor .tab-content,
.xblock--drag-and-drop--editor .tab-footer { .xblock--drag-and-drop--editor .tab-footer {
......
drag_and_drop_v2/public/js/drag_and_drop_edit.js
...@@ -77,8 +77,8 @@ function DragAndDropEditBlock(runtime, element, params) { ...@@ -77,8 +77,8 @@ function DragAndDropEditBlock(runtime, element, params) {
} }
// Set the target image and bind its event handler: // Set the target image and bind its event handler:
$('.target-image-form .url-input', element).val(_fn.data.targetImg); $('.target-image-form #background-url', element).val(_fn.data.targetImg);
$('.target-image-form .description-input', element).val(_fn.data.targetImgDescription); $('.target-image-form #background-description', element).val(_fn.data.targetImgDescription);
_fn.build.$el.targetImage.load(_fn.build.form.zone.imageLoaded); _fn.build.$el.targetImage.load(_fn.build.form.zone.imageLoaded);
_fn.build.$el.targetImage.attr('src', params.target_img_expanded_url); _fn.build.$el.targetImage.attr('src', params.target_img_expanded_url);
_fn.build.$el.targetImage.attr('alt', _fn.data.targetImgDescription); _fn.build.$el.targetImage.attr('alt', _fn.data.targetImgDescription);
...@@ -129,7 +129,7 @@ function DragAndDropEditBlock(runtime, element, params) { ...@@ -129,7 +129,7 @@ function DragAndDropEditBlock(runtime, element, params) {
.on('click', '.target-image-form button', function(e) { .on('click', '.target-image-form button', function(e) {
e.preventDefault(); e.preventDefault();
var new_img_url = $.trim($('.target-image-form .url-input', element).val()); var new_img_url = $.trim($('.target-image-form #background-url', element).val());
if (new_img_url) { if (new_img_url) {
// We may need to 'expand' the URL before it will be valid. // We may need to 'expand' the URL before it will be valid.
// e.g. '/static/blah.png' becomes '/asset-v1:course+id/blah.png' // e.g. '/static/blah.png' becomes '/asset-v1:course+id/blah.png'
...@@ -144,7 +144,7 @@ function DragAndDropEditBlock(runtime, element, params) { ...@@ -144,7 +144,7 @@ function DragAndDropEditBlock(runtime, element, params) {
_fn.data.targetImg = new_img_url; _fn.data.targetImg = new_img_url;
var new_description = $.trim( var new_description = $.trim(
$('.target-image-form .description-input', element).val() $('.target-image-form #background-description', element).val()
); );
_fn.build.$el.targetImage.attr('alt', new_description); _fn.build.$el.targetImage.attr('alt', new_description);
_fn.data.targetImgDescription = new_description; _fn.data.targetImgDescription = new_description;
...@@ -321,8 +321,8 @@ function DragAndDropEditBlock(runtime, element, params) { ...@@ -321,8 +321,8 @@ function DragAndDropEditBlock(runtime, element, params) {
}, },
feedback: function($form) { feedback: function($form) {
_fn.data.feedback = { _fn.data.feedback = {
start: $form.find('.intro-feedback').val(), start: $form.find('#intro-feedback').val(),
finish: $form.find('.final-feedback').val() finish: $form.find('#final-feedback').val()
}; };
}, },
item: { item: {
...@@ -437,13 +437,13 @@ function DragAndDropEditBlock(runtime, element, params) { ...@@ -437,13 +437,13 @@ function DragAndDropEditBlock(runtime, element, params) {
_fn.data.zones = _fn.build.form.zone.zoneObjects; _fn.data.zones = _fn.build.form.zone.zoneObjects;
var data = { var data = {
'display_name': $element.find('.display-name').val(), 'display_name': $element.find('#display-name').val(),
'show_title': $element.find('.show-title').is(':checked'), 'show_title': $element.find('.show-title').is(':checked'),
'weight': $element.find('.weight').val(), 'weight': $element.find('#weight').val(),
'problem_text': $element.find('.problem-text').val(), 'problem_text': $element.find('#problem-text').val(),
'show_problem_header': $element.find('.show-problem-header').is(':checked'), 'show_problem_header': $element.find('.show-problem-header').is(':checked'),
'item_background_color': $element.find('.item-background-color').val(), 'item_background_color': $element.find('#item-background-color').val(),
'item_text_color': $element.find('.item-text-color').val(), 'item_text_color': $element.find('#item-text-color').val(),
'data': _fn.data, 'data': _fn.data,
}; };
......
drag_and_drop_v2/templates/html/drag_and_drop_edit.html
...@@ -11,30 +11,30 @@ ...@@ -11,30 +11,30 @@
<section class="tab-content"> <section class="tab-content">
<form class="feedback-form"> <form class="feedback-form">
<h3>{% trans "Problem title" %}</h3> <label class="h3" for="display-name">{% trans "Problem title" %}</label>
<input class="display-name" value="{{ self.display_name }}" /> <input id="display-name" value="{{ self.display_name }}" />
<label title="{{ help_texts.show_title }}"> <label title="{{ help_texts.show_title }}">
<input class="show-title" type="checkbox" <input class="show-title" type="checkbox"
{% if self.show_title %}checked="checked"{% endif %}> {% if self.show_title %}checked="checked"{% endif %}>
{% trans "Show title" %} {% trans "Show title" %}
</label> </label>
<h3>{% trans "Maximum score" %}</h3> <label class="h3" for="weight">{% trans "Maximum score" %}</label>
<input type="number" step="0.1" class="weight" value="1" value="{{ self.weight }}" /> <input id="weight" type="number" step="0.1" value="{{ self.weight }}" />
<h3>{% trans "Problem text" %}</h3> <label class="h3" for="problem-text">{% trans "Problem text" %}</label>
<textarea class="problem-text">{{ self.question_text }}</textarea> <textarea id="problem-text">{{ self.question_text }}</textarea>
<label title="{{ help_texts.show_question_header }}"> <label title="{{ help_texts.show_question_header }}">
<input class="show-problem-header" type="checkbox" <input class="show-problem-header" type="checkbox"
{% if self.show_question_header %}checked="checked"{% endif %}> {% if self.show_question_header %}checked="checked"{% endif %}>
{% trans 'Show "Problem" heading' %} {% trans 'Show "Problem" heading' %}
</label> </label>
<h3>{% trans "Introductory Feedback" %}</h3> <label class="h3" for="intro-feedback">{% trans "Introductory Feedback" %}</label>
<textarea class="intro-feedback">{{ self.data.feedback.start }}</textarea> <textarea id="intro-feedback">{{ self.data.feedback.start }}</textarea>
<h3>{% trans "Final Feedback" %}</h3> <label class="h3" for="final-feedback">{% trans "Final Feedback" %}</label>
<textarea class="final-feedback">{{ self.data.feedback.finish }}</textarea> <textarea id="final-feedback">{{ self.data.feedback.finish }}</textarea>
</form> </form>
</section> </section>
</div> </div>
...@@ -45,18 +45,12 @@ ...@@ -45,18 +45,12 @@
</header> </header>
<section class="tab-content"> <section class="tab-content">
<form class="target-image-form"> <form class="target-image-form">
<h3 id="background-url-label"> <label class="h3" for="background-url">{% trans "Background URL" %}</label>
{% trans "Background URL" %} <input id="background-url"
</h3> type="text"
<input type="text"
class="url-input"
aria-labelledby="background-url-label"
placeholder="{% trans 'For example, http://example.com/background.png or /static/background.png' %}"> placeholder="{% trans 'For example, http://example.com/background.png or /static/background.png' %}">
<h3 id="background-description-label"> <label class="h3" for="background-description">{% trans "Background description" %}</label>
{% trans "Background description" %} <textarea id="background-description"
</h3>
<textarea class="description-input"
aria-labelledby="background-description-label"
aria-describedby="background-description-description"></textarea> aria-describedby="background-description-description"></textarea>
<div id="background-description-description" class="target-image-form-help"> <div id="background-description-description" class="target-image-form-help">
{% blocktrans %} {% blocktrans %}
...@@ -101,24 +95,18 @@ ...@@ -101,24 +95,18 @@
</header> </header>
<section class="tab-content"> <section class="tab-content">
<form class="item-styles-form"> <form class="item-styles-form">
<h3 id="item-background-color-label"> <label class="h3" for="item-background-color">{% trans "Background color" %}</label>
{% trans "Background color" %} <input id="item-background-color"
</h3>
<input class="item-background-color"
placeholder="e.g. blue or #0000ff" placeholder="e.g. blue or #0000ff"
value="{{ self.item_background_color}}" value="{{ self.item_background_color}}"
aria-labelledby="item-background-color-label"
aria-describedby="item-background-color-description"> aria-describedby="item-background-color-description">
<div id="item-background-color-description" class="item-styles-form-help"> <div id="item-background-color-description" class="item-styles-form-help">
{{ help_texts.item_background_color }} {{ help_texts.item_background_color }}
</div> </div>
<h3 id="item-text-color-label"> <label class="h3" for="item-text-color">{% trans "Text color" %}</label>
{% trans "Text color" %} <input id="item-text-color"
</h3>
<input class="item-text-color"
placeholder="e.g. white or #ffffff" placeholder="e.g. white or #ffffff"
value="{{ self.item_text_color}}" value="{{ self.item_text_color}}"
aria-labelledby="item-text-color-label"
aria-describedby="item-text-color-description"> aria-describedby="item-text-color-description">
<div id="item-text-color-description" class="item-styles-form-help"> <div id="item-text-color-description" class="item-styles-form-help">
{{ help_texts.item_text_color }} {{ help_texts.item_text_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