Top bar improve for mobile view

The page name is not readable in small screen devices if it is too long. So I made a small tweak using space-style


@media only screen and (max-width: 480px) {
  #sb-top {
    height: auto;
  }
  
  #sb-top .main .inner .wrapper {
    flex-direction: column;
  }
}

Result

2 Likes

Nice. I would really like to get to a solution that uses less vertical space on mobile. Perhaps the hamburger menu idea would be nicer. When viewing Silverbullet on mobile and there are more than a few buttons on the header, the page name is very truncated · Issue #1033 · silverbulletmd/silverbullet · GitHub

1 Like

Actually I wanted to make some effects like hiding the action buttons when scrolling down and showing them when scrolling up. However it would required some JS that I don’t have time to write for now.

Like this

copy_54922F59-3856-4112-AF47-A86FA9B2810B

7 Likes

Hi @zef To implement this behavior I attached a scroll event handler to the EditorView. I’m not sure if it is possible to create a plug which modifying the EditorView like that.