From 35512fc088372efc5ee37775cd16f66b0d67358b Mon Sep 17 00:00:00 2001
From: coon <coon@mailbox.org>
Date: Wed, 29 Nov 2023 23:01:03 +0100
Subject: [PATCH 1/5] static: use "old school" way for alternate coloring of
 tables

---
 static/flexbox/index.html | 30 +++++++++++++++---------------
 static/flexbox/sanic.css  | 13 +++++++++++++
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/static/flexbox/index.html b/static/flexbox/index.html
index 8887e7d..b689aef 100644
--- a/static/flexbox/index.html
+++ b/static/flexbox/index.html
@@ -68,7 +68,7 @@
       </div>
     </div>
     <div id="queue">
-      <table>
+      <table id="queue-table">
         <thead>
           <tr>
             <th>Position</th>
@@ -80,7 +80,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr>
+          <tr class="odd">
             <td>1</td>
             <td>Chakra</td>
             <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@@ -88,7 +88,7 @@
             <td>undefined</td>
             <td>9:29</td>
           </tr>
-          <tr>
+          <tr class="even">
             <td>2</td>
             <td>Chakra</td>
             <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@@ -96,7 +96,7 @@
             <td>undefined</td>
             <td>9:29</td>
           </tr>
-          <tr>
+          <tr class="odd">
             <td>3</td>
             <td>Chakra</td>
             <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@@ -104,7 +104,7 @@
             <td>undefined</td>
             <td>9:29</td>
           </tr>
-          <tr>
+          <tr class="even">
             <td>4</td>
             <td>Chakra</td>
             <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@@ -112,7 +112,7 @@
             <td>undefined</td>
             <td>9:29</td>
           </tr>
-          <tr>
+          <tr class="odd">
             <td>5</td>
             <td>Chakra</td>
             <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@@ -120,7 +120,7 @@
             <td>undefined</td>
             <td>9:29</td>
           </tr>
-          <tr>
+          <tr class="even">
             <td>6</td>
             <td>Chakra</td>
             <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@@ -128,7 +128,7 @@
             <td>undefined</td>
             <td>9:29</td>
           </tr>
-          <tr>
+          <tr class="odd">
             <td>7</td>
             <td>Chakra</td>
             <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
@@ -202,49 +202,49 @@
             </tr>
           </thead>
           <tbody>
-            <tr>
+            <tr class="odd">
               <td>Chakra</td>
               <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
               <td>undefined</td>
               <td>undefined</td>
               <td>9:29</td>
             </tr>
-            <tr>
+            <tr class="even">
               <td>Chakra</td>
               <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
               <td>undefined</td>
               <td>undefined</td>
               <td>9:29</td>
             </tr>
-            <tr>
+            <tr class="odd">
               <td>Chakra</td>
               <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
               <td>undefined</td>
               <td>undefined</td>
               <td>9:29</td>
             </tr>
-            <tr>
+            <tr class="even">
               <td>Chakra</td>
               <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
               <td>undefined</td>
               <td>undefined</td>
               <td>9:29</td>
             </tr>
-            <tr>
+            <tr class="odd">
               <td>Chakra</td>
               <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
               <td>undefined</td>
               <td>undefined</td>
               <td>9:29</td>
             </tr>
-            <tr>
+            <tr class="even">
               <td>Chakra</td>
               <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
               <td>undefined</td>
               <td>undefined</td>
               <td>9:29</td>
             </tr>
-            <tr>
+            <tr class="odd">
               <td>Chakra</td>
               <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
               <td>undefined</td>
diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css
index 5b448ab..c118224 100644
--- a/static/flexbox/sanic.css
+++ b/static/flexbox/sanic.css
@@ -25,6 +25,10 @@ table {
 }
 
 
+/* This is probably a better way to generate alternate coloring on tables. However,
+   background color for selected track is overwritten this way. Therefore the old
+   schoon way of alternate coloring is used for now.
+
 table tr:nth-child(odd) td {
   background:#1e1f1a;
 }
@@ -32,6 +36,15 @@ table tr:nth-child(odd) td {
 table tr:nth-child(even) td {
   background:#171812;
 }
+*/
+
+table tr.odd {
+  background-color: #1e1f1a;
+}
+
+table tr.even {
+  background-color: #171812;
+}
 
 #flexbox-container {
   display: flex;

From 41ff1e3592c5ccf1ff5924788fbe6b03d6ef8152 Mon Sep 17 00:00:00 2001
From: coon <coon@mailbox.org>
Date: Wed, 29 Nov 2023 23:02:58 +0100
Subject: [PATCH 2/5] static: add playback arrow to position row

---
 static/flexbox/index.html | 4 ++--
 static/flexbox/sanic.css  | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/static/flexbox/index.html b/static/flexbox/index.html
index b689aef..fa7826b 100644
--- a/static/flexbox/index.html
+++ b/static/flexbox/index.html
@@ -96,8 +96,8 @@
             <td>undefined</td>
             <td>9:29</td>
           </tr>
-          <tr class="odd">
-            <td>3</td>
+          <tr class="odd playing">
+            <td class="playing">3</td>
             <td>Chakra</td>
             <td>Love Shines Through (Martin Roth's in Electro Love Remix)</td>
             <td>undefined</td>
diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css
index c118224..5ff8e5d 100644
--- a/static/flexbox/sanic.css
+++ b/static/flexbox/sanic.css
@@ -24,6 +24,9 @@ table {
   border-spacing: 0pt;
 }
 
+#queue-table tr td:first-of-type {
+  padding-left: 20px;
+}
 
 /* This is probably a better way to generate alternate coloring on tables. However,
    background color for selected track is overwritten this way. Therefore the old

From da960cd34b4d818a277ae9bb17b729a618370ef0 Mon Sep 17 00:00:00 2001
From: coon <coon@mailbox.org>
Date: Wed, 29 Nov 2023 23:52:03 +0100
Subject: [PATCH 3/5] static: some formatting on table entries

---
 static/flexbox/sanic.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css
index 5ff8e5d..99a77a6 100644
--- a/static/flexbox/sanic.css
+++ b/static/flexbox/sanic.css
@@ -24,6 +24,13 @@ table {
   border-spacing: 0pt;
 }
 
+td {
+  padding: 1px 1px 1px 0.5em;
+  border: solid black;
+  border-width: 0 1px 1px 0;
+  text-align: left;
+}
+
 #queue-table tr td:first-of-type {
   padding-left: 20px;
 }

From 34978ddb8d19e6c616a8e71014055c1370ced15d Mon Sep 17 00:00:00 2001
From: coon <coon@mailbox.org>
Date: Wed, 29 Nov 2023 23:53:51 +0100
Subject: [PATCH 4/5] static: add playback arrow image + red highlight
 background color

---
 static/flexbox/sanic.css |  12 +++++++++++-
 static/img/playback.png  | Bin 0 -> 503 bytes
 2 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 static/img/playback.png

diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css
index 99a77a6..6024ead 100644
--- a/static/flexbox/sanic.css
+++ b/static/flexbox/sanic.css
@@ -32,7 +32,7 @@ td {
 }
 
 #queue-table tr td:first-of-type {
-  padding-left: 20px;
+  padding-left: 16px;
 }
 
 /* This is probably a better way to generate alternate coloring on tables. However,
@@ -56,6 +56,16 @@ table tr.even {
   background-color: #171812;
 }
 
+#queue-table tr.playing {
+  background-color: #490b00;
+}
+
+td.playing {
+  background-image: url(../img/playback.png);
+  background-repeat: no-repeat;
+  background-position: left center;
+}
+
 #flexbox-container {
   display: flex;
   flex-direction: column;
diff --git a/static/img/playback.png b/static/img/playback.png
new file mode 100644
index 0000000000000000000000000000000000000000..eebea58b5cdcf35ecde2f5fcc81eef604ee65672
GIT binary patch
literal 503
zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4i*LmhONKMUokK+s%APn2Y5O=D-;yvr)B1(
zGB9XNoIAnR`*46r+x(EgkI6w+9ZqcS+<Ic{;`SK@8dtV7UDe#1xpBsk2}?x&H~x32
z_hEPZpua=g;`hB54-&-mW$v{fwtQdxzIB%LOpE#Vn=Ler&fC9=|F-_lQS-1H%g*Vs
zH=ev)w*BhjPc{1<Mbu_StbeuB{=AdLnck9RUOux#AINmgzO1x$P156S&*yi@AIXzY
zU--jwkMOaDsk>hvzj)+N#jV?G_$GI+d%Jqu2aCnN?9&;AkGY7LEa|jbZgO*aRSL_U
z$;nFuoxd)drMW}!Y0)POv9B(>d|mIQ&Ac9X%0Vu<@@9*5Qsph1H~;I_*Up(f+pl&S
zTV%ktXCYfJa@><oT+9FZ{Dzv?iCe$?&J{I2Tl8#x{vW0;uYhgZ+cuwMU|?WM@^*J&
zxEu7oH=2QgfwRCPvY3H^TNs2H8D`CqU|?WiFY)wsWq-~sE2eLD-P-p*0|P_2r;B5V
z#`&ce1Gx?;@GxIUsSti&zhs_j-3hnSi=40fJ?3kMaQ)s@z^3s^S@D6Vl%U!2C*BMT
z7z!C>wDR)Y=SBo<^gQ9q{OZD-1Ao57JuKccoAb~AHKnE}G9=lQnZ3Fg7#J8lUHx3v
IIVCg!0I77>3IG5A

literal 0
HcmV?d00001


From 24df91e473d9d3964f1b96bfd39ce60942aae570 Mon Sep 17 00:00:00 2001
From: coon <coon@mailbox.org>
Date: Thu, 30 Nov 2023 00:13:20 +0100
Subject: [PATCH 5/5] static: use different font

---
 static/flexbox/sanic.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css
index 6024ead..5a1ded4 100644
--- a/static/flexbox/sanic.css
+++ b/static/flexbox/sanic.css
@@ -6,6 +6,10 @@ html, body {
 
 div {
   border: 1px dashed white;
+
+  font-weight: normal;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 13px;
 }
 
 button {