internal,static: search design review updates
Change-Id: I3686eae51d687edb3b8afda4dead7b3469a04019
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/345512
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Julie Qiu <julie@golang.org>
TryBot-Result: kokoro <noreply+kokoro@google.com>
diff --git a/internal/frontend/paginate.go b/internal/frontend/paginate.go
index 5114597..37ac83d 100644
--- a/internal/frontend/paginate.go
+++ b/internal/frontend/paginate.go
@@ -12,6 +12,8 @@
"golang.org/x/pkgsite/internal/log"
)
+const maxLimit = 100
+
// pagination holds information related to paginated display. It is intended to
// be part of a view model struct.
//
@@ -20,7 +22,8 @@
// 1, 2, 3, .... Each page except possibly the last has the same number of results.
type pagination struct {
baseURL *url.URL // URL common to all pages
- Limit int // the maximum number of results on a page
+ Limit int // the number of results requested on a page
+ MaxLimit int // the maximum number of results allowed for any request
ResultCount int // number of results on this page
TotalCount int // total number of results
Approximate bool // whether or not the total count is approximate
@@ -69,6 +72,7 @@
ResultCount: resultCount,
Offset: params.offset(),
Limit: params.limit,
+ MaxLimit: maxLimit,
Page: params.page,
PrevPage: prev(params.page),
NextPage: next(params.page, params.limit, totalCount),
diff --git a/internal/frontend/search_test.go b/internal/frontend/search_test.go
index 55580c5..3958ad4 100644
--- a/internal/frontend/search_test.go
+++ b/internal/frontend/search_test.go
@@ -176,6 +176,7 @@
PrevPage: 0,
NextPage: 0,
Limit: 20,
+ MaxLimit: 100,
Page: 1,
Pages: []int{1},
Limits: []int{10, 30, 100},
@@ -203,6 +204,7 @@
PrevPage: 0,
NextPage: 0,
Limit: 20,
+ MaxLimit: 100,
Page: 1,
Pages: []int{1},
Limits: []int{10, 30, 100},
diff --git a/internal/frontend/server_test.go b/internal/frontend/server_test.go
index 47f8b48..771fea4 100644
--- a/internal/frontend/server_test.go
+++ b/internal/frontend/server_test.go
@@ -1136,7 +1136,7 @@
urlPath: fmt.Sprintf("/search?q=%s", sample.PackageName),
wantStatusCode: http.StatusOK,
want: in("",
- in(`[data-test-id="pagination"]`, hasText("Show"), hasText("results")),
+ in(`[data-test-id="pagination"]`, hasText("See search help")),
in(`[data-test-id="snippet-title"]`,
href("/"+sample.ModulePath+"/foo"),
hasText("foo"))),
@@ -1146,9 +1146,7 @@
urlPath: fmt.Sprintf("/search?q=%s", sample.PackageName),
wantStatusCode: http.StatusOK,
want: in("",
- in(`[data-test-id="pagination"]`,
- hasText("Show"),
- hasText("results")),
+ in(`[data-test-id="pagination"]`, hasText("See search help")),
notIn(".Pagination-navInner")),
},
{
diff --git a/static/frontend/search/search.css b/static/frontend/search/search.css
index 079f53e..6295c84 100644
--- a/static/frontend/search/search.css
+++ b/static/frontend/search/search.css
@@ -37,10 +37,11 @@
display: flex;
flex-direction: column;
gap: 0.5rem;
- padding: 0 0 2.5rem 0;
+ padding: 0 0 3.5rem 0;
}
.SearchSnippet h2 {
font-size: 1.25rem;
+ font-weight: 400;
}
.SearchSnippet:last-of-type {
padding: 0 0 1rem 0;
diff --git a/static/frontend/search/search.min.css b/static/frontend/search/search.min.css
index e7923f9..38956cc 100644
--- a/static/frontend/search/search.min.css
+++ b/static/frontend/search/search.min.css
@@ -3,5 +3,5 @@
* Use of this source code is governed by a BSD-style
* license that can be found in the LICENSE file.
*/
-.SearchResults{font-size:.875rem}.SearchResults-instead{font-size:1.25rem;margin-top:-.5rem}.SearchResults-insteadPrefix{color:var(--color-text)}.SearchResults-summary{color:var(--color-text-subtle);display:flex;flex-direction:column;gap:1rem;justify-content:space-between;line-height:1.5rem;margin-top:.5rem}@media only screen and (min-width: 64rem){.SearchResults-summary{align-items:baseline;flex-direction:row}}.SearchResults-emptyContentMessage{text-align:center}.SearchSnippet{display:flex;flex-direction:column;gap:.5rem;padding:0 0 2.5rem}.SearchSnippet h2{font-size:1.25rem}.SearchSnippet:last-of-type{padding:0 0 1rem}.SearchSnippet-synopsis{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}.SearchSnippet-infoLabel{display:flex;flex-wrap:wrap;gap:.5rem 1rem}.SearchSnippet-sub{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.SearchSnippet-symbolCode{font-size:.75rem;margin:.25rem 0}.SearchSnippet-sub a[data-hidden]{display:none}.SearchSnippet-sub a{color:var(--color-text-subtle)}.SearchSnippet-sub a:hover{color:var(--color-brand-primary)}.SearchSnippet-headerContainer{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.SearchSnippet-header-name{color:var(--color-text)}.SearchSnippet-header-dash{color:var(--color-text-subtle)}.SearchSnippet-symbolKind{color:var(--color-text)}.SearchPagination{height:1.5rem}
+.SearchResults{font-size:.875rem}.SearchResults-instead{font-size:1.25rem;margin-top:-.5rem}.SearchResults-insteadPrefix{color:var(--color-text)}.SearchResults-summary{color:var(--color-text-subtle);display:flex;flex-direction:column;gap:1rem;justify-content:space-between;line-height:1.5rem;margin-top:.5rem}@media only screen and (min-width: 64rem){.SearchResults-summary{align-items:baseline;flex-direction:row}}.SearchResults-emptyContentMessage{text-align:center}.SearchSnippet{display:flex;flex-direction:column;gap:.5rem;padding:0 0 3.5rem}.SearchSnippet h2{font-size:1.25rem;font-weight:400}.SearchSnippet:last-of-type{padding:0 0 1rem}.SearchSnippet-synopsis{-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}.SearchSnippet-infoLabel{display:flex;flex-wrap:wrap;gap:.5rem 1rem}.SearchSnippet-sub{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.SearchSnippet-symbolCode{font-size:.75rem;margin:.25rem 0}.SearchSnippet-sub a[data-hidden]{display:none}.SearchSnippet-sub a{color:var(--color-text-subtle)}.SearchSnippet-sub a:hover{color:var(--color-brand-primary)}.SearchSnippet-headerContainer{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.SearchSnippet-header-name{color:var(--color-text)}.SearchSnippet-header-dash{color:var(--color-text-subtle)}.SearchSnippet-symbolKind{color:var(--color-text)}.SearchPagination{height:1.5rem}
/*# sourceMappingURL=search.min.css.map */
diff --git a/static/frontend/search/search.min.css.map b/static/frontend/search/search.min.css.map
index f38574d..07893ad 100644
--- a/static/frontend/search/search.min.css.map
+++ b/static/frontend/search/search.min.css.map
@@ -1,7 +1,7 @@
{
"version": 3,
"sources": ["search.css"],
- "sourcesContent": ["/*\n * Copyright 2021 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\n.SearchResults {\n font-size: 0.875rem;\n}\n.SearchResults-instead {\n font-size: 1.25rem;\n margin-top: -0.5rem;\n}\n.SearchResults-insteadPrefix {\n color: var(--color-text);\n}\n.SearchResults-summary {\n color: var(--color-text-subtle);\n display: flex;\n flex-direction: column;\n gap: 1rem;\n justify-content: space-between;\n line-height: 1.5rem;\n margin-top: 0.5rem;\n}\n@media only screen and (min-width: 64rem) {\n .SearchResults-summary {\n align-items: baseline;\n flex-direction: row;\n }\n}\n.SearchResults-emptyContentMessage {\n text-align: center;\n}\n\n.SearchSnippet {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0 0 2.5rem 0;\n}\n.SearchSnippet h2 {\n font-size: 1.25rem;\n}\n.SearchSnippet:last-of-type {\n padding: 0 0 1rem 0;\n}\n.SearchSnippet-synopsis {\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.SearchSnippet-infoLabel {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem 1rem;\n}\n.SearchSnippet-sub {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n.SearchSnippet-symbolCode {\n font-size: 0.75rem;\n margin: 0.25rem 0;\n}\n.SearchSnippet-sub a[data-hidden] {\n display: none;\n}\n.SearchSnippet-sub a {\n color: var(--color-text-subtle);\n}\n.SearchSnippet-sub a:hover {\n color: var(--color-brand-primary);\n}\n.SearchSnippet-headerContainer {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n.SearchSnippet-header-name {\n color: var(--color-text);\n}\n.SearchSnippet-header-dash {\n color: var(--color-text-subtle);\n}\n.SearchSnippet-symbolKind {\n color: var(--color-text);\n}\n.SearchPagination {\n height: 1.5rem;\n}\n"],
- "mappings": ";;;;;AAMA,eACE,kBAEF,uBACE,kBACA,kBAEF,6BACE,wBAEF,uBACE,+BACA,aACA,sBACA,SACA,8BACA,mBACA,iBAEF,0CACE,uBACE,qBACA,oBAGJ,mCACE,kBAGF,eACE,aACA,sBACA,UAtCF,mBAyCA,kBACE,kBAEF,4BA5CA,iBA+CA,wBACE,4BACA,oBACA,qBACA,gBACA,uBAEF,yBACE,aACA,eACA,eAEF,mBACE,mBACA,aACA,eACA,UAEF,0BACE,iBAlEF,gBAqEA,kCACE,aAEF,qBACE,+BAEF,2BACE,iCAEF,+BACE,mBACA,aACA,eACA,UAEF,2BACE,wBAEF,2BACE,+BAEF,0BACE,wBAEF,kBACE",
+ "sourcesContent": ["/*\n * Copyright 2021 The Go Authors. All rights reserved.\n * Use of this source code is governed by a BSD-style\n * license that can be found in the LICENSE file.\n */\n\n.SearchResults {\n font-size: 0.875rem;\n}\n.SearchResults-instead {\n font-size: 1.25rem;\n margin-top: -0.5rem;\n}\n.SearchResults-insteadPrefix {\n color: var(--color-text);\n}\n.SearchResults-summary {\n color: var(--color-text-subtle);\n display: flex;\n flex-direction: column;\n gap: 1rem;\n justify-content: space-between;\n line-height: 1.5rem;\n margin-top: 0.5rem;\n}\n@media only screen and (min-width: 64rem) {\n .SearchResults-summary {\n align-items: baseline;\n flex-direction: row;\n }\n}\n.SearchResults-emptyContentMessage {\n text-align: center;\n}\n\n.SearchSnippet {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n padding: 0 0 3.5rem 0;\n}\n.SearchSnippet h2 {\n font-size: 1.25rem;\n font-weight: 400;\n}\n.SearchSnippet:last-of-type {\n padding: 0 0 1rem 0;\n}\n.SearchSnippet-synopsis {\n -webkit-box-orient: vertical;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.SearchSnippet-infoLabel {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem 1rem;\n}\n.SearchSnippet-sub {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n.SearchSnippet-symbolCode {\n font-size: 0.75rem;\n margin: 0.25rem 0;\n}\n.SearchSnippet-sub a[data-hidden] {\n display: none;\n}\n.SearchSnippet-sub a {\n color: var(--color-text-subtle);\n}\n.SearchSnippet-sub a:hover {\n color: var(--color-brand-primary);\n}\n.SearchSnippet-headerContainer {\n align-items: center;\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n.SearchSnippet-header-name {\n color: var(--color-text);\n}\n.SearchSnippet-header-dash {\n color: var(--color-text-subtle);\n}\n.SearchSnippet-symbolKind {\n color: var(--color-text);\n}\n.SearchPagination {\n height: 1.5rem;\n}\n"],
+ "mappings": ";;;;;AAMA,eACE,kBAEF,uBACE,kBACA,kBAEF,6BACE,wBAEF,uBACE,+BACA,aACA,sBACA,SACA,8BACA,mBACA,iBAEF,0CACE,uBACE,qBACA,oBAGJ,mCACE,kBAGF,eACE,aACA,sBACA,UAtCF,mBAyCA,kBACE,kBACA,gBAEF,4BA7CA,iBAgDA,wBACE,4BACA,oBACA,qBACA,gBACA,uBAEF,yBACE,aACA,eACA,eAEF,mBACE,mBACA,aACA,eACA,UAEF,0BACE,iBAnEF,gBAsEA,kCACE,aAEF,qBACE,+BAEF,2BACE,iCAEF,+BACE,mBACA,aACA,eACA,UAEF,2BACE,wBAEF,2BACE,+BAEF,0BACE,wBAEF,kBACE",
"names": []
}
diff --git a/static/frontend/search/search.tmpl b/static/frontend/search/search.tmpl
index 124e66c..e78c83e 100644
--- a/static/frontend/search/search.tmpl
+++ b/static/frontend/search/search.tmpl
@@ -35,7 +35,6 @@
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}}
@@ -87,7 +86,6 @@
<div>
Showing <strong>{{len .Results}}</strong> modules with matching packages. <a href="/search-help">Search help</a>
</div>
- {{template "search_pagination" .}}
</div>
{{end}}
{{if eq (len .Results) 0}}
@@ -182,14 +180,13 @@
{{end}}
{{define "search_pagination"}}
- {{ $p := .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}}
- <option value="{{$p.URL . $.SearchMode ""}}"{{if eq . $p.Limit}} selected{{end}}>{{.}}</option>
- {{end}}
- </select>
- results
- </label>
+ {{$p := .Pagination}}
+ <div class="SearchPagination" data-test-id="pagination">
+ Didn't find what you were looking for?
+ {{- if and (lt $p.Limit $p.MaxLimit) (eq $p.Limit (len .Results)) -}}
+ <a href="{{$p.URL $p.MaxLimit $.SearchMode ""}}" data-gtmc="search more results">Show more results.</a>
+ {{- else -}}
+ See <a href="/search-help" data-gtmc="search help"> search help.</a>
+ {{- end -}}
+ </div>
{{end}}
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..557a09a
--- /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..05f4dbd
--- /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
