Considerations for Resizable UI
Configuration of the Resizable UI
There are three optional settings that will be available to customize the way in which the resizing works:
Name | Type | Default Value |
AllowResize | boolean | false |
MinHeight | integer | 700 |
MinWidth | integer | 1080 |
Maybe MaxHeight and MaxWidth could be added
The values for MinHeight and MinWidth come from the Dummy. The Dummy requires at least a width of 1080. Otherwise, the content in initial screen moves in a weird way. The Dummy also requires at least a height of 700. Otherwise, the results screen can't display all information.
Breaking Changes
Configuration Files
The following configuration must be added to the configuration files:
Inner Content Height is set to 100%
Some pages may display a vertical scrollbar. In these pages, it is sufficient to remove the top margin (it can be replaced with top padding of the same size).
There is another case in which, if the app.component.html or the CSS for that file have been overwritten, then the space between the top of the page and the beginning of the content will dissappear. In this case, it is sufficient to center the content using flex nz-row, nz-col, nzType, nzJustify and nzAlign can help with this and are preferred over using flex directly).
Other breaking changes
Depending on the overwrites that have been performed on the product, some screens might look weird.
Changes required in our Products
Generic UI
In the Loading Page, everything should be perfectly centered.
This is issue is more evident with less width.
This could be achieved with Flex instead of position: absolute, top, left and translate.
An image of the issue:
In the Initial Page, everything should be perfectly centered and the text should be responsive.
This might be a non-issue (we must check with UX/UI).
It is an issue.
The text should be responsive.
Maybe it could change automatically.
Maybe it could be defined depending on ranges.
This could be achieved by using Flex.
An image of the issue:
In some pages, the content is not centered vertically (the content is close to the top and too far away from the content)
Consider that this might not be an issue, it should be reviewed with UX/UI
It was reviewed with UX/UI and this is OK
Pages that might present this issue
Analysis Cancelled
Begin Conversion
Initial Page
Conversion Progress
Conversion Error
Example of the issue:
In the Analysis Cancelled page, the two buttons should have the same space between them always.
Currently, this space changes depending on the width of the window.
This could be corrected by having a container for the two buttons with fixed space between.
An image of the issue is presented above.
The configuration should be taken from the config file (default values must be considered).
Modals look fine.
Everything should be reviewed with UX/UI.
Some things could be improved:
Initial Page has some dead CSS code
RapidScan
In the Begin Conversion page, the Begin button is not perfectly centered (this is because of the settings button that is not shown in RapidScan, but still occupies some space)
This is a problem for RapidScan but it should likely be solved in the Generic UI.
An image of the issue:
Min Width, Min Height should be checked (consider all three versions of the page with the Results).
The recommended minWidth is 1130. Otherwise, the initial screen may look weird.
The recommended minHeight is 630. Otherwise, the conversion completed screen may look weird.
Everything should be reviewed with UX/UI.
Dummy
No changes that are specific to the Dummy.
Everything should be reviewed with UX/UI.
Last updated
