Hide block properties when block is collapsed

Customization
21

To be fair, if Blocks are collapsed, having the properties show up on hover is a nice way to get a glimpse of what’s inside, if the Title of the Block is not helpful enough. But I wish there was a way to add a timing to the hover so that just scrolling would not flash on screen all properties of the traversed collapsed blocks.

Is it maybe possible somehow to say: if I hover over a block title and the block is collapsed and if my mouse stays there for 2seconds then show the properties div?

1 Like
22

This is possible with css attribute transition and its delay value.

23

Can someone make the transition delay in a code snippet that i (a total rookie) can copy and paste?

I too want the delay to be a bit longer, cause i dislike the hover over linked sites to show up so soon.

24

I haven’t managed to make it work :frowning: …

25

If we use e.g. @FlorianF’s code, we can do either:

  • a transition:
    • inside rule .block-content-inner:hover ~ .block-properties {
      • add these lines:
          transition: opacity 2s step-end;
  @starting-style {
    opacity: 0;
  }
  • an animation:
    • define the following animation:
      @keyframes anim {
  0% {
    display: none;
  }
  100% {
    display: block;
  }
}
    • then inside rule .block-content-inner:hover ~ .block-properties {
      • add this line: animation: anim 2s step-end;
26

I don’t know why or if I have any conflicting CSS but I tried so many variations from web and your suggestion also and I don’t see any difference… :man_shrugging:

27

Most probably you have conflicting code. Try in an empty graph without customizations.

28

I have noticed that sometimes a custom css only workes if i put it in another place in my custom.css. Is there a specific order that one has to comply with?

For examples: I recently added some new custom.css and suddenly my hide-block-properties stopped working. If i put it back on the very top of my custom.css it starts working again…

29
  • The later/lower a css rule is placed in the file, the higher its priority (i.e. it trumps previous rules).
  • Ideally, should merge similar rules to a single desired one, so as to avoid such issues.
2 Likes
30

Thanks. It works for me. But it also hides page properties. Are there any configurations to show page properties while hide block properties?

UPDATE: I have solved this by adding :not(.page-properties)

my implementation: Collapse/Hide Properties Easily - #4 by hulalala

31

Have to correct my simple CSS from above again, since the behaviour in v0.10.9 has changed, e.g. the ‘collapsed’ - attribute now disppears when a block without children gets collapsed :

/* Hide block-properties of collapsed blocks */
.ls-block:not([data-collapsed="false"]) .block-properties:not(.page-properties) {
  display: none;
}
3 Likes
32

The downside of this code:

  • It hides the Page Properties
  • It lacks propertie values clickability
2 Likes
33

problem with this is, unless and until the blinking cursor is on the same exact block, it won’t show the properties, even though the block is not collapsed anymore.

also, suppose we have a live query with a condition to include a specific property, it would show a blank line instead of showing the property text. it adds up to keystrokes to move down and doesn’t help much to visually catch what exactly is going on unless we carefully navigate the blinking cursor to that particular block.

Same happens even when the particular block is zoomed in. Even though is the topmost block on the screen, it won’t show the property. Even thought the cursor is blinking in any of its child blocks, it won’t show the properties.

no worries. I seem to have got the solution:

34

Hi folks. I faced the opposite: I do want block props to be displayed when block is collapsed, but they get hidden. How to still see them?

image
image908×232 10.1 KB

image
image908×232 7.54 KB

So as you see the props block is hidden now.

It looks like it was me who configured it this way as you folks have the reverse problem LOL
But I cannot find it :slight_smile:

UPDATE. Ignore me. It was the Awesome Props plugin who did that, tho it doesn’t have anything in its settings to behave this way. Weird. I uninstalled it.