commit 51473e34292a041bf4e6fcd2b425afcc3a9539dc
author Jamal Carvalho <jamal@golang.org> Tue Sep 29 10:51:20 2020 -0400
committer Jamal Carvalho <jamal@golang.org> Tue Sep 29 16:40:52 2020 +0000
tree 69fcbe1261163e13fc85706fe71d954de98d4d54
parent 12efbb039e76ff63f051ec3ec15cb48022f84b24

content/static: add title badges for command and directory

Adds badges for command and directory. Command badge
excludes package badge but others may appear together.

Change-Id: Ifbd82d620a5d0c33ca3142fd0220d9bf3558b3f9
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/258221
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Julie Qiu <julie@golang.org>
TryBot-Result: kokoro <noreply+kokoro@google.com>

content/static/css/unit_header.css

diff --git a/content/static/css/unit_header.css b/content/static/css/unit_header.css
index 5547b78..24de709 100644
--- a/content/static/css/unit_header.css
+++ b/content/static/css/unit_header.css
@@ -30,6 +30,10 @@
   content: '>';
   padding: 0.5rem;
 }
+.UnitHeader-heading {
+  display: flex;
+  align-items: center;
+}
 .UnitHeader-title {
   font-size: 1.75rem;
   line-height: 2.25rem;
@@ -125,13 +129,13 @@
 .UnitHeader-backLink img {
   margin-right: 0.5rem;
 }
-.UnitHeader-moduleBadge,
-.UnitHeader-packageBadge {
+.UnitHeader-badge {
   border: 1px solid var(--gray-4);
   border-radius: 0.125rem;
   font-size: 0.6875rem;
-  height: 1rem;
-  padding: 0.1rem 0.25rem;
-  vertical-align: middle;
-  width: 3.25rem;
+  font-weight: 500;
+  line-height: 1rem;
+  margin-left: 0.5rem;
+  padding: 0 0.35rem;
+  text-align: center;
 }

content/static/html/helpers/_unit_header.tmpl

diff --git a/content/static/html/helpers/_unit_header.tmpl b/content/static/html/helpers/_unit_header.tmpl
index 6883011..ff6f677 100644
--- a/content/static/html/helpers/_unit_header.tmpl
+++ b/content/static/html/helpers/_unit_header.tmpl
@@ -17,15 +17,24 @@
           <span class="UnitHeader-breadcrumbItem">{{.Current}}</span>
         {{end}}
       </div>
-      <h1 class="UnitHeader-title">
-        {{.Title}}
-        {{if .Unit.IsModule}}
-          <span class="UnitHeader-moduleBadge">module</span>
-        {{end}}
+      <div class="UnitHeader-heading">
+        <h1 class="UnitHeader-title">
+          {{.Title}}
+        </h1>
         {{if .Unit.IsPackage}}
-          <span class="UnitHeader-packageBadge">package</span>
+          {{if .Unit.IsCommand}}
+            <span class="UnitHeader-badge">command</span>
+          {{else}}
+            <span class="UnitHeader-badge">package</span>
+          {{end}}
         {{end}}
-      </h1>
+        {{if .Unit.IsModule}}
+          <span class="UnitHeader-badge">module</span>
+        {{end}}
+      </div>
+      {{if not (or .Unit.IsPackage .Unit.IsModule)}}
+        <span class="UnitHeader-badge">directory</span>
+      {{end}}
       <div class="UnitHeader-versionBanner $$GODISCOVERY_LATESTMAJORCLASS$$">
         <img height="19px" width="16px" class="UnitHeader-detailIcon" src="/static/img/pkg-icon-info_19x16.svg">
         <span>