From 02e49fb5c5d38f5ac6d669e62d61a1f7154763cc Mon Sep 17 00:00:00 2001
From: Lars Bilke <lars.bilke@ufz.de>
Date: Mon, 21 Jun 2021 12:18:20 +0200
Subject: [PATCH] [web] Minor site search css tweaks.
---
web/assets/css/main.css | 8 ++++++--
web/assets/js/sitesearch.js | 1 +
web/layouts/_default/baseof.html | 6 +++---
web/layouts/partials/nav-bar.html | 9 +++++----
web/layouts/partials/site-search.html | 8 --------
5 files changed, 15 insertions(+), 17 deletions(-)
delete mode 100644 web/layouts/partials/site-search.html
diff --git a/web/assets/css/main.css b/web/assets/css/main.css
index 356d96f0f27..74866024667 100644
--- a/web/assets/css/main.css
+++ b/web/assets/css/main.css
@@ -222,7 +222,7 @@ img[src$='#two-third'] {
/* -------------------------------- Algolia---------------------------------- */
.algolia-autocomplete .aa-input,
.algolia-autocomplete .aa-hint {
- /*width: 100%;*/
+ width: 100%;
}
.algolia-autocomplete .aa-hint {
@@ -232,8 +232,12 @@ img[src$='#two-third'] {
.algolia-autocomplete .aa-dropdown-menu {
@apply bg-gray-100;
@apply border-2;
+ @apply border-t-0;
@apply p-1;
@apply text-sm;
+ right: 0px;
+ width: 100%;
+ margin-top: -1px;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
@@ -242,7 +246,7 @@ img[src$='#two-third'] {
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
- @apply bg-blue-200;
+ @apply bg-brand-200;
}
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
diff --git a/web/assets/js/sitesearch.js b/web/assets/js/sitesearch.js
index 1e6f2207fd2..03ff46e34a4 100644
--- a/web/assets/js/sitesearch.js
+++ b/web/assets/js/sitesearch.js
@@ -11,6 +11,7 @@ $('#search-input').autocomplete({
{
source: $.fn.autocomplete.sources.hits(index, { hitsPerPage: 5 }),
displayKey: 'title',
+ debug: true,
templates: {
suggestion: function (suggestion) {
return suggestion._highlightResult.title.value;
diff --git a/web/layouts/_default/baseof.html b/web/layouts/_default/baseof.html
index 3341d4a8019..93e2b0cf1c0 100644
--- a/web/layouts/_default/baseof.html
+++ b/web/layouts/_default/baseof.html
@@ -15,7 +15,7 @@
{{ partial "header.html" . }}
</head>
-<body>
+<body class="selection:bg-yellow-200">
{{ partialCached "nav-bar.html" . $section $subsection }}
<div class="xl:container xl:mx-auto px-2">
@@ -47,8 +47,8 @@
{{ range .Children }}
<li
class="p-1 mr-1 {{if $currentPage.IsMenuCurrent $subsection . }}bg-gray-100 rounded-lg{{ else }}text-gray-700 hover:text-gray-900{{ end }}">
- <a href="{{ .URL }}" {{if $currentPage.IsMenuCurrent $subsection . }} class="text-brand-500"
- {{end}}>{{ .Name }}
+ <a href="{{ .URL }}" {{if $currentPage.IsMenuCurrent $subsection . }} class="text-brand-500" {{end}}>
+ {{ .Name }}
</a>
</li>
{{ end }}
diff --git a/web/layouts/partials/nav-bar.html b/web/layouts/partials/nav-bar.html
index 049a76c6c4e..19f5150c4ff 100644
--- a/web/layouts/partials/nav-bar.html
+++ b/web/layouts/partials/nav-bar.html
@@ -26,21 +26,22 @@
{{ range .Site.Menus.main }}
{{ $url_trimmed := trim .URL "/" }}
<a href="{{ .URL }}"
- class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150{{if (eq $section $url_trimmed) }} text-brand-500{{end}}">{{ .Name }}</a>
+ class="text-base leading-6 font-medium text-gray-500 hover:text-gray-900 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150{{if (eq $section $url_trimmed) }} text-brand-500{{end}}">{{.Name}}</a>
{{ end }}
</nav>
<div class="hidden md:flex items-center justify-end space-x-8 md:flex-1 lg:w-0">
<label for="search-input" class="hidden text-sm font-medium leading-5 text-gray-700">Search</label>
- <div class="relative rounded-md shadow-sm">
- <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+ <div class="relative">
+ <div class="z-10 absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
clip-rule="evenodd"></path>
</svg>
</div>
- <input id="search-input" class="form-input block w-full pl-10 sm:text-sm sm:leading-5"
+ <input id="search-input"
+ class="form-input w-full p-1 text-center rounded-md border-2 border-brand-200 sm:text-sm sm:leading-5"
placeholder="Search this site">
</div>
</div>
diff --git a/web/layouts/partials/site-search.html b/web/layouts/partials/site-search.html
deleted file mode 100644
index 2d996dcea9c..00000000000
--- a/web/layouts/partials/site-search.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<form class="w-full max-w-sm text-sm md:text-base" id="site-search-form" role="search">
- <fieldset class="flex items-center justify-end">
- <label class="block" for="search-input">
- <span class="hidden lg:inline-block"><i class="far fa-search mr-1"></i></span class="hidden md:block">
- <input type="search" id="search-input" class="bg-gray-200 appearance-none border-2 border-gray-200 hover:border-orange rounded w-auto px-2 text-gray-600" placeholder="Search the Docs" name="email-address" value="">
- </label>
- </fieldset>
-</form>
--
GitLab