From 8a926f39246d981cc5c814b8f31e891cb6b1dab2 Mon Sep 17 00:00:00 2001
From: Lars van Rhijn <larsvanrhijn@gmail.com>
Date: Wed, 4 Oct 2023 20:31:49 +0200
Subject: [PATCH 1/4] Other container layout and responsive queue container

---
 marietje/queues/templates/queues/queue.html | 6 +++---
 marietje/songs/templates/songs/manage.html  | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/marietje/queues/templates/queues/queue.html b/marietje/queues/templates/queues/queue.html
index f9e857e..7039f2a 100644
--- a/marietje/queues/templates/queues/queue.html
+++ b/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"
@@ -51,7 +51,7 @@
             </ul>
         </div>
     </nav>
-    <div class="container">
+    <div class="container-lg">
         <br><br>
         <div class="alert-location">
         </div>
@@ -117,7 +117,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>
diff --git a/marietje/songs/templates/songs/manage.html b/marietje/songs/templates/songs/manage.html
index 253a271..c29da8c 100644
--- a/marietje/songs/templates/songs/manage.html
+++ b/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>

From fbafcf1b06047b80af98d3de8396403a13caf2e4 Mon Sep 17 00:00:00 2001
From: William Kuijltjes <w.kuijltjes@student.science.ru.nl>
Date: Sat, 25 Nov 2023 07:44:45 +0100
Subject: [PATCH 2/4] Reduce the width of buttons in the control column and
 recombine them into one row

---
 marietje/queues/templates/queues/queue.html | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/marietje/queues/templates/queues/queue.html b/marietje/queues/templates/queues/queue.html
index 4ac8b66..42ea478 100644
--- a/marietje/queues/templates/queues/queue.html
+++ b/marietje/queues/templates/queues/queue.html
@@ -106,18 +106,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
-                                            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-if="song.can_move_up" v-on:click="move_down(queue[index-1].id)" 
+                                                    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 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
-                                                    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>
-                                        </div>
-                                        <div class="d-flex flex-row">
-                                            <button v-if="song.can_delete" v-on:click="cancel_song(song.id)" class="btn btn-link"><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>
+                                            <button v-if="song.can_move_down" v-on:click="move_down(song.id)" 
+                                                    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 p-1 p-md-2"><i class="fa-solid fa-arrow-down"></i></button>
+
+                                            <button v-if="song.can_delete" v-on:click="cancel_song(song.id)" 
+                                                    class="btn btn-link p-1 p-md-2"><i 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>
                                         </div>
                                     </div>
                                 </td>

From 6a9c22b7f8438406f7e0a59ab3b30eb4fd10b052 Mon Sep 17 00:00:00 2001
From: William Kuijltjes <w.kuijltjes@student.science.ru.nl>
Date: Sat, 25 Nov 2023 07:45:01 +0100
Subject: [PATCH 3/4] Slightly improve stats pages

---
 marietje/stats/templates/stats/stats.html |  9 +++--
 marietje/stats/templates/stats/user.html  | 41 ++++++++++++-----------
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/marietje/stats/templates/stats/stats.html b/marietje/stats/templates/stats/stats.html
index b20473e..b774c22 100644
--- a/marietje/stats/templates/stats/stats.html
+++ b/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>
diff --git a/marietje/stats/templates/stats/user.html b/marietje/stats/templates/stats/user.html
index 8459d4e..5d6030a 100644
--- a/marietje/stats/templates/stats/user.html
+++ b/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
-                songs a total of <strong> {{ stats.total_requests }} </strong> times. This
-                means <strong> {% widthratio stats.unique_requests stats.total_requests 100 %}% </strong> of your requests have been unique. </p>
+                <p>You have requested <strong> {{ stats.unique_requests }} </strong> different songs a total of
+                <strong> {{ stats.total_requests }} </strong> times. This means 
+                <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
-                shows how many times these have been requested by other people. The right column shows
-                how many times you requested your own songs. In total your songs
-                have been queued <strong> {{stats.total_played_uploads }} </strong> times by others and
-                <strong> {{stats.total_played_user_uploads }} </strong> by yourself.
+                <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 how many times
+                you requested your own songs. In total your songs have been queued 
+                <strong> {{stats.total_played_uploads }} </strong> times by others and
+                <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>You</th>
+                                <th style="white-space:nowrap; text-align: right;"># Others</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
-                other people. The right column shows how many times you requested those songs.
+                <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.</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>You</th>
+                                <th style="white-space:nowrap; text-align: right;"># Others</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>

From 98e43aa688e1a26fafe9090b17ba2344821f900c Mon Sep 17 00:00:00 2001
From: William Kuijltjes <w.kuijltjes@student.science.ru.nl>
Date: Sat, 25 Nov 2023 07:45:46 +0100
Subject: [PATCH 4/4] Some aesthetic changes to the dark mode colors and the
 table borders

---
 .../marietje/static/marietje/css/custom.css   | 50 ++++++++++++-------
 .../static/marietje/css/variables.css         | 16 +++---
 marietje/queues/templates/queues/queue.html   |  6 ++-
 3 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/marietje/marietje/static/marietje/css/custom.css b/marietje/marietje/static/marietje/css/custom.css
index f229400..ec49163 100644
--- a/marietje/marietje/static/marietje/css/custom.css
+++ b/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;
 }
diff --git a/marietje/marietje/static/marietje/css/variables.css b/marietje/marietje/static/marietje/css/variables.css
index 1a416fb..3c7405d 100644
--- a/marietje/marietje/static/marietje/css/variables.css
+++ b/marietje/marietje/static/marietje/css/variables.css
@@ -20,17 +20,19 @@
 
 @media (prefers-color-scheme: dark) {
     :root {
-        --background-color: #202020;
-        --background-shade: #404040;
-        --background-shade-light: #696969;
+        --background-color: #181818;
+        --background-shade: #282828;
+        --background-shade-light: #404040;
 
-        --card-background: #696969;
-        --card-background-shade: #404040;
-        --card-background-contrast: #ffffff;
+        --card-background: #404040;
+        --card-background-shade: #282828;
+        --card-background-contrast: #dddddd;
 
         --title-color: #000000;
         --sub-title-color: #dddddd;
         --link-color: #007bff;
-        --text-color: #ffffff;
+        --text-color: #dddddd;
+
+        --bs-border-color: #282828;
     }
 }
\ No newline at end of file
diff --git a/marietje/queues/templates/queues/queue.html b/marietje/queues/templates/queues/queue.html
index 4ac8b66..5a72366 100644
--- a/marietje/queues/templates/queues/queue.html
+++ b/marietje/queues/templates/queues/queue.html
@@ -71,7 +71,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>
@@ -84,7 +84,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">