From 5acf5532699ceaf965fba64ae6894a816b7e2943 Mon Sep 17 00:00:00 2001
From: Kees van Kempen <k.vankempen@student.science.ru.nl>
Date: Wed, 21 Feb 2024 15:50:20 +0100
Subject: [PATCH] feat(queue): re-add song details on mobile view

Closes #62
---
 .../marietje/static/marietje/css/custom.css   | 12 ------
 marietje/queues/templates/queues/queue.html   | 42 ++++++++++++++++---
 2 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/marietje/marietje/static/marietje/css/custom.css b/marietje/marietje/static/marietje/css/custom.css
index ec49163..59e6666 100644
--- a/marietje/marietje/static/marietje/css/custom.css
+++ b/marietje/marietje/static/marietje/css/custom.css
@@ -53,18 +53,6 @@ button[type="button"] i {
     min-width: 90px;
 }
 
-.song-info {
-    position: absolute;
-    padding: 8px;
-    background: silver;
-    white-space: nowrap;
-    z-index: 1;
-}
-
-#queue-time-header {
-    cursor: pointer;
-}
-
 footer {
     text-align: center;
 }
diff --git a/marietje/queues/templates/queues/queue.html b/marietje/queues/templates/queues/queue.html
index 206def6..e611013 100644
--- a/marietje/queues/templates/queues/queue.html
+++ b/marietje/queues/templates/queues/queue.html
@@ -78,19 +78,49 @@
                             <td class="col-md-4">Title</td>
                             <td class="col-md-2 d-sm-table-cell d-none">Requested By</td>
                             <td class="col-md-1 text-info d-sm-table-cell d-none" style="cursor: pointer;">
-                                <span v-if="playsIn" id="timeswitch" class="btn btn-link p-0" v-on:click="playsIn = false">Plays In</span>
+                                <span v-if="playsIn" class="btn btn-link p-0" v-on:click="playsIn = false">Plays In</span>
                                 <span v-else class="btn btn-link p-0" v-on:click="playsIn = true">Plays At</span>
                             </td>
-                            <td class="col-md-1 control-icons">Control</td>
+                            <td class="col-md-1">
+                                <span class="control-icons">Control</span>
+                                <span v-if="playsIn" class="btn btn-link p-0 d-sm-none" v-on:click="playsIn = false">(Plays in)</span>
+                                <span v-else class="btn btn-link p-0 d-sm-none" v-on:click="playsIn = true">(Plays At)</span>
+                            </td>
                         </tr>
                         </thead>
                         <tbody class="queuebody">
                         <template v-for="(song, index) in queue">
+                            <!-- TODO: Remember show_details_on_small_screens value on queue refresh. Maybe add separate list. This is a good place for todo notes. -->
                             <tr :class="{ marietjequeue: (song.user === null),
-                                    underline_cell: (index === queue[-1]), 
-                                    currentsong: (index === 0),}">
-                                <td class="artist">${ song.song.artist }$</td>
-                                <td class="title">${ song.song.title }$</td>
+                                underline_cell: (index === queue[-1]),
+                                currentsong: (index === 0),}"
+                                v-on:click="song.show_details_on_small_screens = !song.show_details_on_small_screens">
+                                <td>
+                                    <span class="artist">${ song.song.artist }$</span>
+                                    <span v-if="song.show_details_on_small_screens" class="requested-by d-sm-none d-block small mt-3 fw-normal">
+                                        Requested by:<br>
+                                        <template v-if="song.user === null">
+                                            Marietje
+                                        </template>
+                                        <template v-else>
+                                            ${ song.user.name }$
+                                        </template>
+                                    </span>
+                                </td>
+                                <td>
+                                    <span class="title">${ song.song.title }$</span>
+                                    <span v-if="song.show_details_on_small_screens && song.time_until_song_seconds > 0" class="plays-at d-sm-none d-block small mt-3 fw-normal" style="text-align: right">
+                                        <span v-if="playsIn">Plays In:</span>
+                                        <span v-else>Plays At:</span>
+                                        <br>
+                                        <template v-if="song.time_until_song_seconds !== null && song.time_until_song_seconds > 0 && playsIn === true">
+                                            ${ song.time_until_song_seconds.secondsToMMSS() }$
+                                        </template>
+                                        <template v-else-if="playsIn === false && song.plays_at !== null && song.played === false">
+                                            ${ song.plays_at.timestampToHHMMSS() }$
+                                        </template>
+                                    </span>
+                                </td>
                                 <td class="d-sm-table-cell d-none requested-by">
                                     <template v-if="song.user === null">
                                         Marietje