Merge pull request #154 from jcass77/enhance/search_pane

Align layout and features of 'Search' pane

mopidy_musicbox_webclient/static/css/webclient.css

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

mopidy_musicbox_webclient/static/index.html

@@ -357,21 +357,24 @@
 </div>
 
 <div data-role="content" class="pane" id="searchpane">
-    <div class="">
+    <h4>Search</h4>
+
+    <div class="ui-grid pl-breakpoint">
+        <div class="ui-block">
             <form>
+                <p>Search for artists, albums, or specific tracks.
                 <select id="selectSearchService"> <!-- data-native-menu="false"> <!-- multiple="multiple" data-native-menu="false">
                     <option data-placeholder="true">Choose services</option> -->
                 </select>
-            <input id="searchinput" class="span2" data-clear-btn="true"
+                <input id="searchinput" placeholder="Search term" class="span2" data-clear-btn="true"
                        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 id="searchresults">
     <div class="ui-grid-a srch-breakpoint">
         <div class="ui-block-a" id="searchartists">
             <div data-role="listview" data-inset="true">
@@ -400,13 +403,11 @@
         <ul id="trackresulttable" class="table"></ul>
     </div>
 </div>
-</div>
 <!-- search div -->
 
 <div data-role="content" class="pane" id="streampane">
     <h4>Streams</h4>
 
-    <div>
     <div class="ui-grid-a pl-breakpoint">
         <div class="ui-block-a" style="padding: 5px">
             <form>
@@ -433,7 +434,6 @@
         </div>
     </div>
 </div>
-</div>
 
 
 <div data-role="footer" data-tap-toggle="false" data-position="fixed" id="normalFooter">

mopidy_musicbox_webclient/static/js/library.js

@@ -27,7 +27,9 @@ function initSearch() {
         delete customTracklists[URI_SCHEME+':artistresultscache'];
         delete customTracklists[URI_SCHEME+':albumresultscache'];
         delete customTracklists[URI_SCHEME+':trackresultscache'];
-        $("#searchresults").hide();
+        $("#searchartists").hide();
+        $("#searchalbums").hide();
+        $("#searchtracks").hide();
 
         if (searchService != 'all') {
             mopidy.library.search({'query': {any:[value]}, 'uris': [searchService + ':']}).then(processSearchResults, console.error);
@@ -108,7 +110,17 @@ function processSearchResults(resultArr) {
         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].
     function theme(template, tokens) {

mopidy_musicbox_webclient/static/mb.manifest

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