Fix wrong body css while toggling visibility

closes #648 (closed)

"display: initial" caused the issue. we can avoid this using css class.

changed the description

MR is very messy, not clear what's wrong with current implementation, a lot of seemingly unrelated changes.

added 1 commit

• 218146b9 - Revert "remove dead code"

Compare with previous version

why

just less ambiguous naming I guess

well as far as I understand the reason is that global .hidden rule was added, which is IMO bad.

alternatives are BEM-style _hidden_yes (or _hidden) modifier, i.e. .new-status-button_hidden, which is sorta done here and lastly there's .new-status-button.hidden which i would prefer.

overall our CSS needs to be groomed, we just need to agree on style.

changed this line in version 3 of the diff

renamed using BEM

that's... not entirely bem, at least not canonical way

huh? I used BEM for years. block__element--modifier is the main rule. plz, correct me if wrong.

block__element
block_modifier_modifier-value
block__element_element-modifier_element-modifier-value

so in short, __ two underscores for elements, _ one underscore for modifier and modifier value (if given)

at least that's how it was in a certain company related to BEM creation back in 2015, maybe they changed it, which seems to be the case on (new) official site.

again as I mentioned in other place, changing that place will remove necessity for this change altogether

rewritten using the classic scheme

added 1 commit

• 94bee11b - apply bem

Compare with previous version

if you replace this with body.hidden pretty much all other changes (except for setting the class) will be unnecessary

that also works

but I'd like to keep it as a global rule since it is very useful to remove duplicated css rules.

it's more harmful than useful since you might need other ways of hiding things and you'll have to undo the display: none somehow in that way

if I need other ways of hiding things instead of display: none (which is very common), I'd rather define another modifier for the specific element.

yeah but it breeds inconsistency and CSS cruft. You have .hidden and you have .some-component_hidden , let's say you want to make a component but the context requires you to use transform: translate(-99999px) instead of display: none but you write rule like .some-other-component.hidden and wonder why it doesn't work properly and have to figure out that you have .hidden rule defined globally and have to do either .tucked-away global rule which does the translate(-9999px) or .some-other-component_hidden and both are kinda screwy.

It's been time-tested that overly-generic global css rules like .hidden .float and others do not do much good and do more harm than intended.

I'm gonna make an issue about grooming our CSS...

are you fine with the current changes using BEM for now or asking me to revert?

either way is fine. It's not that big of a deal, but global .hidden isn't good that's for sure.

added 1 commit

• 1840cdcf - use the classic naming scheme

Compare with previous version

added 10 commits

• 1840cdcf...8c465719 - 5 commits from branch pleroma:develop
• 57d43d09 - add hidden global css class
• 592cb2e3 - toggle visibility of body using class
• 2eb4df16 - Revert "remove dead code"
• fa6d828e - apply bem
• 89e7e1f3 - use the classic naming scheme

Compare with previous version

moved to !930 (merged)

closed