Mobile friendly toolbar

[doo]

Hey all,

I created a custom style using space-style that allows to display the toolbar in a manner that better fits mobile devices like smartphones. It moves the toolbar to the bottom of the screen and makes action buttons a little bigger so they are easier to reach and hit. When more buttons are displayed than the width can hold, the toolbar can be scrolled horizontally. The style is only enabled on small screens, so it won’t affect the desktop view, works nice in conjunction with action buttons that have mobile: True enabled.

I guess to improve this further it would be nice to split the toolbar into two sections, a more generic one at the top right as it is now (for things like, sync, home, etc) and an optional editor toolbar that can be placed above or below the content based on device size.

Screenshots

Full Example

Custom style:

```space-style
/* Mobile Toolbar */
@media only screen and (max-width: 600px) {
  #sb-top .sb-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    padding-left: 4px;
    background: white;
    width: 100vw;
    overflow-x: auto;
    box-shadow: 0px 4px 8px black;
  }
  .sb-actions button svg {
    height: 1.4rem;
    width: 1.4rem;
    margin: 0.3rem 0;
  }
}
```

Buttons as shown in screenshot:

```space-config
actionButtons:
- icon: home
  command: "{[Navigate: Home]}"
  description: "Go to the index page"
- icon: book
  command: "{[Navigate: Page Picker]}"
  description: Open page
- icon: terminal
  command: "{[Open Command Palette]}"
  description: Run command
# Mobile only buttons
- icon: md-format-bold
  command: "{[Text: Bold]}"
  description: "Bold"
  mobile: true
- icon: md-format-italic
  command: "{[Text: Italic]}"
  description: "Italic"
  mobile: true
- icon: md-format-strikethrough
  command: "{[Text: Strikethrough]}"
  description: "Strikethrough"
  mobile: true
- icon: md-format-list-bulleted
  command: "{[Text: Listify Selection]}"
  description: "List"
  mobile: true
- icon: md-format-list-numbered
  command: "{[Text: Number Listify Selection]}"
  description: "List"
  mobile: true
- icon: check-square
  command: "{[Turn into task]}"
  description: "Task"
  mobile: true
- icon: md-format-indent-decrease
  command: "{[Outline: Move Left]}"
  description: "Dedent"
  mobile: true
- icon: md-format-indent-increase
  command: "{[Outline: Move Right]}"
  description: "Indent"
  mobile: true
- icon: md-link
  command: "{[Text: Link Selection]}"
  description: "Link"
  mobile: true
```

[dklawren (David Lawrence)]

Thanks! This actually helps me with the issue I filed at 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 I will give this a try and see how it goes.

[meain]

I was kinda doing something similar(move entire header to bottom) with, but this seems like a better approach.

#sb-root {
    flex-direction: column-reverse !important;
}

[paletochen]

Thanks for doing this, it is great.

I did find an issue in my device though.
When I start to edit a page and the virtual keyboard appears, the toolbar disappears, it doesn’t move up to the top of the keyboard.
This means that all the editing features that you have added for markdown, for example, are not available, because the virtual keyboard is not allowing me to use them.

Is this just me?
Using a Google Pixel phone

[doo]

Seems to be browser related, I also use a Pixel. I am using Firefox as my main browser though, also installed the Silverbullet PWA using Firefox. Here it works as expected, opening the keyboard places the toolbar above the keyboard.

I just tried it using a Chromium based browser, here I was able to reproduce the behavior that you described, the toolbar is hidden behind the keyboard. It seems to be related to the adjustments the browser makes to reduce window height for the keyboard, as scrolling down all the way shows the toolbar again, but also moves the header up out of the screen which should not happen.
It seems to not fully reduce the window size by the keyboard height, placing parts of the page underneath the keyboard.
So probably needs further adjustments for Chromium based browsers.

[dklawren (David Lawrence)]

WIth Firefox PWA on Android I always get a blank area at the bottom of the screen after using the pop-up keyboard. This does not happen with Chrome.

[doo]

Okay that’s strange, can’t reproduce it on my side. Is there maybe some other css enabled that may conflict with the toolbar changes?

[dklawren (David Lawrence)]

For full disclosure I am running Android 15 beta and Firefox Nightly so it could be other unrelated issues.

Fwiw, if I switch to another Android app and then back the PWA for Silverbullet, the gap at the bottom disappears and everything looks normal again until I use the keyboard again.