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

fix:Align layout and features of 'Search' pane with rest of the web client.

Browse Source
This commit is contained in:
jcass 2016-02-04 14:00:24 +02:00
parent fd930d9ddb
commit 6772e42e2b
4 changed files with 89 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
mopidy_musicbox_webclient/static/css/webclient.css
View File

@ -205,7 +205,15 @@
background-color: #fff; background-color: #fff;
} }
#searchresults { #searchartists {
display: none;
}
#searchalbums {
display: none;
}
#searchtracks {
display: none; display: none;
} }

130
mopidy_musicbox_webclient/static/index.html
View File

@ -357,98 +357,98 @@
</div> </div>
<div data-role="content" class="pane" id="searchpane"> <div data-role="content" class="pane" id="searchpane">
<div class=""> <h4>Search</h4>
<form>
<select id="selectSearchService"> <!-- data-native-menu="false"> <!-- multiple="multiple" data-native-menu="false"> <div class="ui-grid pl-breakpoint">
<option data-placeholder="true">Choose services</option> --> <div class="ui-block">
</select> <form>
<input id="searchinput" class="span2" data-clear-btn="true" <p>Search for artists, albums, or specific tracks.
onkeypress="return searchPressed(event.keyCode);" id="appendedInputButton" type="text"/> <select id="selectSearchService"> <!-- data-native-menu="false"> <!-- multiple="multiple" data-native-menu="false">
<button class="btn" type="button" onclick="return initSearch(event.value);"> <option data-placeholder="true">Choose services</option> -->
Search! </select>
</button> <input id="searchinput" placeholder="Search term" class="span2" data-clear-btn="true"
</form> onkeypress="return searchPressed(event.keyCode);" id="appendedInputButton" type="text"/>
<button class="btn" type="button" onclick="return initSearch(event.value);">
Search!
</button>
</form>
</div>
</div> </div>
<div class="ui-grid-a srch-breakpoint">
<div id="searchresults"> <div class="ui-block-a" id="searchartists">
<div class="ui-grid-a srch-breakpoint"> <div data-role="listview" data-inset="true">
<div class="ui-block-a" id="searchartists"> <div data-role="header">
<div data-role="listview" data-inset="true"> <h4>Artists</h4>
<div data-role="header">
<h4>Artists</h4>
</div>
<div data-role="content">
<ul data-role="listview" id="artistresulttable"></ul>
</div>
</div> </div>
</div> <div data-role="content">
<div class="ui-block-b" id="searchalbums"> <ul data-role="listview" id="artistresulttable"></ul>
<div data-role="listview" data-inset="true">
<div data-role="header">
<h4>Albums</h4>
</div>
<div data-role="content">
<ul data-role="listview" id="albumresulttable"></ul>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="ui-block-b" id="searchalbums">
<div class="" id="searchtracks"> <div data-role="listview" data-inset="true">
<h4>Tracks</h4> <div data-role="header">
<ul id="trackresulttable" class="table"></ul> <h4>Albums</h4>
</div>
<div data-role="content">
<ul data-role="listview" id="albumresulttable"></ul>
</div>
</div>
</div> </div>
</div> </div>
<div class="" id="searchtracks">
<h4>Tracks</h4>
<ul id="trackresulttable" class="table"></ul>
</div>
</div> </div>
<!-- search div --> <!-- search div -->
<div data-role="content" class="pane" id="streampane"> <div data-role="content" class="pane" id="streampane">
<h4>Streams</h4> <h4>Streams</h4>
<div> <div class="ui-grid-a pl-breakpoint">
<div class="ui-grid-a pl-breakpoint">
<div class="ui-block-a" style="padding: 5px"> <div class="ui-block-a" style="padding: 5px">
<form> <form>
<p>Play a specific stream/track and optionally save it to your favourites. <p>Play a specific stream/track and optionally save it to your favourites.
<button class="btn" type="button" onclick="return getCurrentlyPlaying();"> <button class="btn" type="button" onclick="return getCurrentlyPlaying();">
Get currently playing Get currently playing
</button> </button>
<input id="streamuriinput" placeholder="URI" class="span2" data-clear-btn="true" <input id="streamuriinput" placeholder="URI" class="span2" data-clear-btn="true"
onkeypress="return streamPressed(event.keyCode);" id="appendedInputButton" type="text"/> onkeypress="return streamPressed(event.keyCode);" id="appendedInputButton" type="text"/>
<button class="btn" type="button" onclick="return playStreamUri();"> <button class="btn" type="button" onclick="return playStreamUri();">
Play Play
</button> </button>
<input id="streamnameinput" placeholder="Name" class="span2" data-clear-btn="true" <input id="streamnameinput" placeholder="Name" class="span2" data-clear-btn="true"
onkeypress="return streamPressed(event.keyCode);" id="appendedInputButton" type="text"/> onkeypress="return streamPressed(event.keyCode);" id="appendedInputButton" type="text"/>
<button class="btn" type="button" onclick="return addFavourite();"> <button class="btn" type="button" onclick="return addFavourite();">
Save Save
</button> </button>
<br/> <br/>
</form> </form>
</div> </div>
<div class="ui-block-b" style="padding: 5px"> <div class="ui-block-b" style="padding: 5px">
<ul id="streamuristable" class="table"></ul> <ul id="streamuristable" class="table"></ul>
</div> </div>
</div>
</div> </div>
</div> </div>
<div data-role="footer" data-tap-toggle="false" data-position="fixed" id="normalFooter"> <div data-role="footer" data-tap-toggle="false" data-position="fixed" id="normalFooter">
<div class="footerControls"> <div class="footerControls">
<div id="songinfo" style="float: left"> <div id="songinfo" style="float: left">
<a href="#"><div><img id="infocover" src="images/default_cover.png"/></div></a> <a href="#"><div><img id="infocover" src="images/default_cover.png"/></div></a>
<div class="songinfo-text"> <div class="songinfo-text">
<div id="infoname"></div> <div id="infoname"></div>
<div id="infoartist"></div> <div id="infoartist"></div>
</div>
</div>
<div style="float: right;">
<a href="#" onclick="doPlay(); return false"><span id="btplay" title="Play"><i class="fa fa-play"></i></span></a>
</div> </div>
</div> </div>
<div style="float: right;">
<a href="#" onclick="doPlay(); return false"><span id="btplay" title="Play"><i class="fa fa-play"></i></span></a>
</div>
</div>
</div> </div>
<div data-role="footer" data-tap-toggle="false" data-position="fixed" id="nowPlayingFooter"> <div data-role="footer" data-tap-toggle="false" data-position="fixed" id="nowPlayingFooter">
<div class="footerControls" style="padding-left: 10px;"> <div class="footerControls" style="padding-left: 10px;">

16
mopidy_musicbox_webclient/static/js/library.js
View File

@ -27,7 +27,9 @@ function initSearch() {
delete customTracklists[URI_SCHEME+':artistresultscache']; delete customTracklists[URI_SCHEME+':artistresultscache'];
delete customTracklists[URI_SCHEME+':albumresultscache']; delete customTracklists[URI_SCHEME+':albumresultscache'];
delete customTracklists[URI_SCHEME+':trackresultscache']; delete customTracklists[URI_SCHEME+':trackresultscache'];
$("#searchresults").hide(); $("#searchartists").hide();
$("#searchalbums").hide();
$("#searchtracks").hide();
if (searchService != 'all') { if (searchService != 'all') {
mopidy.library.search({'query': {any:[value]}, 'uris': [searchService + ':']}).then(processSearchResults, console.error); mopidy.library.search({'query': {any:[value]}, 'uris': [searchService + ':']}).then(processSearchResults, console.error);
@ -108,7 +110,17 @@ function processSearchResults(resultArr) {
return false; return false;
} }
$("#searchresults").show(); if (results.artists.length > 0) {
$("#searchartists").show();
}
if (results.albums.length > 0) {
$("#searchalbums").show();
}
if (results.tracks.length > 0) {
$("#searchtracks").show();
}
// Returns a string where {x} in template is replaced by tokens[x]. // Returns a string where {x} in template is replaced by tokens[x].
function theme(template, tokens) { function theme(template, tokens) {

2
mopidy_musicbox_webclient/static/mb.manifest
View File

@ -1,6 +1,6 @@
CACHE MANIFEST CACHE MANIFEST
# 2016-01-31:v3 # 2016-02-4:v1
NETWORK: NETWORK:
* *