search

VEuPathDB / web-monorepo

A monorepo that contains all frontend code for VEuPathDB websites
Apache License 2.0
2 stars 0 forks source link

SOPs for styling: Improve and/or apply consistent styling in dev environments #41

Open jernestmyers opened 1 year ago

jernestmyers commented 1 year ago

In responding to this issue re: filter chip placements, my first PR failed QA. The issue was that I was only developing and testing in a web-eda server (ie, yarn nx start @veupathdb/eda from root or yarn start from the packages/libs/eda directory), which does not include the position: sticky site headers and thus I didn't account for their vertical space.

We've had recent discussions about how the differences between our dev environments can show "false" problems, like the styling of the Featured variables in the viz var selections and the download modal's table headers that take 100% of the vertical height. I call these "false" problems because they only exist in the web-eda dev server, but not in the sites dev environments (ie, yarn nx start @veupathdb/clinepi-site).

My QA failure is due to the opposite problem: a "false" positive, if you will. Working in web-eda gave me the false impression that my work was working as expected.

Some (quick, non-exhaustive) ideas that come to mind that may help us get to a better state:

  1. update SOP: if we are developing in the web-eda server, then we must also "test" our changes in the affected sites server as well (most likely both mbio-site and clinepi-site)
  2. enforce the same CSS in web-eda as is enforced in mbio-site and clinepi-site (see comment below)
  3. add "placeholder" items in web-eda as necessary to better emulate our sites
jernestmyers commented 1 year ago

We've had recent discussions about how the differences between our dev environments can show "false" problems, like the styling of the Featured variables in the viz var selections and the download modal's table headers that take 100% of the vertical height. I call these "false" problems because they only exist in the web-eda dev server, but not in the sites dev environments (ie, yarn nx start @veupathdb/clinepi-site).

These particular examples turned out to be due to the use of emotion's css prop in eda without the proper babel config to interpret these styles. This PR adds the necessary babel config to handle the css prop.

This means the remaining issue boils down to the layout differences between eda site servers vs eda local server, which could be resolved by option 3, described above.

dmfalke commented 1 year ago

I think we should make sure we are using the same basic layout structure for all websites (i.e., libs and sites local dev sites). I think this is basically what you are saying. We might even want to make a new package called something like app-shell, which includes the sticky header/footer behavior, etc; and it used by all websites.