search

wevisdemo / parliament-watch

Citizens are watching 👀
https://parliamentwatch.wevis.info
47 stars 26 forks source link

Legislative process content 6/9: Bill process 3 #45

Closed Th1nkK1D closed 10 months ago

Th1nkK1D commented 11 months ago

Scope

Only what is included in the screenshot

Screenshot_20231021-095128.png

View Figma

Starting point

  1. The page is available at /legislative-process (source: srv/routes/legislative-process)
  2. Put the content under the right heading.
  3. If there are images, export from Figma, optimize images with squoosh.app or ImageOptim, put it in /static/images/legislative-process with a meaning full name.
  4. If there is a duplicate UI, create a new component and put it in src/components/legislative-process
loukhin commented 10 months ago

I'm ready for another one, can I take this?

loukhin commented 10 months ago

While working on this, I noticed that using <b>...</b> for bold text no longer work. Knowing that we just done something with style ordering, I try reordering it back and that seem to fix it.

I think both Tailwind and Carbon have their own base/reset style and it conflict with each other.

Edit: After some digging, I noticed that disable Carbon's css reset in index.scss seem to also make <b>...</b> work, but I'm not sure if anything else break.

Th1nkK1D commented 10 months ago

While working on this, I noticed that using <b>...</b> for bold text no longer work. Knowing that we just done something with style ordering, I try reordering it back and that seem to fix it.

I admit that it is very confusing to set up both Carbon and Tailwind together. We found several issues with CSS import ordering that overwrites each other in an unexpected way. So I made this commit a few days ago 3fa2818a8efa08055740854f01d834e5eade9c79 to import CSS in the order of

Tailwind's reset < Carbon < Tailwind's component and utility.

This idea should be correct.

I think both Tailwind and Carbon have their own base/reset style and it conflict with each other.

Edit: After some digging, I noticed that disable Carbon's css reset in index.scss seem to also make <b>...</b> work, but I'm not sure if anything else break.

And you're right. I think I already disabled Carbon's reset by commenting on the import statement for the reset file below, but I didn't notice that the flag at the top is still enabled.

From what I tested so far, nothing is broken. So I disabled it, precompiled the new CSS, and pushed it to the main branch c572545cbeb7c13fbd836130ca871a4453d47f85 so you and other people who found the same problem could pull it to their branch.