foundryvtt / black-flag

The official repository for Kobold Press's "Black Flag" game system implementation in Foundry Virtual Tabletop.
MIT License
10 stars 5 forks source link

Character Builder Support for Smaller Resultions #7

Closed EndlesNights closed 1 year ago

EndlesNights commented 1 year ago

As briefly discussed on Discord, the Character Builder app was built with an expected viewport height of at least 1000px. Which can lead to a number of the "Choose" and "Done" buttons and information with the div.info being cut off if viewed in lower resolutions.

Even in a browser at a height of 1080p while not at full screen, in-between the Windows Task Bar, and the browsers search/tabs bar, the view port becomes only 969px tall, which leads to the "Choose" button being partial occluded as seen in the image below. At any lower resolution, the both the "Choose" and "Done" buttons become completely enveloped, and the builder unfunctional.

Before Character Building within Browser at 1920x1080 ![image](https://user-images.githubusercontent.com/58280840/224572831-4dc26c96-dba4-4e88-821e-a6636cf33593.png)

As Foundry VTT's minimum resolution is suppose to be 1024px by 700px. And a fair number of computer users are on still on resolutions smaller than 1080p. Just to give you an idea, within the last Steam Hardware Survey, roughly 5.4% of users are using a primary display of 1366 x 786 or smaller.

Source: https://store.steampowered.com/hwsurvey/Steam-Hardware-Software-Survey-Welcome-to-Steam

The changes themselves are quite simple, include removing a number of magic numbers from the CSS to allow the form and sections height to scale to the availed viewport space. Additionally a change was made to the option image, to impose a height limit to the images as they dominated their induvial sections vertical space at their native resolution. They will now be limited to only using 50% of the total sections height, and will scale down accordingly.

None of these changes should have any visual changes to anyone who could view the Character Builder at its intended resolution height of 1000px

1366x768 Before ![image](https://user-images.githubusercontent.com/58280840/224572327-011c42cd-8e22-4059-a90d-f9eb7acd8d89.png)
1366x768 After ![image](https://user-images.githubusercontent.com/58280840/224572759-8f45f639-510b-4189-b30e-71f03da722a0.png)
cswendrowski commented 1 year ago

Excellent work, thanks