Merge pull request #182 from jcass77/fix/99_browse_track_artist

Refactor code for displaying track lists.
pimusicbox · Mar 16, 2016 · df0775e · df0775e
2 parents c15c3fe + 7710d23
commit df0775e
Show file tree

Hide file tree

Showing 9 changed files with 240 additions and 238 deletions.
diff --git a/README.rst b/README.rst
@@ -74,10 +74,12 @@ v2.3.0 (UNRELEASED)
 -------------------
 
 - Enhance build workflow to include style checks and syntax validation for HTML, CSS, and Javascript.
+- Now displays album and artist info when browsing tracks. (Addresses: `#99 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/99>`_).
 
 **Fixes**
 
 - Don't create Mopidy models manually. (Fixes: `#172 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/172>`_).
+- Context menu is now available for all tracks in browse pane. (Fixes: `#126 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/126>`_).
 
 v2.2.0 (2016-03-01)
 -------------------

diff --git a/mopidy_musicbox_webclient/static/css/webclient.css b/mopidy_musicbox_webclient/static/css/webclient.css
@@ -36,7 +36,7 @@
         margin-left: 10px;
     }
 
-    #playlisttracksback {
+    .backnav-optional {
         display: none;
     }
 
@@ -74,7 +74,7 @@
         width: 100%;
     }
 
-    #playlisttracksback {
+    .backnav-optional {
         display: block;
     }
 
@@ -293,13 +293,17 @@
     margin-left: 20px;
 }
 
-.song .moreBtn{
+.song .moreBtn {
     float: right;
     padding: 15px 18px 12px 22px;
     display: inline-block;
     line-height: 100%;
 }
 
+.backnav {
+    background-color: #ccc !important;
+}
+
 
 /**********************
  *  Now Playing area  *
@@ -369,12 +373,14 @@
 }
 
 #popupTracksLv li,
-#popupQueueLv li {
+#popupQueueLv li,
+#popupBrowseLv li {
     border-bottom: 1px solid #aaa;
 }
 
 #popupTracksLv,
-#popupQueueLv {
+#popupQueueLv,
+#popupBrowseLv li {
     border: 1px solid #aaa;
 }
 

diff --git a/mopidy_musicbox_webclient/static/index.html b/mopidy_musicbox_webclient/static/index.html
@@ -56,7 +56,6 @@
 <div data-role="page" id="page" class="ui-responsive-panel" data-theme="c">
 <div data-role="panel" id="panel" data-position="left" data-theme="a" data-display="reveal" data-position-fixed="true">
 
-
     <ul class="ui-listview mainNav" data-role="listview" data-theme="a">
         <li id="navhome" data-icon="false">
             <a href="#home" onclick="switchContent('home' ); return false;">
@@ -76,11 +75,11 @@
         </li>
         <li id="navbrowse" data-icon="false">
             <a href="#browse" onclick="switchContent('browse' ); return false;">
-                <span class="navtxt"> Browse </span><i class="fa  fa-folder"></i></a>
+                <span class="navtxt"> Browse </span><i class="fa fa-folder"></i></a>
         </li>
         <li id="navstream" data-icon="false">
             <a href="#stream" onclick="switchContent('stream' ); return false;">
-                <span class="navtxt">Streams </span><i class="fa  fa-rss"></i></a>
+                <span class="navtxt">Streams </span><i class="fa fa-rss"></i></a>
         </li>
         <li id="navsearch" data-icon="false">
             <a href="#search" onclick="switchContent('search' ); return false;">
@@ -164,8 +163,7 @@ <h4 id="artistpopupname">&nbsp;</h4>
                 <a href="#" onclick="return playTrack(ADD_THIS_BOTTOM);">Add Track to Bottom of Queue</a>
             </li>
             <li class="addqueue">
-                <a href="#" onclick="return playTrack(ADD_ALL_BOTTOM);" id="liaddtobottom">Add all to Bottom of
-                    Queue</a>
+                <a href="#" onclick="return playTrack(ADD_ALL_BOTTOM);" id="liaddtobottom">Add all to Bottom of Queue</a>
             </li>
             <li>
                 <a href="#" onclick="showAlbumPopup('#popupTracks')">Show Album <span class="popupAlbumName"></span></a>
@@ -206,7 +204,6 @@ <h2>Artists</h2>
     </div>
 </div>
 
-
 <div data-role="popup" data-theme="b" id="popupSave" class="popupDialog">
     <form>
         <p>Save current queue to a playlist.
@@ -224,7 +221,6 @@ <h2>Artists</h2>
 </div>
 <!--/save queue to playlist-->
 
-
 <div data-role="popup" data-theme="b" id="popupOverwrite" class="popupDialog">
     <form>
         <p>Overwrite existing playlist with same name?
@@ -307,12 +303,10 @@ <h4>System</h4>
 </div>
 <!--/homepane-->
 
-
 <div id="nowPlayingpane" data-role="content" class="pane">
 
     <img id="controlspopupimage" src="images/default_cover.png" alt="Album cover"/>
 
-
     <div class="nowPlaying-artistInfo">
     <h3 id="modalname"></h3>
         <p class="artistAlbumLine"><span id="modalartist"></span> - <span id="modalalbum"></span></p>
@@ -343,9 +337,6 @@ <h4>Playlists</h4>
             <ul id="playlistslist" class="table"></ul>
         </div>
         <div class="ui-block-b scroll" id="playlisttracksdiv">
-            <div id="playlisttracksback" style="height: 30px; margin: 2px; padding-top: 2px; background-color: #aaa;">
-                <a style="display:block; padding: 5px;" href="#" onclick="return togglePlaylists();"><i class="fa fa-arrow-circle-left"></i> Back</a>
-            </div>
             <div>
                 <ul class="table" id="playlisttracks"></ul>
             </div>
@@ -356,8 +347,9 @@ <h4>Playlists</h4>
 
 <div data-role="content" id="browsepane" class="pane">
     <h4>Browse</h4>
-    <h5 id="browsepath"></h5>
-        <ul id="browselist" class="table"></ul>
+    <div class="ui-grid">
+        <ul id="browsetable" class="table"></ul>
+    </div>
 </div>
 <!--/browsepane-->
 
@@ -385,7 +377,7 @@ <h4>Play Queue</h4>
 
     <h3 id="h_albumname"></h3>
     <h5 id="h_albumartist"></h5>
-    <div id="albumstable"></div>
+    <ul class="table" id="albumstable"></ul>
 
 </div>
 
@@ -477,7 +469,6 @@ <h4>Streams</h4>
     </div>
 </div>
 
-
 <div data-role="footer" data-tap-toggle="false" data-position="fixed" id="normalFooter">
     <div class="footerControls">
         <div class="songinfo" id="songinfo">
@@ -492,6 +483,7 @@ <h4>Streams</h4>
         </div>
     </div>
 </div>
+
 <div data-role="footer" data-tap-toggle="false" data-position="fixed" id="nowPlayingFooter">
         <div class="footerControls" style="padding-left: 10px;">
             <div style="float: left;">
@@ -507,11 +499,9 @@ <h4>Streams</h4>
                 <a href="#" onclick="doShuffle(); return false"><span id="shufflebt" title="Shuffle"><i class="fa fa-arrows-v"></i></span></a>
             </div>
         </div>
-
 </div>
 <!-- /footer -->
 
-
 </div>
 <!-- /page one -->
 <script type="text/javascript" src="vendors/mopidy/mopidy.min.js"></script>