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 <[email protected]>
Reviewed-by: Julie Qiu <[email protected]>

Author: jamalc

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;
 }

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>