From fe02f27585180d2cccb82878fc24999ae127ba57 Mon Sep 17 00:00:00 2001
From: coon <coon@mailbox.org>
Date: Tue, 28 Nov 2023 10:47:48 +0100
Subject: [PATCH 1/2] static: index.html: add playlist_controls +
 playlist_tracklist div containers

---
 static/flexbox/index.html |  6 +++++-
 static/flexbox/sanic.css  | 10 ++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/static/flexbox/index.html b/static/flexbox/index.html
index 46f74f3..8562cfa 100644
--- a/static/flexbox/index.html
+++ b/static/flexbox/index.html
@@ -70,7 +70,11 @@
         queue
     </div>
     <div id="controls_bottom">
-        controls bottom
+      <div id="playlist_controls">
+        playlist controls
+      </div>
+      <div id="playlist_tracklist">
+      </div>
     </div>
     <div id="footer">
       sanic mpd web ui 0.1.0 - by XenGi and coon &copy; 2023
diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css
index dcbf986..1c7a9cd 100644
--- a/static/flexbox/sanic.css
+++ b/static/flexbox/sanic.css
@@ -93,9 +93,19 @@ input {
 }
 
 #controls_bottom {
+  display: flex;
+  flex-direction: row;
   flex-grow: 2;
 }
 
+#playlist_controls {
+  flex-grow: 1;
+}
+
+#playlist_tracklist {
+  flex-grow: 4;
+}
+
 #footer {
   text-align: right;
 }

From a226054e21860d3db5c7b32e0fbb4926ddceb88f Mon Sep 17 00:00:00 2001
From: coon <coon@mailbox.org>
Date: Tue, 28 Nov 2023 10:49:13 +0100
Subject: [PATCH 2/2] static: add dummy track lists for queue and playlist
 tracklist

---
 static/flexbox/index.html | 133 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 132 insertions(+), 1 deletion(-)

diff --git a/static/flexbox/index.html b/static/flexbox/index.html
index 8562cfa..e32651a 100644
--- a/static/flexbox/index.html
+++ b/static/flexbox/index.html
@@ -67,13 +67,144 @@
       </div>
     </div>
     <div id="queue">
-        queue
+      <table>
+        <thead>
+          <tr>
+            <th>Position</th>
+            <th>Artist</th>
+            <th>Title</th>
+            <th>Album</th>
+            <th>Genre</th>
+            <th>Time</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>1</td>
+            <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>
+            <td>2</td>
+            <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>
+            <td>3</td>
+            <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>
+            <td>4</td>
+            <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>
+            <td>5</td>
+            <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>
+            <td>6</td>
+            <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>
+            <td>7</td>
+            <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>
+        </tbody>
+      </table>
     </div>
     <div id="controls_bottom">
       <div id="playlist_controls">
         playlist controls
       </div>
       <div id="playlist_tracklist">
+        <table>
+          <thead>
+            <tr>
+              <th>Artist</th>
+              <th>Title</th>
+              <th>Album</th>
+              <th>Genre</th>
+              <th>Time</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+              <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>
+          </tbody>
+        </table>
       </div>
     </div>
     <div id="footer">