static/frontend/search: search UI improvements
- Decreased whitespace within search result.
- Decreased padding between search results.
- Fixed more-results anchor link placement.
Change-Id: If96251f9b47104b1d3e28d4672f3422d22dc0067
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/347565
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>
diff --git a/static/frontend/search/search.css b/static/frontend/search/search.css
index 0bd1673..321b209 100644
--- a/static/frontend/search/search.css
+++ b/static/frontend/search/search.css
@@ -29,8 +29,8 @@
.SearchSnippet {
display: flex;
flex-direction: column;
- gap: 0.5rem;
- padding: 0 0 3.5rem 0;
+ gap: 0.375rem;
+ padding: 0 0 2.75rem 0;
}
.SearchSnippet h2 {
font-size: 1.25rem;
@@ -50,6 +50,7 @@
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
+ margin-top: -0.0625rem;
}
.SearchSnippet-sub {
align-items: center;
diff --git a/static/frontend/search/search.min.css b/static/frontend/search/search.min.css
index 86f7249..dafb220 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-summary{color:var(--color-text-subtle);display:flex;flex-direction:column;gap:1rem;justify-content:space-between;line-height:1.5rem;margin:-.25rem 0 .25rem}@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}
+.SearchResults{font-size:.875rem}.SearchResults-summary{color:var(--color-text-subtle);display:flex;flex-direction:column;gap:1rem;justify-content:space-between;line-height:1.5rem;margin:-.25rem 0 .25rem}@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:.375rem;padding:0 0 2.75rem}.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;margin-top:-.0625rem}.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 a84f4fe..3bed66e 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-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: -0.25rem 0 0.25rem 0;\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,+BACA,aACA,sBACA,SACA,8BACA,mBAfF,wBAkBA,0CACE,uBACE,qBACA,oBAGJ,mCACE,kBAGF,eACE,aACA,sBACA,UA/BF,mBAkCA,kBACE,kBACA,gBAEF,4BAtCA,iBAyCA,wBACE,4BACA,oBACA,qBACA,gBACA,uBAEF,yBACE,aACA,eACA,eAEF,mBACE,mBACA,aACA,eACA,UAEF,0BACE,iBA5DF,gBA+DA,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-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: -0.25rem 0 0.25rem 0;\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.375rem;\n padding: 0 0 2.75rem 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 margin-top: -0.0625rem;\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,+BACA,aACA,sBACA,SACA,8BACA,mBAfF,wBAkBA,0CACE,uBACE,qBACA,oBAGJ,mCACE,kBAGF,eACE,aACA,sBACA,YA/BF,oBAkCA,kBACE,kBACA,gBAEF,4BAtCA,iBAyCA,wBACE,4BACA,oBACA,qBACA,gBACA,uBAEF,yBACE,aACA,eACA,eACA,qBAEF,mBACE,mBACA,aACA,eACA,UAEF,0BACE,iBA7DF,gBAgEA,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 e172212..02a640c 100644
--- a/static/frontend/search/search.tmpl
+++ b/static/frontend/search/search.tmpl
@@ -97,7 +97,7 @@
{{$query := .Query}}
{{range $i, $v := .Results}}
{{$moreLink := eq $i (subtract $.Pagination.DefaultLimit 1)}}
- <div class="SearchSnippet" {{if eq $i 9}}id="more-results"{{end}}>
+ <div class="SearchSnippet" {{if $moreLink}}id="more-results"{{end}}>
<div class="SearchSnippet-headerContainer">
<h2>
<a href="/{{$v.PackagePath}}" data-gtmc="search result" data-gtmv="{{$i}}"
