Better mobile queue.

marietje/marietje/static/css/custom.css

@@ -5,3 +5,11 @@
 .control-icons {
     min-width: 90px;
 }
+
+.song-info {
+    position: absolute;
+    padding: 8px;
+    background: silver;
+    white-space: nowrap;
+    z-index: 9999;
+}

marietje/marietje/static/js/queue.js

@@ -48,7 +48,7 @@ $(function () {
     });
 
     $('.pagesize').change(function(){
-        Cookies.set('pagesize', $(this).val(), { expires: 365 });
+        Cookies.set('pagesize', $(this).val());
         $('.pagenum').val(1);
         getSongs();
     });
@@ -86,6 +86,23 @@ $(function () {
         $.post('/api/volumeup', {csrfmiddlewaretoken: csrf_token});
     });
 
+    $(document).on('touchstart', '.artist, .title', function(){
+        $('.song-info').remove();
+        var row = $(this).parent();
+        var timeLeft = row.find('.time-left');
+        var playsAt = row.find('.plays-at');
+        var text = timeLeft[0] ? 'Time Left: ' + timeLeft.text() : 'Plays At: ' + playsAt.text();
+        $('body').append('<span class="song-info">Requested By: ' + row.find('.requested-by').text() + '<br>' + text
+            + '</span>');
+        var offset = row.offset();
+        $('.song-info').css('top', offset.top - $(document).scrollTop() + row.height())
+            .css('left', offset.left).css('backgroundColor', '#EEEEEE').width(row.width() - 16);
+    });
+
+    $(document).on('click', '.song-info', function(){
+        $(this).remove();
+    });
+
     getSongs();
 });
 
@@ -120,7 +137,7 @@ function updateTime()
     iteration = (iteration + 1) % 10;
     if (secondsLeft >= 0)
     {
-        $('.currentsong .timeleft').text(secondsLeft.secondsToHHMMSS());
+        $('.currentsong .time-left').text(secondsLeft.secondsToHHMMSS());
     }
 
     // Refresh every ten seconds, or if the song has ended in the last ten
@@ -150,7 +167,7 @@ function refreshQueue()
         var requestedBy = currentSong.requested_by;
         $('.currentsong .artist').text(currentSong.song.artist);
         $('.currentsong .title').text(currentSong.song.title);
-        $('.currentsong .requestedby').text(requestedBy);
+        $('.currentsong .requested-by').text(requestedBy);
         if (currentSong.can_skip || canSkip)
         {
             $('#skip').addClass('glyphicon glyphicon-fast-forward');
@@ -168,9 +185,9 @@ function refreshQueue()
             var artist = song.song.artist.trim() === '' ? '?' : song.song.artist;
             var title = song.song.title.trim() === '' ? '?' : song.song.title;
 
-            $('.queuebody:last-child').append('<tr><td>' + artist
+            $('.queuebody:last-child').append('<tr><td class="artist">' + artist
-                    + '</td><td>' + title + '</td><td>' + requestedBy
+                    + '</td><td class="title">' + title + '</td><td class="hidden-xs requested-by">' + requestedBy
-                    + '</td><td>' + (playNextAt < now ? '' : playNextAt.timestampToHHMMSS())
+                    + '</td><td class="hidden-xs plays-at">' + (playNextAt < now ? '' : playNextAt.timestampToHHMMSS())
                     + '</td><td>' + '<a href="#" class="glyphicon glyphicon-arrow-up'
                     + (canMoveSongs && id !== 0 ? '' : ' invisible')
                     + '" onclick="return moveUp(' + song.id

marietje/queues/templates/queues/queue.html

@@ -51,8 +51,8 @@
             <tr>
                 <th class="col-md-4">Artist</th>
                 <th class="col-md-4">Title</th>
-                <th class="col-md-2">Requested By</th>
+                <th class="col-md-2 hidden-xs">Requested By</th>
-                <th class="col-md-1">Time Left</th>
+                <th class="col-md-1 hidden-xs">Time Left</th>
                 <th class="col-md-1 control-icons">Control</th>
             </tr>
         </thead>
@@ -60,8 +60,8 @@
             <tr class="currentsong">
                 <td class="artist"></td>
                 <td class="title"></td>
-                <td class="requestedby"></td>
+                <td class="requested-by hidden-xs"></td>
-                <td class="timeleft"></td>
+                <td class="time-left hidden-xs"></td>
                 <td>
                     <a id="skip" href="#"></a>{% if perms.queues.can_control_volume %}&nbsp;&nbsp;&nbsp;&nbsp;<a id="volume-down" class="glyphicon glyphicon-volume-down" href="#"></a>&nbsp;&nbsp;&nbsp;&nbsp;<a id="volume-up" class="glyphicon glyphicon-volume-up" href="#"></a>{% endif %}
                 </td>
@@ -74,8 +74,8 @@
             <tr>
                 <th class="col-md-4">Artist</th>
                 <th class="col-md-4">Title</th>
-                <th class="col-md-2">Requested By</th>
+                <th class="col-md-2 hidden-xs">Requested By</th>
-                <th class="col-md-1">Plays At</th>
+                <th class="col-md-1 hidden-xs">Plays At</th>
                 <th class="col-md-1 control-icons">Control</th>
             </tr>
         </thead>