content/static: add badges to the version page
Adds badges for deprecated major versions and
retracted versions on the versions page.
For golang/go#41321
For golang/go#43265
Change-Id: Ia7194cb6ef1efeb67d452844f4e40c39d7a7ffa9
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/307849
Trust: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Julie Qiu <julie@golang.org>
diff --git a/content/static/css/versions.css b/content/static/css/versions.css
index 2f6e554..bf49116 100644
--- a/content/static/css/versions.css
+++ b/content/static/css/versions.css
@@ -45,6 +45,8 @@
}
}
.Version-major {
+ align-items: baseline;
+ display: flex;
margin-bottom: 1rem;
min-width: 4rem;
}
@@ -83,26 +85,31 @@
color: var(--turq-dark);
}
.Version-commitTime {
+ align-items: center;
+ display: flex;
margin-left: 1rem;
white-space: nowrap;
}
.Version-details {
line-height: 1.25rem;
- margin-left: -0.5rem;
}
.Version-summary {
align-items: center;
cursor: pointer;
- display: flex;
line-height: 2.25rem;
padding-right: 0.5rem;
white-space: nowrap;
width: min-content;
}
-details.Version-details img {
- position: relative;
- top: 0.0625rem;
-}
-details.Version-details[open] img {
- transform: rotate(90deg);
+
+.Version-badge {
+ border: 0.0625rem solid var(--gray-4);
+ border-radius: 0.125rem;
+ font-size: 0.6875rem;
+ font-weight: 500;
+ line-height: 1rem;
+ margin-left: 0.5rem;
+ margin-top: 0.125rem;
+ padding: 0 0.35rem;
+ text-align: center;
}
diff --git a/content/static/html/helpers/_versions.tmpl b/content/static/html/helpers/_versions.tmpl
index 4f68034..28aed9e 100644
--- a/content/static/html/helpers/_versions.tmpl
+++ b/content/static/html/helpers/_versions.tmpl
@@ -37,19 +37,20 @@
{{range $i, $v := $major.Versions}}
<div class="Version-major">
{{if and (eq $i 0) (not $major.Incompatible)}}
- <strong>{{$major.Major}}</strong>
- <div>{{if $major.Deprecated}}(Deprecated{{with $major.DeprecationComment}}: {{.}}{{end}}){{end}}</div>
+ <strong>{{$major.Major}}</strong>
+ {{if true}}<span class="Version-badge">deprecated</span>{{end}}
{{end}}
</div>
<div class="Version-tag">
<a class="js-versionLink" href="{{$v.Link}}">{{$v.Version}}</a>
- <div>{{if $v.Retracted}}(Retracted{{with $v.RetractionRationale}}: {{.}}{{end}}){{end}}</div>
</div>
<div class="Version-dot{{if and $v.IsMinor (not $major.Incompatible)}} Version-dot--minor{{end}}"></div>
{{if and $v.Symbols (not $major.Incompatible)}}
{{template "symbol_history" $v}}
{{else}}
- <div class="Version-commitTime">{{$v.CommitTime}}</div>
+ <div class="Version-commitTime">
+ {{$v.CommitTime}}{{if $v.Retracted}}<span class="Version-badge">retracted</span>{{end}}
+ </div>
{{end}}
{{end}}
{{end}}
@@ -59,8 +60,7 @@
{{define "symbol_history"}}
<details class="Version-details js-versionDetails">
<summary class="Version-summary">
- <img alt="" height="24" width="24" src="/static/img/pkg-icon-arrowRight_24x24.svg">
- {{.CommitTime}}
+ {{.CommitTime}}{{if .Retracted}}<span class="Version-badge">retracted</span>{{end}}
</summary>
<div class="Versions-symbols">
<div class="Versions-symbolsHeader">Changes in this version</div>