technicie/MarietjeDjango
1
0
Fork 0
mirror of https://gitlab.science.ru.nl/technicie/MarietjeDjango.git synced 2025-12-09 17:52:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(queue): re-add song details on mobile view

Browse Source 
Closes #62
This commit is contained in:
Kees van Kempen
2024-02-21 15:50:20 +01:00
parent ec66f09a79
commit 5acf553269
2 changed files with 36 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
marietje/marietje/static/marietje/css/custom.css
View File

@ -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;
}

42
marietje/queues/templates/queues/queue.html
View File

@ -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