Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Slackadays opened this issue Dec 10, 2023 · 2 comments
Open

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

Slackadays opened this issue Dec 10, 2023 · 2 comments
Assignees
Labels
needs info feedback from requester required

Comments

@Slackadays
Copy link

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:

  • Nextcloud: 24.0.12
  • Audioplayer: 3.4.0
@Rello
Copy link
Owner

Rello commented Dec 11, 2023

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

@Rello Rello self-assigned this Dec 11, 2023
@Rello Rello added the needs info feedback from requester required label Dec 11, 2023
@Slackadays
Copy link
Author

Slackadays commented Dec 11, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs info feedback from requester required
Projects
None yet
Development

No branches or pull requests

2 participants