sudara / alonetone

A free, open source, non-commercial home for musicians and their music
https://alonetone.com
MIT License
349 stars 89 forks source link

Add Stimulus controller to Playlist View to layout playlist credits and dynamically manage sidebar bottom right border radius #1086

Closed ofsound closed 3 years ago

ofsound commented 3 years ago

Fixes #704

We created a stimulus playlist_controller and hooked it into the playlists/show template.

Because of the nature of flexbox managing the layouts of the sidebar and cover view across different screen widths, some javascript was needed to fix the layout of optional credits that can float below those two. The credits were absolutely positioned so they could float below the cover, but this was problematic if they were long.

This script calculates the space needed to show those correctly and adds it via padding of the playlist_and_track_content div.

The reason the padding of the main element is needed in the calculations is because the credits div is still absolutely positioned, so it's floating free of the regular HTML flow and doesn't respect that padding above the footer.

The border-radius code detects if the sidebar column is taller than the cover view, and if so, it will dynamically add a rounded edge to it's bottom right corner.

"Ready For Review" checklist

These checklists are to help ensure the code review basics are covered. Consider removing to reduce noise.

Before code review and after additional commits during review.

sudara commented 3 years ago

I'm not sure why Percy is choking on javascript (or the hover) for that screenshot — I opened a support issue with them.

My vote is we slap a max width on there and then ship it.

I also added eslint in code climate and adjusted the js here to please it — this means that from now on it'll comment in pull requests on js "style" — It might be worth making sure vs code is setup to use eslint, you can do this by adding a string literal somewhere surrounded by double quotes, it should complain.