gitea
gitea copied to clipboard
docs: move search input to navbar
Previously, the search input was on a dedicated search page, being rather unwieldy.
- [x] ~~depends on https://gitea.com/gitea/theme/pulls/112~~
| small | medium | large |
|---|---|---|
![]() |
![]() |
![]() |
here's a patch to make it work without modifying the base theme. this means that the docs site will not take over future changes to the theme navbar layout, but this will be very rare anyway i guess.
diff --git a/docs/config.yaml b/docs/config.yaml
index 29009e4f7..2d15e774e 100644
--- a/docs/config.yaml
+++ b/docs/config.yaml
@@ -22,7 +22,6 @@ params:
minGoVersion: 1.18
goVersion: 1.18
minNodeVersion: 14
- search: nav
outputs:
home:
diff --git a/docs/layouts/partials/navbar.html b/docs/layouts/partials/navbar.html
new file mode 100644
index 000000000..03741d460
--- /dev/null
+++ b/docs/layouts/partials/navbar.html
@@ -0,0 +1,26 @@
+<link rel="stylesheet" href="{{ .Site.BaseURL }}styles/navbar.css">
+
+<nav class="navbar">
+ <div class="container">
+ <div class="navbar-brand">
+ <a class="navbar-item" href="{{ .Site.BaseURL }}">
+ <img src="{{ .Site.BaseURL }}images/gitea.png" alt="{{ .Site.Title }}">
+ </a>
+ <!-- this works together with assets/js/search.js-->
+ <form action="{{ "search" | absLangURL }}">
+ <input id="search-query" name="s" placeholder="Search" />
+ </form>
+ <span class="navbar-burger burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
+ <span></span>
+ <span></span>
+ <span></span>
+ </span>
+ </div>
+ <div class="navbar-menu" id="navMenu">
+ <div class="navbar-end">
+ {{ partial "toplinks.html" . }}
+ </div>
+ </div>
+ <div class="navbar-background" id="navbar-background"></div>
+ </div>
+</nav>
\ No newline at end of file
diff --git a/docs/static/styles/navbar.css b/docs/static/styles/navbar.css
new file mode 100644
index 000000000..a32740024
--- /dev/null
+++ b/docs/static/styles/navbar.css
@@ -0,0 +1,17 @@
+.navbar .navbar-brand {
+ align-items: center;
+ justify-content: space-between;
+ flex-grow: 1;
+}
+
+.navbar .navbar-brand input {
+ height: 50%;
+ padding: 0.3rem;
+ margin-right: 0.75rem;
+}
+
+@media screen and (max-width:1023px){
+ .navbar .navbar-brand {
+ justify-content: initial;
+ }
+}
\ No newline at end of file
Not a problem with this PR, but the input text is off-center vertically. Likely has something to do with the percentage height (generally percentages should be avoided in CSS):
@silverwind I don't know how to fix that. I have spent hours (days?) in the past trying to vertically align inputs across browsers and have given up at this point. If you know how to fix that I'd be happy to learn 🙃 (Either way, that's to be fixed in the theme repo, not here)

Looks fine on my machine :P
It seems no more suggestions since 6 days ago. Ready to merge


