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 />
</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>

View file

@ -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;
}