21

New top bar, new super-mega-expando search box, and it's almost as annoying as the previous one.

The box expands when you type in it and contracts when you unfocus it. It expands towards the left, which is a somewhat jarring in a left-to-right language: I have my eyes on the left part of the box where I'm about to type, and wham! I now need to move my eyes.

The box moves when İ unfocus the web page. That's just rude. A web page shouldn't care whether I'm currently viewing it. Switch to another window to grab something to paste into the search window and wham, the search box shrinks!

There's an animation when the box expands or contracts. Apparently the theory is that the animation causes readers' eye to track to follow the moving thingy and focus where it stops. Does that work for some people? For me it's counterproductive and extremely annoying. I go from “focus mode” where I can read text, to “tracking mode” where I'm just determining the approximate location of the moving thing and trying to decide whether to fight it or flee it. The result is wasting about 5–10 seconds for my eyes to adjust again.

  1. Please at least remove the animation. It's hurting my eyes.
  2. And make the box expand to the right, instead of to the left, that would remove most of the problems with the expansion.
  3. And don't change the appearance if the browser window is unfocused.
5
  • 2
    I have to say I was a bit surprised to see it expand on the left also. I'm not reproducing the behaviour when switching tabs or windows though - when coming back to the page, the focus comes back (if it wasn't lost before switching)
    – Tunaki
    Feb 14, 2017 at 22:00
  • @Tunaki The focus comes back when I come back to the page. But while I'm in another window, the focus is lost and the bar contracts. Chrome 56 on Linux, I haven't checked in other browsers for this iteration of the focus-sensitive search box. Feb 14, 2017 at 22:02
  • 1
    Not sure that can be controlled for from within the web page - a loss of focus is likely a loss of focus, no matter whether it goes inside or outside the page. (Although you might be able to work around it by triggering something whenever something else inside the page gets the focus.)
    – Pekka
    Feb 14, 2017 at 22:09
  • 2
  • +.6666... Agree left-right needs to be flopped and appearance shouldn't change on unfocus. But I have no problem with the animation.
    – Dhaust
    Feb 15, 2017 at 22:55

1 Answer 1

2

Given my low hopes of this being fixed, here's my custom CSS for moving the search box towards the left and making it expand seamlessly towards the right. I also removed some of the blank space to the left of the box, and made more space on the top bar by removing the pointless reputation and badge indicators and shortening the word “Documentation”. If you don't like all these changes, pick and choose.

Screenshot (combined with Make the indicator of unread inbox messages more visible): screenshot

I use Stylish (Firefox, Chrome, Opera, IE?; quickstart, detailed explanations). I'm still experimenting, so this might still change. Firefox syntax:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("stackoverflow.com"), domain("meta.stackoverflow.com") {

/* Less space around the logo */
div.-main a.-logo {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* Shorten “Documentation” to "Docum" */
a#nav-docs {
    width: 4em !important;
    overflow: hidden !important;
}

/* Move the search bar left of the navigation buttons */
div.-main nav.navigation {
    order: 2;
}
div.-main form.searchbar {
    order: 1;
}

/* Turn off the animation when (un)focusing the search box (and everywhere else) */
* {
    transition: none !important;
/*    animation-duration: 0s !important;*/
}

/* Shrink the left margin of the search bar */
form.searchbar {
    padding-left: 4px !important;
}
form.searchbar input {
    padding-left: 4px !important;
    color: black !important; /*better contrast than the default grey*/
}

/* Hide the search icon? That affects the submit button as well. */
form.searchbar svg {
    /*display: none !important;*/
}

/* Hide the useless, very wide reputation and badge display */
a.my-profile div.-rep {
    display:none !important;
}
a.my-profile div.-badges {
    display:none !important;
}
}

For Chrome, omit the first two lines and the trailing closing brace.

Thanks to Keen and Mad Scientist for the help with CSS.

Known issues:

  • The search icon overlaps the placeholder text when the box is empty.
  • This doesn't keep the bar expanded when the window loses focus.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .