From 2fcd827b85a4033a887c024da9b402354acb769f Mon Sep 17 00:00:00 2001
From: Olaf Slomp <osslomp@gmail.com>
Date: Mon, 8 Apr 2019 18:09:14 +0200
Subject: [PATCH] Visual changes

---
 marietje/api/views.py                       |  4 ++--
 marietje/marietje/static/css/custom.css     |  4 ++--
 marietje/marietje/static/js/queue.js        |  5 +++++
 marietje/queues/templates/queues/queue.html | 10 +++++++---
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/marietje/api/views.py b/marietje/api/views.py
index 9df9c58..5036e2d 100644
--- a/marietje/api/views.py
+++ b/marietje/api/views.py
@@ -20,6 +20,7 @@ from prometheus_client import Counter
 from marietje.utils import song_to_dict, playlist_song_to_dict, send_to_bertha
 from queues.models import PlaylistSong, QueueCommand
 from songs.models import Song
+from marietje.settings import MAX_MINUTES_IN_A_ROW
 
 request_counter = Counter('marietje_requests', 'Queue requests on marietje', ['queue'])
 upload_counter = Counter('marietje_uploads', 'Songs uploaded to marietje')
@@ -168,7 +169,7 @@ def managesongs(request):
 @api_auth_required
 def queue(request):
     queue = request.user.queue
-    infobar = {"start_personal_queue": 0, "length_personal_queue": 0, "length_total_queue": 0, "end_personal_queue": 0}
+    infobar = {"start_personal_queue": 0, "length_personal_queue": 0, "length_total_queue": 0, "end_personal_queue": 0, 'max_length': MAX_MINUTES_IN_A_ROW}
     for song in queue.queue():
         infobar["length_total_queue"] += song.song.duration
         if song.user == request.user:
@@ -177,7 +178,6 @@ def queue(request):
             if infobar["start_personal_queue"] == 0:
                 infobar["start_personal_queue"] = infobar["length_total_queue"] - song.song.duration
 
-
     json = {
         'current_song': playlist_song_to_dict(queue.current_song()),
         'queue': [playlist_song_to_dict(playlist_song, user=request.user) for playlist_song in queue.queue()],
diff --git a/marietje/marietje/static/css/custom.css b/marietje/marietje/static/css/custom.css
index a542c6f..64eb525 100644
--- a/marietje/marietje/static/css/custom.css
+++ b/marietje/marietje/static/css/custom.css
@@ -40,8 +40,8 @@ footer {
         border-bottom: 1px solid #DDDDDD;
 }
 
-.requested_song .plays-at, .requested_song .requested-by {
-        font-weight: bold;
+tr.requested_song{
+    border-left: 1px solid #777777;
 }
 
 .table-header-style td, .table-header-style{
diff --git a/marietje/marietje/static/js/queue.js b/marietje/marietje/static/js/queue.js
index 79df584..22ba56a 100644
--- a/marietje/marietje/static/js/queue.js
+++ b/marietje/marietje/static/js/queue.js
@@ -183,6 +183,11 @@ function updateTime() {
     }
     if (infobar['end_personal_queue'] !== 0){
         $('.start-queue').text("First song starts " + showExactOrRelative(infobar['start_personal_queue']));
+        if (infobar['length_personal_queue'] > infobar['max_length'] * 60) {
+            $('.duration-queue').addClass('text-danger');
+        } else {
+            $('.duration-queue').removeClass('text-danger');
+        }
         $('.duration-queue').text( " (" + (infobar['length_personal_queue']).secondsToMMSS() + ")");
         $('.end-queue').text("Last song ends " + showExactOrRelative(infobar['end_personal_queue']));
     }
diff --git a/marietje/queues/templates/queues/queue.html b/marietje/queues/templates/queues/queue.html
index 4db9e99..6738b32 100644
--- a/marietje/queues/templates/queues/queue.html
+++ b/marietje/queues/templates/queues/queue.html
@@ -36,9 +36,11 @@
     <ul class="nav navbar-nav navbar-right hidden-xs">
         <li>
             <div class="infobar">
-                <p class="navbar-text start-queue"></p>
+                <p class="navbar-text start-queue hidden-sm hidden-xs"></p>
                 <p class="navbar-text end-queue"></p>
-                <p class="navbar-text duration-queue"></p>
+                <div class="navbar-text">
+                    <p class="duration-queue"></p>
+                </div>
             </div>
         </li>
     </ul>
@@ -93,7 +95,9 @@
                 <td class="col-md-4">Artist</td>
                 <td class="col-md-4">Title</td>
                 <td class="col-md-2 hidden-xs">Requested By</td>
-                <td id="timeswitch" class="col-md-1 hidden-xs text-info" >Plays In</td>
+                <td class="col-md-1 hidden-xs text-info" style="cursor: pointer;">
+                    <span id="timeswitch" class="btn-link" >Plays In</span>
+                </td>
                 <td class="col-md-1 control-icons">Control</td>
             </tr>
             <tr class="currentsong" style="font-weight: bold">