content/static: update doc sidenav with collapsible funcs and types
This change updates the “sidenav” experimental navigation with the
following changes:
+ If a type has methods or functions associated with it, it is
collapsible
+ The gray “gutter” only present in the third level of nesting
+ The build footer properly spans both columns
+ The CSS is cleaned up a bit
Change-Id: I945ccb18c91107e3384c59ffa6ead93ba158db35
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/238021
Reviewed-by: Julie Qiu <julie@golang.org>
Reviewed-by: Alexander Rakoczy <alex@golang.org>
diff --git a/content/static/css/sidenav.css b/content/static/css/sidenav.css
index cda0b07..76acf90 100644
--- a/content/static/css/sidenav.css
+++ b/content/static/css/sidenav.css
@@ -18,19 +18,13 @@
overflow-x: hidden;
overflow-y: scroll;
padding-top: 1rem;
- padding-left: 1.75rem;
+ padding-left: 0.25rem;
position: sticky;
top: 6.511rem;
}
.Documentation-toc {
margin-top: 0;
}
-.Documentation-toc a {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
.Documentation-tocItem {
display: block;
position: relative;
@@ -38,88 +32,129 @@
.Documentation-tocItem + .Documentation-tocItem {
margin-top: 0.5rem;
}
-.Documentation-tocItem--selected::before {
- border-radius: 0.375rem;
- background-color: #377d9c;
- content: '';
- display: block;
- height: 0.375rem;
- left: -1.1875rem;
- position: absolute;
- top: 0.5625rem;
- width: 0.375rem;
-}
-/* Needed for higher specificity. */
-.TypesAndFuncs .TypesAndFuncs-list,
-.TypesAndFuncs .TypesAndFuncs-list ul {
- padding-left: 0;
-}
-.TypesAndFuncs-list {
- font-size: 0.875rem;
- margin-top: 0.5rem;
-}
.is-withSideNav .Documentation-tocItem--index,
.is-withSideNav .Documentation-index {
display: none;
}
.Documentation-tocItem--constants,
.Documentation-tocItem--variables,
-.Documentation-tocItem--typesAndFuncs {
+.Documentation-tocItem--functions,
+.Documentation-tocItem--types,
+.Documentation-tocItem--notes {
display: block;
}
-
-.TypesAndFuncs-list > .TypesAndFuncs-item:first-of-type {
- margin-top: 0.5rem;
- padding-top: 0;
+.Documentation-build {
+ grid-column: span 2;
}
-.TypesAndFuncs-item {
- border-left: 0.125rem solid #f0f1f2;
- padding-left: 0.625rem;
+/* Needed for higher specificity since ul elements rendered within documentation
+ don’t have classes. */
+.DocNav .DocNav-node ul {
+ padding-left: 0;
+}
+.DocNav-node {
+ padding-left: 1.25rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
+ position: relative;
+ user-select: none;
}
-.TypesAndFuncs > .TypesAndFuncs-item:first-of-type {
- margin-top: 0.5rem;
- padding-top: 0;
+.DocNav-node--selected {
+ color: var(--gray-1);
+ font-weight: 500;
}
-.TypesAndFuncs-item--noBorder {
- border-left: 0;
- padding: 0;
+.DocNav-node--selected .DocNav-node:not(.DocNav-node--selected) {
+ color: var(--gray-2);
+ font-weight: 400;
}
-.TypesAndFuncs-item .TypesAndFuncs-item {
- border-left: 0.125rem solid #f0f1f2;
- padding-left: 1.25rem;
+.DocNav-node--selected::before {
+ border-radius: 50%;
+ background-color: var(--turq-dark);
+ content: '';
+ display: block;
+ height: 0.3125rem;
+ left: 0.4688rem;
+ position: absolute;
+ top: 0.6875rem;
+ width: 0.3125rem;
}
-.TypesAndFuncs-summary {
+.DocNav-node .DocNav-node--selected::before {
+ left: 0.3125rem;
+ top: 0.75rem;
+}
+.DocNav-node--expandable.DocNav-node--selected::before {
+ display: none;
+}
+.DocNav-node .DocNav-node {
+ font-size: 0.875rem;
+}
+.DocNav-node .DocNav-node .DocNav-node {
+ border-left: 2px solid var(--gray-9);
+ padding-left: 0.5rem;
+}
+.DocNav-node .DocNav-node .DocNav-node--selected::before {
+ display: none;
+}
+.DocNav-node .DocNav-node .DocNav-node--selected {
+ border-left: 2px solid var(--turq-dark);
+}
+.DocNav a,
+.DocNav a:link,
+.DocNav a:visited {
+ color: var(--gray-2);
+ display: block;
+ opacity: 1;
+ overflow: hidden;
+ text-decoration: none;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.DocNav a:hover {
+ color: var(--gray-1);
+}
+.DocNav summary {
cursor: pointer;
list-style-type: none;
outline: none;
position: relative;
}
-.TypesAndFuncs-summary::marker {
+.DocNav summary::marker {
display: none;
}
-.TypesAndFuncs-summary::-webkit-details-marker {
+.DocNav summary::-webkit-details-marker {
display: none;
}
-.TypesAndFuncs-summary::before {
- border-bottom: 0.3125rem solid transparent;
- border-left: 0.3125rem solid #606368;
+.DocNav summary::before {
+ border-bottom: 0.25rem solid transparent;
+ border-left: 0.25rem solid #606368;
border-right: 0;
- border-top: 0.3125rem solid transparent;
+ border-top: 0.25rem solid transparent;
content: '';
display: block;
height: 0;
- left: -1.125rem;
+ left: -0.75rem;
position: absolute;
- top: 0.4375rem;
+ top: 0.5rem;
+ transition: transform 0.1s linear;
width: 0;
}
-.TypesAndFuncs[open] .TypesAndFuncs-summary::before {
- border-bottom: 0;
- border-left: 0.3125rem solid transparent;
- border-right: 0.3125rem solid transparent;
- border-top: 0.3125rem solid #606368;
- left: -1.3125rem;
- top: 0.625rem;
+/* Expandable nodes at this level have smaller text, so adjust for that. */
+.DocNav details details summary::before {
+ left: -0.875rem;
+ top: 0.5625rem;
+}
+.DocNav details[open] > summary {
+ margin-bottom: 0.375em;
+}
+.DocNav details[open] > summary::before {
+ transform: rotate(90deg);
+}
+/* Added to increase hit target on triangle above. */
+.DocNav summary::after {
+ content: '';
+ display: block;
+ height: 100%;
+ left: -1.875rem;
+ position: absolute;
+ top: 0;
+ width: 2rem;
}
diff --git a/content/static/css/stylesheet.css b/content/static/css/stylesheet.css
index 58b556a..300c415 100644
--- a/content/static/css/stylesheet.css
+++ b/content/static/css/stylesheet.css
@@ -18,7 +18,7 @@
--turq-light: #5dc9e2;
--turq-med: #00add8;
- --turq-text: #007d9c;
+ --turq-dark: #007d9c;
--blue: #92e1f3;
--green: #00a29c;
@@ -45,7 +45,7 @@
a,
a:link,
a:visited {
- color: var(--turq-text);
+ color: var(--turq-dark);
text-decoration: none;
}
a:hover {
@@ -245,7 +245,7 @@
z-index: 1;
}
.Site-header--dark {
- background: var(--turq-text);
+ background: var(--turq-dark);
border: none;
}
:target::before {
@@ -562,7 +562,7 @@
height: 2.5rem;
font-size: 1rem;
border-radius: 1rem;
- background-color: var(--turq-text);
+ background-color: var(--turq-dark);
color: white;
padding: 0rem 2rem;
}
@@ -832,7 +832,7 @@
font-size: 1.5rem;
}
.Documentation a {
- color: var(--turq-text);
+ color: var(--turq-dark);
text-decoration: none;
}
.Documentation a:hover {
@@ -891,7 +891,9 @@
.Documentation-tocItem--constants,
.Documentation-tocItem--variables,
-.Documentation-tocItem--funcsAndTypes {
+.Documentation-tocItem--functions,
+.Documentation-tocItem--types,
+.Documentation-tocItem--notes {
display: none;
}
@@ -915,13 +917,13 @@
margin: 1rem 0;
}
.Documentation-exampleDetailsHeader {
- color: var(--turq-text);
+ color: var(--turq-dark);
text-decoration: none;
outline: none;
margin-bottom: 2rem;
}
.Documentation .example-header {
- color: var(--turq-text);
+ color: var(--turq-dark);
font-size: 1rem;
outline: none;
padding-top: 0.5rem;
@@ -1041,7 +1043,7 @@
background: none;
border-radius: 0.625rem;
border: 0.0625rem solid var(--gray-8);
- color: var(--turq-text);
+ color: var(--turq-dark);
font-size: 1rem;
max-width: 6.25rem;
padding: 0.625rem;
@@ -1073,7 +1075,7 @@
}
.JumpDialog .JumpDialog-active {
color: var(--white);
- background-color: var(--turq-text);
+ background-color: var(--turq-dark);
}
.ShortcutsDialog-key {
diff --git a/content/static/html/base.tmpl b/content/static/html/base.tmpl
index b3edc9a..f7d7086 100644
--- a/content/static/html/base.tmpl
+++ b/content/static/html/base.tmpl
@@ -10,7 +10,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Description" content="Go is an open source programming language that makes it easy to build simple, reliable, and efficient software.">
-<link href="https://fonts.googleapis.com/css?family=Work+Sans:600|Roboto:400,700|Source+Code+Pro" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Work+Sans:600|Roboto:400,500,700|Source+Code+Pro" rel="stylesheet">
<link href="/static/css/stylesheet.css?version={{.AppVersionLabel}}" rel="stylesheet">
{{if (.Experiments.IsActive "sidenav")}}
<link href="/static/css/sidenav.css?version={{.AppVersionLabel}}" rel="stylesheet">
diff --git a/internal/fetch/dochtml/template.go b/internal/fetch/dochtml/template.go
index d7860d9..aa44e68 100644
--- a/internal/fetch/dochtml/template.go
+++ b/internal/fetch/dochtml/template.go
@@ -36,79 +36,98 @@
).Parse(`{{- "" -}}
{{- if or .Doc .Consts .Vars .Funcs .Types .Examples.List -}}
<nav class="Documentation-nav">
- <ul class="Documentation-toc">{{"\n" -}}
- {{- if or .Doc (index .Examples.Map "") -}}
- <li class="Documentation-tocItem Documentation-tocItem--selected">
- <a href="#pkg-overview">Overview</a>
- </li>{{"\n" -}}
- {{- end -}}
- {{- if or .Consts .Vars .Funcs .Types .Examples.List -}}
- <li class="Documentation-tocItem Documentation-tocItem--index"><a href="#pkg-index">Index</a></li>{{"\n" -}}
- {{- end -}}
- {{- if .Examples.List -}}
- <li class="Documentation-tocItem"><a href="#pkg-examples">Examples</a></li>{{"\n" -}}
- {{- end -}}
- {{- if .Consts -}}
- <li class="Documentation-tocItem Documentation-tocItem--constants">
- <a href="#pkg-constants">Constants</a>
- </li>{{"\n"}}
- {{- end -}}
- {{- if .Vars -}}
- <li class="Documentation-tocItem Documentation-tocItem--variables">
- <a href="#pkg-variables">Variables</a>
- </li>{{"\n"}}
- {{- end -}}
+ <ul class="Documentation-toc DocNav">
+ {{- if or .Doc (index .Examples.Map "") -}}
+ <li class="Documentation-tocItem DocNav-node DocNav-node--selected">
+ <a href="#pkg-overview">Overview</a>
+ </li>
+ {{- end -}}
+ {{- if or .Consts .Vars .Funcs .Types .Examples.List -}}
+ <li class="Documentation-tocItem Documentation-tocItem--index DocNav-node">
+ <a href="#pkg-index">Index</a>
+ </li>
+ {{- end -}}
+ {{- if .Examples.List -}}
+ <li class="Documentation-tocItem DocNav-node">
+ <a href="#pkg-examples">Examples</a>
+ </li>
+ {{- end -}}
+ {{- if .Consts -}}
+ <li class="Documentation-tocItem Documentation-tocItem--constants DocNav-node">
+ <a href="#pkg-constants">Constants</a>
+ </li>{{"\n"}}
+ {{- end -}}
+ {{- if .Vars -}}
+ <li class="Documentation-tocItem Documentation-tocItem--variables DocNav-node">
+ <a href="#pkg-variables">Variables</a>
+ </li>{{"\n"}}
+ {{- end -}}
- <li class="Documentation-tocItem Documentation-tocItem--funcsAndTypes">
- <details class="TypesAndFuncs" open>
- <summary class="TypesAndFuncs-summary">Functions</summary>
- <ul class="TypesAndFuncs-list">
- {{- range .Funcs -}}
- <li class="TypesAndFuncs-item">
- <a href="#{{.Name}}" title="{{render_short_synopsis .Decl}}">{{render_short_synopsis .Decl}}</a>
- </li>
- {{- end -}}
- </ul>
- </details>
- </li>
- <li class="Documentation-tocItem Documentation-tocItem--funcsAndTypes">
- <details class="TypesAndFuncs" open>
- <summary class="TypesAndFuncs-summary">Types</summary>
- <ul class="TypesAndFuncs-list">
- {{- range .Types -}}
- {{- $tname := .Name -}}
- <li class="TypesAndFuncs-item"><a href="#{{$tname}}">type {{$tname}}</a></li>{{"\n"}}
- {{- with .Funcs -}}
- <li class="TypesAndFuncs-item TypesAndFuncs-item--noBorder">
- <ul>
- {{range .}}
- <li class="TypesAndFuncs-item">
- <a href="#{{.Name}}" title="{{render_short_synopsis .Decl}}">{{render_short_synopsis .Decl}}</a>
- </li>
- {{end}}
- </ul>
- </li>
- {{- end -}}
- {{- with .Methods -}}
- <li class="TypesAndFuncs-item TypesAndFuncs-item--noBorder">
- <ul>
- {{range .}}
- <li class="TypesAndFuncs-item">
- <a href="#{{$tname}}.{{.Name}}" title="{{render_short_synopsis .Decl}}">{{render_short_synopsis .Decl}}</a>
- </li>
- {{end}}
- </ul>
- </li>
- {{- end -}}
- {{- end -}}
- </ul>
- </details>
- </li>
+ {{if .Funcs}}
+ <li class="Documentation-tocItem Documentation-tocItem--functions DocNav-node DocNav-node--expandable">
+ <details open>
+ <summary>Functions</summary>
+ <ul>
+ {{- range .Funcs -}}
+ <li class="DocNav-node">
+ <a href="#{{.Name}}" title="{{render_short_synopsis .Decl}}">{{render_short_synopsis .Decl}}</a>
+ </li>
+ {{- end -}}
+ </ul>
+ </details>
+ </li>
+ {{end}}
+ {{if .Types}}
+ <li class="Documentation-tocItem Documentation-tocItem--types DocNav-node DocNav-node--expandable">
+ <details open>
+ <summary>Types</summary>
+ <ul>
+ {{range .Types}}
+ {{$tname := .Name}}
+ <li class="DocNav-node DocNav-node--expandable">
+ {{if or .Funcs .Methods}}
+ <details open>
+ <summary>
+ <a href="#{{$tname}}">type {{$tname}}</a>
+ </summary>
+ <ul>
+ {{range .Funcs}}
+ <li class="DocNav-node">
+ <a href="#{{.Name}}" title="{{render_short_synopsis .Decl}}">{{render_short_synopsis .Decl}}</a>
+ </li>
+ {{end}}
+ {{range .Methods}}
+ <li class="DocNav-node">
+ <a href="#{{$tname}}.{{.Name}}" title="{{render_short_synopsis .Decl}}">{{render_short_synopsis .Decl}}</a>
+ </li>
+ {{end}}
+ </ul>
+ </details>
+ {{else}}
+ <a href="#{{$tname}}">type {{$tname}}</a>
+ {{end}} {{/* if or .Funcs .Methods */}}
+ </li>
+ {{end}} {{/* range .Types */}}
+ </ul>
+ </details>
+ </li>
+ {{end}}
- {{- range $marker, $item := .Notes -}}
- <li><a href="#pkg-note-{{$marker}}">{{$marker}}s</a></li>
- {{- end -}}
- </ul>{{"\n" -}}
+ {{if .Notes}}
+ <li class="Documentation-tocItem Documentation-tocItem--notes DocNav-node DocNav-node--expandable">
+ <details open>
+ <summary>Notes</summary>
+ <ul>
+ {{range $marker, $item := .Notes}}
+ <li class="DocNav-node">
+ <a href="#pkg-note-{{$marker}}">{{$marker}}s</a>
+ </li>
+ {{end}}
+ </ul>
+ </details>
+ </li>
+ {{end}}
+ </ul>
</nav>
{{- end -}}
