move quick search box above TOC

[birkenfeld]

BPO	19489
Nosy	@birkenfeld, @ezio-melotti, @merwok, @bitdancer, @berkerpeksag, @zware, @JelleZijlstra, @ammaraskar
Files	searchbar.diff searchbar.diff2 searchbar_in_header.diff searchbar_in_header.diff2 searchbar_in_header.diff3 searchbar_in_header.diff4

^{Note: these values reflect the state of the issue at the time it was migrated and might not reflect the current state.}

Show more details

GitHub fields:

assignee = 'https://github.com/berkerpeksag'
closed_at = <Date 2016-09-09.20:12:09.865>
created_at = <Date 2013-11-04.06:28:30.626>
labels = ['easy', 'type-feature', 'docs']
title = 'move quick search box above TOC'
updated_at = <Date 2016-09-09.20:16:19.388>
user = 'https://github.com/birkenfeld'

bugs.python.org fields:

activity = <Date 2016-09-09.20:16:19.388>
actor = 'zach.ware'
assignee = 'berker.peksag'
closed = True
closed_date = <Date 2016-09-09.20:12:09.865>
closer = 'python-dev'
components = ['Documentation']
creation = <Date 2013-11-04.06:28:30.626>
creator = 'georg.brandl'
dependencies = []
files = ['43650', '43848', '43994', '43995', '44064', '44509']
hgrepos = []
issue_num = 19489
keywords = ['patch', 'easy']
message_count = 21.0
messages = ['202091', '228278', '267460', '269913', '270843', '271106', '271119', '271918', '271925', '271927', '271929', '272279', '272296', '273574', '274286', '274292', '274307', '275415', '275418', '275419', '275420']
nosy_count = 10.0
nosy_names = ['georg.brandl', 'ezio.melotti', 'eric.araujo', 'r.david.murray', 'docs@python', 'python-dev', 'berker.peksag', 'zach.ware', 'JelleZijlstra', 'ammar2']
pr_nums = []
priority = 'normal'
resolution = 'fixed'
stage = 'resolved'
status = 'closed'
superseder = None
type = 'enhancement'
url = 'https://bugs.python.org/issue19489'
versions = ['Python 3.5', 'Python 3.6']

[birkenfeld]

From Mark Summerfield:,

The Quick search box is really useful, but it is annoying that its
position varies from page to page. On pages with long tables of
contents it is often out of sight.

Why not put it above the Table of Contents. That way it is always
in the same place and easily accessible.

[BreamoreBoy]

If this is referring to the box on docs.python.org shouldn't this be logged elsewhere?

[JelleZijlstra]

Yes, I don't think we control this, the layout is generated by sphinx.

[ammaraskar]

It looks like this can be fixed by us. Since sphinx 1.0 there is this handy config parameter: http://www.sphinx-doc.org/en/stable/config.html#confval-html_sidebars

I've attached a patch which pins the searchbox as the first thing on every page.

[ammaraskar]

bump, added the documentation experts list, not sure if the core dev who made this issue is still active.

[zware]

The patch needs some work, as it stands it makes the 'Report a Bug' link disappear. I haven't looked into it far enough to determine why.

For an alternative bikeshed color, would it be possible to put the quick search in the header, just left of the 'previous | next | modules | index' links?

[ammaraskar]

Thank you for pointing that out to me, it completely slipped past.

It looks like the 'Report a Bug' link disappears because deprecated api is used in Doc/tools/templates/layout.html

{% block sidebarsourcelink %}
{% endblock %}

http://www.sphinx-doc.org/en/stable/templating.html#blocks

The following four blocks are only used for pages that do not have
assigned a list of custom sidebars in the html_sidebars config
value"

I've amended the patch to fix this by using the way they recommend with a custom html_sidebar.

As far as putting it in the title bar goes, I think it's slightly more prone to breakage since we're essentially duplicating sphinx's searchbar code. It's easy enough to add it to the right of those links, there's a {% block relbaritems %} for that. Adding it to the left is slightly more complicated. Personally I like just pinning it to the top of the sidebar but I can look into that as well if you really want.
https://github.com/sphinx-doc/sphinx/blob/master/sphinx/themes/basic/layout.html#L27-L46

[zware]

This LGTM.

If it's simple enough, I'd like to see a shot at putting the search box in the top bar, but it's not necessary :)

I'll commit this in the near future unless somebody beats me to it.

[ammaraskar]

This patch adds the search bar to the navigation/header area on the right.

[ammaraskar]

Amended the navigation bar patch to add back a change that only shows the searchbar if javascript is enabled.

[zware]

I really like the search box in the header/footer.

I can't really speak for the actual content of the patch since my Sphinx/HTML/CSS/Jinja/whatever else knowledge is severely limited, but it looks pretty straightforward and the result is very nice. I'd appreciate a review from someone who's better-versed in all things Sphinx (Georg, if you have a chance, you'd be ideal).

If there are no objections within about a week, though, I'll just go ahead and commit it.

[berkerpeksag]

This looks pretty good to me, thanks! I have two minor suggestions:

1. It would be better to make "Quick search" a placeholder:

   <input type="text" name="q" placeholder="{{ _('Quick search') }}" />

2. <li class="right"> will add an unnecessary border in search page. I'd change it to

   <li{%- if pagename != "search" and builder != "singlehtml" %} class="right"{% endif %}>

Also,

+form.inline-search input {
+    display: inline;
+}

may cause weird compatibility problems in some (old?) browsers. We can change it to use display: inline-block instead.

Is there a way to send this to upstream Sphinx?

[ammaraskar]

1. It would be better to make "Quick search" a placeholder

Do you mean in addition to the "Quick search" text that is already on the page or do you want to remove that? Because placeholder isn't fully compatible with some older browsers http://caniuse.com/#feat=input-placeholder

2. <li class="right"> will add an unnecessary border in search page. I'd change it to

Good idea, will fix this.

may cause weird compatibility problems in some (old?) browsers.

What problems are you thinking of? I think display: inline is the right choice here since we want the inputs to inherit the height of the header. The page renders fine on all versions of IE from my testing.

Also, newer versions of sphinx come with a newer jquery that breaks compatibility with IE8 which would cause the search box to not appear anyway.

Is there a way to send this to upstream Sphinx?

I don't think so, it's one of those things that make sense as a theme, which is perfect since we have our own sphinx theme anyway.

[bitdancer]

Moving back to patch review for someone to sign off on the changes.

[zware]

Berker, would you mind giving this another look? If you give it the OK, I can get it committed if you don't beat me to it.

[berkerpeksag]

Do you mean in addition to the "Quick search" text that is already on the page or do you want to remove that?

The latter. All of the popular browsers (Chrome, Firefox, Edge and even Safari) already support the placeholder attribute so I think we can safely ignore IE 8 :)

What problems are you thinking of?

Honestly, I can't remember now, but I was talking about old Chrome and Firefox versions. Let's ignore my comment for now.

I have two more minor comments:

1. • <div class="inline-search" style="display: none" role="search">

   I know this is basically a copy of upstream searchbox.html, but we can probably remove style="display: none" and $('.inline-search').show(0);.

2. • <li class="right inline-search">

   inline-search doesn't seem to be necessary here. display: inline is already applied by div.related li.

I also found a regression in search.html. It doesn't show or highlight the search
words provided in the URL. Try the following URL to reproduce the problem: https://docs.python.org/dev/search.html?q=append

Screenshot from docs.python.org: https://dl.dropboxusercontent.com/u/166024/highlight-docs.pyo.png

Screenshor from my local copy with searchbar_in_header.diff3 applied: https://dl.dropboxusercontent.com/u/166024/highlight-after.png

[berkerpeksag]

I also found a regression in search.html.

Please ignore this. It doesn't have anything to do with your patch.

[ammaraskar]

The latter. All of the popular browsers (Chrome, Firefox, Edge and even Safari) already support the placeholder attribute so I think we can safely ignore IE 8 :)

Roger, I've changed it to placeholder.

I know this is basically a copy of upstream searchbox.html, but we can probably remove style="display: none" and $('.inline-search').show(0);.

The reason that exists is because sphinx's search relies on javascript.

inline-search doesn't seem to be necessary here. display: inline is already applied by div.related li.

Good catch, I've removed the class from there.

[python-dev]

New changeset 274b25cd501f by Zachary Ware in branch '3.5':
Issue bpo-19489: Move the search box from sidebar to header and footer.
https://hg.python.org/cpython/rev/274b25cd501f

New changeset 0f94a8fa5445 by Zachary Ware in branch 'default':
Closes bpo-19489: Merge with 3.5
https://hg.python.org/cpython/rev/0f94a8fa5445

[python-dev]

New changeset 8927417c5e88 by Zachary Ware in branch '3.5':
Issue bpo-19489: Add NEWS and ACKS
https://hg.python.org/cpython/rev/8927417c5e88

New changeset 086c3e7a7955 by Zachary Ware in branch 'default':
Issue bpo-19489: Merge with 3.5
https://hg.python.org/cpython/rev/086c3e7a7955

[zware]

Ammar, thank you very much for the patch!