Skip to content
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

Improve report layout on mobile #472

Open
stitch opened this issue Sep 20, 2023 · 2 comments
Open

Improve report layout on mobile #472

stitch opened this issue Sep 20, 2023 · 2 comments
Labels
bug Something isn't working
Milestone

Comments

@stitch
Copy link
Collaborator

stitch commented Sep 20, 2023

The layout has some issues with different viewports. Some things don't resize properly or should have breaks set.

The graphs and and tables do not properly expand on mobile, which results ins a very cluttered view. This might be solved by adding a minimal height/width to these graphs.
IMG_3214

The sorting buttons cannot be clicked and the details buttons are moved to the top. The table should be a lot wider as most domains in this example have a scrollbar scrolling horizontally is also hard.
IMG_3215

Numbers in circle charts do not scale well. Also the charts are shown in different sizes when they don't fit the screen. Make sure to show them in the same size.
IMG_3209

The three feature panels should be on a new row each. The menu looks fine (as opposed to viewport simulation in the browser).
IMG_3206

@stitch stitch added the bug Something isn't working label Mar 11, 2024
@bwbroersma bwbroersma added this to the v5.0 milestone Apr 2, 2024
@stitch
Copy link
Collaborator Author

stitch commented Nov 13, 2024

Two lines of menus just for the language seems odd. So defaulting back to the bootstrap one line menu and adding language as a drop down. Removed all custom styling and it looks pretty solid on all resolutions now:

image

image

@stitch
Copy link
Collaborator Author

stitch commented Nov 13, 2024

Charts seem to be a relatively easy fix

image

Making the charts smaller makes them unreadable or 'off' so this is the best we can do for small screens for now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Development

No branches or pull requests

2 participants