Details page redesign

[cj12312021]

Addresses the UI side of #3703

A video walkthrough of this change can be seen here:
https://discordapp.com/channels/559159668438728723/644934273459290145/1133237833839153153

[cj12312021]

My latest push includes the implementation of the show/hide more button. View the video below for a demonstration.
https://github.com/stashapp/stash/assets/72030708/2ccbcd07-d525-48f0-a818-98409e2c69a9

[DogmaDragon]

Is the show/hide action persistent? It would be a huge inconvenience for me if I had to to click the button every time just to see full performer details when it's already the primary reason for me opening that page.

[cj12312021]

By default, everything but tattoos, piercings, details, tags, and StashIDs are shown until the button is hit. The main reason for the decision is to keep the clutter down, especially on smaller screens such as mobile devices. I can update the code so the state persists.

[DingDongSoLong4]

I don't know if persisting the state would be a good idea - if you only want to see the extra data sometimes then having everything displayed at first open because the panel was expanded last time might be annoying. I think a simple option for whether the extra details are shown by default or not would be the most useful.

[cj12312021]

That option crossed my mind as well. I can go that route instead.

[DogmaDragon]

Option to change default behaviour would be sufficient for me.

[cj12312021]

The UI config option has been added.

[cj12312021]

Thanks for the reply. I totally missed that conversation regarding the css. This will however waste much space next to the image as it is just empty. I will definitely use it regardless.

No worries. This is precisely the trade-off and the argument for compact images. As @DingDongSoLong4 mentioned, the previous implementation took up a lot of space and provided no easy compact solution. This implementation provides a more flexible solution for both types of users. Pursuing larger images inherently means trading space efficiency. You see this trade-off being made on site who use larger images:

By the way when I scroll down my performer list and click on one of them, the performer page doesn't scroll up to the top. I don't think this is intended, is it?

Can you provide a video of what you are seeing? I'm not able to reproduce the issue based on your description.

[AdultSun]

I agree with @HereIam80 about missing the full-size portrait on the performer page, actually. It's also more difficult to parse the performer's details at a glance when they're compressed horizontally instead of stacked into a single-column list like the current layout. I'm sure we'll all get used to finding everything after using it for awhile, but I expect I'm not the only one who finds it easier to skim through something in only one direction (top to bottom) instead of two directions (adding left to right).

To be clear, I also really like the changes and styling implemented here so I'm not asking to scrap all of that in favor of the status quo or anything. And from what I've seen of the reaction on Discord, it seems to me the majority of users prefer this approach. So consider this a pitch for the next evolution of the performer page's design in the next PR rather than a request to change it even further within this PR.

I think what's bothering me about this design is that we have a view that focuses on the performer's content but not the performer themselves anymore. What really illustrates that fact — and I think also presents a solution — is that the "expand for more details" is barely different from the compressed summary view. It adds a few extra fields, widening the overall view just a little, but that's really it. It feels like a wasted opportunity to me. My preference would be for the "see more" button to transition into a much wider, full-screen display. I have no clue what the technical constraints would be for something like this or how the transition would work, but I'm imagining the performer's image expanding to it's previous size and the detail fields expanding into a less cramped single-column view similar to the old format.

The above approach would give us:

1. The hybrid view as the default, with a quick summary of the most important details at the top and content below
2. The content view after scrolling down, with the details compressing even further into the narrow header at the top
3. A new detailed view after clicking the chevron, expanding to reveal all of the detail fields with a layout and spacing to more easily parse everything at a glance

Personally, I think that approach would give us all of the improvements of this PR without sacrificing anything for users like myself and Herelam80 who will miss the old layout. The new default view you've built here does feel like the closest to "the best of both worlds" possible, plus it already has a built-in view for (nearly) content only. I'm just hoping there will be a way to have a "performer-only" view alongside the other two moving forward. If nothing like that makes it into this PR (and I expect it won't since you've put so much work into it already and I suspect I'm asking for a lot here), I'd be willing to write this up again into a new feature request.

[cj12312021]

@AdultSun could you provide a mock up of what you had in mind for me to take a look at in the morning?

[AdultSun]

Uh, not really? Sorry, I'm not good enough with image editors or any of the other UI concept design programs I've seen others use around here to make anything very helpful. I could give it a try if someone could point me in the right direction.

Basically I was just hoping the chevron button would resolve to a view similar to the current details/edit screen: Full-length image on the left, single-column of details on the right with more padding in-between each field to separate them. Use the entire space to let everything breathe for greater readability instead of trying to eliminate as much empty space as possible.

The exact details in the styling aren't important to me but I imagine you'd want it similar to what this PR establishes (meaning fonts, labels, etc.). But the order should be the same as the order of the edit page. I spend so much time on the edit page that it's always bothered me that the current details view in Stash (the old one not this PR) is in a different order than the edit page. It always mixes me up and makes it harder to find things on the details tab.

I also expect that having a view dedicated to extra space for the details would help with future-proofing. We wouldn't have to add new fields/features to the compact summary of this PR if it makes more sense to use it only in an expanded "details" view instead where there's more room.

[cj12312021]

I think I have the visual in my head, but I'm struggling to differentiate between what you're describing and the edit page. It sounds like the edit page already serves this purpose. Most of this is likely already achievable with CSS using this layout. I'll mock something up and post it in Discord.

The concept can likely be flushed out more after this pr once more people have gotten their hands on this and have spent more time with the change.

Edit:
Here is the link to the CSS alternative I mentioned I would post on discord: https://discordapp.com/channels/559159668438728723/644934273459290145/1135194637510922240

[cj12312021]

As discussed on Discord, I've pushed to enable the more table-like view when showAllDetails is enabled. Images will no longer center in the expanded view, and the detail titles will end with a colon. See my Discord post for the video https://discordapp.com/channels/559159668438728723/644934273459290145/1135278697906176110.