Contextual help for data tables
mirekdlugosz opened this issue · comments
Our tables should be understandable by seasoned Pokémon players, but might be a bit cryptic for beginners, especially as we use different abbreviations to save space. We do have help page that hopefully does a good job at explaining them, and we do expose help in visible space, but let's face it - nobody reads help pages. There should be some way of learning meaning of different metrics right on the main page.
This contextual help should stay out of the way of people who are already familiar with the site.
One way might be popovers displayed on hover. Bootstrap uses Popper.js. Popovers should be visible on mobile devices as well.
Have you considered using a UI framework like Angular Material or Angular Bootstap. They provide frequently used components.
Angular Bootstrap has a Popover component and Angular Material uses their Menu component for popovers. I also noticed you have your own components built in the project, such as the foldable card. Angular Material has an Expansion Panel and Angular Bootstrap has an Accordian we could use for that functionality, so we may be able to find more use cases that could be replaced with a UI Framework Component.
I'm far more familiar with Angular Material since it's what I use for work, but I'm not opposed to Angular Bootstrap or something else entirely.
I think I did experiment briefly with one of framework early during development of this project. If I recall correctly, back then I didn't like how much it added to size of compiled thing, as compared to writing my own components. My use-cases are very simple, so I didn't see many benefits of using framework. Impact on size could have been caused by ng pulling in entire thing instead of just the component I wanted, but maybe I'm just confused now.
If you want to try adding something using existing frameworks, by all means go ahead. Please keep in mind that compiled javascript is a constraint here - main.js is 530 kB now, which is just 125 kB gzipped. I wouldn't like it to suddenly become 2 MB or something. I don't have hard requirement here, but I do try to be conscious of people on slow mobile networks and with restrictive data plans.
Also, if you decide to include framework and it will work out, then definitely there is an opportunity to drop some of my components in favor of framework-provided ones. But I understand if you don't want to rewrite big chunk of UI.