From 93c7cd787fe0734146a22f4b41ea1137d8f63867 Mon Sep 17 00:00:00 2001
From: Fergal Moran <fergal.moran@gmail.com>
Date: Wed, 24 Oct 2012 21:02:56 +0100
Subject: [PATCH] Fixed animation bug on waveform

---
 templates/inc/_MixItemInsert.html | 169 ++++++++++++++++--------------
 1 file changed, 89 insertions(+), 80 deletions(-)

diff --git a/templates/inc/_MixItemInsert.html b/templates/inc/_MixItemInsert.html
index 9be863f..632485e 100644
--- a/templates/inc/_MixItemInsert.html
+++ b/templates/inc/_MixItemInsert.html
@@ -5,95 +5,104 @@
             <img alt="mix-logo" class="mix-image-image" src="<%= item.mix_image %>"/>
         </div>
     </div>
-    <div class="span10">
-        <div class="title-bar">
-            <div class="span6">
-                <h4>
-                    <a      class="mix-link"
-                            id="mix-link-<%= item.id %>"
-                            href="<%= item.item_url %>"
-                            data-placement="right"
-                            rel="tooltip"
-                            data-content="<%=item.tooltip%>"
-                            title="<%= item.title %>"><%= item.title %>
-                    </a>
-                </h4>
-            </div>
-            <div class="span6">
-                <div id="genre-list" class="btn-toolbar btn-group-horizontal pull-right">
+    <div class="span10" style="padding-left: 32px">
+        <div class="row">
+            <div class="title-bar">
+                <div class="span6">
+                    <h4>
+                        <a class="mix-link"
+                           id="mix-link-<%= item.id %>"
+                           href="<%= item.item_url %>"
+                           data-placement="right"
+                           rel="tooltip"
+                           data-content="<%=item.tooltip%>"
+                           title="<%= item.title %>"><%= item.title %>
+                        </a>
+                    </h4>
+                </div>
+                <div class="span6">
+                    <div id="genre-list" class="btn-toolbar btn-group-horizontal pull-right">
+                    </div>
                 </div>
             </div>
         </div>
-        <div class="player-seekhead" id="player-seekhead" style="display: none;">
-            <span class="player-seekhead-time"></span>
-        </div>
-        <div class="player-progress">
-            <div class="waveform" id="waveform-<%= item.id %>">
-                <img id="waveform-image-<%= item.id %>" class="waveform_image"
-                     alt="Audio waveform"
-                     src="<%= item.waveform_url %>">
+        <div class="row">
+            <div class="player-seekhead" id="player-seekhead" style="display: none;">
+                <span class="player-seekhead-time"></span>
+            </div>
+            <div class="player-progress">
+                <div class="waveform" id="waveform-<%= item.id %>">
+                    <img id="waveform-image-<%= item.id %>" class="waveform_image"
+                         alt="Audio waveform"
+                         src="<%= item.waveform_url %>">
 
-                <div class="download-progress-overlay" id="progress-player-<%= item.id %>"></div>
-                <div class="playhead" id="playhead-player-<%= item.id %>" style="width: 0px"></div>
+                    <div class="download-progress-overlay" id="progress-player-<%= item.id %>"></div>
+                    <div class="playhead" id="playhead-player-<%= item.id %>" style="width: 0px"></div>
+                </div>
             </div>
         </div>
-        <div class="player-footer">
-            <div class="play-button footer-button">
-                <button class="play-button-small play-button-small-start" data-mode="play"
-                        id="play-pause-button-small-<%= item.id %>">
-                </button>
-            </div>
-            {% if user.is_authenticated %}
-            <div class="like-button footer-button">
-                <a class="btn" id="like-<%= item.id %>" data-mode="<%= item.mode %>" data-id="<%= item.id %>">
-                    <i class="icon-heart"></i> Like</a>
-            </div>
-            <div class="favourite-button footer-button">
-                <a class="btn" id="favourite-<%= item.id %>" data-mode="<%= item.mode %>" data-id="<%= item.id %>"><i
-                        class="icon-star-empty"></i> Favourite</a>
-            </div>
-            {% endif %}
-            <div class="footer-button">
-                <div class="btn-group" id="share-dropdown-<%= item.id %>">
-                    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#share-dropdown-<%= item.id %>"><i class="icon-share"/>
-                        Share
-                        <span class="caret"></span>
-                    </a>
-                    <ul class="dropdown-menu">
-                        <li><a data-mode="facebook" data-id="<%= item.id %>" href="" class="share-button share-button-facebook">
-                            Facebook</a></li>
-                        <li><a data-mode="twitter" data-id="<%= item.id %>" href=""
-                               class="share-button share-button-twitter"> Twitter</a></li>
+        <div class="row">
+            <div class="player-footer">
+                <div class="play-button footer-button">
+                    <button class="play-button-small play-button-small-start" data-mode="play"
+                            id="play-pause-button-small-<%= item.id %>">
+                    </button>
+                </div>
+                {% if user.is_authenticated %}
+                    <div class="like-button footer-button">
+                        <a class="btn" id="like-<%= item.id %>" data-mode="<%= item.mode %>" data-id="<%= item.id %>">
+                            <i class="icon-heart"></i> Like</a>
+                    </div>
+                    <div class="favourite-button footer-button">
+                        <a class="btn" id="favourite-<%= item.id %>" data-mode="<%= item.mode %>"
+                           data-id="<%= item.id %>"><i
+                                class="icon-star-empty"></i> Favourite</a>
+                    </div>
+                {% endif %}
+                <div class="footer-button">
+                    <div class="btn-group" id="share-dropdown-<%= item.id %>">
+                        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#share-dropdown-<%= item.id %>">
+                            <i class="icon-share"/>Share
+                            <span class="caret"></span>
+                        </a>
+                        <ul class="dropdown-menu">
+                            <li><a data-mode="facebook" data-id="<%= item.id %>" href=""
+                                   class="share-button share-button-facebook">
+                                Facebook</a></li>
+                            <li><a data-mode="twitter" data-id="<%= item.id %>" href=""
+                                   class="share-button share-button-twitter"> Twitter</a></li>
+                        </ul>
+                    </div>
+                </div>
+                {% if user.is_authenticated %}
+                    <% if (item.download_allowed) { %>
+                    <div class="download-button footer-button">
+                        <a class="btn" data-mode="<%= item.mode %>" data-id="<%= item.id %>">
+                            <i class="icon-download"></i> Download</a>
+                    </div>
+                    <% } %>
+                {% endif %}
+                <div class="footer-button">
+                    <ul class="list-nostyle list-horiz">
+                        <li title="<%= item.play_count %> Plays" class="stats-item bordered-right">
+                            <span class="icon-play stats">Plays:</span> <%= item.play_count %>
+                        </li>
+                        <li title="<%= item.comment_count %> Comments" class="stats-item bordered-right">
+                            <span class="icon-pencil stats">Comments:</span> <%= item.comment_count %>
+                        </li>
+                        <li title="<%= item.like_count %> Likes" class="stats-item bordered-right">
+                            <span class="icon-heart stats">Likes:</span> <%= item.like_count %>
+                        </li>
                     </ul>
                 </div>
+                {% if user.is_staff %}
+                    <div class="edit-button footer-button-right">
+                        <a href="/mix/edit/<%= item.id %>" class="btn" data-mode="<%= item.mode %>"
+                           data-id="<%= item.id %>"><i
+                                class="icon-edit"></i>Edit</a>
+                    </div>
+                {% endif %}
             </div>
-            {% if user.is_authenticated %}
-            <% if (item.download_allowed) { %>
-            <div class="download-button footer-button">
-                <a class="btn" data-mode="<%= item.mode %>" data-id="<%= item.id %>">
-                    <i class="icon-download"></i> Download</a>
-            </div>
-            <% } %>
-            {% endif %}
-            <div class="footer-button">
-                <ul class="list-nostyle list-horiz">
-                    <li title="<%= item.play_count %> Plays" class="stats-item bordered-right">
-                        <span class="icon-play stats">Plays:</span> <%= item.play_count %>
-                    </li>
-                    <li title="<%= item.comment_count %> Comments" class="stats-item bordered-right">
-                        <span class="icon-pencil stats">Comments:</span> <%= item.comment_count %>
-                    </li>
-                    <li title="<%= item.like_count %> Likes" class="stats-item bordered-right">
-                        <span class="icon-heart stats">Likes:</span> <%= item.like_count %>
-                    </li>
-                </ul>
-            </div>
-            {% if user.is_staff %}
-            <div class="edit-button footer-button-right">
-                <a href="/mix/edit/<%= item.id %>" class="btn" data-mode="<%= item.mode %>" data-id="<%= item.id %>"><i
-                        class="icon-edit"></i>Edit</a>
-            </div>
-            {% endif %}
         </div>
     </div>
 </div>