Slightly rearrange the options to the right - still WIP

This commit is contained in:
Oliver Falk
2022-12-31 20:41:05 +01:00
parent 419f8fce90
commit 65be9ac7cd

View File

@@ -46,17 +46,23 @@
}
</script>
<h3>{% trans 'Adjust your avatar:' %}</h3>
<div>
<div>
<div id="preview_and_download" style="float:left;width:50%;" data-spy="affix" data-offset-top="0" data-offset-bottom="200">
<h3>{% trans 'Adjust your avatar' %}</h3>
<div id="avatar_image_div">
<img id="avatar_image" width="172px" style="float:left;">
<script>
update_image();
</script>
<img id="avatar_image" width="172px">
<script>update_image();</script>
</div>
<div id="options">
<div class="form-group" role="group" style="float:right;width:50%">
<div class="form-group" role="group" style="margin-top:5px;align:center;">
<button type="button" class="btn btn-info" onclick='url=$("#avatar_image").attr("src")+"&format=svg";window.open(url);'>Download SVG</button>
&nbsp;
<button type="button" class="btn btn-info" onclick='url=$("#avatar_image").attr("src")+"&format=png";window.open(url);'>Download PNG</button>
</div>
</div>
<div id="options" style="float:right;">
<!--
<div class="form-group" role="group">
<label for="preview_size" class="form-label">{% trans 'Preview size'%}</label>
<input type="range" class="form-range" id="preview_size" min="16" max="500" step="1" value="172">
<script>
@@ -67,16 +73,9 @@
});
</script>
</div>
<div class="form-group" role="group" style="float:right;width:50%">
<button type="button" class="btn btn-info" onclick='url=$("#avatar_image").attr("src")+"&format=svg";window.open(url);'>Download SVG</button>
&nbsp;
<button type="button" class="btn btn-info" onclick='url=$("#avatar_image").attr("src")+"&format=png";window.open(url);'>Download PNG</button>
</div>
-->
</div>
<hr style="clear:both;"/>
<div class="form-group" role="group" style="float:none;">
<div class="form-group" role="group">
<label for="skincolor" class="form-label">{% trans 'Skin color'%}</label>
<div id="skincolor">
{% for color in SkinColor %}
@@ -86,7 +85,7 @@
</div>
<br/>
<div class="form-group" role="group" style="float:none;">
<div class="form-group" role="group">
<label for="haircolor" class="form-label">{% trans 'Hair color'%}</label>
<div id="haircolor">
{% for color in HairColor %}
@@ -122,8 +121,8 @@
<a class="button achoose" style="background:{{ color.main_value }};" onclick='facial_hair_color="{{ color.value }}"; update_image();'>&nbsp;</a>
{% endfor %}
</div>
</div>
<br/>
</div>
<div class="form-group" role="group" style="float:none;">
<label for="toptype" class="form-label">{% trans 'Top type' %}</label>
@@ -172,7 +171,7 @@
</div>
<div class="form-group" role="group" style="float:none;">
<label for="eyebrowtype" class="form-label">{% trans 'Eyerbrow type' %}</label>
<label for="eyebrowtype" class="form-label">{% trans 'Eyebrow type' %}</label>
<input type="range" class="form-range" id="eyebrowtype" min="0" max="12" step="1" value="0">
<script>
var elem = document.getElementById("eyebrowtype");
@@ -238,5 +237,7 @@
</div>
</div>
<div>
</div>
<div style="height:40px"></div>
{% endblock content %}