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 />
|
<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>
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue