gitea icon indicating copy to clipboard operation
gitea copied to clipboard

docs: move search input to navbar

Open noerw opened this issue 3 years ago • 4 comments

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
Screenshot_20220730_140343 Screenshot_20220730_140330 Screenshot_20220730_140322

noerw avatar Jul 30 '22 12:07 noerw

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

noerw avatar Jul 30 '22 12:07 noerw

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):

image

silverwind avatar Aug 02 '22 01:08 silverwind

@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)

noerw avatar Aug 02 '22 06:08 noerw

image

Looks fine on my machine :P

Gusted avatar Aug 02 '22 06:08 Gusted

It seems no more suggestions since 6 days ago. Ready to merge

wxiaoguang avatar Aug 08 '22 07:08 wxiaoguang