add a percent sign to the margin inputs

This commit is contained in:
Philipp Klaus 2017-02-10 10:34:46 +01:00
parent 7bf6b40c94
commit cabd61c4ea

View File

@ -79,14 +79,21 @@
<div id="collapse3" class="panel-collapse collapse"> <div id="collapse3" class="panel-collapse collapse">
<div class="chooser panel-body"> <div class="chooser panel-body">
<label for="marginTop">Margin Top:</label> <label for="marginTop">Margin Top:</label>
<input id="marginTop" class="form-control" type="number" min="0" max="200" value="24" onChange="preview()" required> <div class="input-group marginsTopBottom">
<input id="marginTop" class="form-control" type="number" min="0" max="200" value="24" onChange="preview()" required> <span class="input-group-addon">%</span>
</div>
<label for="marginBottom">Margin Bottom:</label> <label for="marginBottom">Margin Bottom:</label>
<input id="marginBottom" class="form-control" type="number" min="0" max="200" value="45" onChange="preview()" required> <div class="input-group marginsTopBottom">
<input id="marginBottom" class="form-control" type="number" min="0" max="200" value="45" onChange="preview()" required> <span class="input-group-addon">%</span>
</div>
<label for="marginLeft">Margin Left:</label> <label for="marginLeft">Margin Left:</label>
<input id="marginLeft" class="form-control" type="number" min="0" max="200" value="35" onChange="preview()" required> <div class="input-group marginsLeftRight">
<input id="marginLeft" class="form-control" type="number" min="0" max="200" value="35" onChange="preview()" required> <span class="input-group-addon">%</span>
</div>
<label for="marginRight">Margin Right:</label> <label for="marginRight">Margin Right:</label>
<input id="marginRight" class="form-control" type="number" min="0" max="200" value="35" onChange="preview()" required> <div class="input-group marginsLeftRight">
(margins in % of font size) <input id="marginRight" class="form-control" type="number" min="0" max="200" value="35" onChange="preview()" required> <span class="input-group-addon">%</span>
</div>
</div> <!-- class="chooser panel-body" --> </div> <!-- class="chooser panel-body" -->
</div> </div>
</div> </div>
@ -142,18 +149,12 @@ function formData() {
} }
function preview() { function preview() {
// http://stackoverflow.com/a/16284355
// http://stackoverflow.com/a/7697455
if ($('input[name=orientation]:checked').val() == 'standard') { if ($('input[name=orientation]:checked').val() == 'standard') {
$('#marginTop').prop('disabled', false).removeAttr('title'); $('.marginsTopBottom').prop('disabled', false).removeAttr('title');
$('#marginBottom').prop('disabled',false).removeAttr('title'); $('.marginsLeftRight').prop('disabled', true).prop('title', 'Only relevant if rotated orientation is selected.');
$('#marginLeft').prop('disabled', true).prop('title', 'Only relevant if rotated orientation is selected.');
$('#marginRight').prop('disabled', true).prop('title', 'Only relevant if rotated orientation is selected.');
} else { } else {
$('#marginTop').prop('disabled', true).prop('title', 'Only relevant if standard orientation is selected.'); $('.marginsTopBottom').prop('disabled', true).prop('title', 'Only relevant if standard orientation is selected.');
$('#marginBottom').prop('disabled',true).prop('title', 'Only relevant if standard orientation is selected.'); $('.marginsLeftRight').prop('disabled', false).removeAttr('title');
$('#marginLeft').prop('disabled', false).removeAttr('title');
$('#marginRight').prop('disabled', false).removeAttr('title');
} }
$.ajax({ $.ajax({
type: 'POST', type: 'POST',