Merge branch 'marietje-zuid' into 'feature/marietje-4.1-in-header'

# Conflicts:
#   marietje/queues/templates/queues/queue.html

marietje/marietje/static/marietje/css/custom.css

@@ -31,19 +31,6 @@ a {
     color: var(--text-color);
 }
 
-.table {
-    color: var(--text-color);
-}
-
-.table-striped tbody tr:nth-of-type(odd) {
-    background-color: var(--background-shade);
-    color: var(--text-color);
-}
-
-.table-striped > tbody > tr:nth-of-type(odd) > * {
-    color: var(--text-color);
-}
-
 input[type="text"], input[type="password"] {
     background-color: var(--background-shade-light);
     border: 1px solid var(--background-shade);
@@ -82,6 +69,19 @@ footer {
     text-align: center;
 }
 
+.table {
+    color: var(--text-color);
+}
+
+.table-striped tbody tr:nth-of-type(odd) {
+    background-color: var(--background-shade);
+    color: var(--text-color);
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) > * {
+    color: var(--text-color);
+}
+
 .marietjequeue {
     color: #777777;
 }
@@ -91,7 +91,24 @@ footer {
 }
 
 .marietjequeue-pre-start td {
-    border-bottom: 3px double #777777;
+    border-bottom: 3px double var(--text-color);
+}
+
+.marietjequeue-post-start td {
+    border-top: 3px double var(--text-color);
+}
+
+tr.requested_song{
+    border-left: 1px solid var(--text-color);
+}
+
+.currentsong {
+    border-bottom: 1px solid var(--text-color);
+    font-weight: bold;
+}
+
+.underline_cell {
+    border-bottom: 1px solid var(--text-color);
 }
 
 .block-button {
@@ -100,13 +117,10 @@ footer {
     transition: 1s transform ease-in-out;
 }
 
-.currentsong {
-        border-bottom: 1px solid #DDDDDD;
-}
-
 .navbar-text {
     color: var(--text-color);
 }
+
 .danger {
     color: red !important;
 }

marietje/marietje/static/marietje/css/variables.css

@@ -20,17 +20,19 @@
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --background-color: #202020;
+        --background-color: #181818;
-        --background-shade: #404040;
+        --background-shade: #282828;
-        --background-shade-light: #696969;
+        --background-shade-light: #404040;
 
-        --card-background: #696969;
+        --card-background: #404040;
-        --card-background-shade: #404040;
+        --card-background-shade: #282828;
-        --card-background-contrast: #ffffff;
+        --card-background-contrast: #dddddd;
 
         --title-color: #000000;
         --sub-title-color: #dddddd;
         --link-color: #007bff;
-        --text-color: #ffffff;
+        --text-color: #dddddd;
+
+        --bs-border-color: #282828;
     }
 }

marietje/queues/templates/queues/queue.html

@@ -5,7 +5,7 @@
 
 {% block content %}
     <nav class="navbar navbar-expand navbar-default navbar-light border-bottom">
-        <div class="container">
+        <div class="container-lg">
             <ul class="nav nav-pills" role="tablist">
                 <li class="nav-item" role="presentation">
                     <button class="nav-link active" id="queue-tab" data-bs-toggle="tab" data-bs-target="#queue"
@@ -64,7 +64,7 @@
             </ul>
         </div>
     </nav>
-    <div class="container">
+    <div class="container-lg">
         <br><br>
         <div class="alert-location">
         </div>
@@ -73,7 +73,7 @@
                 <div id="queue-container">
                     <table class="table table-striped">
                         <thead>
-                        <tr class="table-header-style">
+                        <tr class="table-header-style underline_cell">
                             <td class="col-md-4">Artist</td>
                             <td class="col-md-4">Title</td>
                             <td class="col-md-2 d-sm-table-cell d-none">Requested By</td>
@@ -86,7 +86,9 @@
                         </thead>
                         <tbody class="queuebody">
                         <template v-for="(song, index) in queue">
-                            <tr :class="{ marietjequeue: (song.user === null), currentsong: (index === 0), 'fw-bold': (index === 0) }">
+                            <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>
                                 <td class="d-sm-table-cell d-none requested-by">
@@ -108,18 +110,17 @@
                                 <td>
                                     <div class="d-flex flex-column">
                                         <div class="d-flex flex-row">
-                                            <button v-if="song.can_move_up" v-on:click="move_down(queue[index-1].id)" class="btn btn-link"><i
+                                            <button v-if="song.can_move_up" v-on:click="move_down(queue[index-1].id)" 
-                                            class="fa-solid fa-arrow-up"></i></button>
+                                                    class="btn btn-link p-1 p-md-2"><i class="fa-solid fa-arrow-up"></i></button>
-                                            <button v-else class="btn btn-link invisible"><i class="fa-solid fa-arrow-up"></i></button>
+                                            <button v-else class="btn btn-link invisible p-1 p-md-2"><i class="fa-solid fa-arrow-up"></i></button>
 
-                                            <button v-if="song.can_move_down" v-on:click="move_down(song.id)" class="btn btn-link"><i
+                                            <button v-if="song.can_move_down" v-on:click="move_down(song.id)" 
-                                                    class="fa-solid fa-arrow-down"></i></button>
+                                                    class="btn btn-link p-1 p-md-2"><i class="fa-solid fa-arrow-down"></i></button>
-                                            <button v-else class="btn btn-link invisible"><i class="fa-solid fa-arrow-down"></i></button>
+                                            <button v-else class="btn btn-link invisible p-1 p-md-2"><i class="fa-solid fa-arrow-down"></i></button>
-                                        </div>
+
-                                        <div class="d-flex flex-row">
+                                            <button v-if="song.can_delete" v-on:click="cancel_song(song.id)" 
-                                            <button v-if="song.can_delete" v-on:click="cancel_song(song.id)" class="btn btn-link"><i
+                                                    class="btn btn-link p-1 p-md-2"><i class="fa-solid fa-trash-can"></i></button>
-                                            class="fa-solid fa-trash-can"></i></button>
+                                            <button v-else class="btn btn-link invisible p-1 p-md-2"><i class="fa-solid fa-trash-can"></i></button>
-                                            <button v-else class="btn btn-link invisible"><i class="fa-solid fa-trash-can"></i></button>
                                         </div>
                                     </div>
                                 </td>
@@ -130,7 +131,7 @@
                 </div>
             </div>
             <div class="tab-pane fade" id="request" role="tabpanel" aria-labelledby="request-tab">
-                <div id="request-container">
+                <div id="request-container" class="table-responsive">
                     <table id="request-table" class="table table-striped">
                         <thead>
                         <tr>

marietje/songs/templates/songs/manage.html

@@ -4,7 +4,7 @@
 {% block title %}Manage{% endblock %}
 
 {% block content %}
-    <div class="container">
+    <div class="container-lg">
         <div class="table-responsive mt-5">
             <table id="request-table" class="table table-striped">
                 <thead>

marietje/stats/templates/stats/stats.html

@@ -28,6 +28,7 @@
                                 <th>#</th>
                                 <th>User</th>
                                 <th style="text-align: right;"># Songs</th>
+                                <th></th>
                             </tr>
                         </thead>
                         <tbody>
@@ -54,6 +55,7 @@
                                 <th>#</th>
                                 <th>User</th>
                                 <th style="text-align: right;"># Requests</th>
+                                <th></th>
                             </tr>
                         </thead>
                         <tbody>
@@ -109,6 +111,7 @@
                                 <th>#</th>
                                 <th>User</th>
                                 <th style="text-align: right;"># Unique</th>
+                                <th></th>
                             </tr>
                         </thead>
                         <tbody>
@@ -176,7 +179,9 @@
             </div>
              <div class="col-md-6">
                 <h2>Most played uploaders</h2>
-                <p>These are the {{ stats.stats_top_count }} people whose songs are requested most often by other people, as shown in the left column. The right column shows how many times that person has queued his own songs.</p>
+                <p>These are the {{ stats.stats_top_count }} people whose songs are requested most often by other 
+                people, as shown in the left column. The right column shows how many times that person has queued 
+                their own songs.</p>
                 <div class="table-responsive">
                     <table class="table table-striped">
                         <thead>
@@ -202,7 +207,7 @@
             </div>
             <div class="col-md-6">
                 <h2>Most played songs last 14 days</h2>
-                <p>These songs are played the {{ stats.stats_top_count }} most in the last two weeks.</p>
+                <p>These {{ stats.stats_top_count }} songs have been requested the most in the last two weeks.</p>
                 <div class="table-responsive">
                     <table class="table table-striped">
                         <thead>

marietje/stats/templates/stats/user.html

@@ -21,9 +21,10 @@
             {% endif %}
             <div class="col-md-6">
                 <h2>Most played songs</h2>
-                <p>You have requested <strong> {{ stats.unique_requests }} </strong> different
+                <p>You have requested <strong> {{ stats.unique_requests }} </strong> different songs a total of
-                songs a total of <strong> {{ stats.total_requests }} </strong> times. This
+                <strong> {{ stats.total_requests }} </strong> times. This means 
-                means <strong> {% widthratio stats.unique_requests stats.total_requests 100 %}% </strong> of your requests have been unique. </p>
+                <strong> {% widthratio stats.unique_requests stats.total_requests 100 %}% </strong> of your requests
+                have been unique. These are the song you have requested the most.</p>
                 <h4>Top {{ stats.stats_top_count }}:</h4>
                 <div class="table-responsive">
                     <table class="table table-striped">
@@ -50,6 +51,7 @@
             </div>
             <div class="col-md-6">
                 <h2>Most played artists</h2>
+                <p>These are the artists you have requested the most.</p>
                 <h4>Top {{ stats.stats_top_count }}:</h4>
                 <div class="table-responsive">
                     <table class="table table-striped">
@@ -57,7 +59,7 @@
                             <tr>
                                 <th>#</th>
                                 <th>Artist</th>
-                                <th style="text-align: right;"># Requests</th>
+                                <th style="white-space:nowrap; text-align: right;"># Requests</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -74,11 +76,11 @@
             </div>
             <div class="col-md-6">
                 <h2>Uploads requested</h2>
-                <p> You have uploaded a total of <strong> {{stats.total_uploads }} </strong> songs. The left column
+                <p>You have uploaded a total of <strong> {{stats.total_uploads }} </strong> songs. The left column
-                shows how many times these have been requested by other people. The right column shows
+                shows how many times these have been requested by other people. The right column shows how many times
-                how many times you requested your own songs. In total your songs
+                you requested your own songs. In total your songs have been queued 
-                have been queued <strong> {{stats.total_played_uploads }} </strong> times by others and
+                <strong> {{stats.total_played_uploads }} </strong> times by others and
-                <strong> {{stats.total_played_user_uploads }} </strong> by yourself.
+                <strong> {{stats.total_played_user_uploads }} </strong> times by yourself.</p>
                 <h4>Top {{ stats.stats_top_count }}:</h4>
                 <div class="table-responsive">
                     <table class="table table-striped">
@@ -87,8 +89,8 @@
                                 <th>#</th>
                                 <th>Artist</th>
                                 <th>Title</th>
-                                <th style="text-align: right;">Others</th>
+                                <th style="white-space:nowrap; text-align: right;"># Others</th>
-                                <th>You</th>
+                                <th style="white-space:nowrap;"># You</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -107,8 +109,8 @@
             </div>
             <div class="col-md-6">
                 <h2>Upload artists requested</h2>
-                <p> The left column shows how many times songs from artists uploaded by you have been requested by
+                <p>The left column shows how many times songs from artists uploaded by you have been requested by
-                other people. The right column shows how many times you requested those songs.
+                other people. The right column shows how many times you requested those songs.</p>
                 <h4>Top {{ stats.stats_top_count }}:</h4>
                 <div class="table-responsive">
                     <table class="table table-striped">
@@ -116,8 +118,8 @@
                             <tr>
                                 <th>#</th>
                                 <th>Artist</th>
-                                <th style="text-align: right;">Others</th>
+                                <th style="white-space:nowrap; text-align: right;"># Others</th>
-                                <th>You</th>
+                                <th style="white-space:nowrap;"># You</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -135,14 +137,15 @@
             </div>
             <div class="col-md-6">
                 <h2>Most played uploaders</h2>
-                <p> The people whose songs you have queued the most are:</p>
+                <p>These are the people whose songs you have requested the most.</p>
                 <div class="table-responsive">
                     <table class="table table-striped">
                         <thead>
                             <tr>
                                 <th>#</th>
                                 <th>Uploader</th>
-                                <th style="text-align: right;"># Requests</th>
+                                <th style="white-space:nowrap; text-align: right;"># Requests</th>
+                                <th></th>
                             </tr>
                         </thead>
                         <tbody>
@@ -160,14 +163,14 @@
             </div>
             <div class="col-md-6">
                 <h2>Biggest fans</h2>
-                <p> The people that queued your songs the most are:</p>
+                <p>These are the people that have requested your songs the most.</p>
                 <div class="table-responsive">
                     <table class="table table-striped">
                         <thead>
                             <tr>
                                 <th>#</th>
                                 <th>User</th>
-                                <th style="text-align: right;"># Requests</th>
+                                <th style="white-space:nowrap; text-align: right;"># Requests</th>
                             </tr>
                         </thead>
                         <tbody>