alan-mj-lin / Sporeas

TJC projection webapp for service use.
1 stars 0 forks source link

index.html "invertable" class makes modal overlay text black #76

Closed alan-mj-lin closed 4 years ago

alan-mj-lin commented 4 years ago

@hchiam I noticed for the dark mode changes, you changed the overlay classes from "inverted" to "invertable". This makes the overlay text black, so when you try to show the passages, you can see anything because its black. I've recently just changed it back to "inverted" but I'm just wondering what was the reason for this?

hchiam commented 4 years ago

TL;DR: Copy-paste error. 😅 I forgot to test the overlay text. You fixed it already. We can close this issue.

Reason for the invertable class:

Ironically, I specified which elements are invertable so we can toggle only what we want, and NOT toggle the projection/overlay text. When toggling, the code adds/removes the inverted class. But doing this naively would affect the elements with inverted in the projection/overlay too. Besides, after you remove the inverted class, if you want to toggle back, you need a way to know which elements to add the inverted class back to. Using invertable as a "hook" is a more flexible way to keep track of what to (un)invert.

Options going forward:

1) Do nothing. Close this issue. The overlay should be permanently inverted, so you fixed it. If we add new elements, we can give them the invertable class. Pro: more flexible, especially if you're editing the html locally. Con: you have to remember the difference between inverted and invertable, and remember to add that to new elements. 2) Figure out a smarter way to toggle Semantic UI's inverted class without adding another concept to remember.

alan-mj-lin commented 4 years ago

ok cool good summary. I'll go ahead and close this then, assuming there are no issues with using "inverted" in index.html