IntenseWebs/sphinx
3
0
Fork 0
mirror of https://github.com/sphinx-doc/sphinx.git synced 2025-02-25 18:55:22 -06:00
Code Issues Packages Projects Releases Wiki Activity

Create a 'search field' component for themes (#11045)

Browse Source 
``searchfield.html`` is similar to the existing ``searchbox.html``, but does not
have the heading "Quick Search". Instead, it uses "Search" as a placeholder
text. This gives a cleaner and less cluttered appearance.

The searchfield component is added to the basic theme and thus can be used
in any derivative theme. It is not used by default for backward compatibility.

The searchfield compenent is made the default in the sphinx13 theme.

CSS changes ensure that the top of the search field is aligned with the
top of the main content.
This commit is contained in:
Tim Hoffmann 2023-04-21 03:02:04 +02:00 committed by GitHub
parent e2f66cea49
commit b430e05285
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
doc/_themes/sphinx13/layout.html vendored
View File

@ -32,7 +32,7 @@
{%- block content %}
<div class="document">
<div class="sphinxsidebar" role="navigation" aria-label="main navigation">
{%- include "searchbox.html" %}
{%- include "searchfield.html" %}
<div class="sphinxsidebar-navigation__contents">
<h3>{{ _('On this page') }}</h3>
{{ toc }}

5
doc/_themes/sphinx13/static/sphinx13.css vendored
View File

@ -68,6 +68,7 @@ div.sphinxsidebar {
overflow-wrap: break-word;
margin: 0;
padding-right: 15px;
padding-top: 0.5em;
font-size: 1em;
}
@ -127,6 +128,10 @@ div.sphinxsidebar li.current > a {
display: none;
}
div.sphinxsidebar #searchbox {
margin: 12px 0 20px 0;
}
div.footer {
background-color: var(--colour-sphinx-blue);
color: #ccc;

23
sphinx/themes/basic/searchfield.html Normal file
View File

@ -0,0 +1,23 @@
{#
basic/searchfield.html
~~~~~~~~~~~~~~~~~~~~~~
Sphinx sidebar template: search field.
This component is similar to searchbox.html but does not include an
extra heading ("Quick search"). Instead, it uses a placeholder text
in the search field.
:copyright: Copyright 2007-2022 by the Sphinx team, see AUTHORS.
:license: BSD, see LICENSE for details.
#}
{%- if pagename != "search" and builder != "singlehtml" %}
<div id="searchbox" style="display: none" role="search">
<div class="searchformwrapper">
<form class="search" action="{{ pathto('search') }}" method="get">
<input type="text" name="q" aria-labelledby="searchlabel" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search"/>
<input type="submit" value="{{ _('Go') }}" />
</form>
</div>
</div>
<script>document.getElementById('searchbox').style.display = "block"</script>
{%- endif %}