Skip to content

Mobile UI improvements

Created by: dblessing

These changes drastically improve the mobile experience. The changes mostly pertain to navigation plus the no ssh key message.

Note: Some of the navbar toggles have a blue outline around them in these screenshots. That's because I took the screenshots with Chrome in mobile emulation mode. Clicking some links causes it to be outlined. This does not happen on mobile. All of these changes were tested on an actual mobile device.

Also, there is a one-liner in here that disables tooltips for touch enabled devices. Tooltips on mobile end up requiring 2 taps to execute the click. The first tap renders the tooltip and the second executes the link.

Please let me know if you have any questions about specific changes.

Before:

The main nav looks decent but if there are too many items they just go off the screen. The navbar toggle is small. before1

Tap the navbar toggle and you get a mess. before2

The no ssh key message is small. The links are hard to tap with big fingers ;) before3

After:

Navbar toggle is bigger and is spaced nicely.

after1

Tap the navbar toggle and you see bigger header nav buttons. Also, the main nav is stacked and will expand to fit any number of items. after2

The links are bigger and centered. Also, for mobile only I added an "Add key" link that is easier to tap than the inline link. after3

The no ssh key message when nav is expanded. after4

Shots of the light theme to show that things still look as expected. after5 after6

Merge request reports