Changed playlist editor from table layout to using divs

This commit is contained in:
Anders Betnér 2006-03-22 08:55:31 +00:00
parent adf55f3fea
commit 1fa4d66401
2 changed files with 48 additions and 32 deletions

View File

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

View File

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