Responsive UI to support mobile and small screens (BB-7040)

Issue #5795 open
Marek Zelinka
created an issue

Hello, the problem is my screen (10") is too small to show the bitbucket page in its full size, so could you make it responsive to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling?

Official response

  • Matt Ryall staff

    Hi folks,

    A quick update on this ticket. We're gradually rewriting bits of the Bitbucket UI (as you may have noticed) and trying to make it responsive as we go. Unfortunately there was a big regression recently with the new navigation control not being responsive at all, which took a bit of time to rectify.

    That has now been fixed, and you should see a much more mobile-friendly navigation on Bitbucket now. However, we're aware there are many issues remaining and will keep this ticket open until we've made some more substantial progress.

    Please continue posting comments with important areas that are not working on mobile, and we'll try to address them when we can.

    Thanks,
    Matt

Comments (42)

  1. Hatem Nassrat

    Not just about size but it seems all the JS widgets are extremely slow on smartphones. I am responding on my android if I maje a typo and try to go back and fix it I can be here all day ... so I will not fix it. Also typing the first sentence I was typing and not seeing anything for about the whole first sentence (5secs) painfully slow. Linux chrome is very similar ... actually even os x chrome to skme degree, try going back and editing something you will have to wait for a sec or so.

  2. Matt Ryall staff

    Hi folks,

    A quick update on this ticket. We're gradually rewriting bits of the Bitbucket UI (as you may have noticed) and trying to make it responsive as we go. Unfortunately there was a big regression recently with the new navigation control not being responsive at all, which took a bit of time to rectify.

    That has now been fixed, and you should see a much more mobile-friendly navigation on Bitbucket now. However, we're aware there are many issues remaining and will keep this ticket open until we've made some more substantial progress.

    Please continue posting comments with important areas that are not working on mobile, and we'll try to address them when we can.

    Thanks,
    Matt

  3. Thomas Tempelmann

    First, thanks for making the effort. The main pages can now be browsed much better.

    I still see an issue with viewing individual issue pages (and viewing / editing issues is one of the main uses for me using the iPhone with bitbucket):

    The content pane is not using the screen width but seems instead to have zero width so that the description text is rendered with single chars per each line.

    Can't easily post an example right now, so please view any issue, like this one, on mobile to see for yourself.

  4. Francisco Riccomagno

    For some reason I can't mention you Alastair, but this screen shot was taken from a Samsung Tab E, and it's resolution is 800 x 1280 pixels. But still, I have the same issue in my phone. It seems that is not resolution related.

  5. Thomas Tempelmann

    @Alastair Wilkes Thanks, I can now view issues quite well on an iPhone SE with its rather small screen.

    What doesn't work well yet is the parent screen, i.e. a projects main "Issues" page, in portrait orientation:

    The buttons below "Filter by:" are partially covered by the Search entry field. Also, the "Advanced Search" link can't be touched - it does not react to it. However, in Landscape view it works.

    To solve this, consider this: The view below, which is a list of all currently selected issues, is WIDER than the phone's screen - which makes sense. How about expanding this wider view also to the upper control area that I mentioned above? Then there will be enough space even in portrait view to put the buttons and the search field next to each other without them overlapping as they do now. Or, alternatively, give the buttons on the left side and the search controls on the right side some properties so that they fold below each other instead of overlapping.

    Overall, though, it's now much better, and I can work around the above issue by using landscape view, at least.

  6. Hansel Dunlop

    Screenshot_20180918-221439.png

    Once that left side menu scrolls out, it can't be put back. And see how hard it is for me to try to click the "comment" button? I lost my first version of this comment trying to submit it.

  7. Duncan McClean

    I have multiple issues with the mobile Bitbucket site, The side navbar makes the site completely un-usable When viewing commits, you can't see any information about them because the table is so messed up. * Viewing code is really hard. The scrolling glitches out often.

  8. Levi Hinz

    +1 for this issue on PR review page. Samsung Galaxy s6, navbar appears, covers the screen, and doesn't go away, as soon as you scroll as far as the first diff. Also have issues with the diff windows not being responsive when I zoom out.

  9. Log in to comment