New 'orientation' radio button in web UI

This commit is contained in:
Philipp Klaus
2017-02-06 13:27:31 +01:00
parent efb224d346
commit 64a1ba5eb7
2 changed files with 40 additions and 17 deletions

View File

@@ -26,7 +26,14 @@
<select class="form-control" id="labelSize" onChange="preview()">
{% for label_size in label_sizes %}<option value="{{label_size[0]}}">{{label_size[1]}}</option>{% endfor %}
</select>
</div> <!-- class="chooser panel-body" -->
<label for="orientation" style="margin-top: 10px; margin-bottom: 0">Label Orientation:</label>
<div class="radio" style="margin-top: 5px;">
<label><input type="radio" onchange="preview()" name="orientation" value="standard" checked>Standard</label>
</div>
<div class="radio">
<label><input type="radio" onchange="preview()" name="orientation" value="rotated">Rotated</label>
</div>
</div> <!-- class="chooser panel-body" -->
</div>
</div>
<div class="panel panel-default">
@@ -86,8 +93,8 @@
</div>
<div class="col-md-4">
<fieldset class="form-group">
<label for="previewImg">Label Preview:</label>
<img id="previewImg" style="border: 1px solid #444; width: 90%; margin: 5%;"/>
<label for="previewImg">Label Preview:</label><br />
<img id="previewImg" style="border: 1px solid #444; max-height: 350px; width: auto; max-width: 100%; margin-bottom: 10px;"/>
<button id="printButton" type="button" class="btn btn-primary btn-block btn-lg" onClick="print()">
<span class="glyphicon glyphicon-print" aria-hidden="true"></span> Print
</button>
@@ -116,7 +123,8 @@ function formData() {
font_family: $('#fontFamily option:selected').text(),
font_size: $('#fontSize').val(),
label_size: $('#labelSize option:selected').val(),
align: $('input[name=fontAlign]:checked').val()
align: $('input[name=fontAlign]:checked').val(),
orientation: $('input[name=orientation]:checked').val()
}
}