From a43bf5c15c6713aace27bd92619d85102760b9c6 Mon Sep 17 00:00:00 2001
From: Tim Hoffmann <2836374+timhoffm@users.noreply.github.com>
Date: Tue, 11 Sep 2018 22:44:45 +0200
Subject: [PATCH] Improve layout of HTML animation

---
 lib/matplotlib/_animation_data.py | 94 +++++++++++++++++++++----------
 lib/matplotlib/animation.py       |  6 +-
 2 files changed, 68 insertions(+), 32 deletions(-)

diff --git a/lib/matplotlib/_animation_data.py b/lib/matplotlib/_animation_data.py
index 4c3f2c75b65e..9892596eb28e 100644
--- a/lib/matplotlib/_animation_data.py
+++ b/lib/matplotlib/_animation_data.py
@@ -146,39 +146,74 @@
 """
 
 
+# Style definitions for the HTML template
+STYLE_INCLUDE = """
+<style>
+.animation {
+    display: inline-block;
+    text-align: center;
+}
+input[type=range].anim-slider {
+    width: 374px;
+    margin-left: auto;
+    margin-right: auto;
+}
+.anim-buttons {
+    margin: 8px 0px;
+}
+.anim-buttons button {
+    padding: 0;
+    width: 36px;
+}
+.anim-state label {
+    margin-right: 8px;
+}
+.anim-state input {
+    margin: 0;
+    vertical-align: middle;
+}
+</style>
+"""
+
+
 # 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"
+<div class="animation">
+  <img id="_anim_img{id}">
+  <div class="anim-controls">
+    <input id="_anim_slider{id}" type="range" class="anim-slider"
            name="points" min="0" max="1" step="1" value="0"
            onchange="anim{id}.set_frame(parseInt(this.value));"></input>
-    <br>
-    <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>
-    <button onclick="anim{id}.previous_frame()">
-        <i class="fa fa-step-backward"></i></button>
-    <button onclick="anim{id}.reverse_animation()">
-        <i class="fa fa-play fa-flip-horizontal"></i></button>
-    <button onclick="anim{id}.pause_animation()"><i class="fa fa-pause">
-        </i></button>
-    <button onclick="anim{id}.play_animation()"><i class="fa fa-play"></i>
-        </button>
-    <button onclick="anim{id}.next_frame()"><i class="fa fa-step-forward">
-        </i></button>
-    <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>
-  <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>
-  </form>
+    <div class="anim-buttons">
+      <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>
+      <button onclick="anim{id}.previous_frame()">
+          <i class="fa fa-step-backward"></i></button>
+      <button onclick="anim{id}.reverse_animation()">
+          <i class="fa fa-play fa-flip-horizontal"></i></button>
+      <button onclick="anim{id}.pause_animation()"><i class="fa fa-pause">
+          </i></button>
+      <button onclick="anim{id}.play_animation()"><i class="fa fa-play"></i>
+          </button>
+      <button onclick="anim{id}.next_frame()"><i class="fa fa-step-forward">
+          </i></button>
+      <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-state">
+      <input type="radio" name="state" value="once" id="_anim_radio1_{id}"
+             {once_checked}>
+      <label for="_anim_radio1_{id}">Once</label>
+      <input type="radio" name="state" value="loop" id="_anim_radio2_{id}"
+             {loop_checked}>
+      <label for="_anim_radio2_{id}">Loop</label>
+      <input type="radio" name="state" value="reflect" id="_anim_radio3_{id}"
+             {reflect_checked}>
+      <label for="_anim_radio3_{id}">Reflect</label>
+    </form>
+  </div>
 </div>
 
 
@@ -202,6 +237,7 @@
 </script>
 """
 
+
 INCLUDED_FRAMES = """
   for (var i=0; i<{Nframes}; i++){{
     frames[i] = "{frame_dir}/frame" + ("0000000" + i).slice(-7) +
diff --git a/lib/matplotlib/animation.py b/lib/matplotlib/animation.py
index 5280601cbd46..3eb3fa754133 100644
--- a/lib/matplotlib/animation.py
+++ b/lib/matplotlib/animation.py
@@ -33,8 +33,8 @@
 
 import numpy as np
 
-from matplotlib._animation_data import (DISPLAY_TEMPLATE, INCLUDED_FRAMES,
-                                        JS_INCLUDE)
+from matplotlib._animation_data import (
+    DISPLAY_TEMPLATE, INCLUDED_FRAMES, JS_INCLUDE, STYLE_INCLUDE)
 from matplotlib import cbook, rcParams, rcParamsDefault, rc_context
 
 
@@ -923,7 +923,7 @@ def communicate(self):
         interval = 1000 // self.fps
 
         with open(self.outfile, 'w') as of:
-            of.write(JS_INCLUDE)
+            of.write(JS_INCLUDE + STYLE_INCLUDE)
             of.write(DISPLAY_TEMPLATE.format(id=uuid.uuid4().hex,
                                              Nframes=Nframes,
                                              fill_frames=fill_frames,