-
Notifications
You must be signed in to change notification settings - Fork 339
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Scaling showcase banner images #1058
base: main
Are you sure you want to change the base?
Conversation
Thanks, @gmarnin for this. 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. |
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. |
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. |
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. 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. |
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. 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? |
Adding my two cents as well I also really prefer the banner images to scale, at least as a configurable option. |
@nixtar Can you please post the code you used to accomplish this? |
Using your changes as an example I put this in our <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. |
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. |
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:
|
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. |
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: