pleroma/pleroma-fe
Watch
2
2
Fork
You've already forked pleroma-fe
 10
Code Issues 351 Pull requests 26 Projects Releases 5 Packages 1 Wiki Activity

Fix wrong body css while toggling visibility #2191

Closed
tae wants to merge 5 commits from gitlab-mr-iid-924 into develop
pull from: gitlab-mr-iid-924
merge into: pleroma:develop
Conversation 17 Commits 5 Files changed 5 +27 -15
tae commented 2019-08-25 20:40:55 +00:00
Member
Copy link

closes #648

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

closes #648 "display: initial" caused the issue. we can avoid this using css class.
hj commented 2019-08-25 20:50:49 +00:00
Member
Copy link

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

MR is very messy, not clear what's wrong with current implementation, a lot of seemingly unrelated changes.
hj commented 2019-08-25 21:12:20 +00:00
Member
Copy link

why

why
shpuld commented 2019-08-26 12:28:29 +00:00
Member
Copy link

just less ambiguous naming I guess

just less ambiguous naming I guess
hj commented 2019-08-26 13:10:57 +00:00
Member
Copy link

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.

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.
tae commented 2019-08-26 18:28:36 +00:00
Author
Member
Copy link

renamed using BEM

renamed using BEM
hj commented 2019-08-26 18:30:33 +00:00
Member
Copy link

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

if you replace this with `body.hidden` pretty much all other changes (except for setting the class) will be unnecessary
tae commented 2019-08-26 18:50:15 +00:00
Author
Member
Copy link

that also works 👍

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

that also works :thumbsup: but I'd like to keep it as a global rule since it is very useful to remove duplicated css rules.
hj commented 2019-08-26 18:54:59 +00:00
Member
Copy link

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

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
tae commented 2019-08-26 18:59:59 +00:00
Author
Member
Copy link

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.

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.
hj commented 2019-08-26 19:34:49 +00:00
Member
Copy link

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

that's... not entirely bem, at least not canonical way
tae commented 2019-08-26 19:41:34 +00:00
Author
Member
Copy link

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

huh? I used BEM for years. `block__element--modifier` is the main rule. plz, correct me if wrong.
hj commented 2019-08-26 20:34:24 +00:00
Member
Copy link
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

``` 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
hj commented 2019-08-26 20:42:43 +00:00
Member
Copy link

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...

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...
tae commented 2019-08-26 20:44:42 +00:00
Author
Member
Copy link

rewritten using the classic scheme

rewritten using the classic scheme
tae commented 2019-08-26 20:57:08 +00:00
Author
Member
Copy link

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

are you fine with the current changes using BEM for now or asking me to revert?
hj commented 2019-08-26 21:00:36 +00:00
Member
Copy link

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

either way is fine. It's not that big of a deal, but global `.hidden` isn't good that's for sure.
tae commented 2019-08-27 16:18:17 +00:00
Author
Member
Copy link

moved to #2197

moved to https://git.pleroma.social/pleroma/pleroma-fe/pulls/2197

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
BE Request

   
Backlog

   
Better behavior

   
Blocked by deps

   
Bug

   
Code Review

   
Discussion

   
Doing

   
Feature Request / Enhancement

   
In the shining bright future maybe

   
It's complicated

   
MS Edge

   
Mememoon (or other niche browsers)

   
Missing API

   
Missing feature

   
Missing l10n/i18n

   
NL1
Instance Admin Dashboard

  
NL2
Improved Mobile Experience

  
NL4
Improved instance customization and QoL options

  
Need to verify on develop

   
RELEASE BLOCKER

   
Reassign or Close

   
Refactor

   
Regression

   
Safari

   
To Do

   
User story

   
Waiting on godot

   
accessibility
https://git.pleroma.social/pleroma/pleroma-fe/-/snippets/7746

  
better documentation

   
chore

   
confirmed

   
easy ticket

   
incident
Denotes a disruption to IT services and the associated issues require immediate attention

  
l10n update

   
mastoapi

   
mobile

   
needs design

   
needs-info

   
needs-review

   
stupid
No labels
BE Request
Backlog
Better behavior
Blocked by deps
Bug
Code Review
Discussion
Doing
Feature Request / Enhancement
In the shining bright future maybe
It's complicated
MS Edge
Mememoon (or other niche browsers)
Missing API
Missing feature
Missing l10n/i18n
NL1
NL2
NL4
Need to verify on develop
RELEASE BLOCKER
Reassign or Close
Refactor
Regression
Safari
To Do
User story
Waiting on godot
accessibility
better documentation
chore
confirmed
easy ticket
incident
l10n update
mastoapi
mobile
needs design
needs-info
needs-review
stupid
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
3 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
pleroma/pleroma-fe!2191
No description provided.