From 65be9ac7cd98d553aecb8efc9d59202d401553a1 Mon Sep 17 00:00:00 2001
From: Oliver Falk <oliver@linux-kernel.at>
Date: Sat, 31 Dec 2022 20:41:05 +0100
Subject: [PATCH] Slightly rearrange the options to the right - still WIP

---
 .../templates/avatar_creator.html             | 89 ++++++++++---------
 1 file changed, 45 insertions(+), 44 deletions(-)

diff --git a/ivatar/ivataraccount/templates/avatar_creator.html b/ivatar/ivataraccount/templates/avatar_creator.html
index 818151c..4aef6ad 100644
--- a/ivatar/ivataraccount/templates/avatar_creator.html
+++ b/ivatar/ivataraccount/templates/avatar_creator.html
@@ -46,55 +46,54 @@
   }
 </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;">
+      <img id="avatar_image" width="172px">
+      <script>update_image();</script>
+    </div>
+
+    <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>
-        update_image();
+        var preview_size = document.getElementById("preview_size");
+        preview_size.addEventListener("input", function() {
+          size = this.value;
+          update_image();
+        });
       </script>
     </div>
-    <div id="options">
-      <div class="form-group" role="group" style="float:right;width:50%">
-        <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>
-          var preview_size = document.getElementById("preview_size");
-          preview_size.addEventListener("input", function() {
-            size = this.value;
-            update_image();
-          });
-        </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">
+	  <label for="skincolor" class="form-label">{% trans 'Skin color'%}</label>
+	  <div id="skincolor">
+		{% for color in SkinColor %}
+		  <a class="button achoose" style="background:{{ color.main_value }};" onclick='skin_color="{{ color.value }}"; update_image();'>&nbsp;</a>
+		{% endfor %}
+	  </div>
+	</div>
+	<br/>
 
-    <div class="form-group" role="group" style="float:none;">
-      <label for="skincolor" class="form-label">{% trans 'Skin color'%}</label>
-      <div id="skincolor">
-      {% for color in SkinColor %}
-        <a class="button achoose" style="background:{{ color.main_value }};" onclick='skin_color="{{ color.value }}"; update_image();'>&nbsp;</a>
-      {% endfor %}
-      </div>
-    </div>
-    <br/>
-
-    <div class="form-group" role="group" style="float:none;">
-      <label for="haircolor" class="form-label">{% trans 'Hair color'%}</label>
-      <div id="haircolor">
-        {% for color in HairColor %}
-          <a class="button achoose" style="background:{{ color.main_value }};" onclick='hair_color="{{ color.value }}"; update_image();'>&nbsp;</a>
-        {% endfor %}
-      </div>
-    </div>
-    <br/>
+	<div class="form-group" role="group">
+	  <label for="haircolor" class="form-label">{% trans 'Hair color'%}</label>
+	  <div id="haircolor">
+		{% for color in HairColor %}
+		  <a class="button achoose" style="background:{{ color.main_value }};" onclick='hair_color="{{ color.value }}"; update_image();'>&nbsp;</a>
+		{% endfor %}
+	  </div>
+	</div>
+	<br/>
 
     <div class="form-group" role="group" style="float:none;">
       <label for="facialhairtype" class="form-label">{% trans 'Facial hair type' %}</label>
@@ -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>
+      <br/>
     </div>
-    <br/>
 
     <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 %}