Move to a collapsible accordion for the settings

This commit is contained in:
Philipp Klaus 2016-12-19 01:24:26 +01:00
parent 3c26567223
commit 5df1ea821b

View File

@ -12,16 +12,38 @@
<div class="row">
<div class="col-md-4">
<fieldset class="form-group">
<label for="labelSize">Label Size:</label>
<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>
<label for="fontFamily">Font Selection:</label>
<select class="form-control" id="fontFamily" onChange="preview()">
{% for font in fonts %}<option>{{font}}</option> {% endfor %}
</select>
<label for="fontSize">Font Size:</label>
<input id="fontSize" type="text" name="quant[2]" class="form-control input-number" value="70" min="1" max="120" onChange="preview()">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Label Size</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<label for="labelSize" style="display: none">Label Size:</label>
<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>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Font Settings</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse in">
<label for="fontFamily">Font Family:</label>
<select class="form-control" id="fontFamily" onChange="preview()">
{% for font in fonts %}<option>{{font}}</option> {% endfor %}
</select>
<label for="fontSize" >Font Size:</label>
<input id="fontSize" class="form-control" type="number" min="1" value="70" max="150" onChange="preview()">
</div>
</div>
</div>
</fieldset>
</div>
<div class="col-md-4">