From f4329280c26a4eb5e50ebc4ceac7029191dc1453 Mon Sep 17 00:00:00 2001
From: coon <coon@mailbox.org>
Date: Sat, 18 Nov 2023 14:57:01 +0100
Subject: [PATCH] continue work on index2.html layout

---
 static/index2.html | 78 +++++++++++++++++++++++++++++++++++++++++-----
 static/style2.css  | 12 +++----
 2 files changed, 76 insertions(+), 14 deletions(-)

diff --git a/static/index2.html b/static/index2.html
index 4f6ecbc..6510920 100644
--- a/static/index2.html
+++ b/static/index2.html
@@ -46,24 +46,86 @@
       <input type="text" id="track" name="track" disabled />
     </div>
   </header>
-  <section class="playlist">
+  <div class="playlist">
     <table>
       <thead>
         <tr>
-          <td>Artist</td>
-          <td>Album</td>
-          <td>Track</td>
+          <th>Position</th>
+          <th>Title</th>
+          <th>Artist</th>
+          <th>Genre</th>
+          <th>Album</th>
+          <th>Time</th>
+          <th>Disc</th>
         </tr>
       </thead>
       <tbody>
         <tr>
-          <td>The Beatles</td>
-          <td>Some Album</td>
-          <td>Yellow Submarine</td>
+          <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>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>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>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>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>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>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>undefined</td>
+          <td>9:29</td>
         </tr>
       </tbody>
     </table>
-  </section>
+  </div>
   <section class="db">
     <div class="tabs"></div>
     <div class="result"></div>
diff --git a/static/style2.css b/static/style2.css
index 0ee5f9e..fdd95f8 100644
--- a/static/style2.css
+++ b/static/style2.css
@@ -1,7 +1,7 @@
 body {
   display: grid;
   grid-template-columns: 1fr;
-  grid-template-rows: 128px 1fr 1fr 32px;
+  grid-template-rows: 128px 100px 300px 32px;
   gap: 0 0;
   grid-auto-flow: row;
   grid-template-areas: "header" "playlist" "db" "footer";
@@ -17,14 +17,10 @@ header {
   grid-area: header;
 }
 
-div {
+div, header, footer, section {
   border: dotted 1px;
 }
 
-section.playlist {
-  grid-area: playlist;
-}
-
 header .config {
   grid-area: config;
 }
@@ -62,3 +58,7 @@ section.db {
 .db .result {
   grid-area: result;
 }
+
+.playlist {
+  overflow: auto;
+}