[Slim-Checkins] r11433 - in /trunk/server/HTML: Nokia770/ Nokia770/html/ Touch/ Touch/html/

bklaas at svn.slimdevices.com bklaas at svn.slimdevices.com
Tue Feb 13 12:48:58 PST 2007


Author: bklaas
Date: Tue Feb 13 12:48:57 2007
New Revision: 11433

URL: http://svn.slimdevices.com?rev=11433&view=rev
Log:
Bug #4372: shrink/enlarge art on browse pages, misc layout fixes

Modified:
    trunk/server/HTML/Nokia770/artwork.js
    trunk/server/HTML/Nokia770/browse.js
    trunk/server/HTML/Nokia770/hitlist.html
    trunk/server/HTML/Nokia770/html/about.html
    trunk/server/HTML/Nokia770/menu.html
    trunk/server/HTML/Nokia770/skin_global.js
    trunk/server/HTML/Nokia770/songinfo.html
    trunk/server/HTML/Nokia770/status_list.html
    trunk/server/HTML/Nokia770/status_noclients.html
    trunk/server/HTML/Touch/browsedb.html
    trunk/server/HTML/Touch/html/about.html
    trunk/server/HTML/Touch/slimserver.css

Modified: trunk/server/HTML/Nokia770/artwork.js
URL: http://svn.slimdevices.com/trunk/server/HTML/Nokia770/artwork.js?rev=11433&r1=11432&r2=11433&view=diff
==============================================================================
--- trunk/server/HTML/Nokia770/artwork.js (original)
+++ trunk/server/HTML/Nokia770/artwork.js Tue Feb 13 12:48:57 2007
@@ -13,8 +13,6 @@
 
 [% PROCESS html/global.js %]
 [% PROCESS skin_global.js %]
-
-var thumbHrefTemplate = '/music/COVER/thumb_'+thumbSize+'x'+thumbSize+'_f_000000.jpg';
 
 function addItem(args) {
 	url = '[% webroot %]status.html';

Modified: trunk/server/HTML/Nokia770/browse.js
URL: http://svn.slimdevices.com/trunk/server/HTML/Nokia770/browse.js?rev=11433&r1=11432&r2=11433&view=diff
==============================================================================
--- trunk/server/HTML/Nokia770/browse.js (original)
+++ trunk/server/HTML/Nokia770/browse.js Tue Feb 13 12:48:57 2007
@@ -2,6 +2,26 @@
 
 [% PROCESS html/global.js %]
 [% PROCESS skin_global.js %]
+
+function changeThumbSize (action, albumArtDOMId, albumArtId) {
+	if (action == 'shrink' ) {
+		if (thumbSize == 50) {
+			return;
+		}
+		thumbSize = thumbSize - 50;
+	} else if (action == 'enlarge') {
+		if (thumbSize == 700) {
+			return;
+		}
+		thumbSize = thumbSize + 50;
+	}
+	thumbHrefTemplate = '/music/COVER/thumb_'+thumbSize+'x'+thumbSize+'_f_000000.jpg';
+	var thumbHref = thumbHrefTemplate.replace('COVER', albumArtId);
+	if ($(albumArtDOMId)) {
+		$(albumArtDOMId).src = thumbHref;
+	}
+	setCookie( 'SlimServer-thumbSize', thumbSize );
+}
 
 function addItem(args) {
 	getStatusData(args, showAdded);

Modified: trunk/server/HTML/Nokia770/hitlist.html
URL: http://svn.slimdevices.com/trunk/server/HTML/Nokia770/hitlist.html?rev=11433&r1=11432&r2=11433&view=diff
==============================================================================
--- trunk/server/HTML/Nokia770/hitlist.html (original)
+++ trunk/server/HTML/Nokia770/hitlist.html Tue Feb 13 12:48:57 2007
@@ -1,7 +1,7 @@
 <!-- hitlist.html -->
 [% pagetitle = "MUSIC" | string %] [% pageicon = 'MUSIC' %] [% setup = '1' %] [% music = '0' %][% playlist = '0' %] [% status = '1' %]
 
-[% PROCESS pageheader.html %]
+[% PROCESS pageheader.html thispage = 'statistics' %]
 
 <table bgcolor="#EEEEEE" width=100% cellpadding="0" cellspacing="0" border="0"><tr><td width="50%" style="padding-left:20px; padding-top:12px;"><font class="headertext">[% "STATISTICS" | string %]</font></td></tr>
        <tr>

Modified: trunk/server/HTML/Nokia770/html/about.html
URL: http://svn.slimdevices.com/trunk/server/HTML/Nokia770/html/about.html?rev=11433&r1=11432&r2=11433&view=diff
==============================================================================
--- trunk/server/HTML/Nokia770/html/about.html (original)
+++ trunk/server/HTML/Nokia770/html/about.html Tue Feb 13 12:48:57 2007
@@ -1,7 +1,7 @@
 <!-- Page about.html -->
 [% pagetitle = 'Nokia 770: Skin Info' %] [% pageicon = 'MUSIC' %]
 
-[% PROCESS pageheader.html %]
+[% PROCESS pageheader.html thispage = 'about' %]
 
 <table width="100%" bgcolor="#EEEEEE" cellspacing="0" cellpadding="0" border="0">
 	<tr>

Modified: trunk/server/HTML/Nokia770/menu.html
URL: http://svn.slimdevices.com/trunk/server/HTML/Nokia770/menu.html?rev=11433&r1=11432&r2=11433&view=diff
==============================================================================
--- trunk/server/HTML/Nokia770/menu.html (original)
+++ trunk/server/HTML/Nokia770/menu.html Tue Feb 13 12:48:57 2007
@@ -34,4 +34,4 @@
 </table>
 </div>
 <!-- /Menu -->
-[% IF thispage != 'browse' && thispage != 'artwork' %]<div id = 'pagecontainer'>[% END %]
+[% IF thispage != 'browse' && thispage != 'artwork' %]<div id = 'pagecontainer'>[% IF thispage == '' %]<p>[% END %][% END %]

Modified: trunk/server/HTML/Nokia770/skin_global.js
URL: http://svn.slimdevices.com/trunk/server/HTML/Nokia770/skin_global.js?rev=11433&r1=11432&r2=11433&view=diff
==============================================================================
--- trunk/server/HTML/Nokia770/skin_global.js (original)
+++ trunk/server/HTML/Nokia770/skin_global.js Tue Feb 13 12:48:57 2007
@@ -1,4 +1,6 @@
 var thumbSize = [% IF thumbSize %][% thumbSize %][% ELSE %]250[% END %];
+var thumbHrefTemplate = '/music/COVER/thumb_'+thumbSize+'x'+thumbSize+'_f_000000.jpg';
+
 function chooseAlbumOrderBy(value, option, artwork)
 {
 	if (!artwork) {

Modified: trunk/server/HTML/Nokia770/songinfo.html
URL: http://svn.slimdevices.com/trunk/server/HTML/Nokia770/songinfo.html?rev=11433&r1=11432&r2=11433&view=diff
==============================================================================
--- trunk/server/HTML/Nokia770/songinfo.html (original)
+++ trunk/server/HTML/Nokia770/songinfo.html Tue Feb 13 12:48:57 2007
@@ -4,7 +4,7 @@
 [%- playermodel | string %] : [% "SONG_INFO" | string -%]
 [%- END -%]
 [%- pageicon = 'MUSIC' -%]
-[%- PROCESS pageheader.html -%]
+[%- PROCESS pageheader.html thispage = 'browse ' -%]
 
 <table width="100%" cellspacing="0" cellpadding="0" border = '0' bgcolor="#EEEEEE">
 	<tr>
@@ -17,15 +17,11 @@
 	<tr>
 		<td valign = 'top'>
 		[% IF itemobj.coverArt('cover', 1) %]
+		<a href = "javascript:changeThumbSize('shrink', 'albumArt', '[% itemobj.id %]');">[% "SHRINK" | string %]</a> |
+		<a href = "javascript:changeThumbSize('enlarge', 'albumArt', '[% itemobj.id %]');">[% "ENLARGE" | string %]</a>
 		<a href="browsedb.html?hierarchy=album,track&level=2&album.id=[% itemobj.album.id %]&player=[% playerURI %]">
-			<img src="/music/[% itemobj.id %]/thumb_[% IF thumbSize %][% thumbSize %]x[% thumbSize %][% ELSE %]200x200[% END %]_f_000000.jpg" style="border: 1px solid black">
+			<img src="/music/[% itemobj.id %]/thumb_[% IF thumbSize %][% thumbSize %]x[% thumbSize %][% ELSE %]200x200[% END %]_f_000000.jpg" style="border: 1px solid black" id = 'albumArt'>
 		</a>
-
-		<!-- add SHRINK/ENLARGE links here, same as is needed in the album view section of browsedb.html
-			<a href = 'javascript:shrinkThumbs();'>[% "SHRINK" | string %]</a> |
-			<a href = 'javascript:enlargeThumbs();'>[% "ENLARGE" | string %]</a>
-		-->
-
 		[% END %]
 		</td>
 
@@ -46,10 +42,10 @@
 				<td valign = 'top'>
 				<table border = '0'>
 				<tr>
-					<td class = 'smallitemtext'>
+					<td class = 'smallitemtext' valign = 'top'>
 					<nobr>[% "TITLE" | string %][% "COLON" | string %]</nobr>
 					</td>
-					<td class = 'smallitemtext'>
+					<td class = 'smallitemtext' valign = 'top'>
 					[% itemobj.title %]
 					</td>
 				</tr>
@@ -59,10 +55,10 @@
 					
 					[% IF contributors %]
 						<tr>
-							<td class = 'smallitemtext'>[% role | upper | string; "COLON" | string %]</td>
+							<td class = 'smallitemtext' valign = 'top'>[% role | upper | string; "COLON" | string %]</td>
 							[% contributorsHTML = [] %]
 			
-							<td class = 'smallitemtext'>[% FOREACH contributor = contributors %]
+							<td class = 'smallitemtext' valign = 'top'>[% FOREACH contributor = contributors %]
 			
 								[% contributorHTMLFrag = "<a href=\"browsedb.html?hierarchy=contributor,album,track&amp;level=1&amp;contributor.id=$contributor.id&amp;player=$playerURI\">$contributor.name</a>" %]
 			
@@ -77,20 +73,20 @@
 				[% END %]
 				[% IF itemobj.album %]
 				<tr>
-					<td class = 'smallitemtext'>
+					<td class = 'smallitemtext' valign = 'top'>
 					[% "ALBUM" | string %][% "COLON" | string %]
 					 </td>
-					<td class = 'smallitemtext'>
+					<td class = 'smallitemtext' valign = 'top'>
 						<a href="browsedb.html?hierarchy=contributor,album,track&level=2&album.id=[% itemobj.album.id %]&player=[% playerURI %]" style="text-decoration:none">[% itemobj.album.title %]</a>
 					</td>
 				</tr>
 				[% END %] 
 				[% IF itemobj.genres %][% genresHTML = [] %]
 				<tr>
-					<td class = 'smallitemtext'>
+					<td class = 'smallitemtext' valign = 'top'>
 					[% "GENRE" | string %][% "COLON" | string %]
 					</td>
-					<td class = 'smallitemtext'>
+					<td class = 'smallitemtext' valign = 'top'>
 					[% FOREACH genre = itemobj.genres %]
 						[% genreHTMLFrag = "<a href=\"browsedb.html?hierarchy=genre,contributor,album,track&amp;level=1&amp;genre.id=$genre.id&amp;player=$playerURI\" style=\"text-decoration:none\">$genre.name</a>" %]
 						[% genresHTML.push(genreHTMLFrag) %]
@@ -105,88 +101,88 @@
 			<table> 
 			[% IF itemobj.tracknum %]
 				<tr>
-					<td class = 'smallitemtext'>
+					<td class = 'smallitemtext' valign = 'top'>
 					[% "TRACK" | string %][% "COLON" | string %]
 					</td>
-					<td class = 'smallitemtext'>
+					<td class = 'smallitemtext' valign = 'top'>
 					[% itemobj.tracknum %]
 					</td>
 				</tr>
 				[% END %] [% IF itemobj.duration %]
 				<tr>
-					<td class = 'smallitemtext'>
+					<td class = 'smallitemtext' valign = 'top'>
 					[% "LENGTH" | string %][% "COLON" | string %]
 					</td>
-					<td class = 'smallitemtext'>
+					<td class = 'smallitemtext' valign = 'top'>
 					[% itemobj.duration %]
 					</td>
 				</tr>
 				[% END %] [% IF itemobj.year %]
 				<tr>
-				<td class = 'smallitemtext'>
+				<td class = 'smallitemtext' valign = 'top'>
 					[% "YEAR" | string %][% "COLON" | string %]
 				</td>
-				<td class = 'smallitemtext'>
+				<td class = 'smallitemtext' valign = 'top'>
 					[% itemobj.year %]
 				</td>
 			</tr>
 				[% END %] [% IF itemobj.replay_gain.defined %] 
 				<tr> 
-					<td class = 'smallitemtext'>[% "REPLAYGAIN" | string; "COLON" | string %]</td>
-					<td class = 'smallitemtext'>[% itemobj.replay_gain | format('%2.2f') | html %] dB</td>
+					<td class = 'smallitemtext' valign = 'top'>[% "REPLAYGAIN" | string; "COLON" | string %]</td>
+					<td class = 'smallitemtext' valign = 'top'>[% itemobj.replay_gain | format('%2.2f') | html %] dB</td>
 						</tr>
 				[% END %] [% IF itemobj.album.replay_gain.defined %] 
 				<tr> 
-					<td class = 'smallitemtext'>[% "ALBUMREPLAYGAIN" | string; "COLON" | string %]</td>
-					<td class = 'smallitemtext'>[% itemobj.album.replay_gain | format('%2.2f') | html %] dB</td>
+					<td class = 'smallitemtext' valign = 'top'>[% "ALBUMREPLAYGAIN" | string; "COLON" | string %]</td>
+					<td class = 'smallitemtext' valign = 'top'>[% itemobj.album.replay_gain | format('%2.2f') | html %] dB</td>
 				</tr>
 			[% END %] [% IF comment %]
 			<tr>
-				<td class = 'smallitemtext'>
+				<td class = 'smallitemtext' valign = 'top'>
 					[% "COMMENT" | string %][% "COLON" | string %]
 				</td>
-				<td class = 'smallitemtext'>
+				<td class = 'smallitemtext' valign = 'top'>
 					[% comment %]
 				</td>
 			</tr>
 			[% END %] [% IF itemobj.lyrics %]
 			<tr>
-				<td class = 'smallitemtext'>
+				<td class = 'smallitemtext' valign = 'top'>
 					[% "LYRICS" | string %][% "COLON" | string %]
 				</td>
-				<td class = 'smallitemtext'>
+				<td class = 'smallitemtext' valign = 'top'>
 					[% itemobj.lyrics | html_line_break | html_para %]
 				</td>
 			</tr>
 			[% END %] [% IF filelength %]
 			<tr>
-				<td class = 'smallitemtext'>
+				<td class = 'smallitemtext' valign = 'top'>
 					[% "FILELENGTH" | string %][% "COLON" | string %]
 				</td>
-				<td class = 'smallitemtext'>
+				<td class = 'smallitemtext' valign = 'top'>
 					[% filelength %] [% "BYTES" | string %]
 				</td>
 			</tr>
 			[% END %] [% IF itemobj.prettyBitRate %]
 			<tr>
-				<td class = 'smallitemtext'>
+				<td class = 'smallitemtext' valign = 'top'>
 					[% "BITRATE" | string %][% "COLON" | string %]
 				</td>
-				<td class = 'smallitemtext'>
+				<td class = 'smallitemtext' valign = 'top'>
 					[% itemobj.prettyBitRate %]
 				</td>
 			</tr>
 			[% END %][% IF itemobj.samplerate %] 
 			<tr> 
-				<td class = 'smallitemtext'>[% "SAMPLERATE" | string; "COLON" | string %]</td>
-				<td class = 'smallitemtext'>[% itemobj.prettySampleRate | html %] </td>
+				<td class = 'smallitemtext' valign = 'top'>[% "SAMPLERATE" | string; "COLON" | string %]</td>
+				<td class = 'smallitemtext' valign = 'top'>[% itemobj.prettySampleRate | html %] </td>
 			</tr>
 			[% END %] [% IF itemobj.tagversion %]
 			<tr>
-				<td class = 'smallitemtext'>
+				<td class = 'smallitemtext' valign = 'top'>
 					[% "TAGVERSION" | string %][% "COLON" | string %]
 				</td>
-				<td class = 'smallitemtext'>
+				<td class = 'smallitemtext' valign = 'top'>
 					[% itemobj.tagversion %]
 				</td>
 			</tr>

Modified: trunk/server/HTML/Nokia770/status_list.html
URL: http://svn.slimdevices.com/trunk/server/HTML/Nokia770/status_list.html?rev=11433&r1=11432&r2=11433&view=diff
==============================================================================
--- trunk/server/HTML/Nokia770/status_list.html (original)
+++ trunk/server/HTML/Nokia770/status_list.html Tue Feb 13 12:48:57 2007
@@ -1,6 +1,6 @@
 <!--status_list.html-->
 [%# Element status_list.html %]
-<tr [% IF item.currentsong %]class = 'playing'[% ELSIF not item.odd %]class = 'odd'[% ELSE %]class = 'even'[% END %] id = 'row[% item.num %]'>
+<tr class = '[% IF item.currentsong %]playing[% ELSIF not item.odd %]odd[% ELSE %]even[% END %]' id = 'row[% item.num %]'>
 
         [% PROCESS ajaxplaylistcontrols
                 itemobj = item.itemobj
@@ -23,7 +23,8 @@
 [%# /Element status_list.html %]
 
 [% BLOCK ajaxplaylistcontrols %]
-<td><table class = 'playlistcontrols'><tr>
+<td>
+<table class = 'playlistcontrols'><tr>
 <td class = 'playlistcontrols' align = 'center'>
 <span id = 'play_[% item.num %]' style = 'display: [% IF item.currentsong %]none[% ELSE %]block[% END %];'>
 	<a href = 'javascript:playlistPlayTrack("p0=playlist&p1=jump&p2=[% num %]&player=[% playerURI %]&ajaxRequest=1");' id = 'play_link_[% item.num %]'>
@@ -86,4 +87,5 @@
 
 </td>
 </tr></table>
+</td>
 [% END %]

Modified: trunk/server/HTML/Nokia770/status_noclients.html
URL: http://svn.slimdevices.com/trunk/server/HTML/Nokia770/status_noclients.html?rev=11433&r1=11432&r2=11433&view=diff
==============================================================================
--- trunk/server/HTML/Nokia770/status_noclients.html (original)
+++ trunk/server/HTML/Nokia770/status_noclients.html Tue Feb 13 12:48:57 2007
@@ -1,6 +1,6 @@
 [%# Page status_noclients.html %]
 <!-- status_noclients.html -->
-[%- PROCESS pageheader.html class = 'custom' -%]
+[%- PROCESS pageheader.html class = 'custom' thispage = 'noclients' -%]
 
 <table border="0" cellpadding="2" cellspacing="0" width="100%"  bordercolor="#111111">
     <tr>

Modified: trunk/server/HTML/Touch/browsedb.html
URL: http://svn.slimdevices.com/trunk/server/HTML/Touch/browsedb.html?rev=11433&r1=11432&r2=11433&view=diff
==============================================================================
--- trunk/server/HTML/Touch/browsedb.html (original)
+++ trunk/server/HTML/Touch/browsedb.html Tue Feb 13 12:48:57 2007
@@ -55,7 +55,7 @@
 <div id = 'pagecontainer'>
 
 <!-- need about 40px of space to deal with fixed crumblist-->
-<table><tr><td height = '40'>&nbsp;</td></tr></table>
+<table><tr><td height = '[% IF coverArt %]20[% ELSE %]40[% END %]'>&nbsp;</td></tr></table>
 
 [% IF level == 0 && artwork == 2 %]
 <div id = 'resizeThumbs'>
@@ -88,15 +88,16 @@
 
 [% ELSE %]
 
+[% IF coverArt %]
+<a href = "javascript:changeThumbSize('shrink', 'albumArt', '[% coverArt %]');">[% "SHRINK" | string %]</a> |
+<a href = "javascript:changeThumbSize('enlarge', 'albumArt', '[% coverArt %]');">[% "ENLARGE" | string %]</a>
+[% END %]
 <table width = '100%' class = 'noborder' bgcolor = 'white'>
 	<tr>
 [% IF coverArt %]
 		<td valign = 'top' width = '205'>
 			<a href="status.html?p0=playlist&p1=addalbum&p2=[% genre | uri %]&p3=[% contributor.id | uri %]&p4=[% album.id | uri %]&player=[% playerURI %]">
-			<img src="/music/[% coverArt %]/thumb_[% IF thumbSize %][% thumbSize %]x[% thumbSize %][% ELSE %]200x200[% END %]_f_000000.jpg" STYLE="border: 1px solid black"></a>
-<!-- add these links to allow for dynamic resizing of cover art above; needs some work yet
-<a href = 'javascript:shrinkThumbs();'>[% "SHRINK" | string %]</a> |
-<a href = 'javascript:enlargeThumbs();'>[% "ENLARGE" | string %]</a>-->
+			<img src="/music/[% coverArt %]/thumb_[% IF thumbSize %][% thumbSize %]x[% thumbSize %][% ELSE %]200x200[% END %]_f_000000.jpg" STYLE="border: 1px solid black" id = 'albumArt'></a>
 		</td>
 [% END %]
 		<td valign = 'top'>

Modified: trunk/server/HTML/Touch/html/about.html
URL: http://svn.slimdevices.com/trunk/server/HTML/Touch/html/about.html?rev=11433&r1=11432&r2=11433&view=diff
==============================================================================
--- trunk/server/HTML/Touch/html/about.html (original)
+++ trunk/server/HTML/Touch/html/about.html Tue Feb 13 12:48:57 2007
@@ -1,7 +1,7 @@
 <!-- Page about.html -->
 [% pagetitle = 'Touch: Skin Info' %] [% pageicon = 'MUSIC' %]
 
-[% PROCESS pageheader.html %]
+[% PROCESS pageheader.html thispage = 'about' %]
 
 <table width="100%" bgcolor="#EEEEEE" cellspacing="0" cellpadding="0" border="0">
 	<tr>

Modified: trunk/server/HTML/Touch/slimserver.css
URL: http://svn.slimdevices.com/trunk/server/HTML/Touch/slimserver.css?rev=11433&r1=11432&r2=11433&view=diff
==============================================================================
--- trunk/server/HTML/Touch/slimserver.css (original)
+++ trunk/server/HTML/Touch/slimserver.css Tue Feb 13 12:48:57 2007
@@ -150,6 +150,11 @@
 	width: 25px;
 }
 
+td.listing {
+	padding-top: 8px;
+	padding-bottom: 8px;
+}
+
 div {
 	overflow: visible;
 }
@@ -178,13 +183,20 @@
 
 tr.playing {
 	background-color: #9ef5f6;
+	padding-top: 10px;
+	padding-bottom: 10px;
 }
 
 tr.odd, td.odd {
 	background-color: #d0d0d0;
-}
+	padding-top: 10px;
+	padding-bottom: 10px;
+}
+
 tr.even, td.even {
 	background-color: #FFFFFF;
+	padding-top: 10px;
+	padding-bottom: 10px;
 }
 
 div#page {



More information about the checkins mailing list