diff options
Diffstat (limited to 'src/templates/partials/search.html')
| -rw-r--r-- | src/templates/partials/search.html | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/src/templates/partials/search.html b/src/templates/partials/search.html new file mode 100644 index 00000000..1854a7d3 --- /dev/null +++ b/src/templates/partials/search.html @@ -0,0 +1,109 @@ +<!-- + Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com> + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to + deal in the Software without restriction, including without limitation the + rights to use, copy, modify, merge, publish, distribute, sublicense, and/or + sell copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in + all copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS + IN THE SOFTWARE. +--> + +<!-- Search interface --> +<div class="md-search" data-md-component="search" role="dialog"> + <label class="md-search__overlay" for="__search"></label> + <div class="md-search__inner" role="search"> + <form class="md-search__form" name="search"> + + <!-- Search input --> + <input + type="text" + class="md-search__input" + name="query" + aria-label="{{ lang.t('search.placeholder') }}" + placeholder="{{ lang.t('search.placeholder') }}" + autocapitalize="off" + autocorrect="off" + autocomplete="off" + spellcheck="false" + data-md-component="search-query" + required + /> + + <!-- Button to open search --> + <label class="md-search__icon md-icon" for="__search"> + {% set icon = config.theme.icon.search or "material/magnify" %} + {% include ".icons/" ~ icon ~ ".svg" %} + {% set icon = config.theme.icon.previous or "material/arrow-left" %} + {% include ".icons/" ~ icon ~ ".svg" %} + </label> + + <!-- Search options --> + <nav + class="md-search__options" + aria-label="{{ lang.t('search') }}" + > + + <!-- Button to share search --> + {% if "search.share" in features %} + <a + href="javascript:void(0)" + class="md-search__icon md-icon" + title="{{ lang.t('search.share') }}" + aria-label="{{ lang.t('search.share') }}" + data-clipboard + data-clipboard-text="" + data-md-component="search-share" + tabindex="-1" + > + {% set icon = config.theme.icon.share or "material/share-variant" %} + {% include ".icons/" ~ icon ~ ".svg" %} + </a> + {% endif %} + + <!-- Button to reset search --> + <button + type="reset" + class="md-search__icon md-icon" + title="{{ lang.t('search.reset') }}" + aria-label="{{ lang.t('search.reset') }}" + tabindex="-1" + > + {% set icon = config.theme.icon.close or "material/close" %} + {% include ".icons/" ~ icon ~ ".svg" %} + </button> + </nav> + + <!-- Search suggestions --> + {% if "search.suggest" in features %} + <div + class="md-search__suggest" + data-md-component="search-suggest" + ></div> + {% endif %} + </form> + <div class="md-search__output"> + <div class="md-search__scrollwrap" data-md-scrollfix> + + <!-- Search results --> + <div class="md-search-result" data-md-component="search-result"> + <div class="md-search-result__meta"> + {{ lang.t("search.result.initializer") }} + </div> + <ol class="md-search-result__list" role="presentation"></ol> + </div> + </div> + </div> + </div> +</div> |