From 0c12c8dbc88b4b77175ad54252c62fa85bdaf6bb Mon Sep 17 00:00:00 2001
From: coon <coon@mailbox.org>
Date: Wed, 29 Nov 2023 23:01:03 +0100
Subject: [PATCH] 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 fc9785a..fc11f96 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
+   school" 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;