chme / forked-daapd-web

Web interface for forked-daapd
GNU General Public License v2.0
2 stars 0 forks source link

[feature request] index navigation on returned albums / artists #7

Closed whatdoineed2do closed 5 years ago

whatdoineed2do commented 6 years ago

When using #/music/artists or #/music/albums are large list can be returned from the server in alphabetical order.

When using the web ui from a smart phone / tablet, that does not have a "cntl-f" functionality to search for text, it is very tedious to scroll all the way to the bottom to look for an artist.

Request to have an 'index' navigation bar when looking at artists or albums; the client/web ui should take artist/album data from server and create a number of anchors that would logically separate blocks of content; ie one content block would be representing all albums/artists starting with 'A', another content block for things starting 'B' etc.

The index navigation bar (mocked up below with blue text) would allow a user to click the individual letters (say, letter 'W') and the page will scroll to the anchor on the page.

Ideally the index bar would be visible (like the nav bar) when the page is scrolled

image

chme commented 6 years ago

I agree, the artists and albums lists are in need of some usability improvements. The index is a good idea.

whatdoineed2do commented 6 years ago

Great, thanks.

I'm not a javascript/frontend dev (only experience with vuejs is in this project/PRs) so am having hard time putting a branch together - I see there exiists dynamic filter (https://vuejs.org/v2/guide/list.html#Displaying-Filtered-Sorted-Results) that doesn't touch the original data.

This might be easier than to generate the divs/anchors on data load

whatdoineed2do commented 6 years ago

https://github.com/whatdoineed2do/forked-daapd-web/tree/idx-nav

I've made some progress in generating a tab that has references to the anchors on the page (as based on the album names returned from server) but am having awful time trying to figure out how to navigate to the anchor points on the page.

Any pointers welcome

whatdoineed2do commented 6 years ago

branch: https://github.com/whatdoineed2do/forked-daapd-web/tree/idx-nav

Got the problematic scrolling working with Vue-scroll. @chme can you let me know if this fits into current structure?

screen grab: idxnav

The important things are that there are no changes to backend and the "index nav" elements are generated on the fly based on the returned album data. I need to see how this works with non-latin album names but its functional.

Should Also implement this for 'artists' page too

whatdoineed2do commented 6 years ago

https://github.com/whatdoineed2do/forked-daapd-web/tree/idx-nav-inf-ldng

I created this separate branch - the only difference is that it uses vue-infinity-loading to render the returned data set from the server; this lets the page render partitially and then the infinity loading loads the entire dataset. On this netbook, it stops the page looking like it has hung whilst it renders.

Whilst the slots are rendeed a spinner is shown even though the index nav and rest of the page is there. the user can click on the indx nav but it wont navigate since the slots are not there .. but its ok as the spinner is shown indicating things are not 100% ready.

Is this something you are interested in merging? again, no changes to the backend

chme commented 5 years ago

Closing in favor of https://github.com/ejurgensen/forked-daapd/pull/598