static/{frontend,shared}: search UI cleanup
- Hovered links have uniform color.
- Adjusted font sizes.
- Adjusted content margins.
Change-Id: I58637c81a1eba8bdf73e410b0c5893e1425386d1
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/343589
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
TryBot-Result: kokoro <noreply+kokoro@google.com>
Reviewed-by: Julie Qiu <julie@golang.org>
Reviewed-by: Jonathan Amsterdam <jba@google.com>
diff --git a/static/frontend/search/search.css b/static/frontend/search/search.css
index 0615b5f..079f53e 100644
--- a/static/frontend/search/search.css
+++ b/static/frontend/search/search.css
@@ -9,20 +9,19 @@
}
.SearchResults-instead {
font-size: 1.25rem;
+ margin-top: -0.5rem;
}
.SearchResults-insteadPrefix {
color: var(--color-text);
}
-.SearchResults-instead:hover .SearchResults-insteadPrefix {
- color: var(--color-brand-primary);
-}
.SearchResults-summary {
+ color: var(--color-text-subtle);
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: space-between;
line-height: 1.5rem;
- color: var(--color-text-subtle);
+ margin-top: 0.5rem;
}
@media only screen and (min-width: 64rem) {
.SearchResults-summary {
@@ -40,6 +39,9 @@
gap: 0.5rem;
padding: 0 0 2.5rem 0;
}
+.SearchSnippet h2 {
+ font-size: 1.25rem;
+}
.SearchSnippet:last-of-type {
padding: 0 0 1rem 0;
}
@@ -61,6 +63,10 @@
flex-wrap: wrap;
gap: 0.5rem;
}
+.SearchSnippet-symbolCode {
+ font-size: 0.75rem;
+ margin: 0.25rem 0;
+}
.SearchSnippet-sub a[data-hidden] {
display: none;
}
@@ -85,3 +91,6 @@
.SearchSnippet-symbolKind {
color: var(--color-text);
}
+.SearchPagination {
+ height: 1.5rem;
+}
diff --git a/static/frontend/search/search.tmpl b/static/frontend/search/search.tmpl
index afcb21b..aa54c09 100644
--- a/static/frontend/search/search.tmpl
+++ b/static/frontend/search/search.tmpl
@@ -32,15 +32,16 @@
{{if gt (len .Results) 0}}
<div class="SearchResults-summary">
<div>
- <div>
- Showing <strong>{{len $.Results}}</strong> matching {{.SearchModeSymbol}}s.
- <a href="/search-help">Search help</a>
- </div>
+ Showing <strong>{{len $.Results}}</strong> matching {{.SearchModeSymbol}}s.
+ <a href="/search-help">Search help</a>
</div>
{{template "search_pagination" .}}
</div>
{{end}}
{{if eq (len .Results) 0}}
+ <a class="SearchResults-instead" data-gtmc="toggle search mode" href="{{.Pagination.URL .Pagination.Limit .SearchModePackage .Query}}">
+ <span class="SearchResults-insteadPrefix">Search instead for </span>“{{.SearchModePackage}}: {{.Query}}”
+ </a>
{{template "gopher-airplane" "No results found."}}
<p class="SearchResults-emptyContentMessage">
Try searching for a package by visiting <a href="https://pkg.go.dev/search?q={{.Query}}">pkg.go.dev/search?q={{.Query}}</a>.
@@ -68,7 +69,7 @@
</h2>
{{with $r.ChipText}}<span class="go-Chip go-Chip--inverted">{{.}}</span>{{end}}
</div>
- <div class="SearchSnippet-infoLabel go-textSubtle" data-test-id="snippet-synopsis">{{$r.Synopsis}}</div>
+ {{with $r.Synopsis}}<p class="SearchSnippet-infoLabel" data-test-id="snippet-synopsis">{{.}}</p>{{end}}
<pre class="SearchSnippet-symbolCode">{{.SymbolSynopsis}}</pre>
{{template "search_metadata" $r}}
</div> <!-- SearchSnippet -->
@@ -116,9 +117,11 @@
</h2>
{{with $v.ChipText}}<span class="go-Chip go-Chip--inverted">{{.}}</span>{{end}}
</div>
- <p class="SearchSnippet-synopsis" data-test-id="snippet-synopsis">
- {{$v.Synopsis}}
- </p>
+ {{with $v.Synopsis}}
+ <p class="SearchSnippet-synopsis" data-test-id="snippet-synopsis">
+ {{.}}
+ </p>
+ {{end}}
{{template "search_metadata" $v}}
{{with .OtherMajor}}
<div>
@@ -180,7 +183,7 @@
{{define "search_pagination"}}
{{ $p := .Pagination }}
- <label class="go-Label go-Label--inline" data-test-id="pagination">
+ <label class="go-Label go-Label--inline SearchPagination" data-test-id="pagination">
Show
<select data-gtmc="search limit select" aria-label="Select number of results" name="limit" class="go-Select js-selectNav">
{{range $p.Limits}}
diff --git a/static/shared/typography/typography.css b/static/shared/typography/typography.css
index 39f4e76..6aca51d 100644
--- a/static/shared/typography/typography.css
+++ b/static/shared/typography/typography.css
@@ -35,14 +35,14 @@
h3,
h4 {
font-weight: 600;
- word-break: break-word;
line-height: 1.25em;
+ word-break: break-word;
}
h5,
h6 {
font-weight: 500;
- word-break: break-word;
line-height: 1.3em;
+ word-break: break-word;
}
hr {
@@ -110,6 +110,8 @@
color: var(--color-brand-primary);
text-decoration: none;
}
-a:hover {
+a:hover,
+a:hover > * {
+ color: var(--color-brand-primary);
text-decoration: underline;
}
diff --git a/tests/e2e/__image_snapshots__/ci/grouped-search--identifier-context-snap.png b/tests/e2e/__image_snapshots__/ci/grouped-search--identifier-context-snap.png
new file mode 100644
index 0000000..a9bed64
--- /dev/null
+++ b/tests/e2e/__image_snapshots__/ci/grouped-search--identifier-context-snap.png
Binary files differ
diff --git a/tests/e2e/__image_snapshots__/ci/grouped-search--identifier-no-results-snap.png b/tests/e2e/__image_snapshots__/ci/grouped-search--identifier-no-results-snap.png
new file mode 100644
index 0000000..ef72839
--- /dev/null
+++ b/tests/e2e/__image_snapshots__/ci/grouped-search--identifier-no-results-snap.png
Binary files differ
diff --git a/tests/e2e/__image_snapshots__/ci/grouped-search--package-http-snap.png b/tests/e2e/__image_snapshots__/ci/grouped-search--package-http-snap.png
new file mode 100644
index 0000000..135cd0c
--- /dev/null
+++ b/tests/e2e/__image_snapshots__/ci/grouped-search--package-http-snap.png
Binary files differ
diff --git a/tests/e2e/__image_snapshots__/ci/grouped-search--package-no-results-snap.png b/tests/e2e/__image_snapshots__/ci/grouped-search--package-no-results-snap.png
new file mode 100644
index 0000000..b7260f4
--- /dev/null
+++ b/tests/e2e/__image_snapshots__/ci/grouped-search--package-no-results-snap.png
Binary files differ
diff --git a/tests/e2e/grouped-search/__image_snapshots__/grouped-search--identifier-context-snap.png b/tests/e2e/grouped-search/__image_snapshots__/grouped-search--identifier-context-snap.png
deleted file mode 100644
index 49699fb..0000000
--- a/tests/e2e/grouped-search/__image_snapshots__/grouped-search--identifier-context-snap.png
+++ /dev/null
Binary files differ
diff --git a/tests/e2e/grouped-search/__image_snapshots__/grouped-search--identifier-no-results-snap.png b/tests/e2e/grouped-search/__image_snapshots__/grouped-search--identifier-no-results-snap.png
deleted file mode 100644
index b5c66d1..0000000
--- a/tests/e2e/grouped-search/__image_snapshots__/grouped-search--identifier-no-results-snap.png
+++ /dev/null
Binary files differ
diff --git a/tests/e2e/grouped-search/__image_snapshots__/grouped-search--package-http-snap.png b/tests/e2e/grouped-search/__image_snapshots__/grouped-search--package-http-snap.png
deleted file mode 100644
index c94c9a1..0000000
--- a/tests/e2e/grouped-search/__image_snapshots__/grouped-search--package-http-snap.png
+++ /dev/null
Binary files differ
diff --git a/tests/e2e/grouped-search/__image_snapshots__/grouped-search--package-no-results-snap.png b/tests/e2e/grouped-search/__image_snapshots__/grouped-search--package-no-results-snap.png
deleted file mode 100644
index 7760340..0000000
--- a/tests/e2e/grouped-search/__image_snapshots__/grouped-search--package-no-results-snap.png
+++ /dev/null
Binary files differ
diff --git a/tests/e2e/grouped-search/grouped-search.test.ts b/tests/e2e/grouped-search/grouped-search.test.ts
index c1812d7..237fd00 100644
--- a/tests/e2e/grouped-search/grouped-search.test.ts
+++ b/tests/e2e/grouped-search/grouped-search.test.ts
@@ -27,7 +27,7 @@
test('identifier: context', async () => {
const page = await pg.newPage();
await pg.fullScreenshotTest(page, {
- path: '/search?m=identifiers&q=context',
+ path: '/search?m=symbol&q=context',
prepare: search.prepare,
});
});
@@ -35,7 +35,7 @@
test('identifier: no results', async () => {
const page = await pg.newPage();
await pg.fullScreenshotTest(page, {
- path: '/search?m=identifiers&q=zhttpz',
+ path: '/search?m=symbol&q=zhttpz',
prepare: search.prepare,
});
});
