search

Rello / audioplayer

Audio Player for Nextcloud and ownCloud
https://rello.github.io/audioplayer
GNU Affero General Public License v3.0
223 stars 54 forks source link

[BUG] Selecting track list obscures albums below it #592

Open Slackadays opened 11 months ago

Slackadays commented 11 months ago

Describe the bug When I click an album to show the track list, it obscures the albums below it, preventing me from seeing or selecting them.

To Reproduce Steps to reproduce the behavior:

  1. Have an album list with at least two rows
  2. Select any row above the bottom one
  3. See the track list obscure the bottom ones

Expected behavior The below albums shift beneath the track list so that I can leave the track list open and select them.

Screenshots Before: Screenshot from 2023-12-09 23-44-15 After: Screenshot from 2023-12-09 23-44-21 I can't see the "Sabor Latino" album below the track list.

Versions:

Rello commented 11 months ago

Hello, yes, the file list will overlay the albums below. Unfortunately my css knowledge is limited in this area. If someone can support here - happy to take suggestions

Slackadays commented 11 months ago

Looks like you might not need any fancy CSS trickery, just a couple simple CSS and programmatic changes:

  1. Change the position of .songcontainer from absolute to static
  2. Add a margin-bottom of 10px to .songcontainer
  3. Remove the padding-bottom from .coverrow
  4. Inject the div.songcontainer element right after the rightmost album in the row with the selected album.
  5. Set the absolute position of the .open-arrow to be on the top of the new .songcontainer block

1-3 are pure CSS changes, while 4 and 5 would require a code change to compute the rightmost album, put the song container element after that album, and compute the position that the open arrow should have.

Here's an example of what these changes would look like: Screenshot from 2023-12-11 17-57-36 Screenshot from 2023-12-11 18-07-55

I did some research to see if this might be possible to do in pure CSS. Unfortunately, although we might be able to place the albums below the song container element, we can't know if we should do so or not because CSS lacks a way to check if they are covered using selectors alone, or if their position is below that of the song container. Check this out for a potential way to do this check in JS: https://stackoverflow.com/questions/49751396/determine-if-element-is-behind-another