continue work on index2.html layout
This commit is contained in:
parent
a31879aab0
commit
f4329280c2
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue