content/static: add unit metadata to fixed nav
Replaces tab navigation in fixed nav with unit metadata links.
Change-Id: Ib21bd7a1b473ac9af0f49220dd77db79c5d1960d
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/256819
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/content/static/css/unit_fixed_header.css b/content/static/css/unit_fixed_header.css
index 6d64965..85ec74e 100644
--- a/content/static/css/unit_fixed_header.css
+++ b/content/static/css/unit_fixed_header.css
@@ -81,7 +81,7 @@
}
@media only screen and (min-width: 37.5rem) {
.UnitFixedHeader-container {
- padding: 0 1rem 0 1.5rem;
+ padding: 0 1.5rem;
}
.UnitFixedHeader-logo {
height: 1.9541rem;
@@ -139,13 +139,18 @@
cursor: not-allowed;
}
.UnitFixedHeader-overflowContainer {
- display: none;
+ display: block;
height: 1.5rem;
position: absolute;
right: 0.0625rem;
top: 1.125rem;
width: 1.5rem;
}
+@media only screen and (min-width: 64rem) {
+ .UnitFixedHeader-overflowContainer {
+ display: none;
+ }
+}
.UnitFixedHeader-overflowingTabList.is-overflowing {
padding-right: 1.5rem;
}
@@ -178,3 +183,41 @@
.UnitFixedHeader-overflowSelect option {
color: var(--gray-1);
}
+.UnitHeaderFixed-detail {
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ margin-left: auto;
+ white-space: nowrap;
+}
+.UnitHeaderFixed-detailItem {
+ color: var(--gray-4);
+ display: none;
+ font-size: 0.875rem;
+}
+.UnitHeaderFixed-detailItem img {
+ margin-right: 0.5rem;
+ vertical-align: middle;
+}
+.UnitHeaderFixed-detailItem a > span {
+ color: var(--gray-4);
+}
+.UnitHeaderFixed-detailItem:not(:first-of-type):before {
+ content: '|';
+ padding: 1rem;
+}
+@media only screen and (max-width: 52rem) {
+ .UnitHeaderFixed-detailItem:not(:first-of-type):before {
+ padding: 0.5rem;
+ }
+}
+@media only screen and (min-width: 64rem) {
+ .UnitHeaderFixed-detailItem--md {
+ display: block;
+ }
+}
+@media only screen and (min-width: 80rem) {
+ .UnitHeaderFixed-detailItem--lg {
+ display: block;
+ }
+}
diff --git a/content/static/css/unit_header.css b/content/static/css/unit_header.css
index 193c967..f4d5d23 100644
--- a/content/static/css/unit_header.css
+++ b/content/static/css/unit_header.css
@@ -8,7 +8,7 @@
border-bottom: 0.0625rem solid var(--gray-8);
margin-left: -1.5rem;
padding: 0.5rem 1.5rem 0.5rem 1.5rem;
- width: calc(100vw - 1rem);
+ width: 100vw;
}
@media only screen and (max-width: 52rem) {
.UnitHeader {
diff --git a/content/static/html/helpers/_unit_fixed_header.tmpl b/content/static/html/helpers/_unit_fixed_header.tmpl
index eefd28d..d1b2bc2 100644
--- a/content/static/html/helpers/_unit_fixed_header.tmpl
+++ b/content/static/html/helpers/_unit_fixed_header.tmpl
@@ -13,17 +13,6 @@
<div class="UnitFixedHeader-moduleInfo">
<span class="UnitFixedHeader-title">
{{if ne .PageType "std"}}
- <span class="UnitFixedHeader-titleType">
- {{if eq .PageType "mod"}}
- Module
- {{else if eq .PageType "dir"}}
- Directory
- {{else if eq .PageType "pkg"}}
- Package
- {{else if eq .PageType "cmd"}}
- Command
- {{end}}
- </span>
<span class="UnitFixedHeader-titleName">{{.Title}}</span>
{{else}}
<span class="UnitFixedHeader-titleType">Standard library</span>
@@ -40,14 +29,48 @@
</button>
{{end}}
{{end}}
- <div class="UnitFixedHeader-version">{{.DisplayVersion}}</div>
</div>
- <div class="UnitFixedHeader-overflowingTabList js-overflowingTabList">
- <div role="tablist">
- {{range .Tabs}}
- <a role="tab" tabindex="-1" href="{{$.CanonicalURLPath}}?tab={{.Name}}">
- {{.DisplayName}}
- </a>
+ <div class="UnitFixedHeader-overflowingTabList">
+ <div class="UnitHeaderFixed-detail">
+ <span class="UnitHeaderFixed-detailItem UnitHeaderFixed-detailItem--md">
+ <img height="16px" width="16px" src="/static/img/pkg-icon-arrowBranch_16x16.svg">
+ <a href="?tab=versions" tabindex="-1">Version {{.DisplayVersion}}</a>
+ <!-- Do not reformat the data attributes of the following div: the server uses a regexp to extract them. -->
+ <div class="DetailsHeader-badge $$GODISCOVERY_LATESTMINORCLASS$$"
+ data-version="{{.LinkVersion}}" data-mpath="{{.Unit.ModulePath}}" data-ppath="{{.Unit.Path}}" data-pagetype="{{.PageType}}">
+ <span>Latest</span>
+ <a href="{{.LatestURL}}">Go to latest</a>
+ </div>
+ </span>
+ <span class="UnitHeaderFixed-detailItem UnitHeaderFixed-detailItem--md">
+ <img height="16px" width="16px" src="/static/img/pkg-icon-circularArrows_16x16.svg">
+ {{.LastCommitTime}}
+ </span>
+ <span class="UnitHeaderFixed-detailItem UnitHeaderFixed-detailItem--md">
+ <img height="16px" width="16px" src="/static/img/pkg-icon-scale_16x16.svg">
+ {{range $i, $e := .Licenses}}
+ {{if $i}}, {{end}}
+ <a href="{{$.CanonicalURLPath}}?tab=licenses#{{.Anchor}}" tabindex="-1">{{$e.Type}}</a>
+ {{else}}
+ <span>None detected</span>
+ <a href="/license-policy" class="Disclaimer-link" tabindex="-1">
+ <em>not legal advice</em>
+ </a>
+ {{end}}
+ </span>
+ {{if .Unit.IsPackage}}
+ <span class="UnitHeaderFixed-detailItem UnitHeaderFixed-detailItem--lg">
+ <img height="16px" width="16px" src="/static/img/pkg-icon-boxClosed_16x16.svg">
+ <a href="{{$.CanonicalURLPath}}?tab=imports" tabindex="-1">
+ {{len .Unit.Imports}} <span>Imports</span>
+ </a>
+ </span>
+ <span class="UnitHeaderFixed-detailItem UnitHeaderFixed-detailItem--lg">
+ <img height="16px" width="16px" src="/static/img/pkg-icon-boxClosed_16x16.svg">
+ <a href="{{$.CanonicalURLPath}}?tab=importedby" tabindex="-1">
+ {{len .Unit.Imports}} <span>Imported by</span>
+ </a>
+ </span>
{{end}}
</div>
<div class="UnitFixedHeader-overflowContainer">
@@ -55,7 +78,7 @@
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
- <select class="UnitFixedHeader-overflowSelect" tabindex="-1">
+ <select class="UnitFixedHeader-overflowSelect" onchange="location=this.value" tabindex="-1">
{{range .Tabs}}
<option
value="{{$.CanonicalURLPath}}?tab={{.Name}}"
diff --git a/content/static/html/pages/unit_importedby.tmpl b/content/static/html/pages/unit_importedby.tmpl
index a4dfa6d..00f03c7 100644
--- a/content/static/html/pages/unit_importedby.tmpl
+++ b/content/static/html/pages/unit_importedby.tmpl
@@ -6,6 +6,7 @@
{{define "unit_pre_content"}}
<link href="/static/css/unit_header.css?version={{.AppVersionLabel}}" rel="stylesheet">
+ <link href="/static/css/unit_fixed_header.css?version={{.AppVersionLabel}}" rel="stylesheet">
{{end}}
{{define "unit_content"}}
diff --git a/content/static/html/pages/unit_imports.tmpl b/content/static/html/pages/unit_imports.tmpl
index a4dfa6d..00f03c7 100644
--- a/content/static/html/pages/unit_imports.tmpl
+++ b/content/static/html/pages/unit_imports.tmpl
@@ -6,6 +6,7 @@
{{define "unit_pre_content"}}
<link href="/static/css/unit_header.css?version={{.AppVersionLabel}}" rel="stylesheet">
+ <link href="/static/css/unit_fixed_header.css?version={{.AppVersionLabel}}" rel="stylesheet">
{{end}}
{{define "unit_content"}}
diff --git a/content/static/html/pages/unit_licenses.tmpl b/content/static/html/pages/unit_licenses.tmpl
index a4dfa6d..00f03c7 100644
--- a/content/static/html/pages/unit_licenses.tmpl
+++ b/content/static/html/pages/unit_licenses.tmpl
@@ -6,6 +6,7 @@
{{define "unit_pre_content"}}
<link href="/static/css/unit_header.css?version={{.AppVersionLabel}}" rel="stylesheet">
+ <link href="/static/css/unit_fixed_header.css?version={{.AppVersionLabel}}" rel="stylesheet">
{{end}}
{{define "unit_content"}}
diff --git a/content/static/html/pages/unit_versions.tmpl b/content/static/html/pages/unit_versions.tmpl
index a4dfa6d..00f03c7 100644
--- a/content/static/html/pages/unit_versions.tmpl
+++ b/content/static/html/pages/unit_versions.tmpl
@@ -6,6 +6,7 @@
{{define "unit_pre_content"}}
<link href="/static/css/unit_header.css?version={{.AppVersionLabel}}" rel="stylesheet">
+ <link href="/static/css/unit_fixed_header.css?version={{.AppVersionLabel}}" rel="stylesheet">
{{end}}
{{define "unit_content"}}
