Epic :: Responsive Design

[w0rd-driven]

This is heavily geared towards desktop but I need to be mobile first. Apple Music on mobile is pretty slick too.

There's a Library page instead of a menu but it's fine to take Livebeats approach. I'd rather use that tbh, it's slightly better.

• Mobile sidebar header has too much top padding.
• Fix sidebar, see Mobile sidebar #7. The blanket w-1/3 is what's tripping this up I believe. It needs to be full width and 1/3 on desktop.
• Artist :: Show and Album :: Index are 2 columns with artwork, name, and year only. Non sidebar LiveView likely needs to be full on mobile and 2/3 on desktop or whatever ratio I settle on.
• Back button on sticky header with label.
• Opaque sticky header on Artist :: Index, Artist :: Show, Album :: Index, Album :: Show. Album show page has three dot menu and no sort. It also lists songs, which we don't do.
• Opaque sticky footer
• Verify page layouts between desktop and mobile. Album :: Show is off. Artist :: Index table from Phoenix sucks a huge dick or I just have the classes all wrong. It scrolls to the right when I don't want that. I should build unique components for that page.
• Find when you pull down on Artist :: Index, Artist :: Show, Albums :: Index
• Text transitions from page to sticky header when you scroll down (flick up). Show/Hide on view, scroll thresholds. Likely uses infinite scroll observer technique in the other direction. I'm sure this exists with a Google search.
• Sort on Artist :: Show, Albums :: Index, Notifications :: Index. Where does verify menu come in? Make the sidebar page aware? It already is. Sort by title, recently added (file modified date?) and entity name (artist, album) don't use a generic term like name even if that's the field in both.
• Scroll position remembered on back button.
• Dark/Light mode
• A-Z # scrolling control. No clue how this would work for infinite scroll tbh. I don't think it would.

I may never implement all of this but if I can get the header, footer, and text transitions to complete the header behavior then the rest could be left. There's a lot here. I need to focus on other ideas and get this to good enough(TM) and not perfect.

These tasks also need to be split into separate issues and attached to the public milestone.

[w0rd-driven]

I'm realizing there's a ton of overlap between how I just altered the component design and this definition and I'm getting analysis paralysis big time. What we have is largely the desktop version but there isn't a lot to be done for the mobile version to have the basic look and feel. This issue outlines a lot more than the bare minimum we want to cover.

I think this is all because I'm at a point where I don't know where to start or how to split things up. Wireframing would be nice if I could work out something in Figma real quick. Primarily it's about laying things out visually versus the text that may not be explaining it correctly.

The difference between mobile and desktop "shells" is desktop has a sidebar to the left taking up the full height with the content to the right and a sticky footer. Mobile takes the sidebar off as a sliding drawer with the same scrolling content area and a sticky footer. That sidebar layout does not require components or responsive changes so that likely makes sense first.