Scene ui improvements

[WithoutPants]

This is a collection of UI improvements for the scene list page. The improvements come from #220 and #108
Each improvement is done as a separate commit so that we can pick and choose which to include.

Scene card overlays

I lifted the code from @echo6ix 's fork and tidied it up. It removes the filesize, duration and resolution from below the thumbnail, and overlays the resolution and duration to the bottom right of the thumbnail. See below:

Handling portrait videos

I've been trying to get a consistent height shown for the scene videos when there is a mix of portrait and landscape videos. The CSS has proved a bit of a nightmare. Here is the result so far:

The intent is to line up the thumbnails so that the title appears in the same place vertically. This appears to be working correctly, though I notice a bit of a performance hit, so I'm going to need to revisit it. Note also that the presence of the details field moves the divider down.

Filter controls

I removed the text where possible. I'm not sold on how it looks - I think it needs further refinement.

The filter and sort buttons I think are improved. The view buttons are ok. The select all/none buttons I think don't really look that good. I'm wondering if there is a better way to present those buttons. I don't know why the tooltip is so damn large.

Scene performer thumbnails

Probably my favourite of the new things:

Fairly self explanatory.

Suggestions and feedback welcomed.

[WithoutPants]

Studio overlay

Added studio logo to the upper right corner of the scene card. The image is top-right aligned. The empty space in the right most thumbnail is due to empty space in the studio image.

[WithoutPants]

Fade out scene overlays on hover

I can't show a screenshot of this as I don't have the required tools, but hovering over the scene card should fade out the overlays, and fade back in nicely when moving off the scene card.

[Leopere]

This is exciting work!

[StashAppDev]

Nice! I Just checked out this branch. I see a couple issues.

The portrait display commit definitely needs work. The fixed height of 240px is problematic. The overlay shows up under the video rather than on top of it for a majority of my library.

I'm not sure why but it looks like the studio overlay isn't working either. The opacity is always 1%, basically invisible.

Scene wall is 100% broke Looks like this is pre-existing

(Sorry for no screenshots, I'll attach some later)

[WithoutPants]

Latest commit should fix the overlay positioning. I want to do some further work to try to align the position of the titles, as different video sizes make the titles in different vertical positions. I'm not able to reproduce the opacity issue so far.

[echo6ix]

@WithoutPants, this looks good. I'm looking forward to trying it in an alpha_dev version.

I hit a wall on my end with my "compact grid view" mode, which took the scene card improvements a step further and displayed the string Studio name (using .bp3-text-overflow-ellipsis) on the thumbnail where you have the studio image. I personally think it's just a cleaner look since a lot of the studio images are meh, if they exist at all.

Would you consider adding the above as a switch option in settings. Where the switch is located at Settings > Interface Config > Scene Cards > Display studio using logo {on/off toggle switch}

[StashAppDev]

Can we make this and line 71 an interface option?

[WithoutPants]

For line 71, I've added a zoom slider to adjust the sizes of the scene cards to one of four different sizes. These sizes can be overridden with the custom css if wanted.

For line 41, I think we should just make a reasonable default and allow it to be overridden with custom css.

[StashAppDev]

Here's a diff which fixes the studio opacity issue, removes what seems to be unnecessary CSS, and fixes an issue I'm seeing where the performer images aren't showing:

diff --git a/ui/v2/src/index.scss b/ui/v2/src/index.scss
index b1ece78..b23d153 100755
--- a/ui/v2/src/index.scss
+++ b/ui/v2/src/index.scss
@@ -199,7 +199,7 @@ video.preview.portrait {
   font-weight: 400;
   width: 40%;
   height: 20%;
-  opacity: 75%;
+  opacity: .75;
   z-index: 9;
 }
 
@@ -294,19 +294,15 @@ span.block {
 }
 
 .performer-tag-container {
-  max-width: 100%;
-  height: 100%;
-  display: inline-block;
-  text-align: center;
   margin: 5px;
 }
 
 .performer-tag.image {
-  max-height: 150px;
-  max-width: 100%;
-  background-size: cover !important;
-  background-position: center !important;
-  background-repeat: no-repeat !important;
+  height: 150px;
+  width: 100%;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
   margin: 0 auto;
 }

[StashAppDev]

Another issue. The button selection state is inverted. It looks like it's due to the minimal class.

[WithoutPants]

Thanks @StashAppDev . I've fixed the opacity and performer issues, and I've removed the minimal class from the view buttons. I've also fixed the overlay so that it shows the studio when the logo is hovered. I've also added a zoom slider to allow selecting the size of the scene cards.

Things left to do:

• add option to show studio by text. In future, we may want this to be a studio-specific option, but that will require a schema change.
• possibly condense view buttons further by changing to drop-down

[WithoutPants]

Updated filter bar:

Moved the select all/none buttons into a More button. Seemed a better fit in a separate more button, and I think it ends up looking cleaner.

I investigated changing the view buttons into a drop-down list, but the result doesn't save any space and adds an extra click to change views. The intent is a little more clear on the drop-down list, but I think ultimately having three buttons is better. Below is a comparison of the two options:

[WithoutPants]

Also added option to display studios as text instead of logos, per @echo6ix 's request. The result of setting this option is shown below. The text highlights blue on mouseover.

[WithoutPants]

For now I'm satisfied with these improvements, but I realise that UI design is highly opinionated. I hope I've addressed all of the concerns raised.

[bnkai]

I've tested a little all of the above and they seem ok now.I especially like the slider for the screenshot size and the performer thumbnails.
A little thing i noticed is the overlay on the portrait mode pics.