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.

[sanzoghenzo (Andrea Ghensi)]

Thanks for sharing this! I’ve adapted it to be theme agnostic using the color variables:

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

I found a problem using it on my Samsung a52s with chrome PWA: the background of the sync and edit mode buttons, when enabled, is slightly off

[dhemasnurjaya]

I prefer to keep it at the top of my screen.

/* Mobile Toolbar */
@media only screen and (max-width: 600px) {
  #sb-top .sb-actions {
    position: fixed;
    top: 55px;
    left: 0;
    width: 100vw;
    background: var(--top-background-color);
    overflow-x: auto;
    box-shadow: 0px 2px 4px var(--top-background-color);
  }
  .sb-actions button svg {
    height: 1.4rem;
    width: 1.4rem;
  }
  #sb-main {
    padding-top: 40px
  }
}

[JocelynDelalande]

Seems broken on SBv2 (see screenshot). Anyone ported this nice hack to v2 yet ?

[mjf (Matouš Jan Fialka)]

Mobile toolbar is supposed to work out of the box on the V2. Also see config docs (search for “Mobile” there). I’d suggest to remove that part of your space-style and see if it works for you. The configuration options are hamburger or bottom-bar. You can override the CSS for .sb-actions or add a new one.

```space-lua
config.set {
  mobileMenuStyle = 'bottom-bar' -- or 'hamburger'
}
```

@zef The values for the config option should be documented here as comment listing the existing choices.

[JocelynDelalande]

@mjf thanks for your answer :). However I don’t understand all your instructions:

@mjf

Also see config docs (search for “Mobile” there).

« Mobile » does not appear in the mentioned page.

@mjf

I’d suggest to remove that part of your space-style and see if it works for you

Which part ?

The config.set snippet you provided worked to display a bottom bar. But it just contains the regular buttons :

Could you elaborate a bit plz ? Thanks by advance !

[mjf (Matouš Jan Fialka)]

@JocelynDelalande

« Mobile » does not appear in the mentioned page.

Should have been “mobile” (lowercased). You would had found this config section then:

config.define("mobileMenuStyle", {
  type = "string",
})

The issue here is that values are not documented and you must search source code to get to them.

Which part ?

The one with the custom “trick” for mobile you mentioned, the “Mobile responsive extension” space-style. You can keep it, just change the space-style to just css which will make it normal code preview but won’t get included in the SilverBullet CSS.

The config.set snippet you provided worked to display a bottom bar. But it just contains the regular buttons …

I have configured my buttons as I like them to be so I have more of them. You can generally configure buttons to run any SilverBullet command. That’s also documented in the configuration specification. The relevant part is config.define("actionButtons", { ... }. For example:

```space-lua
config.set {
  actionButtons = {
    {
      icon = 'search',
      command = 'Search Space',
      description = 'Search for words in space'
    },
    {
      icon = 'home',
      command = 'Navigate: Home',
      description = 'Go to the index page'
    },
    {
      icon = 'book',
      command = 'Navigate: Page Picker',
      description = 'Open page'
    },
    {
      icon = 'sidebar',
      command = 'Tree View: Toggle',
      description = 'Toggle tree view' -- plug
    },
    {
      icon = 'file-plus',
      command = 'Page: Create Page',
      description = 'Create page' -- custom
    },
    {
      icon = 'trash',
      command = 'Page: Delete',
      description = 'Delete page'
    },
    {
      icon = 'git-commit',
      command = 'Git: Commit',
      description = 'Commit into Git repository' -- custom
    },
    {
      icon = 'terminal',
      command = 'Open Command Palette',
      description = 'Run command'
    }
  }
}
```

Is that what you ask about?

[JocelynDelalande]

Yes, thanks :). It did not work using the previous space-config snippet, but with space-script config.set it went ok.

the space-style snippet does work, but requires mobileMenuStyle to be hamburger, as yo usuggested, otherwise, it makes the hamburger clumsy.

Thanks again!

[whatelse]

Great config

I found the create page didn’t work in my instance, does it need some other job to be done?

It seems I need a plug.

thank you.

[mjf (Matouš Jan Fialka)]

No plug, it’s Lua:

```space-lua
command.define {
  name = "Page: Create Page",
  run = function()
    local current = editor.getCurrentPage()
    local path = string.gsub(current, "/*[^/]+$", "")
    if path ~= "" then
      path = path .. "/"
    end
    local name = editor.prompt("Enter name of new page", path)
    if not name then
      return
    else
      editor.navigate(name)
    end
  end
}
```

```space-lua
command.define {
  name = "Page: Create Subpage",
  run = function()
    local current = editor.getCurrentPage()
    local name = editor.prompt("Enter name of new subpage", current .. "/")
    if not name then
      return
    else
      editor.navigate(name)
    end
  end
}
```

TBH, I do not know where these came from, I didn’t wrote these, probably got them from this forum…