mirror of
https://github.com/owntone/owntone-server.git
synced 2025-03-29 08:43:42 -04:00
Changed playlist editor from table layout to using divs
This commit is contained in:
parent
adf55f3fea
commit
1fa4d66401
@ -2,6 +2,7 @@
|
|||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
select {
|
select {
|
||||||
font: icon;
|
font: icon;
|
||||||
|
width: 30ex;
|
||||||
}
|
}
|
||||||
#songs th {
|
#songs th {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -9,10 +10,37 @@ select {
|
|||||||
#songs_data td {
|
#songs_data td {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
#genre_div {
|
||||||
|
float: left;
|
||||||
|
padding-left: 2ex;
|
||||||
|
}
|
||||||
|
#artist_div {
|
||||||
|
float: left;
|
||||||
|
padding-left: 2ex;
|
||||||
|
}
|
||||||
|
#album_div {
|
||||||
|
float: left;
|
||||||
|
padding-left: 2ex;
|
||||||
|
}
|
||||||
|
#search_div {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
#source_div {
|
||||||
|
float: left;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
#songs_div {
|
||||||
|
float: left;
|
||||||
|
padding-left: 2ex;
|
||||||
|
padding-top: 1ex;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<table style="width:100%;">
|
<div id="search_div">
|
||||||
<tr>
|
<label for="search">search</label>
|
||||||
<td valign="top" style="width:20%;">
|
<input type="text" name="search" id="search" size="30" />
|
||||||
|
</div>
|
||||||
|
<div style="clear: both;"><!-- buggy IE div --></div>
|
||||||
|
<div id="source_div">
|
||||||
Source<br />
|
Source<br />
|
||||||
<select id="source" name="select" size="20">
|
<select id="source" name="select" size="20">
|
||||||
|
|
||||||
@ -20,53 +48,41 @@ select {
|
|||||||
</select>
|
</select>
|
||||||
<div id="busymsg" style="text-align:center;color:red; visibility: hidden;">Busy ...</div>
|
<div id="busymsg" style="text-align:center;color:red; visibility: hidden;">Busy ...</div>
|
||||||
<a href="javascript:add()">Add static playlist</a>
|
<a href="javascript:add()">Add static playlist</a>
|
||||||
</td>
|
</div>
|
||||||
|
<div id="genre_div">
|
||||||
<td valign="top" style="width:80%;" >
|
|
||||||
|
|
||||||
<table id="browse">
|
|
||||||
<tr>
|
|
||||||
<td style="width:30%;" >
|
|
||||||
Genre<br />
|
Genre<br />
|
||||||
|
|
||||||
<select id="genres" name="select" multiple="multiple" size="15">
|
<select id="genres" name="select" multiple="multiple" size="15">
|
||||||
<option value="all">all</option>
|
<option value="all">all</option>
|
||||||
</select>
|
</select>
|
||||||
</td>
|
</div>
|
||||||
<td style="width:35%;">
|
<div id="artist_div">
|
||||||
Artist<br />
|
Artist<br />
|
||||||
<select id="artists" name="select" multiple="multiple" size="15">
|
<select id="artists" name="select" multiple="multiple" size="15">
|
||||||
<option value="all">all</option>
|
<option value="all">all</option>
|
||||||
</select>
|
</select>
|
||||||
</td>
|
</div>
|
||||||
<td style="width:35%;">
|
<div id="album_div">
|
||||||
|
|
||||||
Album<br />
|
Album<br />
|
||||||
<select id="albums" name="select" multiple="multiple" size="15">
|
<select id="albums" name="select" multiple="multiple" size="15">
|
||||||
<option value="all">all</option>
|
<option value="all">all</option>
|
||||||
</select>
|
</select>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
<div id="songs_div" style="float: left; width:549px;">
|
||||||
</table>
|
<table id="songs" style="width:530px;" border="0" cellspacing="0" cellpadding="0">
|
||||||
|
|
||||||
<div style="clear: both; width:469px;">
|
|
||||||
<table id="songs" style="width:450px;" border="0" cellspacing="0" cellpadding="0">
|
|
||||||
<tr>
|
<tr>
|
||||||
<th style="width: 100px;">Song</th>
|
<th style="width: 140px;">Song</th>
|
||||||
<th style="width: 50px;">Time</th>
|
<th style="width: 50px;">Time</th>
|
||||||
<th style="width: 100px;">Artist</th>
|
<th style="width: 120px;">Artist</th>
|
||||||
<th style="width: 100px;">Album</th>
|
<th style="width: 120px;">Album</th>
|
||||||
<th style="width: 100px;">Genre</th>
|
<th style="width: 100px;">Genre</th>
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
<div style="height: 400px; overflow: auto; width: 469px;">
|
<div style="height: 400px; overflow: auto; width: 549px;">
|
||||||
<table id="songs_data" style="width:450px;" border="0" cellspacing="0" cellpadding="0">
|
<table id="songs_data" style="width:530px;" border="0" cellspacing="0" cellpadding="0">
|
||||||
<tr><td>hej</td><td></td><td></td><td></td><td></td></tr>
|
<tr><td>hej</td><td></td><td></td><td></td><td></td></tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
@include ftr.html@
|
@include ftr.html@
|
@ -204,10 +204,10 @@ function rsSongs(request) {
|
|||||||
seconds = (seconds < 10) ? '0'+seconds : seconds;
|
seconds = (seconds < 10) ? '0'+seconds : seconds;
|
||||||
timeString = Math.floor(time/60)+ ':' + seconds;
|
timeString = Math.floor(time/60)+ ':' + seconds;
|
||||||
|
|
||||||
tr.appendChild(Builder.node('td',{style:'width: 100px;'},Element.textContent(item.getElementsByTagName('dmap.itemname')[0])));
|
tr.appendChild(Builder.node('td',{style:'width: 140px;'},Element.textContent(item.getElementsByTagName('dmap.itemname')[0])));
|
||||||
tr.appendChild(Builder.node('td',{style:'width: 50px;'},timeString));
|
tr.appendChild(Builder.node('td',{style:'width: 50px;'},timeString));
|
||||||
tr.appendChild(Builder.node('td',{style:'width: 100px;'},Element.textContent(item.getElementsByTagName('daap.songartist')[0])));
|
tr.appendChild(Builder.node('td',{style:'width: 120px;'},Element.textContent(item.getElementsByTagName('daap.songartist')[0])));
|
||||||
tr.appendChild(Builder.node('td',{style:'width: 100px;'},Element.textContent(item.getElementsByTagName('daap.songalbum')[0])));
|
tr.appendChild(Builder.node('td',{style:'width: 120px;'},Element.textContent(item.getElementsByTagName('daap.songalbum')[0])));
|
||||||
tr.appendChild(Builder.node('td',{style:'width: 100px;'},Element.textContent(item.getElementsByTagName('daap.songgenre')[0])));
|
tr.appendChild(Builder.node('td',{style:'width: 100px;'},Element.textContent(item.getElementsByTagName('daap.songgenre')[0])));
|
||||||
|
|
||||||
songsTable.appendChild(tr);
|
songsTable.appendChild(tr);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user