andpp/mopidy-musicbox-webclient
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

small gui changes

Browse Source
This commit is contained in:
Wouter van Wijk 2013-02-20 15:46:58 +01:00
parent ed0db217c9
commit e082628cf6
5 changed files with 38 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
webclient/css/ws.css
View File

@ -87,7 +87,7 @@
display: none; display: none;
} }
.header-breakpoint.ui-grid-b .ui-block-c { .header-breakpoint.ui-grid-b .ui-block-c {
width: 35%; width: 33%;
} }
/*playlists*/ /*playlists*/
.pl-breakpoint .ui-block-a, .pl-breakpoint .ui-block-b { .pl-breakpoint .ui-block-a, .pl-breakpoint .ui-block-b {
@ -100,8 +100,14 @@
/*controls*/ /*controls*/
#btcontrols { #btcontrols {
display: block; display: block;
}
}
/* phone portrait */
@media all and (max-width: 20em) {
.header-breakpoint.ui-grid-b .ui-block-c {
display: none;
} }
} }
/*********** /***********
@ -150,7 +156,6 @@
color: #ddd; color: #ddd;
font-size: 14px; font-size: 14px;
text-shadow: 1px 1px #555; text-shadow: 1px 1px #555;
/* border: 1px solid white; */
} }
#songinfo { #songinfo {
@ -179,7 +184,6 @@
width: 36px; width: 36px;
heigth: 36px; heigth: 36px;
margin-right: 5px; margin-right: 5px;
/* border: 1px solid #666; */
margin-top: -3px; margin-top: -3px;
} }

11
webclient/index.html
View File

@ -32,7 +32,7 @@
<link href="css/ws.css" rel="stylesheet"> <link href="css/ws.css" rel="stylesheet">
<script type="text/javascript" src="/mopidy/mopidy.js"></script> <script type="text/javascript" src="/mopidy/mopidy.js"></script>
<link rel="stylesheet" href="css/add2home.css"> <!-- <link rel="stylesheet" href="css/add2home.css"> -->
</head> </head>
<body> <body>
@ -106,7 +106,7 @@
<div id="songinfo" class=" ui-block-b"> <div id="songinfo" class=" ui-block-b">
<a href="#controlsmodal" data-position-to="window" data-rel="popup"> <a href="#controlsmodal" data-position-to="window" data-rel="popup">
<img id="infocover" width="36" height="36"></img> <div id="infoname"></div> <div id="infoartist"></div> </a> <img id="infocover" src="images/icons/cd_32x32.png" width="36" height="36"></img> <div id="infoname"></div> <div id="infoartist"></div> </a>
</div> </div>
<div id="slidercontainer" class="ui-block-c"> <div id="slidercontainer" class="ui-block-c">
@ -124,7 +124,6 @@
</div> </div>
<div class="ui-block-b" id="playlisttablediv"> <div class="ui-block-b" id="playlisttablediv">
<ul data-role="listview" data-theme="c" data-icon="false" id="playlisttable" data-inset="true" data-filter="true"></ul> <ul data-role="listview" data-theme="c" data-icon="false" id="playlisttable" data-inset="true" data-filter="true"></ul>
<img src="images/loader.gif" id="playlistloader" class= "loader" />
</div> </div>
</div><!--/playlistspane--> </div><!--/playlistspane-->
@ -132,7 +131,6 @@
<div data-role="content" class="pane" id="currentpane"> <div data-role="content" class="pane" id="currentpane">
<h4>Play Queue</h4> <h4>Play Queue</h4>
<ul data-role="listview" data-icon="false" data-theme="d" data-inset="true" id="currenttable"></ul> <ul data-role="listview" data-icon="false" data-theme="d" data-inset="true" id="currenttable"></ul>
<img src="images/loader.gif" id="currentloader" class= "loader" />
</div> </div>
<div data-role="content" class="pane" id="albumspane"> <div data-role="content" class="pane" id="albumspane">
@ -140,7 +138,6 @@
<h3 id="h_albumname"></h3> <h3 id="h_albumname"></h3>
<h5 id="h_albumartist"></h5> <h5 id="h_albumartist"></h5>
<ul data-role="listview" data-icon="false" data-inset="true" id="albumstable"></ul> <ul data-role="listview" data-icon="false" data-inset="true" id="albumstable"></ul>
<img src="images/loader.gif" id="albumsloader" class= "loader" />
</div> </div>
<div data-role="content" class="pane" id="artistspane"> <div data-role="content" class="pane" id="artistspane">
@ -148,7 +145,6 @@
<a href="#artistpopup" data-position-to="window" data-rel="popup"><img height="90" src="" id="artistviewimage" /></a> <a href="#artistpopup" data-position-to="window" data-rel="popup"><img height="90" src="" id="artistviewimage" /></a>
<h3 id="h_artistname"></h3> <h3 id="h_artistname"></h3>
<ul data-role="listview" data-icon="false" data-inset="true" id="artiststable"></ul> <ul data-role="listview" data-icon="false" data-inset="true" id="artiststable"></ul>
<img src="images/loader.gif" id="artistsloader" class="loader" />
</div> </div>
<div data-role="content" class="pane" id="searchpane"> <div data-role="content" class="pane" id="searchpane">
@ -159,7 +155,6 @@
</button> </button>
</div> </div>
<img src="images/loader.gif" id="allresultloader" class= "loader" />
<div id="searchresults"> <div id="searchresults">
<div class="ui-grid-a srch-breakpoint"> <div class="ui-grid-a srch-breakpoint">
@ -205,7 +200,7 @@
</div><!-- /page one --> </div><!-- /page one -->
<script src="js/jquery.truncate.min.js"></script> <script src="js/jquery.truncate.min.js"></script>
<script type="text/javascript" src="js/add2home.js" charset="utf-8"></script> <!-- <script type="text/javascript" src="js/add2home.js" charset="utf-8"></script> -->
<script src="js/controls.js"></script> <script src="js/controls.js"></script>
<script src="js/library.js"></script> <script src="js/library.js"></script>
<script src="js/functionsvars.js"></script> <script src="js/functionsvars.js"></script>

9
webclient/js/controls.js vendored
View File

@ -4,30 +4,32 @@
function playTrack(addtobottom) { function playTrack(addtobottom) {
$('#popupTracks').popup('close'); $('#popupTracks').popup('close');
$('#controlsmodal').popup('close'); $('#controlsmodal').popup('close');
showLoading(true);
//function playtrack(uri, playlisturi) { //function playtrack(uri, playlisturi) {
playlisturi = $('#popupTracks').data("list"); playlisturi = $('#popupTracks').data("list");
uri = $('#popupTracks').data("track"); uri = $('#popupTracks').data("track");
var trackslist = new Array(); var trackslist = new Array();
var track; var track;
switchContent('current', uri);
var tracks = getTracksFromUri(playlisturi); var tracks = getTracksFromUri(playlisturi);
if (tracks) { if (tracks) {
if (!addtobottom) { if (!addtobottom) {
mopidy.playback.stop(true);
mopidy.tracklist.clear(); mopidy.tracklist.clear();
} }
mopidy.tracklist.add(tracks); mopidy.tracklist.add(tracks);
$(CURRENT_PLAYLIST_TABLE).empty(); $(CURRENT_PLAYLIST_TABLE).empty();
} else { } else {
tracks = currentplaylist; tracks = currentplaylist;
mopidy.playback.stop(true);
} }
if (addtobottom) { if (addtobottom) {
showLoading(false);
return false; return false;
} }
mopidy.playback.stop(true); switchContent('current', uri);
for (var i = 0; i < tracks.length; i++) { for (var i = 0; i < tracks.length; i++) {
if (tracks[i].uri == uri) { if (tracks[i].uri == uri) {
@ -39,6 +41,7 @@ function playTrack(addtobottom) {
mopidy.playback.next(); mopidy.playback.next();
} }
mopidy.playback.play(); mopidy.playback.play();
showLoading(false);
return false; return false;
} }

3
webclient/js/functionsvars.js
View File

@ -172,12 +172,13 @@ function resultsToTables(results, target, uri) {
} }
html += ' / <em>' + newalbum[0].album.name + '</em></p>'; html += ' / <em>' + newalbum[0].album.name + '</em></p>';
html += '</a></li>'; html += '</a></li>';
popupData[newalbum[0].uri] = newalbum[0];
newalbum = []; newalbum = [];
} else { } else {
html += '<li data-role="list-divider" data-theme="d"><a href="#" onclick="return showAlbum(\'' + results[i].album.uri + '\');">'; html += '<li data-role="list-divider" data-theme="d"><a href="#" onclick="return showAlbum(\'' + results[i].album.uri + '\');">';
html += '<img id="' + targetmin + '-cover-' + i + '" class="artistcover" width="30" height="30" />'; html += '<img id="' + targetmin + '-cover-' + i + '" class="artistcover" width="30" height="30" />';
html += '<p>' + results[i].album.name + '</p><p>'; html += '<p><em>' + results[i].album.name + '</em></p><p>';
for ( j = 0; j < results[i].album.artists.length; j++) { for ( j = 0; j < results[i].album.artists.length; j++) {
html += results[i].album.artists[j].name; html += results[i].album.artists[j].name;
html += (j == results[i].album.artists.length - 1) ? '' : ' / '; html += (j == results[i].album.artists.length - 1) ? '' : ' / ';

39
webclient/js/gui.js
View File

@ -25,26 +25,22 @@ function expandSonginfo() {
function resizeSonginfo() { function resizeSonginfo() {
$("#infoname").html(songname); $("#infoname").html(songname);
if ((artiststext.length > 83) || (songname.length > 43)) { $("#infoartist").html(artiststext);
$("#infoartist").html(artiststext); //bug in truncate?
//bug in truncate? var spanwidth = $("#infoartist").width() - 38;
var spanwidth = $("#infoartist").width() - 38; $("#infoname").truncate({
$("#infoname").truncate({ width : spanwidth,
width : spanwidth, token : '&hellip;',
token : '&hellip;', center : true,
center : true, multiline : false
multiline : false });
}); $("#infoartist").truncate({
$("#infoartist").truncate({ width : spanwidth,
width : spanwidth, token : '&hellip;',
token : '&hellip;', center : true,
center : true, multiline : false
multiline : false });
}); $("#infoartist").html('<a href="#controlsmodal" data-rel="popup">' + $("#infoartist").html() + '</a>');
$("#infoartist").html('<a href="#controlsmodal" data-rel="popup">' + $("#infoartist").html() + '</a>');
} else {
$("#infoartist").html(artiststext);
}
} }
function setSongInfo(data) { function setSongInfo(data) {
@ -282,6 +278,9 @@ $(document).ready(function() {
$("#btback").hide(); $("#btback").hide();
} }
$(window).resize(function() {
resizeSonginfo();
});
}); });
/************************ /************************