content/static: update responsive panel rules
Updates breakpoints for responsive layout and
centers content with max width on large screens.
Change-Id: I981bdd944047fef13d3805b74fdcedc9e96a4212
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/256305
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_details.css b/content/static/css/unit_details.css
index 6e502a8..34e2958 100644
--- a/content/static/css/unit_details.css
+++ b/content/static/css/unit_details.css
@@ -19,17 +19,18 @@
}
@media only screen and (min-width: 52rem) {
.UnitDetails {
- grid-template-columns: 15.5rem minmax(0, auto);
+ grid-template-columns: 15.5rem minmax(32.5rem, 43.125rem);
}
}
-@media only screen and (min-width: 72rem) {
+@media only screen and (min-width: 64rem) {
.UnitDetails {
- grid-template-columns: 15.5rem minmax(0, auto) 15.5rem;
+ grid-template-columns: 15.5rem minmax(32.5rem, 43.125rem) minmax(10rem, 15.5rem);
}
}
-@media only screen and (min-width: 88rem) {
+@media only screen and (min-width: 80rem) {
.UnitDetails {
- grid-template-columns: 20rem minmax(0, auto) 20rem;
+ grid-template-columns: 15.5rem minmax(43.125rem, 60rem) 15.5rem;
+ justify-content: center;
}
}
.UnitDetails-outline {
@@ -57,7 +58,7 @@
display: none;
margin-top: 2rem;
}
-@media only screen and (min-width: 72rem) {
+@media only screen and (min-width: 64rem) {
.UnitDetails-meta {
display: block;
}
diff --git a/content/static/css/unit_header.css b/content/static/css/unit_header.css
index 8f5097e..193c967 100644
--- a/content/static/css/unit_header.css
+++ b/content/static/css/unit_header.css
@@ -14,8 +14,13 @@
.UnitHeader {
margin-left: -1rem;
padding-left: 1rem;
+ width: 100vw;
}
}
+.UnitHeader-container {
+ margin: auto;
+ max-width: 93.5rem;
+}
.UnitHeader-breadcrumb {
margin-top: 1.1rem;
}
diff --git a/content/static/css/unit_meta.css b/content/static/css/unit_meta.css
index 46081e9..9fee115 100644
--- a/content/static/css/unit_meta.css
+++ b/content/static/css/unit_meta.css
@@ -6,6 +6,7 @@
.UnitMeta {
display: block;
+ overflow-wrap: break-word;
position: sticky;
top: 5rem;
}
diff --git a/content/static/html/helpers/_unit_header.tmpl b/content/static/html/helpers/_unit_header.tmpl
index a5a5cb1..9f40c92 100644
--- a/content/static/html/helpers/_unit_header.tmpl
+++ b/content/static/html/helpers/_unit_header.tmpl
@@ -6,63 +6,65 @@
{{define "unit_header"}}
<header class="UnitHeader">
- <div class="UnitHeader-breadcrumb">
- {{with .Breadcrumb}}
- {{range .Links}}
- <span class="UnitHeader-breadcrumbItem">
- <a href="{{.Href}}">{{.Body}}</a>
+ <div class="UnitHeader-container">
+ <div class="UnitHeader-breadcrumb">
+ {{with .Breadcrumb}}
+ {{range .Links}}
+ <span class="UnitHeader-breadcrumbItem">
+ <a href="{{.Href}}">{{.Body}}</a>
+ </span>
+ {{end}}
+ <span class="UnitHeader-breadcrumbItem">{{.Current}}</span>
+ {{end}}
+ </div>
+ <h1 class="UnitHeader-title">{{.Title}}</h1>
+ <div class="UnitHeader-versionBanner $$GODISCOVERY_LATESTMAJORCLASS$$">
+ <img height="19px" width="16px" class="UnitHeader-detailIcon" src="/static/img/pkg-icon-info_19x16.svg">
+ <span>
+ The latest major version is <a href="/$$GODISCOVERY_LATESTMAJORVERSIONURL$$">$$GODISCOVERY_LATESTMAJORVERSION$$</a>.
+ </span>
+ </div>
+ <div class="js-fixedHeaderSentinel"></div>
+ <div class="UnitHeader-detail">
+ <span class="UnitHeader-detailItem">
+ <img class="UnitHeader-detailItemLarge" height="16px" width="16px" src="/static/img/pkg-icon-arrowBranch_16x16.svg">
+ <a href="?tab=versions">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="UnitHeader-detailItem">
+ <img height="16px" width="16px" src="/static/img/pkg-icon-circularArrows_16x16.svg">
+ {{.LastCommitTime}}
+ </span>
+ <span class="UnitHeader-detailItem">
+ <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}}">{{$e.Type}}</a>
+ {{else}}
+ <span>None detected</span>
+ <a href="/license-policy" class="Disclaimer-link"><em>not legal advice</em></a>
+ {{end}}
+ </span>
+ {{if .Unit.IsPackage}}
+ <span class="UnitHeader-detailItem">
+ <img height="16px" width="16px" src="/static/img/pkg-icon-boxClosed_16x16.svg">
+ <a href="{{$.CanonicalURLPath}}?tab=imports">
+ {{len .Unit.Imports}} <span>Imports</span>
+ </a>
+ </span>
+ <span class="UnitHeader-detailItem">
+ <img height="16px" width="16px" src="/static/img/pkg-icon-boxClosed_16x16.svg">
+ <a href="{{$.CanonicalURLPath}}?tab=importedby">
+ {{len .Unit.Imports}} <span>Imported by</span>
+ </a>
</span>
{{end}}
- <span class="UnitHeader-breadcrumbItem">{{.Current}}</span>
- {{end}}
- </div>
- <h1 class="UnitHeader-title">{{.Title}}</h1>
- <div class="UnitHeader-versionBanner $$GODISCOVERY_LATESTMAJORCLASS$$">
- <img height="19px" width="16px" class="UnitHeader-detailIcon" src="/static/img/pkg-icon-info_19x16.svg">
- <span>
- The latest major version is <a href="/$$GODISCOVERY_LATESTMAJORVERSIONURL$$">$$GODISCOVERY_LATESTMAJORVERSION$$</a>.
- </span>
- </div>
- <div class="js-fixedHeaderSentinel"></div>
- <div class="UnitHeader-detail">
- <span class="UnitHeader-detailItem">
- <img class="UnitHeader-detailItemLarge" height="16px" width="16px" src="/static/img/pkg-icon-arrowBranch_16x16.svg">
- <a href="?tab=versions">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="UnitHeader-detailItem">
- <img height="16px" width="16px" src="/static/img/pkg-icon-circularArrows_16x16.svg">
- {{.LastCommitTime}}
- </span>
- <span class="UnitHeader-detailItem">
- <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}}">{{$e.Type}}</a>
- {{else}}
- <span>None detected</span>
- <a href="/license-policy" class="Disclaimer-link"><em>not legal advice</em></a>
- {{end}}
- </span>
- {{if .Unit.IsPackage}}
- <span class="UnitHeader-detailItem">
- <img height="16px" width="16px" src="/static/img/pkg-icon-boxClosed_16x16.svg">
- <a href="{{$.CanonicalURLPath}}?tab=imports">
- {{len .Unit.Imports}} <span>Imports</span>
- </a>
- </span>
- <span class="UnitHeader-detailItem">
- <img height="16px" width="16px" src="/static/img/pkg-icon-boxClosed_16x16.svg">
- <a href="{{$.CanonicalURLPath}}?tab=importedby">
- {{len .Unit.Imports}} <span>Imported by</span>
- </a>
- </span>
- {{end}}
+ </div>
</div>
</header>
{{end}}
