Don't switch to a different layout when window is too narrow

[gsz]

When the browser window is too narrow (or the browser zoom too high), devdocs switches to a different layout, where the search bar stretches horizontally across the entire screen, the sidebar is hidden by default and it shows up to fill the whole screen when you start typing in the search box.

This, by itself, doesn't sound too bad. However, there are two weird changes in the UI behavior that make this layout less convenient to use than the normal one. Also, the standard layout already includes the option to automatically hide the sidebar, so this seems completely superfluous.

I suggest removing this feature.

The two annoyances mentioned above are:

1. In normal layout, when I type in the search box, the first entry in the sidebar is automatically focused, so I can press enter at any time to display it in the documentation area. In the compact layout, the top entry isn't focused, so to display the doc entry at the top of the list, I have to press the down arrow key to select it and only after that press enter.

2. It's impossible to select the doc entry that's already displayed. This might sound like a weird thing to complain about, but consider the following scenario: I typed stdvec (and did the down-arrow + enter dance) to display documentation for C++ std::vector. I then accidentally pressed g so the search box now contains stdvecg and the search menu pops up to fill the screen and obscure my view. I backspace to remove the g and try to reselect the entry for std::vector but it doesn't work, either through pressing enter or mouse-clicking on it. So the search menu is stuck and I have to either click the hamburger button in the top left corner to hide it or select another documentation entry and then go back to std::vector. In normal layout with sidebar auto-hiding turned on this works much better. I can just press enter and the sidebar disappears.

[jmerle]

The feature you're suggesting to be removed is our mobile layout, which, hopefully for obvious reasons, won't be removed. Regarding your annoyances:

1. This is actually a feature on mobile devices, so it's not going to change.
2. This is a bug, I have been able to reproduce it successfully on my phone too. Flagging this issue as a bug because of this.

[gsz]

Then is there a way to prevent devdocs from switching to the mobile layout? Because this happens on a desktop and it seems to base its decision solely on the relative window size.

I'm also not sure why annoyance 1 is considered a feature on a mobile device. Would it cause any harm to have the first entry on the list highlighted? And it's possible to connect a normal keyboard to a tablet which would make it useful even on mobile.

[jmerle]

There's not a toggle, no.

Here's the code that checks whether to show the mobile layout:

  @detect: ->
    try
      (window.matchMedia('(max-width: 480px)').matches) or
      (window.matchMedia('(max-width: 767px)').matches) or
      (window.matchMedia('(max-height: 767px) and (max-width: 1024px)').matches) or
      # Need to sniff the user agent because some Android and Windows Phone devices don't take
      # resolution (dpi) into account when reporting device width/height.
      (navigator.userAgent.indexOf('Android') isnt -1 and navigator.userAgent.indexOf('Mobile') isnt -1) or
      (navigator.userAgent.indexOf('IEMobile') isnt -1)
    catch
      false

I don't think it's a wise idea for us to change this, since (width < 767px or width < 1024px and height < 767px) are in my opinion pretty good bounds to decide whether or not to show the mobile layout.

Of course, if you are willing to run a userscript, you can always enforce it that way with a script like this:

// ==UserScript==
// @name         DevDocs Force Desktop Layout
// @namespace    http://tampermonkey.net/
// @version      1.0.0
// @match        https://*devdocs.io/*
// @grant        unsafeWindow
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    const mobileChecks = ['(max-width: 480px)', '(max-width: 767px)', '(max-height: 767px) and (max-width: 1024px)'];

    const originalMatchMedia = unsafeWindow.matchMedia;

    unsafeWindow.matchMedia = function() {
        if (mobileChecks.includes(arguments[0])) {
            return {
                matches: false,
            };
        }

        return originalMatchMedia.apply(this, arguments);
    };
})();

[gsz]

The userscript workaround works, however getting it to run was a bit of an adventure.

For the record, as of now on Firefox it seems that neither Tampermonkey nor Violentmonkey work on devdocs.io page, because of content security policy... things. Greasemonkey works, though.

[Cimbali]

I was hoping pressing Escape would close the sidebar, instead of re-selecting the same entry with the mouse. However this also exits the current page, at the same time.

[Screwtapello]

I like that DevDocs has a mobile view. I like that it appears when the window is narrow. What frustrates me is that it only appears when the window is narrow at page load time.

The other day I sat down to work on something, opened the documentation in DevDocs, and got to work. As I worked, I opened a few more windows, and shrunk my browser window to make room. Later, I restarted my browser for a security update, and when it came back, DevDocs was using this weird new layout I didn't recognise.

I tried making my browser bigger or smaller in case it was a responsive-layout thing (like GitHub does), but that didn't get back the layout I expected. I tried resetting my preferences, and somewhere along the way I must have accidentally resized my browser just a little bigger and things got back to normal, so I assumed resetting my preferences fixed the "problem". I shrunk my browser back down, and things stayed fixed. Then I later restarted my browser again, and the mobile layout returned, and I got frustrated and found this issue.

What really surprises me is that DevDocs does have a responsive layout - if I load it in a big browser so I get the desktop version, then drag the window really small, the results pane on the left shrinks down and decreases its padding to take less room on low-res displays. However, the threshold for this "desktop-small" layout is smaller than the one for the mobile layout, so I imagine nobody ever sees it - anyone who could use it gets the mobile layout instead.

[sans-c]

tl,dr: please add some kind of toggle and/or relax the thresholds for the layout switches. I find the "normal" layout perfectly servicable in my setup and every page reload switches to the unwanted mobile layout. This can be really confusing.

I just stumbled upon this and am surprised that this is a long standing issue. I was really confused just now when a Firefox window, tiled to a corner of my screen suddenly showed a devdocs-interface I didn't recognize. I spent 5 minutes tinkering with preferences and keyboard shortcuts, 5 minutes messing around with my browser extensions and another 10 minutes looking for known issues before finally finding the explanation here.