Improve layout of HTML animation

timhoffm · timhoffm · commit 6506cde748ce · 2018-09-11T22:44:45.000+02:00
diff --git a/lib/matplotlib/_animation_data.py b/lib/matplotlib/_animation_data.py
@@ -148,13 +148,13 @@
 
 # HTML template for HTMLWriter
 DISPLAY_TEMPLATE = """
-<div class="animation" align="center">
-    <img id="_anim_img{id}">
-    <br>
-    <input id="_anim_slider{id}" type="range" style="width:350px"
-           name="points" min="0" max="1" step="1" value="0"
-           onchange="anim{id}.set_frame(parseInt(this.value));"></input>
-    <br>
+<div class="animation" style="display: inline-block; text-align: center">
+  <img id="_anim_img{id}">
+  <input id="_anim_slider{id}" type="range"
+         style="width: 350px; margin-left: auto; margin-right: auto"
+         name="points" min="0" max="1" step="1" value="0"
+         onchange="anim{id}.set_frame(parseInt(this.value));"></input>
+  <div class="animation-buttons" style="margin: 8px 0px">
     <button onclick="anim{id}.slower()"><i class="fa fa-minus"></i></button>
     <button onclick="anim{id}.first_frame()"><i class="fa fa-fast-backward">
         </i></button>
@@ -171,13 +171,17 @@
     <button onclick="anim{id}.last_frame()"><i class="fa fa-fast-forward">
         </i></button>
     <button onclick="anim{id}.faster()"><i class="fa fa-plus"></i></button>
+  </div>
   <form action="#n" name="_anim_loop_select{id}" class="anim_control">
-    <input type="radio" name="state"
-           value="once" {once_checked}> Once </input>
-    <input type="radio" name="state"
-           value="loop" {loop_checked}> Loop </input>
-    <input type="radio" name="state"
-           value="reflect" {reflect_checked}> Reflect </input>
+    <input type="radio" name="state" value="once" id="_anim_radio1_{id}"
+           {once_checked} style="margin: 0; vertical-align: middle">
+    <label for="_anim_radio1_{id}" style="margin-right: 8px">Once</label>
+    <input type="radio" name="state" value="loop" id="_anim_radio2_{id}"
+           {loop_checked} style="margin: 0; vertical-align: middle">
+    <label for="_anim_radio2_{id}" style="margin-right: 8px">Loop</label>
+    <input type="radio" name="state" value="reflect" id="_anim_radio1_{id}"
+           {reflect_checked} style="margin: 0; vertical-align: middle">
+    <label for="_anim_radio3_{id}" style="margin-right: 8px">Reflect</label>
   </form>
 </div>
 
