move quick search box above TOC #63688

birkenfeld · 2013-11-04T06:28:31Z

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 · 2013-11-04T06:28:30Z

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 · 2014-10-02T23:01:24Z

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

JelleZijlstra · 2016-06-05T19:02:43Z

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

ammaraskar · 2016-07-06T23:28:10Z

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 · 2016-07-19T21:12:16Z

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

zware · 2016-07-23T19:52:31Z

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 · 2016-07-24T01:28:15Z

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 · 2016-08-03T18:05:49Z

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 · 2016-08-03T20:19:08Z

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

ammaraskar · 2016-08-03T20:39:11Z

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

zware · 2016-08-03T20:51:37Z

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 · 2016-08-09T23:34:31Z

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

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

<input type="text" name="q" placeholder="{{ _('Quick search') }}" />
<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 · 2016-08-10T03:18:38Z

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

<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 · 2016-08-24T15:55:30Z

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

zware · 2016-09-03T04:38:19Z

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 · 2016-09-03T12:33:46Z

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:

- <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);.
- <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 · 2016-09-03T16:14:34Z

I also found a regression in search.html.

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

ammaraskar · 2016-09-09T20:05:20Z

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 · 2016-09-09T20:12:10Z

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 · 2016-09-09T20:16:01Z

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 · 2016-09-09T20:16:19Z

Ammar, thank you very much for the patch!

birkenfeld assigned docspython Nov 4, 2013

birkenfeld added the docs Documentation in the Doc dir label Nov 4, 2013

ezio-melotti added easy type-feature A feature request or enhancement labels Oct 2, 2014

zware assigned berkerpeksag and unassigned docspython Sep 3, 2016

python-dev mannequin closed this as completed Sep 9, 2016

ezio-melotti transferred this issue from another repository Apr 10, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

move quick search box above TOC #63688

move quick search box above TOC #63688

birkenfeld commented Nov 4, 2013

birkenfeld commented Nov 4, 2013

BreamoreBoy mannequin commented Oct 2, 2014

JelleZijlstra commented Jun 5, 2016

ammaraskar commented Jul 6, 2016

ammaraskar commented Jul 19, 2016

zware commented Jul 23, 2016

ammaraskar commented Jul 24, 2016

zware commented Aug 3, 2016

ammaraskar commented Aug 3, 2016

ammaraskar commented Aug 3, 2016

zware commented Aug 3, 2016

berkerpeksag commented Aug 9, 2016

ammaraskar commented Aug 10, 2016

bitdancer commented Aug 24, 2016

zware commented Sep 3, 2016

berkerpeksag commented Sep 3, 2016

berkerpeksag commented Sep 3, 2016

ammaraskar commented Sep 9, 2016

python-dev mannequin commented Sep 9, 2016

python-dev mannequin commented Sep 9, 2016

zware commented Sep 9, 2016

move quick search box above TOC #63688

move quick search box above TOC #63688

Comments

birkenfeld commented Nov 4, 2013

birkenfeld commented Nov 4, 2013

BreamoreBoy mannequin commented Oct 2, 2014

JelleZijlstra commented Jun 5, 2016

ammaraskar commented Jul 6, 2016

ammaraskar commented Jul 19, 2016

zware commented Jul 23, 2016

ammaraskar commented Jul 24, 2016

zware commented Aug 3, 2016

ammaraskar commented Aug 3, 2016

ammaraskar commented Aug 3, 2016

zware commented Aug 3, 2016

berkerpeksag commented Aug 9, 2016

ammaraskar commented Aug 10, 2016

bitdancer commented Aug 24, 2016

zware commented Sep 3, 2016

berkerpeksag commented Sep 3, 2016

berkerpeksag commented Sep 3, 2016

ammaraskar commented Sep 9, 2016

python-dev mannequin commented Sep 9, 2016

python-dev mannequin commented Sep 9, 2016

zware commented Sep 9, 2016