Scaling showcase banner images

[gmarnin]

This PR makes changes to the base.css which allows the banner image container to scale the image based on the size of the MSC.app window. I used the default Munki banners without changing their size for testing. The changes have been tested on 5.2.0.4237 running 10.14.4, 10.15.7 and 11.0.1

Current Behavior:

New Behavior:

[gregneagle]

Thanks, @gmarnin for this.
I'm not yet convinced that scaling is the right thing to do here.

If you resize the App Store app window (both current version and 10.10-era version), the big banner images at the top of the window do not change vertical size. This makes the window (to me at least) seem more like a native app and less like a web page.

I think what I'd want (but haven't figured out how to achieve) is the current behavior (where the image is pinned on the left and possibly cropped on the right. As the window grows horizontally, more of the right side of the image is displayed until the entire image is visible. If the window continues to grow horizontally, the image is centered in the window.

Of course if you prefer your behavior that could be in custom CSS/custom HTML files you include with your customization.

[gmarnin]

I haven’t been able to figure out the code to replicate the MAS banner behavior. I agree my PR isn’t perfect but I think it’s better than the current behavior. Cutting off the banner is less than ideal.

[securitygeneration]

I agree with @gmarnin. The cutting of the banner looks very odd. I just tried it, and the images in MAS do seem to get scaled.

[gregneagle]

Since I customize the banner images and therefore can make sure they look good with the current behavior, I had not noticed the less-than-great visual cutoffs with the default/stock images and the new MSC look.
Previously, the banner image used nearly the entire window width, so its minimum width was wider than it is currently. With the old appearance, it was not possible to resize the window so the image text got cut off. With the new appearance, the area the image is allowed to use is 220px narrower than with the previous appearance (since the new left-side sidebar takes up 220px of the minimum 1000px width).

So I've re-done the default/stock banner images to not cut off the text when the window is resized to the minimum.

If you are creating your own images, you'll probably want your text and other important stuff in the left-most 700 pixels, leaving the rest of the image containing less-important visual content.

[gregneagle]

[nixtar]

Just throwing 2 cents on this discussion.

I personally prefer the banner images to scale so I updated my customisation html with some custom styling to achieve this.
This solution works for us but may be a bit unambiguous for the average sysadmin who may just assume that "it is what is it is" without anything mentioned in the doco.

Perhaps as a compromise instead of changing the client to be one or the other, an alternate "showcase_scale" class in the default CSS is investigated and noted in the Client Customization doco?

[clreinki]

Adding my two cents as well

I also really prefer the banner images to scale, at least as a configurable option.

[gmarnin]

Just throwing 2 cents on this discussion.

I personally prefer the banner images to scale so I updated my customisation html with some custom styling to achieve this.

@nixtar Can you please post the code you used to accomplish this?

[clreinki]

@gmarnin wrong person - you quoted @nixtar but tagged me. I like the pull request you uploaded.

[nixtar]

Just throwing 2 cents on this discussion.
I personally prefer the banner images to scale so I updated my customisation html with some custom styling to achieve this.

@nixtar Can you please post the code you used to accomplish this?

Using your changes as an example I put this in our showcase_template.html:

<style>
div.showcase {
    height: 0  !important;
    width: 100%  !important;
    padding-top: 17.42%  !important;
}

div.stage>img {
    height: 100%  !important;
    top: 0  !important;
}
</style>

I'm a bit of a CSS noob so I don't know if the important tags are needed, but it works so I left them there.

[erikng]

I was told about the PR. I do like the scaling, however I wouldn't want that on all banners.

What happens on ultra wide monitors? Will it infinitely scale and then appear pixelated?

https://gist.github.com/erikng/043ff9a29db999f2bfa7b7eb3f1e3424

What I opted to do here was take the "banner" completely out of the equation. Instead, I use a two transparent images within a div (one for dark mode and one for light mode) and use a responsive center, then have another div behind it that infinitely expands the width.

This method allows infinite width scaling though it too has a cost that it would likely only work with simple banners and not more complex items.

[rickheil]

In case anyone else is using Erik's gist above (which works great, thank you!) and wants the banner to rotate - update line 5 to:

return document.querySelectorAll('div.stage .banner-img-centered')

[gregneagle]

It's clear that no one behavior here will make everyone happy. The only changes I'd consider at this point are changes that make the CSS easier to customize (if that would even help) so people can implement whatever behavior they desire.