From 2bec110f3bdc83c7be002da15a1c6b30026ed7f1 Mon Sep 17 00:00:00 2001
From: Gabriel Augendre <gabriel@augendre.info>
Date: Sun, 17 Apr 2016 16:07:11 +0200
Subject: [PATCH] Add arrows and refactor code

---
 app.js            |  2 +-
 public/index.html | 66 +++++++++++++++++++++++++----------------------
 2 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/app.js b/app.js
index 163fbfe..4cb22b7 100644
--- a/app.js
+++ b/app.js
@@ -142,7 +142,7 @@ app.get('/get_playlists', function (req, res) {
         json: true
     };
 
-    getAllPages(authOptions, [], function(data) {
+    getAllPages(authOptions, [], function (data) {
         res.send({
             'data': data
         });
diff --git a/public/index.html b/public/index.html
index afe310e..6995a14 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,40 +17,32 @@
         }
 
         .spinner {
-             display: inline-block;
-             opacity: 0;
-             width: 0;
-
-             -webkit-transition: opacity 0.25s, width 0.25s;
-             -moz-transition: opacity 0.25s, width 0.25s;
-             -o-transition: opacity 0.25s, width 0.25s;
-             transition: opacity 0.25s, width 0.25s;
-         }
+            display: none;
+            width: 0;
+            float: right;
+            margin-left: 5px;
+        }
 
         .has-spinner.loading .spinner {
-            opacity: 1;
-            width: auto; /* This doesn't work, just fix for unkown width elements */
-        }
-
-        .has-spinner.btn-mini.loading .spinner {
-            width: 10px;
-        }
-
-        .has-spinner.btn-small.loading .spinner {
-            width: 13px;
-        }
-
-        .has-spinner.btn.loading .spinner {
-            width: 16px;
-        }
-
-        .has-spinner.btn-large.loading .spinner {
-            width: 19px;
+            display: inline-block;
+            width: 16px; /* This doesn't work, just fix for unkown width elements */
         }
 
         .pl_item {
             text-align: left;
         }
+
+        .glyphicon.glyphicon-chevron-right {
+            float: right;
+            display: inline-block;
+            width: 16px;
+            margin-left: 5px;
+        }
+
+        .loading .glyphicon-chevron-right.glyphicon-chevron-right {
+            display: none;
+            width: 0;
+        }
     </style>
 </head>
 
@@ -65,7 +57,9 @@
         </div>
 
         <h1>Duplicates finder</h1>
-        <button class="btn btn-default has-spinner" id="get-playlists">Get playlists <span class="spinner"><i class="icon-spin icon-refresh"></i></span></button>
+        <button class="btn btn-default has-spinner" id="get-playlists">
+            Get playlists <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
+        </button>
         <div class="media">
             <div class="pull-left">
                 <div id="playlists">
@@ -83,7 +77,9 @@
     <h1>Logged in as {{display_name}}</h1>
     <div id="oauth">
     </div>
-    <button class="btn btn-default has-spinner" id="obtain-new-token">Obtain new token using the refresh token <span class="spinner"><i class="icon-spin icon-refresh"></i></span></button>
+    <button class="btn btn-default has-spinner" id="obtain-new-token">
+        Obtain new token using the refresh token <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
+    </button>
 </script>
 
 <script id="oauth-template" type="text/x-handlebars-template">
@@ -99,12 +95,20 @@
 <script id="dups-template" type="text/x-handlebars-template">
     <h2>Duplicates in {{pl_name}}</h2>
     {{message}}
-    {{#list dups}}<div class="list-group-item">{{dup_trackname}} - {{dup_artist}}</div>{{/list}}
+    {{#list dups}}
+    <div class="list-group-item">{{dup_trackname}} - {{dup_artist}}</div>
+    {{/list}}
 </script>
 
 <script id="playlists-template" type="text/x-handlebars-template">
     <h2>Playlists</h2>
-    {{#list playlists}}<a class="pl_item list-group-item btn has-spinner" href="/pl/{{pl_uid}}/{{pl_id}}">{{pl_name}} <span class="spinner"><i class="icon-spin icon-refresh"></i></span></a>{{/list}}
+    {{#list playlists}}
+    <a class="pl_item list-group-item btn has-spinner" href="/pl/{{pl_uid}}/{{pl_id}}">
+        {{pl_name}}
+        <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
+        <i class="glyphicon glyphicon-chevron-right"></i>
+    </a>
+    {{/list}}
 </script>
 
 <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.1/handlebars.min.js"></script>