continue work on index2.html layout

This commit is contained in:
coon 2023-11-18 14:57:01 +01:00
parent a31879aab0
commit f4329280c2
2 changed files with 76 additions and 14 deletions

View file

@ -46,24 +46,86 @@
<input type="text" id="track" name="track" disabled /> <input type="text" id="track" name="track" disabled />
</div> </div>
</header> </header>
<section class="playlist"> <div class="playlist">
<table> <table>
<thead> <thead>
<tr> <tr>
<td>Artist</td> <th>Position</th>
<td>Album</td> <th>Title</th>
<td>Track</td> <th>Artist</th>
<th>Genre</th>
<th>Album</th>
<th>Time</th>
<th>Disc</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>The Beatles</td> <td>1</td>
<td>Some Album</td> <td>Chakra</td>
<td>Yellow Submarine</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> </tr>
</tbody> </tbody>
</table> </table>
</section> </div>
<section class="db"> <section class="db">
<div class="tabs"></div> <div class="tabs"></div>
<div class="result"></div> <div class="result"></div>

View file

@ -1,7 +1,7 @@
body { body {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: 128px 1fr 1fr 32px; grid-template-rows: 128px 100px 300px 32px;
gap: 0 0; gap: 0 0;
grid-auto-flow: row; grid-auto-flow: row;
grid-template-areas: "header" "playlist" "db" "footer"; grid-template-areas: "header" "playlist" "db" "footer";
@ -17,14 +17,10 @@ header {
grid-area: header; grid-area: header;
} }
div { div, header, footer, section {
border: dotted 1px; border: dotted 1px;
} }
section.playlist {
grid-area: playlist;
}
header .config { header .config {
grid-area: config; grid-area: config;
} }
@ -62,3 +58,7 @@ section.db {
.db .result { .db .result {
grid-area: result; grid-area: result;
} }
.playlist {
overflow: auto;
}