content/static: add styles for package files
Updates source files section to match design spec.
Change-Id: I5f13c90eb8e5159e778143c775f1f321a517e7f7
Reviewed-on: https://go-review.googlesource.com/c/pkgsite/+/259211
Trust: Jamal Carvalho <jamal@golang.org>
Run-TryBot: Jamal Carvalho <jamal@golang.org>
Reviewed-by: Julie Qiu <julie@golang.org>
diff --git a/content/static/css/unit_details.css b/content/static/css/unit_details.css
index 576a0b9..961322a 100644
--- a/content/static/css/unit_details.css
+++ b/content/static/css/unit_details.css
@@ -6,6 +6,7 @@
@import './unit_readme.css';
@import './unit_doc.css';
+@import './unit_files.css';
@import './unit_directories.css';
@import './unit_meta.css';
@import './unit_outline.css';
diff --git a/content/static/css/unit_doc.css b/content/static/css/unit_doc.css
index 5e973fb..e066ef3 100644
--- a/content/static/css/unit_doc.css
+++ b/content/static/css/unit_doc.css
@@ -7,13 +7,10 @@
.Documentation {
display: block;
}
-.UnitDoc,
-.UnitFiles,
.UnitDoc {
margin-bottom: 2rem;
}
-.UnitDoc::before,
-.UnitFiles::before {
+.UnitDoc::before {
content: '';
display: block;
position: relative;
@@ -21,8 +18,7 @@
height: 3.5rem;
margin-top: -3.5rem;
}
-.UnitDoc-title,
-.UnitFiles-title {
+.UnitDoc-title {
border-bottom: 0.0625rem solid var(--gray-8);
display: flex;
font-size: 1.375rem;
diff --git a/content/static/css/unit_files.css b/content/static/css/unit_files.css
new file mode 100644
index 0000000..cee5dd1
--- /dev/null
+++ b/content/static/css/unit_files.css
@@ -0,0 +1,46 @@
+/*
+ * Copyright 2020 The Go Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+.UnitFiles {
+ margin-bottom: 2rem;
+}
+.UnitFiles::before {
+ content: '';
+ display: block;
+ position: relative;
+ width: 0;
+ height: 3.5rem;
+ margin-top: -3.5rem;
+}
+.UnitFiles-title {
+ border-bottom: 0.0625rem solid var(--gray-8);
+ display: flex;
+ font-size: 1.375rem;
+ margin: 0.5rem 0 0 0;
+ padding-bottom: 1rem;
+}
+.UnitFiles-title img {
+ height: 1.25rem;
+ margin: auto 1rem auto 0;
+ width: auto;
+}
+.UnitFiles-fileList {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+ line-height: 1.5rem;
+ list-style: none;
+ padding-left: 0;
+}
+.UnitFiles-file {
+ margin-right: 0.5rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.UnitFiles-file::before {
+ content: url(/static/img/pkg-icon-file_16x12.svg);
+ margin-right: 0.75rem;
+}
\ No newline at end of file
diff --git a/content/static/html/helpers/_unit_files.tmpl b/content/static/html/helpers/_unit_files.tmpl
index 6d874be..1c34322 100644
--- a/content/static/html/helpers/_unit_files.tmpl
+++ b/content/static/html/helpers/_unit_files.tmpl
@@ -7,12 +7,12 @@
{{define "unit_files"}}
<div class="UnitFiles" id="files-top">
<h2 class="UnitFiles-title">
- <img height="25px" width="20px" src="/static/img/pkg-icon-doc_20x12.svg">Source Files
+ <img height="16px" width="12px" src="/static/img/pkg-icon-file_16x12.svg">Source Files
</h2>
<div>
- <ul>
+ <ul class="UnitFiles-fileList">
{{- range .SourceFiles -}}
- <li><a href="{{.URL}}">{{.Name}}</a></li>
+ <li class="UnitFiles-file"><a href="{{.URL}}" title="{{.Name}}">{{.Name}}</a></li>
{{- end -}}
</ul>
</div>
diff --git a/content/static/img/pkg-icon-file_16x12.svg b/content/static/img/pkg-icon-file_16x12.svg
new file mode 100644
index 0000000..413cbbc
--- /dev/null
+++ b/content/static/img/pkg-icon-file_16x12.svg
@@ -0,0 +1 @@
+<svg width="12" height="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M10.5 1.5h-6c-.825 0-1.493.675-1.493 1.5L3 15c0 .825.667 1.5 1.492 1.5H13.5c.825 0 1.5-.675 1.5-1.5V6l-4.5-4.5zM4.5 15V3h5.25v3.75h3.75V15h-9z" id="a"/></defs><g transform="translate(-3 -1)" fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><g mask="url(#b)" fill="#5F6368"><path d="M0 0h18v18H0z"/></g></g></svg>
\ No newline at end of file
