sudara / alonetone

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

Fix a few unrelated frontend issues #1065

Closed ofsound closed 3 years ago

ofsound commented 3 years ago

Fixes #1061

Clicking play on iPad reveals this anchor shape.

Screen Shot 2020-11-30 at 7 09 14 PM

On the branch, this section is rewritten so the anchor can be styled as a block, and inherit the shape of its contents:

Screen Shot 2020-11-30 at 7 11 04 PM

Fixes #1059

On iOS, maybe due to some specific font nuance, this caret was jumping down to the next line. I rewrote the double space before the caret more explicitly with   to fix it.

IMG_9358

Fixes #1058

This was brought up by childhoodsend, but also very noticeable using AT on portrait iPad, 768px wide, as well as an iPhone with a 320px wide view.

Screen Shot 2020-11-30 at 7 17 06 PM

The current solution on the branch was to add an alternate text for those 2 width ranges, Narrow 2 column view, and small mobile phone. But maybe there's a better fix?

Screen Shot 2020-11-30 at 7 22 30 PM

This brings up perhaps that the Percy mobile view should be smaller, as this text change made it through Percy?

Fixes #1053

This is illustrated in the Issues, with alter ego as the example. The branch code moves where that css margin style is, so a track view without comments doesn't collapse:

Screen Shot 2020-11-30 at 7 25 36 PM

The other change is to slightly update the Toggle drag sliders on Edit playlist, so they aren't transparent and very broken on dark theme. Also, the original design from Figma seemed to have been lost somewhere along the way, with an extra element. Some other UI elements, X and +I don't think have dark theme designs in Sigma, so right now, I kept the toggles universal, same for white and dark.

Current:

Screen Shot 2020-11-30 at 7 31 05 PM

Branch:

Screen Shot 2020-11-30 at 7 31 28 PM

Does anything special need to happen for deployment?

No.

"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

Thanks for the visual description of changes — quite useful!!