[issue19489] move quick search box above TOC
New submission from Georg Brandl:
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. ---------- assignee: docs@python components: Documentation messages: 202091 nosy: docs@python, georg.brandl priority: normal severity: normal status: open title: move quick search box above TOC _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Mark Lawrence added the comment: If this is referring to the box on docs.python.org shouldn't this be logged elsewhere? ---------- nosy: +BreamoreBoy _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Changes by Ezio Melotti <ezio.melotti@gmail.com>: ---------- keywords: +easy nosy: +ezio.melotti stage: -> needs patch type: -> enhancement _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Changes by Berker Peksag <berker.peksag@gmail.com>: ---------- nosy: +berker.peksag _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Changes by Mark Lawrence <breamoreboy@yahoo.co.uk>: ---------- nosy: -BreamoreBoy _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Jelle Zijlstra added the comment: Yes, I don't think we control this, the layout is generated by sphinx. ---------- nosy: +Jelle Zijlstra _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Ammar Askar added the comment: 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. ---------- keywords: +patch nosy: +ammar2 Added file: http://bugs.python.org/file43650/searchbar.diff _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Ammar Askar added the comment: bump, added the documentation experts list, not sure if the core dev who made this issue is still active. ---------- nosy: +eric.araujo _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Zachary Ware added the comment: 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? ---------- nosy: +zach.ware versions: +Python 2.7, Python 3.5, Python 3.6 _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Ammar Askar added the comment: 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.... ---------- Added file: http://bugs.python.org/file43848/searchbar.diff2 _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Zachary Ware added the comment: 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. ---------- stage: needs patch -> commit review _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Ammar Askar added the comment: This patch adds the search bar to the navigation/header area on the right. ---------- Added file: http://bugs.python.org/file43994/searchbar_in_header.diff _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Ammar Askar added the comment: Amended the navigation bar patch to add back a change that only shows the searchbar if javascript is enabled. ---------- Added file: http://bugs.python.org/file43995/searchbar_in_header.diff2 _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Zachary Ware added the comment: 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. ---------- _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Changes by Zachary Ware <zachary.ware@gmail.com>: ---------- versions: -Python 2.7 _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Berker Peksag added the comment: 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? ---------- _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Ammar Askar added the comment:
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. ---------- Added file: http://bugs.python.org/file44064/searchbar_in_header.diff3 _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
R. David Murray added the comment: Moving back to patch review for someone to sign off on the changes. ---------- nosy: +r.david.murray stage: commit review -> patch review _______________________________________ Python tracker <report@bugs.python.org> <https://bugs.python.org/issue19489> _______________________________________
Zachary Ware added the comment: 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. ---------- assignee: docs@python -> berker.peksag _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Berker Peksag added the comment:
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 ---------- _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Berker Peksag added the comment:
I also found a regression in search.html.
Please ignore this. It doesn't have anything to do with your patch. ---------- _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Ammar Askar added the comment:
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. ---------- Added file: http://bugs.python.org/file44509/searchbar_in_header.diff4 _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Roundup Robot added the comment: New changeset 274b25cd501f by Zachary Ware in branch '3.5': Issue #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 #19489: Merge with 3.5 https://hg.python.org/cpython/rev/0f94a8fa5445 ---------- nosy: +python-dev resolution: -> fixed stage: patch review -> resolved status: open -> closed _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Roundup Robot added the comment: New changeset 8927417c5e88 by Zachary Ware in branch '3.5': Issue #19489: Add NEWS and ACKS https://hg.python.org/cpython/rev/8927417c5e88 New changeset 086c3e7a7955 by Zachary Ware in branch 'default': Issue #19489: Merge with 3.5 https://hg.python.org/cpython/rev/086c3e7a7955 ---------- _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
Zachary Ware added the comment: Ammar, thank you very much for the patch! ---------- _______________________________________ Python tracker <report@bugs.python.org> <http://bugs.python.org/issue19489> _______________________________________
participants (9)
-
Ammar Askar -
Berker Peksag
-
Ezio Melotti
-
Georg Brandl
-
Jelle Zijlstra
-
Mark Lawrence
-
R. David Murray
-
Roundup Robot
-
Zachary Ware